@charset "UTF-8";

/* ============================================================
 * 共通カラー変数
 * 色・背景色を指定する際は極力ここから使用する
 * ============================================================ */
:root {
  --color-primary: #FF1D56;
  /* ブランドカラー */
  --color-secondary: #669ec2;
  /* サブカラー */
  --color-text: #333;
  /* 基本テキストカラー */
  --color-text-muted: #797979;
  /* 補足・リンク用テキスト */
  --color-white: #fff;
  --bg-page: #f7f6f6;
  --bg-secondary: #EAE6E0;
  /* 全体背景色 */
  --bg-card: #fff;
  /* カード・アコーディオン等の背景色 */
  --border-color: #b2b2b2;
  /* 罫線・区切り線 */
  --bg-accent-blue: #dce4ed;
  /* Profile等の淡いブルー背景 */
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #f4623a;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-primary: #f4623a;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-font-sans-serif: YuMincho,
    /* Mac用 */
    'Yu Mincho',
    /* Windows用 */
    serif;
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

html {
  height: 100%;
  scroll-padding-top: calc(4.5rem - 1px);
  scroll-behavior: smooth;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  /* font-family: YuGothic, 'Yu Gothic',serif; */
  font-family: 'Noto Sans JP';
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5;
  color: #444444;
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media (min-width: 768px) {
  body {
    font-size: 1rem;
  }
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: unset;
}

a:hover {
  text-decoration: none;
}

*:focus {
  outline: none !important;
}

.color-primary {
  color:var(--color-primary)
}

/* フッター */

.pagetop {
  position: fixed;
  cursor: pointer;
  bottom: 40px;
  right: 40px;
  z-index: 50;
  text-indent: -9999px;
}

.pagetop.is-fixed {
  position: absolute;
  top: 40px;
  bottom: auto;
  width: 90%;
}

.pagetop a {
  display: block;
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid #999;
}

.pagetop a::before, .pagetop a::after {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  width: 12px;
  height: 3px;
  background-color: #999;
  -webkit-transition: .3s;
  transition: .3s;
}

.pagetop a::before {
  left: 50%;
  -webkit-transform: translateY(-50%) rotate(43deg) skew(45deg);
  transform: translateY(-50%) rotate(43deg) skew(45deg);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
}

.pagetop a::after {
  right: 50%;
  -webkit-transform: translateY(-50%) rotate(-43deg) skew(-45deg);
  transform: translateY(-50%) rotate(-43deg) skew(-45deg);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

.nav-recruit {
  font-family: 'Noto Sans JP';
  line-height: 0.8;
  vertical-align: middle;
  font-size: 1rem;
  text-align: left;
  display: inline-block;
}

.navbar-brand {
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
  height: 100%;
}

.nav-logo {
  height: 100%;
}


#mainNav {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  background-color: rgba(255, 255, 255, 0.5);
  transition: background-color 0.2s ease;
  height: 65px;
  text-align: center;
}

#mainNav .navbar-brand {
  /* font-weight: 700; */
  color: #2a2a2a;
}

#mainNav .nav-recruit {
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .index_page #mainNav {
    box-shadow: none;
    background-color: transparent;
    height: 60px;
  }

/*  #mainNav .navbar-brand {
    color: rgba(255, 255, 255, 0.7);
  }

  #mainNav .navbar-brand:hover {
    color: #fff;
  }*/

  #mainNav.navbar-shrink {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    background-color: rgba(255, 255, 255, 0.5);
  }

  #mainNav .navbar-brand {
    color: #2a2a2a;
  }

  #mainNav .navbar-brand:hover {
    color: var(--color-primary);
  }

  /*.index_page #mainNav .nav-recruit {
    color: #fff;
  }*/

  #mainNav .nav-recruit {
    color: var(--color-primary);
  }
}

.navbar-box {
  height: 100%;
}

/*footer -- Start --*/
.footer-block-pink{
  width: 100%;
  background-color: #FF698F;
  padding-bottom: 1rem;
}

.footer-pink-message-btn {
  color: var(--color-white);
  padding-top: 2rem; 
}

.footer-pink-message h2 {
  font-size:1.1rem;
  font-weight: 500;
}

.footer-pink-message h3 {
  font-size: 0.8rem;
  font-weight: 500;
}

.footer-pink-message-btn .footer-pink-btn,
.footer .footer-grey-btn {
  display: flex;
  gap: 10%;
}

.footer-pink-message-btn .footer-pink-btn a,
.footer .footer-grey-btn a {
  background-color: var(--bg-card);
  color: var(--color-text);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 1.2rem;
  padding: 0.3rem 1rem;
}

.footer-pink-message-btn .footer-pink-btn a{
  border-radius: 20px;
  width:45%;
}

.footer .footer-grey-btn a {
  border-radius: 3rem;
  width: 45%;
  padding: 0.3rem 1rem;
}

.footer-btn-icon {
  background-color: var(--color-primary);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  margin: 0 0 0 auto;
}

.footer-btn-icon img{
  width: 1.5rem;
  transform: translate(50%, 30%);
}

.footer-pink-message-btn .footer-pink-btn a {
  background-color: var(--bg-card);
  color: var(--color-text);
  border-radius: 20px;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 1.2rem;
  padding: 0.3rem 1rem;
  width:45%;
}

.footer-pink-message-btn .footer-pink-btn .footer-btn-icon {
  background-color: var(--color-primary);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  margin: 0 0 0 auto;
}

.footer-btn-icon img{
  width: 1.5rem;
  transform: translate(50%, 30%);
}

.footer-block-grey-msg {
  margin-left: 1rem;
}

.footer-link {
  display: block;
}

.footer-link a {
  display: flex;
  align-items: end;
  color: var(--color-white);
  border-bottom: var(--color-white) 2px solid;
  font-weight: 600;

  padding: 0.3rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.footer-link .footer-link-icon{
  background-color: var(--color-white);
  width: 2rem;
  height: 2rem;
  padding:0.4rem;
  border-radius: 50%;
  margin: 0 0 0 auto;
  aspect-ratio: 1 / 1;  /* 縦横比を1:1に固定する */
  flex-shrink: 0;       /* 親要素（Flexbox等）の影響で縮むのを防ぐ */
  box-sizing: border-box; /* パディング等による計算ズレを防ぐ */
}

.footer-link-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* アイコンの形を崩さずに綺麗に収める */
  display: block;      /* 余計な隙間（すきま）を消す */
}

.bottom-bar {
  display: block;
  padding: 0;
}

.footer-block-grey {
  background-color: #595959;
  color: var(--color-white);
  padding: 3rem 0;
} 
  
.footer-block-grey .footer-block-grey-icon-msg{
  display: flex;
  margin: 2rem;
}

.footer-block-grey-icon img {
  width: 5rem;
}

.footer-block-grey .footer-grey-btn {
  display: flex;
}

.bottom-bar .bottom-bar_link {
  padding: 1vw 0;
}

.footer-block-grey-link .link-pages {
  display: block;
  margin: 0 0 2rem 2rem;
}
.footer-block-grey-link .link-block {
  margin-bottom: 2rem;
}

.footer-block-grey-link a {
  color: var(--color-white);
}

.footer-block-grey-link h3 {
  font-size: 1.2rem;
  margin-bottom: 0;
}

.footer-block-grey-link p {
  color: #FFC7D5;
  font-size: 0.8rem;
  margin-bottom: 0.3rem;
}

.footer-block-grey-link h4 {
  font-size: 0.9rem;
  margin: 0 0 0.2rem 3rem;
}

.bottom-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center
}

@media (min-width:768px) {
  .bottom-menu .bottom-menu_link {
    opacity: 1;
    transition: opacity .25s cubic-bezier(.6, 0, .3, 1)
  }

  .bottom-menu .bottom-menu_link:hover {
    opacity: .6
  }

  .footer-pink-message-btn {
    padding: 5rem 0 2rem;
    display: flex;
  }

  .footer-pink-message-btn .footer-pink-message {
    width: 70%;
  }

  .footer-pink-message h2 {
    font-size: 1.4rem;
    font-weight: 500;
  }

  .footer-pink-message h3 {
    font-size: 1.2rem;
    font-weight: 500;
  }
  
  .footer-pink-message-btn .footer-pink-btn {
    display: block;
    width: 30%;
  }

  .footer-pink-message-btn .footer-pink-btn a {
    font-weight: 700;
    font-size: 1.5rem;
    padding: 1rem 3rem;
    width:100%;
  }

  .footer-pink-message-btn .footer-btn-icon img{
    transform: translate(50%, 15%);
  }

  .footer-grey-btn .footer-btn-icon img{
    transform: translate(50%, 40%);
  }

  .footer-link {
    display: flex;
    gap:10%;
  }

  .footer-link a {
    width: 30%;
    padding: 1rem;
    margin-bottom: 2rem;
    font-size: 1.2rem;
  }

  .footer-link .footer-link-icon{
    width: 3rem;
    height: 3rem;
    margin: 0 0 0 auto;
    padding: 0;
  }
  
  .footer-link-icon img{
    width: 1.5rem;
    transform: translateX(50%);
  }

  .footer .footer-grey-btn a {
    width: 25%;
    padding: 0.3rem 0.5rem 0.3rem 2rem;
  }
 
  .footer-block-grey-link .link-pages {
    display: flex;
    flex-wrap: wrap;
  }

  .footer-block-grey-link h3 {
    font-size: 1.4rem;
  }

  .footer-block-grey-link p {
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
  }

  .footer-block-grey-link h4 {
    font-size: 1.1rem;
  }

  .footer-block-grey-link .link-block {
    width: 33%;
  }

  .bottom-bar {
    overflow: hidden;
    font-size: .9rem;
    line-height: 4;
    background-color: transparent
  }

  .bottom-bar .bottom-bar_container {
    position: relative;
    margin: 0 auto;
    padding: 0 13px
  }

  .bottom-bar .bottom-bar_container::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 13px;
    left: 13px;
    height: 1px;
    background-color: #aaa
  }
}

.bottom-menu .bottom-menu_link.bottom-menu_link--last::before {
  display: none
}

.copyright {
  line-height: 3.0;
  text-align: right;
}

.bottom-bar_link-icon {
  line-height: 1;
  padding: 0 10px;
}

@media (min-width: 768px) {
  .copyright {
    line-height: unset;
  }
}

/*footer -- End --*/

/* 詳しくはこちら　わかりやすく */
.hover-sign {
  cursor: pointer;
  color: rgba(255, 124, 128) !important;
}

.hover-sign:hover {
  color: #4c4585 !important;
}

/* ============================================================================
 * 2026 リニューアル: 共通デザイン（index.html / header.html）
 * NEWS / COMPANY / BUSINESS / PERSONNEL / TRAINING / Q&A / Information を
 * 同一のコンポーネントで共通化。装飾（ダイヤ・背景色分け）は使用しない。
 * ============================================================================ */

body.index_page {
  background-color: var(--bg-page);
  font-family: 'Noto Sans JP';
  color: var(--color-text);
}

body.dtl-page .dtl-all {
  background-color: var(--bg-card);
}

/* ---------- セクション共通レイアウト ---------- */

.page-section {
  padding: 56px 0;
}

.page-section#service,
.page-section#training {
  padding-top: 0;
}

@media (min-width: 768px) {
  .page-section {
    padding: 40px 0 120px;
  }
}

.section-title {
  font-family: 'Noto Sans JP';
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-text);
  padding: 0;
  border-bottom: none;
  margin: 20px 0 5px;
  transform: scaleX(0.9);
}

.section-title-sub {
  font-size: 0.8rem;
  margin: 0 0 20px;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 2.6rem;
  }
}

/* .main-content はヒーロー画像に少し重なる位置（top:-100px、992px以上）にあるため、
   ページ見出しがヒーロー画像と重ならないよう上余白を確保する（.dtl-hero直下の見出しで共通使用） */
.shrink-msg {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s; 
  color: var(--color-white);
  font-family: "Noto Serif JP", serif;
  padding-left: 160px;
  padding-top: 200px;
  height: 100%;
}

.shrink-msg p {
  font-size: 1.5rem;
  line-height: 3rem;
}

@media (min-width: 768px) {
  .hero-page-title {
    margin-top: 5rem;
  }

  .topimg-shrink .shrink-msg{
    opacity: 1;
    visibility: visible;
    /* 現れる時の設定：1秒かけてじんわり表示 */
    transition: opacity 1.0s ease, visibility 1.0s ease;
    background: rgba(3, 37, 82, 0.7);
  }
}

/* ---------- NEXT リンク（各カード共通の遷移リンク） ---------- */

a.next-link,
span.next-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding-bottom: 4px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-primary);
}

a.next-link:hover {
  opacity: 0.65;
}

span.next-link {
  color: var(--color-text-muted);
  border-bottom-color: var(--border-color);
  cursor: default;
}

.next-link::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(-45deg);
}

span.next-link::after {
  border-color: var(--color-text-muted);
}

.nabi-link {
  display: block;
  margin-top: 16px;
}

/* ---------- 画像枠 ---------- */

.media-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
}
.media-frame img.img_left,.media-frame img.img_right {
  display: block;
  object-fit: cover;
  position:absolute;
  width: 100%;
  z-index: 1;
}

.media-frame .img_left,
.media-frame.img_left {
  border-radius: 0 30px 30px 0;
}

.media-frame .img_right,
.media-frame.img_right {
  border-radius: 30px 0 0 30px;
}

.color-filter::after {
  /* 画像に色フィルタをかけるための設定 */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  border-radius: inherit;
}

.color-filter.color_BFB2B2::after {
  background-color: rgba(191, 178, 178, 0.25);
}

.color-filter.color_FAB8B8::after {
  background-color: rgba(250, 184, 184, 0.25);
}

.color-filter.color_FCFFE2::after {
  background-color: rgba(252, 255, 226, 0.2);
}

.color-filter.color_E3F7FF::after {
  background-color: rgba(227, 247, 255, 0.74);
}

.color-filter.color_FCFFFA::after {
  background-color: rgba(252, 255, 250, 0.74);
}

.color-filter.color_EAEFE9::after {
  background-color: rgba(255, 239, 230, 0.74);
}

.color-filter.color_FFF4F4::after {
  background-color: rgba(255, 244, 244, 0.74);
}

.color-filter.color_FFF0DA::after {
  background-color: rgba(255, 240, 218, 0.74);
}

.color-filter.color_EAF9FF::after {
  background-color: rgba(234, 249, 255, 0.74);
}


/* ---------- テキスト＋画像の共通ブロック---------- */

.media-block {
  display: flex;
  width: 100%;
  margin-bottom: 56px;
}

.media-block:last-child {
  margin-bottom: 0;
}

.media-block__media{
  width: 60%;
  display: flex;
}

.media-block.img_all {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.media-block.img_all::before {
  content: "";
  display: block;
  padding-top: 20%; /* 幅に対する20%の空間 */
}

.page-section#service,.page-section#training {
  background-color: var(--bg-secondary);
}

.media-block#service {
  background-image: url(../img/index_service.png)
}

.media-block#training {
  background-image: url(../img/index_training.png)
}

.media-block__img-message{
  content: "";
  position: absolute;
  z-index: 1;
  left: 30%;
  object-fit: none;
  width: 100%;
  height: 100%;
}

.media-frame img.img-message-title {
  z-index: 1;
  position: absolute;
}

.media-block .media-frame img.img-message-title {
  right: -10%;
}

.media-block.reverse .media-frame img.img-message-title {
  left: -10%;
}

.media-block__body {
  width: 40%
}

.media-block__heading {
  font-size: 1.2rem;
  font-weight: 700;
  padding-bottom: 0.8rem;
  margin: 0 3rem 2rem 0;
  position: relative;
}

.media-block__heading::before {
  content: '';
  position: absolute;
  bottom: -3px;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, var(--color-primary) 0 5%, transparent 5% 6%, rgba(0, 0, 0, .12) 6% 100%);
}

.media-block__card {
    background-color: var(--bg-card);
    width: 90%;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
}

.media-block__card .section-title {
  margin: 2rem 0 1rem;
 }

.media-block__text {
  margin: 0;
  line-height: 2;
}

@media (min-width: 768px) {
  .media-block {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }

  .media-block__row {
    display: flex;
    flex-direction: column;       /* 横並びにする */
    justify-content: space-between; /* 左右に綺麗に振り分ける */
    width: 90%;
    margin-top: 40px;
  }

  .media-block__heading::after {
    width: 100%;
  }

  .media-block__media .img_all {
    width: 100%;
  }
  
  .media-block > .media-block__body {
    margin: 0 3% 0 0;
  }

  .media-block.reverse > .media-block__body {
    margin: 0 0 0 3%;
  }

  .media-block__card {
    top: 20rem;
    padding-bottom: 3rem;
  }

  .media-block__card .section-title {
    transform: none;
    margin-bottom: 3rem;
  }

  .media-block__heading {
    font-size: 1.8rem;
  }

  .media-block__text {
    font-size: 1.1em;
  }
}

@media (max-width: 767px) {
  .media-block {
    flex-direction: column;
  }
  
  .media-block__body {
    width: 100%;
    padding: 5%;
  }
  .media-block.reverse {
    flex-direction: column-reverse;
  }

  .media-block__media{
    width: 90%;
  }
  
  .reverse .media-block__media{
    margin-left: auto;
  }
}

/* ---------- ボタン共通コンポーネント ---------- */

.btn-next {
  margin-top: 30px;
  text-align: center;
  position: relative;
}

.btn-next a {
  width: 260px;
  display: block;
  padding: 10px 28px;
  transition: all .5s;
  font-family: 'Noto Sans Serif';
  font-size: 1.1rem;
  font-weight: normal;
  text-align: center;
  color: var(--color-white);
  border-radius: 30px;
  background-color: var(--color-primary);
}

.btn-next a::after {
  content: '';
  position: absolute;
  top: 18px;
  left: 220px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(45deg);
  box-sizing: border-box;
}

.btn-next a:hover {
  background-color: oklch(from var(--color-primary) calc(l * 1.3) c h);
}

.cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 32px auto 0px auto;
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 240px;
  padding: 14px 28px;
  font-family: 'Noto Sans Serif';
  font-weight: 700;
  text-align: center;
  color: var(--color-white);
  border-radius: 10px;
  background-color: var(--color-secondary);
  transition: opacity 0.2s ease;
}

.btn-cta:hover {
  opacity: 0.75;
  color: var(--color-white);
}

.btn-cta--primary {
  background-color: var(--color-primary);
}

/* ---------- NEWS ---------- */

.news {
  margin: 0 10%;
}

.news-list {
  margin: 0;
  font-size: 1.0rem;
}

.news-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin: 0;
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
}

.news-item__date {
  font-weight: normal;
}

.news-item__tag {
  display: inline-block;
  margin: 0 30px;
  padding: 4px 10px;
  font-size: 0.75rem;
  vertical-align: text-bottom;
  color: var(--color-white);
  background-color: var(--bs-gray);
}

.news-item__link {
  margin: 0;
}

.news-item__link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.news-item__link a:hover {
  opacity: 0.7;
}

@media (min-width: 768px) {
  .news-list {
    font-size: 1.1rem;
  }
  
.news-item__tag {
    vertical-align: text-top;
  }
}

.index_page #about,.index_page #strengths, .index_page #numbers, .index_page #person {
  background-color: var(--bg-card);
}

/* ---------- index PERSON ---------- */
#person .person_list {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.person_list .splide {
  width: 80%;
}

.person_list a:hover, .person_list a:visited {
  color: unset;
}

a.person-item:hover .person-item__card{
  text-shadow: 1px 1px 2px #aaa;
}

.person_list .splide__slide {
  display: flex;
  justify-content: center; /* 横方向の中流寄せ */
  align-items: center;     /* 縦方向の中央寄せ */
  padding: 0 0 30px;
}

.person-item__frame img {
  max-width: 100%;  /* 枠より大きい場合だけ縮小させるセーフティ */
  max-height: 100%;
  height: auto;
  border-radius: 20px;
  object-fit: contain;
}

.person_list .splide__slide .person-item__frame,
.person-grid .person-item__frame {
  display: flex;
  flex-direction: column-reverse; /* 下から順に配置する */
  justify-content: center; /* 横方向の中流寄せ */
  min-width: 256px;
  position: relative;
  margin: 0 auto;
  background-color: var(--bg-secondary);
  border-radius: 20px;
}

.person_list .splide__slide .person-item__frame {
  width: 80%;
}

.person-item__card {
  position: relative;
  width: 90%;
  background-color: var(--bg-card);
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 20px;
  margin-top: -5rem;
}

.person_list .person-year, .person_list .person-phrase,
.person-grid .person-year, .person-grid .person-phrase {
  font-size: 1rem
}

.person_list .person-name,
.person-grid .person-name {
  font-size: 1.4rem;
  margin-top: 1rem;
}

.person-item__tag{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    margin: 0.3rem 1rem;
    height: 3.6rem;
    align-items: center;
}

.person-item__tag span {
  border-color: var(--border-color);
  border-style: solid;
  border-width: 1px;
  border-radius: 15px;
  padding: 0.1rem 0.5rem;
  margin: 0 0.5rem 0 0;
  font-size: 0.9rem;
  white-space: nowrap;
}

.person_list .splide__pagination__page {
  background: var(--bg-secondary);      /* 薄いグレー（お好みの色に変えてください） */
  opacity: 0.7;          /* 少し透明にする場合 */
}

.person_list .splide__pagination__page.is-active {
  background: var(--color-primary);   /* オレンジ（お好みの色に変えてください） */
  opacity: 1;            /* 透明度をなくしてくっきり見せる */
  transform: scale(1.2); /* 選択中だけ少し大きくしたい場合は追加 */
}

@media (min-width: 768px) {
  .person_list .splide {
    width: 80%;
    min-width: 756px;
  }
  .person_list .splide__slide .person-item__frame {
    min-height: 500px;
    min-width: 250px;
  }

  .person-item__tag span {
    font-size: 0.8rem;
  }
}
/* ---------- Q&A アコーディオン ---------- */

.step-accordion {
  border-bottom: 1px solid var(--border-color);
}

.step-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 22px 0;
  background: transparent;
  border: none;
  font-family: 'Noto Sans Serif';
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: left;
  cursor: default;
}

.step-accordion-header-label {
  display: block;
}

.step-accordion-icon {
  display: none;
}

.step-accordion-collapse {
  overflow: hidden;
}

.step-accordion-panel {
  padding: 0 0 24px;
  line-height: 2;
  color: var(--color-text);
}

.step-accordion-panel a {
  margin-left: 6px;
}

@media screen and (max-width: 768px) {
  .step-accordion-header {
    padding: 18px 0;
    font-size: 0.95rem;
    cursor: pointer;
  }

  .step-accordion-header:active {
    opacity: 0.7;
  }

  .step-accordion-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-muted);
  }

  .step-accordion-icon::before {
    content: "+";
  }

  .step-accordion--open .step-accordion-icon::before {
    content: "\2212";
  }

  .step-accordion-collapse {
    max-height: 0;
    transition: max-height 0.35s ease;
  }

  .step-accordion--open .step-accordion-collapse {
    max-height: 600px;
  }
}

/* ---------- Hero（Top） ---------- */

.hero {
  margin-top:65px;
}

.hero__base {
  height: 500px;
  width: 100%;
  position: absolute;
  top:0;
  background-color: #FFF;
}

.hero__image {
  height: 900px;
  max-width: 1852px;
  background-image: url(../img/top.png);
  background-position: left top;
  background-color: rgba(212, 244, 255, 0.2);
  background-blend-mode: overlay;
  background-size: cover;
  position: relative;
  left: -80px;
  border-radius: 15px;
}

.hero__catch {
  position: absolute;
  background-color: #FFF;
  padding: 30px;
  right: 25px;
  top: 380px;
  color: var(--color-text);
  font-family: YuMincho, 'Yu Mincho', serif;
  font-weight: 700;
  font-size: 1.2rem;
  border-radius: 10px;
}

@media (max-width: 767px) {
  .hero__image {
    height: 600px;
    left: -40px;
  }

  .hero__base {
    height: 380px;
  }
  .hero__catch {
    top: 200px;
  }
}

/* ============================================================================
 * 詳細
 * ============================================================================ */
.detail-header {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 20px 20px;
}

.dtl-header-img {
  width: 100%;
  max-height: 600px;
  object-fit: cover;
  object-position: bottom;
  z-index: 1;
  border-radius: inherit;
}
.dtl-header-img.img-center {
  object-position: center;
}

.dtl-header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0 0 20px 20px;
  z-index: 10;
}

.dtl-header-title {
  position: absolute;
  top: 30%;
  left: 15%;   
}

.menu-section {
  background-color: var(--bg-card);
  padding: 1rem;
  width: 100%;
  margin: auto;
}

.menu-section ul{
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.menu-section li{
  list-style: none;
  margin: 0 3rem 0 1em;
  position: relative;
  white-space: nowrap;
}

.menu-section li a:hover {
  opacity: 0.65;
}

.menu-section li a:hover, .menu-section li a:visited {
  color: unset;
}

.menu-section li a::before {
  display: inline-block;
  content: '';
  width: 18px;
  height: 18px;
  background: var(--color-primary);
  border-radius: 50%;
  margin: auto;
  top: 0.2rem;
  right: -1.5rem;
  position: absolute;
}

.menu-section li a::after {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  line-height: 1;
  border: 0.1rem solid var(--color-white);
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
  position: absolute;
  top: 0.5rem;
  right: -1.15rem;
  bottom: 0;
}

@media (min-width: 768px) {
  .menu-section {
    padding-left: 2em;
  }
}


/* ============================================================================
 * ヘッダー: ハンバーガーメニュー
 * PC・タブレット・スマホすべてでハンバーガーから右側にドロワー表示する
 * ============================================================================ */

#mainNav .navbar-box {
  padding: 0 16px;
}

.header-catch {
  display: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: 'Noto Sans Serif';
  color: #FFF;
  font-size: 0.9rem;
  color: var(--color-text);
}

.header-link {
  display: none;
}

@media (min-width: 768px) {
  #mainNav .navbar-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-right: 64px;
  }

  .header-link {
    display: flex;
    position: absolute;
    top: 1.5rem;
    right: 5rem;
    color: var(--color-text);
  }

  .header-link a {
    width: 7rem;
    color: var(--color-text);
  }

  .header-catch {
    display: block;
  }
}

@media (min-width: 992px) {
  .index_page #mainNav:not(.navbar-shrink) .header-catch {
    display: none;
  }
}

.toggle_menu {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 12px;
  right: 14px;
  width: 44px;
  height: 44px;
  z-index: 1102;
  color: var(--color-text);
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/*@media (min-width: 992px) {
  .index_page #mainNav:not(.navbar-shrink)~.toggle_menu {
    color: var(--color-white);
  }
}/*

/* ドロワー展開中は常にダーク色（白いドロワー背景の上に乗るため） */
.header:has(.vertical_nav__opened) .toggle_menu {
  color: var(--color-text) !important;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1100;
}

.nav-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.vertical_nav {
  position: fixed;
  top: 0;
  right: -300px;
  width: 280px;
  max-width: 82vw;
  height: 100%;
  background: var(--color-white);
  box-shadow: -6px 0 25px rgba(0, 0, 0, 0.15);
  transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1101;
  padding: 90px 0 40px;
  overflow-y: auto;
}

.vertical_nav.vertical_nav__opened {
  right: 0;
}

.vertical_nav .menu {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.vertical_nav .menu--link {
  display: block;
  padding: 15px 32px;
  font-family: 'Noto Sans Serif';
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  text-align: right;
  border-bottom: 1px solid var(--bg-page);
}

.vertical_nav .menu--link:hover {
  color: var(--color-primary);
}

/* 階層メニュー（Company / Business など） */
.vertical_nav .menu--parent {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--bg-page);
  cursor: pointer;
}

.vertical_nav .menu--parent::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  vertical-align: middle;
}

.menu--item.is-open>.menu--parent::after {
  transform: rotate(-135deg);
}

.vertical_nav .submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  /* background: var(--bg-page); */
  transition: max-height 0.3s ease;
}

.menu--item.is-open .submenu {
  max-height: 200px;
}

.vertical_nav .submenu--link {
  display: block;
  padding: 12px 32px;
  font-family: 'Noto Sans Serif';
  font-size: 14px;
  font-weight: 500;
  text-align: right;
  border-bottom: 1px solid var(--color-white);
}

.vertical_nav .submenu--link:hover {
  color: var(--color-primary);
}

body:has(.vertical_nav__opened) {
  overflow: hidden;
}

/* スマホ全般（576px未満）ではキャッチコピーと名前ボックスの高さを確保できないため、
   名前ボックスを一回り小さくして重ならないようにする */


.hero-name-box {
  top: 220px;
  padding: 8px 12px;
}

@media (min-width: 768px) {
  .hero-name-box {
    top: 265px;
    padding: 18px 28px;
  }
}

.profile-content {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 20px;
}

.profile-photo {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.profile-text {
  width: 100%;
}

.profile-name {
  margin: 0 0 8px;
  font-size: 1.3rem;
  font-weight: 700;
}

.profile-name-eng {
  margin-left: 10px;
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.profile-affiliation {
  margin: 0 0 14px;
}

.profile-bio {
  margin: 0;
  line-height: 1.9;
}

@media (min-width: 768px) {
  .profile-content {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }

  .profile-photo {
    width: 150px;
    height: 150px;
    order: 2;
  }

  .profile-text {
    order: 1;
    flex: 1;
  }

  .profile-name {
    font-size: 1.6rem;
  }
}

/* ============================================================================
 * 2026 リニューアル: About AIM (aboutAim.html) / Personnel 詳細 (person_01.html)
 * ============================================================================ */
.aim-content-2026 :where(h1, h2, h3, h4, p, ul, ol, figure) {
  margin: 0;
  padding: 0;
}
.aim-content-2026 :where(ul, ol) {
  list-style: none;
}
.aim-content-2026 :where(img) {
  max-width: 100%;
  height: auto;
  display: block;
}

/* レスポンシブ改行ユーティリティ (767pxを基準に分岐)
   u-sp-br: モバイルだけ改行する / u-pc-br: PC(768px以上)だけ改行し、モバイルは自然な折返しに任せる */
.u-sp-br { display: none; }
@media (max-width: 767px) {
  .u-sp-br { display: inline; }
}
.u-pc-br { display: inline; }
@media (max-width: 767px) {
  .u-pc-br { display: none; }
}

/* ---------- スクロールリビール共通アニメーション ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(2em);
  transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal="pop"] { transform: translateY(1.1em) scale(.94); }
[data-reveal="pop"].is-revealed { transform: none; }

[data-reveal-item] {
  opacity: 0;
  transform: translateY(2.6em) scale(.94);
  transition: opacity 1.3s cubic-bezier(.19,1,.22,1), transform 1.3s cubic-bezier(.19,1,.22,1);
  transition-delay: calc(var(--reveal-index, 0) * .18s);
}
[data-reveal-item].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-item] { transition: none !important; }
}

/* カードの軽いホバー演出 (ホバー可能なデバイスのみ) */
@media (hover: hover) {
  .str-card, .num-card, .int-rank-card {
    transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
  }
  .str-card:hover, .num-card:hover, .int-rank-card:hover {
    transform: translateY(-.3em);
    box-shadow: 0 1.2em 2.4em rgba(0,0,0,.1);
  }
}

/* ==========================================================================
   About AIM: 思い・理念 (.phi-section)
   ========================================================================== */
.phi-section {
  background: var(--color-white);
  padding: 3em 0 3em;
}
.phi-inner {
  max-width: 68em;
  margin: 0 auto;
  padding: 0 1.5em;
}
@media (min-width: 768px) {
  .phi-inner { padding: 0 3em; }
}

.phi-title {
  font-size: 2em;
  font-weight: 700;
  letter-spacing: .08em;
  color: #1a1a1a;
  margin-bottom: 1.8em;
}

.phi-lead {
  font-size: 1.1em;
  line-height: 1.8;
  color: #333333;
  margin: 0 0 4.6em;
  font-weight: 500;
}
@media (min-width: 768px) {
  .phi-lead { padding-left: 2em; }
}

.phi-triangle {
  max-width: 30em;
  margin: 0 auto 5em;
  position: relative;
}

.slogan-triangle-wrap {
  position: relative;
  width: min(90%, 612px);
  margin: 2em auto;
}

.slogan-annotate {
  position: absolute;
  margin: 0;
  width: max-content;
  max-width: 200px;
}

.slogan-annotate--action {
  top: 12%;
  right: calc(-6px + 35%);
  transform: translateX(100%);
  text-align: left;
}
.slogan-annotate--imagination {
  top: 65%;
  left: 5%;
  transform: translate(-100%, -50%);
  text-align: left;
}
.slogan-annotate--mind {
  top: 62%;
  right: 5%;
  transform: translateX(100%);
  text-align: left;
}

@media (max-width: 767px) {
  .slogan-annotate {
    display: none;
  }
}

.phi-catch { text-align: center; margin-bottom: 3.2em; }
.phi-catch__text {
  font-size: 2.1em;
  font-weight: 700;
  line-height: 1.7;
  color: #1a1a1a;
}

.phi-values {
  text-align: center;
  margin: 0 auto 4.2em;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.phi-values li {
  font-size: 1.3em;
  color: #333333;
  font-weight: 500;
}
.phi-accent {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.2em;
  margin-right: .15em;
}

.phi-desc {
  text-align: center;
  font-size: 1.05em;
  line-height: 2.15;
  color: #4a4a4a;
  max-width: 42em;
  margin: 0 auto;
}

/* 幅が広がった分フォントサイズを拡大しているため、モバイルでは読みやすいサイズに戻す */
@media (max-width: 767px) {
  .phi-title { font-size: 1.7em; }
  .phi-lead { font-size: 1em; }
  .phi-catch__text { font-size: 1.55em; }
  .phi-values li { font-size: 1.1em; }
  .phi-desc { font-size: .95em; }
}
@media (max-width: 380px) {
  .phi-catch__text { font-size: 1.16em; }
  .phi-values li { font-size: .84em; }
}

/* ==========================================================================
   About AIM: エイムの強み (.str-section)
   ========================================================================== */
.str-section {
  background: var(--bg-page);
  padding: 7em 0 7.5em;
}
.str-inner {
  max-width: 68em;
  margin: 0 auto;
  padding: 0 1.5em;
}
@media (min-width: 768px) {
  .str-inner { padding: 0 3em; }
}

.str-title {
  font-size: 2.25em;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 1em;
}
.str-lead {
  font-size: 1.1em;
  color: #444444;
  line-height: 1.8;
  margin-bottom: 3.6em;
}

.str-list {
  display: flex;
  flex-direction: column;
  gap: 1.6em;
}

.str-card {
  background: var(--bg-card);
  border-radius: 20px;
  box-shadow: 0 .7em 2em rgba(0,0,0,.06);
  padding: 2.4em 2em 2.5em;
  position: relative;
}
@media (min-width: 768px) {
  .str-card { padding: 3.4em 4em 3.6em 9.6em; }
}

.str-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 4.6em;
  height: 4.6em;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  margin-bottom: 1.2em;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .str-section .str-badge {
    position: absolute;
    left: 3.4em;
    top: 3.4em;
    margin-bottom: 0;
  }
}
.str-badge__label {
  font-size: .62em;
  font-style: italic;
  letter-spacing: .04em;
  line-height: 1;
  font-family: Georgia, "Times New Roman", serif;
}
.str-badge__num {
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.3;
}

.str-card__title {
  font-size: 1.5em;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 1.1em;
  line-height: 1.6;
}
.str-card__text {
  font-size: 1.08em;
  line-height: 1.95;
  color: #444444;
}

@media (max-width: 767px) {
  .str-title { font-size: 1.7em; }
  .str-lead { font-size: 1em; }
  .str-card__title { font-size: 1.25em; }
  .str-card__text { font-size: 1em; }
}
@media (max-width: 380px) {
  .str-lead { font-size: .92em; }
  .str-card__title { font-size: 1.1em; }
}

/* point02: 一気通貫フロー図 */
.str-flow { margin-top: 2.4em; }
.str-flow__frame { position: relative; }
.str-flow__img-wrap { position: relative; }
.str-flow__img { width: 100%; }

/* ==========================================================================
   About AIM: 数字で知る (.num-section)
   ========================================================================== */
.num-section {
  --num-bg: #eae6e0;
  --num-card-bg: var(--bg-card);
  --num-accent: var(--color-primary);
  --num-text: #1a1a1a;
  --num-text-muted: #635e54;
  background: var(--num-bg);
  padding: 7em 0 7.5em;
}
.num-inner {
  max-width: 68em;
  margin: 0 auto;
  padding: 0 1.5em;
}
@media (min-width: 768px) {
  .num-inner { padding: 0 3em; }
}

.num-title { font-size: 2.25em; font-weight: 700; color: var(--num-text); margin-bottom: 1em; }
.num-lead { font-size: 1.1em; color: #57534d; line-height: 1.8; margin-bottom: 3.6em; }
@media (max-width: 767px) {
  .num-title { font-size: 1.7em; }
  .num-lead { font-size: 1em; }
}

.num-group { margin-bottom: 3.6em; }
.num-group:last-child { margin-bottom: 0; }
.num-group-title {
  font-size: 1em;
  font-weight: 700;
  color: var(--num-accent);
  margin: 0 0 1.3em;
  padding-bottom: .6em;
  border-bottom: 2px solid rgba(0,0,0,.08);
}

.num-grid-info {
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr;
  gap: 1em;
}
.num-grid-work {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1em;
}
.num-grid-work .num-card--span4 { grid-column: span 4; }
.num-grid-work .num-card--span2 { grid-column: span 2; }
@media (max-width: 767px) {
  .num-grid-info { grid-template-columns: 1fr; }
  .num-grid-work { grid-template-columns: 1fr; }
  .num-grid-work .num-card--span4,
  .num-grid-work .num-card--span2 { grid-column: span 1; }
}

.num-card {
  background: var(--num-card-bg);
  border-radius: 20px;
  box-shadow: 0 .7em 2em rgba(0,0,0,.06);
  padding: 1.7em 1.5em;
  display: flex;
  flex-direction: column;
}

.num-card__label {
  font-size: .84em;
  font-weight: 700;
  color: var(--num-text);
  margin-bottom: .3em;
}
.num-card__label-note {
  font-size: .78em;
  font-weight: 500;
  color: var(--num-text-muted);
}

.num-card__stack {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 6.4em;
  padding: .4em 0;
}
.num-card__stack > * { grid-area: 1 / 1; }
.num-card__icon { width: 4.4em; }
.num-card__icon--lg { width: 5.6em; }

.num-card__value {
  display: flex;
  align-items: baseline;
  gap: .08em;
  color: var(--num-accent);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.num-count, .num-card__placeholder { font-size: 2.5em; }
.num-card__unit { font-size: 1.05em; }
.num-card--big-value .num-count { font-size: 2.85em; }

.num-card__caption {
  font-size: .74em;
  color: var(--num-text-muted);
  text-align: center;
  margin-top: .7em;
}

/* 所在地カード */
.num-card--location { }
.num-card__location-body {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1.4em;
  margin-top: .6em;
}
.num-card__icon--station { width: 42%; flex-shrink: 0; }
.num-card__location-text { flex: 1; min-width: 0; }
.num-card__address {
  font-size: .78em;
  color: #333333;
  line-height: 1.75;
  margin-bottom: .7em;
}
.num-card__station {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35em;
  color: var(--num-accent);
  font-weight: 700;
}
.num-pin { width: 1.2em; height: 1.2em; flex-shrink: 0; }
.num-station-name { font-size: .78em; font-weight: 500; }
.num-station-walk { font-size: .95em; font-weight: 700; }
@media (max-width: 520px) {
  .num-card__location-body { flex-direction: column; align-items: flex-start; }
  .num-card__icon--station { width: 60%; margin: 0 auto; }
}

/* 男女比率 / 文理比率カード (2〜4項目の比較レイアウト) */
.num-compare {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2em 1.6em;
}
.num-compare__item { text-align: center; }
.num-compare__label { font-size: .8em; color: #555555; margin-bottom: .4em; }
.num-compare__value {
  font-size: 1.7em;
  font-weight: 700;
  color: var(--num-accent);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .05em;
  line-height: 1;
}
.num-compare__value .num-card__unit { font-size: .55em; }
.num-compare__icons { display: flex; align-items: flex-end; gap: .3em; }
@media (max-width: 480px) {
  .num-compare { justify-content: center; gap: 1em 2em; }
  .num-compare__icons { order: -1; flex-basis: 100%; justify-content: center; margin-bottom: .2em; }
}

/* 塗りつぶしアイコン (グレー→ピンクを data-fill でアニメーション) */
.fill-icon {
  position: relative;
  display: block;
}
.fill-icon::before, .fill-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}
.fill-icon::after {
  clip-path: inset(calc(100% - var(--fill, 0%)) 0 0 0);
  transition: clip-path 1.4s cubic-bezier(.16,1,.3,1);
}
.fill-icon--flask, .fill-icon--book { width: 3.4em; aspect-ratio: 1 / 1; }
.fill-icon--flask::before, .fill-icon--flask::after,
.fill-icon--book::before, .fill-icon--book::after { background-size: 100% 100%; }
.fill-icon--flask::before { background-image: url("../img/icon-flask-gray.png"); }
.fill-icon--flask::after  { background-image: url("../img/icon-flask-pink.png"); }
.fill-icon--book::before  { background-image: url("../img/icon-book-gray.png"); }
.fill-icon--book::after   { background-image: url("../img/icon-book-pink.png"); }

.fill-icon--male, .fill-icon--female { width: 3em; aspect-ratio: 1 / 2; }
/* male/female は1枚の画像を左右で分割表示しているため、間の gap を打ち消して継ぎ目を消す */
.fill-icon--male + .fill-icon--female { margin-left: -.3em; }
.fill-icon--male::before, .fill-icon--male::after,
.fill-icon--female::before, .fill-icon--female::after { background-size: 100% 100%; }
.fill-icon--male::before   { background-image: url("../img/icon-male-gray.png"); background-position: left top; }
.fill-icon--male::after    { background-image: url("../img/icon-male-pink.png"); background-position: left top; }
.fill-icon--female::before { background-image: url("../img/icon-female-gray.png"); background-position: right top; }
.fill-icon--female::after  { background-image: url("../img/icon-female-pink.png"); background-position: right top; }

/* ==========================================================================
   About AIM: エイム社員に聞きました (.int-section)
   ========================================================================== */
.int-section {
  background: #eae6e0;
  padding: 7em 0 8em;
}
.int-inner {
  max-width: 68em;
  margin: 0 auto;
  padding: 0 1.5em;
}
@media (min-width: 768px) {
  .int-inner { padding: 0 3em; }
}

.int-title {
  font-size: 2.25em;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 2em;
}

.int-question { margin-bottom: 4em; }
.int-question:last-of-type { margin-bottom: 5em; }

.int-question__head {
  position: relative;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 1em;
  font-size: 1.2em;
  font-weight: 700;
  color: #1a1a1a;
  padding-bottom: 1em;
  margin-bottom: 2.2em;
}
.int-question__head::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, var(--color-primary) 0 5%, transparent 5% 6%, rgba(0, 0, 0, .12) 6% 100%);
}

.int-question__note { font-size: .72em; font-weight: 400; color: #6b655b; }

/* 2列を独立したフレックスカラムにして、右列を下にずらすことで「入れ違い」の配置にする。
   .int-tilt(外側ラッパー)はホバー演出のtransformを担当し、内側の .int-bubble は
   data-reveal-item の出現アニメーション用transformだけを担当させて競合を避けている。 */
.int-bubbles {
  display: flex;
  align-items: flex-start;
  gap: 1.6em;
}
.int-bubbles__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.8em;
}
@media (min-width: 768px) {
  .int-bubbles__col--offset { margin-top: 3.2em; }
}

.int-tilt {
  position: relative;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
@media (hover: hover) {
  .int-tilt:hover, .int-tilt:focus-within {
    transform: scale(1.045);
    z-index: 4;
  }
  .int-tilt:hover .int-bubble, .int-tilt:focus-within .int-bubble {
    box-shadow: 0 1.4em 2.6em rgba(255,29,86,.2), 0 .3em .7em rgba(0,0,0,.07);
  }
}

.int-bubble {
  position: relative;
  background: var(--bg-card);
  border-radius: 18px;
  padding: 1.6em 1.8em 1.8em;
  min-height: 7.6em;
  display: flex;
  align-items: center;
  font-size: 1.05em;
  line-height: 1.75;
  color: #333333;
  box-shadow: 0 .6em 1.6em rgba(0,0,0,.05);
  /* [data-reveal-item]の出現アニメーション(opacity/transform)と同じtransitionをここでも
     指定し直している。理由: 同じ要素に対して.int-bubbleの方が詳細度で並び順が後勝ちになり、
     transitionショートハンドがまるごと上書きされてしまうため */
  transition: opacity 1.3s cubic-bezier(.19,1,.22,1), transform 1.3s cubic-bezier(.19,1,.22,1), box-shadow .4s ease;
  transition-delay: calc(var(--reveal-index, 0) * .18s), calc(var(--reveal-index, 0) * .18s), 0s;
}
.int-bubble::after {
  content: "";
  position: absolute;
  bottom: -.62em;
  width: 0;
  height: 0;
  border-left: .62em solid transparent;
  border-right: .62em solid transparent;
  border-top: .62em solid var(--bg-card);
}
.int-bubble--l::after { left: 1.7em; }
.int-bubble--r::after { right: 1.7em; }

.int-rankings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4em;
  margin-top: 3.4em;
}
.int-rank-card {
  background: var(--bg-card);
  border-radius: 20px;
  box-shadow: 0 .7em 2em rgba(0,0,0,.06);
  padding: 2.4em 2.2em;
}
.int-rank-card__title {
  font-size: 1.05em;
  font-weight: 700;
  color: #333333;
  margin-bottom: 1.5em;
}
.int-rank-list { display: flex; flex-direction: column; gap: 1.15em; }
.int-rank-item { display: flex; align-items: center; gap: .9em; }
.int-rank-crown { position: relative; width: 2.7em; flex-shrink: 0; }
.int-rank-crown__num {
  position: absolute;
  left: 50%;
  bottom: .08em;
  transform: translateX(-50%);
  font-size: .85em;
  font-weight: 700;
  color: var(--color-primary);
}
.int-rank-item__label {
  flex: 1;
  min-width: 0;
  font-size: 1.3em;
  color: #1a1a1a;
  overflow-wrap: break-word;
}
.int-rank-item__value {
  flex-shrink: 0;
  font-size: 1.75em;
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: baseline;
  gap: .05em;
}
/* ランキングの数値は .num-count の共通ルール(2.5em)を打ち消し、ラベルとの比率を整える */
.int-rank-item__value .num-count { font-size: 1em; }
.int-rank-item__value .num-card__unit { font-size: .6em; }

/* 「その他」など、%を出さずに複数の回答をまとめて紹介する項目 */
.int-rank-item--others { align-items: flex-start; }
.int-rank-item__others { flex: 1; min-width: 0; }
.int-rank-item__others > .int-rank-item__label { display: block; margin-bottom: .55em; }
.int-rank-others-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5em; }
.int-rank-others-list li {
  position: relative;
  padding-left: 1.1em;
  font-size: .88em;
  line-height: 1.65;
  color: var(--num-text-muted, #635e54);
}
.int-rank-others-list li::before { content: "・"; position: absolute; left: 0; color: var(--color-primary); }

@media (max-width: 767px) {
  .int-title { font-size: 1.7em; }
  .int-question__head { font-size: 1.05em; }
  .int-bubble { font-size: .95em; }
  .int-rank-card__title { font-size: .95em; }
  .int-rank-item__label { font-size: 1.2em; }
  .int-rank-item__value { font-size: 1.5em; }
}
@media (max-width: 640px) {
  .int-rankings { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .int-bubbles { flex-direction: column; }
  .int-bubbles__col { gap: 1.2em; }
  .int-bubble--l::after, .int-bubble--r::after { left: 1.7em; right: auto; }
}
/* 320px前後では冠アイコン・数字・余白を切り詰めて、ラベルの折返しに余裕を持たせる */
@media (max-width: 380px) {
  .int-rank-card { padding: 1.8em 1.3em; }
  .int-rank-item { gap: .6em; }
  .int-rank-crown { width: 2.1em; }
  .int-rank-item__label { font-size: 1.05em; }
  .int-rank-item__value { font-size: 1.3em; }
}


/* ==========================================================================
   Message
   ========================================================================== */
.msg-section {
  background: var(--color-white);
  padding: 7em 0 7.5em;
}
.msg-inner {
  margin: 0 auto;
  padding: 0 1.5em;
}
@media (min-width: 768px) {
  .msg-inner { padding: 0 3em; }
}

#Message .dtl-header-title {
  top: 15%;
}

.dtl-header-title > .section-title-sub, .dtl-header-title > .position {
  font-size: 1.2rem;
  font-weight: 700;
  margin-left: 1rem;
}

.dtl-header-title > .section-title-sub::before {
  content: "●";      /* 表示したい記号 */
  color: var(--color-primary);    /* ●の色（文字と変えてアクセントにすることも可能） */
  font-size: 0.9em;  /* ●のサイズ（文字より少し小さくすると綺麗です） */
  margin-right: 8px; /* ●と文字の間の隙間 */
}

#Message .dtl-header-overlay .message-header-ceo {
  position: absolute;
  right: 0;
  bottom: -50px;
  z-index: 10;
}

#Message .dtl-header-overlay .message-header-ceo img {
  border-radius: 20px;
}


#Message .header-title-message {
  font-family: "Noto Serif JP", serif;
  font-size: 2.5rem;
  margin-left: 1.5rem;
  color: var(--color-primary);
}

#Message .dtl-header-title > .position  {
  margin: 2rem 0 0 1.5rem;
  line-height: 1.5;
}

#Message .dtl-header-title > .ceo-name  {
  margin: 1rem 0 0 1.5rem;
  font-size: 2.8rem;
  font-weight: 700;
}

#Message .dtl-header-title > .ceo-name-en  {
  margin-left: 1.5rem;
  font-size: 2.0rem;
  color: #565656;
}

#Message .msg-catch {
  display: flex;
  align-items: center;
  margin-bottom: 2em;
}

#Message .msg-catch::before {
  content: '';
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--color-primary);
  margin-right: 0.5rem;
}

#Message .msg-catch h2 {
  font-size: 2.0rem;
  color: var(--color-primary);
}

#Message .msg-lead {
    font-size: 1rem;
    line-height: 1.8;
    color: #333333;
    margin: 0 0 2em;
    font-weight: 500;
}

@media (max-width: 767px) {  
  .dtl-header-title {
    left: 5%;   
  }
  #Message .dtl-header-overlay .message-header-ceo img {
    max-width: 150px;
  }

  #Message .dtl-header-img {
    height: 400px;
  }

  #Message .header-title-message, #Message .msg-catch h2{
    font-size: 1.5rem;
  }

  #Message .dtl-header-title > .position {
    font-size: 1.1rem;
  }

  #Message .dtl-header-title > .ceo-name {
    font-size: 2.0rem
  }

  #Message .dtl-header-title > .ceo-name-en {
    font-size: 1.4rem;
  }
}

@media (min-width: 768px) {
  #Message .msg-catch, #Message .msg-lead {
    padding-left: 2em;
    font-size: 1.1rem;
  }
}

/* ==========================================================================
   Service
   ========================================================================== */
.svc-section {
  background: var(--color-white);
  padding: 3em 0 0;
}

.svc-section#before-tre {
  padding-bottom: 3em;
}

.svc-inner {
  max-width: 68em;
  margin: 0 auto;
  padding: 0 1.5em;
  position: relative;
}

.svc-title {
  font-size: 2em;
  font-weight: 700;
  letter-spacing: .08em;
  color: #1a1a1a;
  margin-bottom: 1em;
}


#Service .svc-lead {
    font-size: 1.1rem;
    line-height: 1.8;
    margin: 0 0 2rem;
    font-weight: 500;
}

#Service .svc-heading {
  font-size: 1.2rem;
  font-weight: 700;
  padding-bottom: 0.8rem;
  margin: 4rem 0 1rem;
  position: relative;
}

#Service .svc-heading::before {
  content: '';
  position: absolute;
  bottom: -3px;
  width: 5%;
  height: 3px;
  background: var(--color-primary);/*左：ピンク*/
}

#Service .svc-heading::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 6%;
  width: 94%;
  height: 3px;
  background: #dbdbdb;
}

#Service .svc-flow {
  margin-top: 60px;
  display:block;
}

#Service .svc-flow-section {
  display: flex;
}

#Service .svc-flow-title{
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 1rem 0 1rem 0.5rem;
}

#Service .svc-flow-title p {
  margin-bottom: 0.5rem;
}

#Service p.svc-flow-summary{
  font-size: 1.2rem;
  color: var(--color-primary);
  margin-bottom: 1rem;
}
#Service .svc-flow .svc-lead {
  margin: 0;
  font-size: 1rem;
}

#Service .svc-flow-right {
  width: 100%;
  position: relative;
  padding-bottom: 2em;
}

#Service .svc-flow-detail{
  margin: 0 auto;
  align-items: flex-start;
}

#Service .svc-img {
  display: flex;
  justify-content: center;
}

#Service .svc-flow-text {
    width: 100%;
    position: relative;
    padding: .5em;
    color: var(--color-text);
    z-index: 1;
    transform-style: preserve-3d;
}

.svc-flow-text::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-secondary);
    border: #e2ddd7 1px solid;
    z-index: -1;
    border-radius: inherit;
}

.svc-flow-text::before {
    position: absolute;
    bottom: -5px;
    right: 7px;
    z-index: -2;
    transform: rotate(5deg);
    width: 70%;
    height: 50%;
    background-color: var(--bs-gray);
    opacity: 0.5;
    content: "";
    filter: blur(4px);
}

#Service .svc-flow-left.arrow {
  position:relative;
}

/* 矢印の線部分 */
#Service .svc-flow-left.arrow::after {
  content: "";
  position: absolute;
  top:60px;
  bottom:0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  background-color: var(--color-primary);
  background-position: top;
}

#Service #service-ai {
  background-color: var(--bg-secondary);
}

#Service #service-ai .ai-img {
  width: 40%;
  margin: 0 0 0 auto;
}

@media (min-width: 768px) {
  .svc-inner {
    padding: 0 3em;
  }

  .svc-inner .graph-paper {
    /* 方眼紙模様 */
    background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
                      linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
    background-size: 16px 16px;
    background-repeat: repeat;
    background-position: center center;
    border:  #e2e2e2 2px solid;
    padding: 2rem 0.5rem;
  }

  #Service .str-flow {
    width: 70%;
    margin: 2rem auto 0;
  }

  #Service .svc-flow-title{
    font-size: 1.4rem;
    margin: 1rem 0.5rem;
  }

  #Service .svc-heading,
  #Service .svc-lead,
  #Service .svc-flow {
    margin-left: 2em;
  }

  #Service .svc-lead {
    font-size: 1.1rem;
  }
  
  #Service .svc-flow-detail .flow-detail-left{
    left: 3%;
  }

  #Service .svc-flow-detail .flow-detail-right{
    right: 3%;
  }

  #Service .svc-flow-text {
    width: 60%;
    padding: 1.5em;
  }

  #Service .svc-flow-detail{
    width: 80%;
    display: flex;
  }

  #Service .svc-img {
    padding-top: 3rem;
  }

  #Service .svc-img.vertical {
    padding-top: 2rem;
  }
}

@media (max-width: 767px) {
  .svc-title {
    font-size: 1.7em;
  }

  #Service .svc-flow-detail.reverse{
    display: flex;
  }

  #Service .svc-flow-detail.reverse{
    flex-direction: column-reverse;
  }

  #Service .svc-flow-text {
    margin-bottom: 1.5rem;
  }
}

/* ==========================================================================
   Recruit
   ========================================================================== */
.rec-section {
  background: var(--color-white);
  padding: 3em 0 3em;
}

.rec-inner {
  max-width: 68em;
  margin: 0 auto;
  padding: 0 1.5em;
}

#Recruit .rec-heading {
  font-size: 1.2rem;
  font-weight: 700;
  padding-bottom: 0.8rem;
  margin: 0 20px 16px 0;
  position: relative;
}

#Recruit .rec-heading::before {
  content: '';
  position: absolute;
  bottom: -3px;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, var(--color-primary) 0 5%, transparent 5% 6%, rgba(0, 0, 0, .12) 6% 100%);
}

.recruit dl {
  border-bottom: 1px dashed #ccc;
  padding: 1rem 0;
}

.recruit dl dt {
  width: 100%;
  font-size: large;
  color: var(--color-text);
  margin: 0 0 3px 0;
  float: left;
  clear: left;
  padding: 0 1rem;
  border-left: 6px double var(--color-primary);
}

.recruit dl dd {
  margin: 0;
  padding: 0;
  padding-left: 20px;
}

@media (min-width: 768px) {
  #Recruit .rec-heading {
    font-size: 1.6rem;
  }

  .recruit dl {
    margin: 0;
  }

  .recruit dl dt {
    width: 20%;
    margin: 0;
    padding: 0 0 0 10px;
    border-left: unset;
  }

  .recruit dl dd {
    margin: 0 0 0 20%;
  }
}


/* ==========================================================================
   Training
   ========================================================================== */
.tre-section {
  background: var(--color-white);
  padding: 3em 0 1em;
}

.tre-inner {
  max-width: 68em;
  margin: 0 auto;
  padding: 0 1.5em;
}

.tre-title {
  font-size: 2em;
  font-weight: 700;
  letter-spacing: .08em;
  color: #1a1a1a;
  margin-bottom: 1.8em;
}

#Training .tre-catch {
  display: flex;
  align-items: center;
  margin-bottom: 2em;
}

#Training .tre-catch::before {
  content: '';
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--color-primary);
  margin-right: 0.5rem;
}

#Training .tre-catch h2 {
  font-size: 1.1rem;
  color: var(--color-primary);
}

#Training .tre-lead {
    font-size: 1.1em;
    line-height: 1.8;
    margin: 0 0 2em;
    font-weight: 500;
}

#Training .tre-heading {
  font-size: 1.2rem;
  font-weight: 700;
  padding-bottom: 0.8rem;
  margin: 0 20px 16px 0;
  position: relative;
}

#Training .tre-heading::before {
  content: '';
  position: absolute;
  bottom: -3px;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, var(--color-primary) 0 5%, transparent 5% 6%, rgba(0, 0, 0, .12) 6% 100%);
}

#Training .tre-step {
  width: 100%;
  display: block;
  align-items: start;
  margin-bottom: 2em;
}

#Training .tre-step .tre-illust {
  display: flex;
  justify-content: center;
}

#Training .tre-step .tre-illust img{
  width: 150px;
}

.tre-step-img {
  width: 100%;
  max-width: 800px;
  margin: 1rem 1rem 1rem 0;
  border-radius: 1rem;
}

#Training .tre-step .tre-step-title {
  color: var(--color-primary);
  font-size: 1.2rem;
  margin-bottom: 0.5em;
}

#Training .tre-step .tre-step-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; 
}

#Training .tre-step-after-section .tre-step-right-all {
  flex-grow: 1;
  width:100%;
}

#Training .tre-step-after-section .tre-step-right-all .tre-step {
  display: flex;
  justify-content: flex-end; /* 画像を右寄せにする */
}

#Training .tre-step-text-small,#Training .tre-step-text-small-pc,#Training .tre-step-text-small-sp {
  font-size: .8em;
}

#Training .tre-step-text-small-pc{
  display: none;
}

.tre-step-horizon {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 350px;
  margin: 0 auto;
  overflow: hidden; /* 【追加】はみ出た点線をカット */
}

.tre-step-horizon-text {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 0 auto 0.3rem;
  width: 360px;
  text-align: center;
  font-size: 1.1em;
}

.tre-step-horizon-text dev {
  height: 2.5rem;
}

#Training .str-badge {
  background: var(--bg-secondary);
  color: var(--color-text);
  position: relative;
  z-index: 2;
}

#Training .str-badge__label {
  font-size: .8em;
}

/*点線*/
.tre-step-horizon .str-badge::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%; /* 子要素の右端からスタート */
  
  /* Flexboxの隙間（gap等）を自動で埋めるための設定 */
  width: 150px; /* 十分な長さを確保 */
  border-top: 3px dashed var(--bg-secondary);
  z-index: -1;
}

/* 矢印（＞）の設定 */
.tre-step-horizon .str-badge::before {
  content: "";
  position: absolute;
  top: 50%;
  /* 子要素の右端（100%）から少し離した位置に配置 */
  left: -25%; 
  
  /* 正方形の右と上だけに線を引いて45度回転させ「＞」を作る */
  width: 15px;
  height: 15px;
  border-top: 5px solid var(--bg-secondary);
  border-right: 5px solid var(--bg-secondary);
  
  /* 中央配置の調整と、45度回転 */
  transform: translateY(-50%) rotate(45deg);
  z-index: 2;
}

.tre-step-horizon div:first-child .str-badge::before {
  display: none;
}

@media (min-width: 768px) {
  .tre-section {
    padding: 3em 0 3em;
  }

  .tre-inner { padding: 0 3em; }

  #Training .tre-lead,
  #Training .tre-catch,
  #Training .tre-heading,
  #Training .tre-step,
  #Training .tre-step-horizon,
  #Training .tre-step-after {
    padding-left: 2rem;
  }

  #Training .tre-step {
    display: flex;
    margin-bottom: 3rem;
  }

  #Training .tre-step .tre-illust img{
    width: 225px;
    margin-right: 2em;
  }

  .tre-step-horizon {
    width: 550px;
    margin: 0 auto;
  }

  .tre-step-horizon-text {
    justify-content: space-around;
    width: 730px;
  }

  #Training .tre-step-text-small-pc{
    display: inline-block;
  }

  #Training .tre-step-text-small-sp{
    display: none;
  }

  .tre-step-horizon .str-badge::after {
    /* Flexboxの隙間（gap等）を自動で埋めるための設定 */
    width: 300px; /* 十分な長さを確保 */
  }

  #Training .str-badge {
    position: relative;
  }

  .tre-step-img {
    width: 70%;
    margin: 1rem 1rem 1rem auto;
  }
}

@media (max-width: 767px) {
    .tre-title {
        font-size: 1.7em;
    }
}

#Training .tre-step-after {
  margin-top: 60px;
  display:block;
}

#Training .tre-step-after-section {
  display: flex;
}

#Training .tre-step-after-title{
  display: inline-block;
  margin: 1rem 30px ;
  font-size: 1.2rem;
}
#Training .tre-step-after .tre-lead {
  margin: 0;
}

#Training .tre-step-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
}

#Training .tre-tag{
  white-space: nowrap;
  width: fit-content;
  padding: 1px 10px;
  background-color: var(--bg-secondary);
}

#Training .tre-step-left.arrow {
  position:relative;
}

/* 点線矢印の線部分 */
#Training .tre-step-left.arrow::after {
  content: "";
  position: absolute;
  top:60px;
  bottom:20px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background-image: linear-gradient(to bottom, var(--bg-secondary) 50%, rgba(255,255,255,0) 0%);
  background-position: top;
  background-size: 2px 8px;
}

/* 点線矢印の先端（三角）部分 */
#Training .tre-step-left.arrow::before {
  content: "";
  position: absolute;
  bottom: 20px; /* 親要素の最下部に配置 */
  left: 50%;
  transform: translateX(-50%);
  /* CSSのボーダーを利用して下向きの三角形を作る */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid var(--bg-secondary); /* 矢印の色と高さ */
}

/* ---------- PERSON-top ---------- */
#Person-top .person_list {
  width: 100%;
  padding-top: 40px;
  background-color: var(--bg-card);
}

#Person-top .person_list .splide {
  margin: 0 auto;
  width: 80%;
}

#Person-top .person_list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 余白を自動で均等に割り振る */
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  #Person-top .person_list ul li{
    width: 32%;
  }
}

/* ==========================================================================
   Personnel 詳細 (person_01.html): .prs- 系
   ========================================================================== */
.prs-inner {
  max-width: 68em;
  margin: 0 auto;
  padding: 65px 1.5em 0;
}
@media (min-width: 768px) {
  .prs-inner { padding: 65px 3em 0; }
}

/* 共通パーツ: ピンクの短い線 + 続く細いグレーの線 */
.prs-divider {
  height: 3px;
  margin: 2.4em 0;
  background: linear-gradient(to right, var(--color-primary) 0 5%, transparent 5% 6%, rgba(0, 0, 0, .12) 6% 100%);
}

/* ---- パンくず ---- */
.prs-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6em;
  padding-top: 2.4em;
  font-size: .85em;
}
.prs-crumbs__link { color: #1a1a1a; text-decoration: none; }
.prs-crumbs__link[href]:hover { text-decoration: underline; }
.prs-crumbs__sep { color: #b3aea6; }
.prs-crumbs__current { color: #a39d93; }

/* ---- ヒーロー ---- */
.prs-hero { padding: 3.4em 0 6em; }
.prs-hero__grid {
  display: flex;
  align-items: flex-start;
  gap: 5em;
}
.prs-hero__text { flex: 1 1 50%; min-width: 0; }
.prs-hero__photo-wrap { position: relative; flex: 1 1 40%; max-width: 27em; }

.prs-hero__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1.4em;
  font-size: .95em;
  margin-bottom: 1.3em;
}
.prs-hero__year { color: #1a1a1a; }
.prs-hero__name { color: var(--color-primary); font-weight: 700; font-size: 1.2rem;}

.prs-hero__title {
  font-size: 2.6em;
  font-weight: 700;
  line-height: 1.5;
}
/* 768px〜1100px手前は2カラムの横幅が窮屈になり見出しの折返しが増えるため、少し詰める */
@media (min-width: 768px) and (max-width: 1099px) {
  .prs-hero__grid { gap: 2em; }
  .prs-hero__title { font-size: 1.8em; }
}

/* 見出し: 最初は非表示 → 左から右へ徐々に現れる。現れた直後は差し色(赤)で、
   現れ終わりにかけて既定の黒に変化する。 */
.prs-title-wrap { opacity: 1; transform: none; }
.prs-hero__title,
.prs-block__title {
  clip-path: inset(0 100% 0 0);
  color: var(--color-primary);
  transition: clip-path .90s cubic-bezier(.65,0,.35,1), color .35s ease-out .3s;
}
.prs-title-wrap.is-revealed .prs-hero__title,
.prs-title-wrap.is-revealed .prs-block__title {
  clip-path: inset(0 0 0 0);
  color: #1a1a1a;
}

/* 写真を覆う色のオーバーレイ。要素が画面内に入ったタイミングで右へさっと消える。
   speedを変えたい場合はtransitionの秒数(clip-pathの後ろの数値)を調整する。 */
.prs-cover {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #ff3a6c, #dd0e4c);
  clip-path: inset(0 0 0 0%);
  transition: clip-path .90s cubic-bezier(.65,0,.35,1);
}
.prs-hero__photo.is-revealed .prs-cover,
.prs-block__photo.is-revealed .prs-cover {
  clip-path: inset(0 0 0 100%);
}
.prs-hero__photo .prs-cover,
.prs-block__photo .prs-cover {
  border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .prs-hero__title, .prs-block__title { transition: none; clip-path: inset(0 0 0 0); color: #1a1a1a; }
  .prs-cover { transition: none; clip-path: inset(0 0 0 100%); }
  .prs-hero__photo img, .prs-block__photo img { transition: none; transform: none; }
}

/* 写真: 少しズームした状態から始まり、色が消えるのと同じタイミングで等倍に収まる */
.prs-hero__photo,
.prs-block__photo {
  opacity: 1;
  transform: none;
}
.prs-hero__photo img,
.prs-block__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform .90s cubic-bezier(.65,0,.35,1);
}
.prs-hero__photo.is-revealed img,
.prs-block__photo.is-revealed img {
  transform: scale(1);
}

.prs-hero__photo {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  aspect-ratio: 2 / 3;
  box-shadow: 0 1.2em 2.6em rgba(0,0,0,.12);
}

.prs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .8em;
  margin: 2em 0 0;
}
.prs-tag {
  border: 1px solid rgba(0,0,0,.25);
  border-radius: 999px;
  padding: .6em 1.4em .5em 1em;
  font-size: .82em;
  color: #1a1a1a;
  white-space: nowrap;
}

.prs-profile__label { color: var(--color-primary); font-weight: 700; font-size: .95em; margin-bottom: .9em; }
.prs-profile__school { font-weight: 500; color: #1a1a1a; margin-bottom: 1.5em; }
.prs-profile__bio { color: #444444; line-height: 1.9; font-size: .96em; }

.prs-hero__deco {
  position: absolute;
  left: -1.2em;
  top: -1.6em;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 2.6em;
  line-height: 1.15;
  color: rgba(26,26,26,.08);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 767px) {
  .prs-hero { padding: 1.6em 0 4.5em; }
  .prs-hero__grid { flex-direction: column-reverse; gap: 2.6em; }
  .prs-hero__photo-wrap { max-width: 16em; margin: 0 auto; width: 62%; }
  .prs-hero__title { font-size: 1.9em; }
  .prs-hero__deco { font-size: 1.7em; left: -.4em; top: -1.1em; }
}
@media (max-width: 380px) {
  .prs-hero__title { font-size: 1.6em; }
  .prs-tag { font-size: .74em; padding: .55em 1.1em; }
}

/* ---- 本文ブロック (写真は左端フルブリード + position:sticky で追従、
        右側のテキストが読み終わるとスクロールで自然に離れていく) ---- */
.prs-block { padding: 4em 0; }

.prs-block__row {
  display: flex;
  align-items: stretch;
}
.prs-block__media { flex: 0 0 42%; max-width: 42%; }
.prs-block__media-inner { position: sticky; top: 4em; }
.prs-block__photo { position: relative; overflow: hidden; aspect-ratio: 5 / 3; }
/* 縦向き(ポートレート)写真用*/
.prs-block__photo--portrait { aspect-ratio: 3 / 4; }

.prs-block__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: .4em 1.5em 0 3.6em;
}
@media (min-width: 768px) {
  .prs-block__body { padding-right: max(1.5em, calc((100% - 68em) / 2 + 3em)); }
}

.prs-block__title {
  font-size: 2.1em;
  font-weight: 700;
  line-height: 1.55;
}
.prs-block__subtitle {
  font-size: 1.25em;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 1.3em;
}
.prs-block__text { display: flex; flex-direction: column; gap: 1.5em; }
.prs-block__text p {
  font-size: 1.02em;
  line-height: 2.05;
  color: #444444;
}

@media (max-width: 767px) {
  .prs-block { padding: 4em 0; }
  .prs-block__row { flex-direction: column; }
  .prs-block__media { flex-basis: auto; max-width: 100%; width: 100%; }
  .prs-block__media-inner { position: static; top: auto; }
  .prs-block__photo { border-radius: 0; aspect-ratio: 4 / 3; }
  .prs-block__photo--portrait { aspect-ratio: 3 / 4; }
  .prs-block__body { padding: 2em 1.5em 0; }
  .prs-block__title { font-size: 1.5em; }
  .prs-block__subtitle { font-size: 1.1em; }
  .prs-block__text p { font-size: .96em; line-height: 1.95; }
}

/* 画像が用意されていない設問は、直前の画像をそのまま引き継いでスクロールする */
.prs-block__item + .prs-block__item {
  margin-top: 4em;
}

/* ==========================================================================
   Person 一覧 (person.html): .person-grid 系
   ========================================================================== */
.person-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3em 2em;
  max-width: 68em;
  margin: 0 auto;
  padding: 4.5em 1.5em 6em;
}
@media (min-width: 768px) {
  .person-grid { padding: 5em 3em 7em; }
}
@media (max-width: 900px) {
  .person-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .person-grid { grid-template-columns: 1fr; gap: 2.6em; max-width: 24em; }
}

.person-grid a {
  color: unset;
}

.person-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.person-card__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: 20px 20px 0 0;
}
.person-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform .90s cubic-bezier(.65,0,.35,1);
}
.person-card__photo.is-revealed img { transform: scale(1); }.person-card__photo .prs-cover { border-radius: inherit; }
.person-card__photo.is-revealed .prs-cover { clip-path: inset(0 0 0 100%); }

.person-card__info {
  background: var(--bg-card);
  border-radius: 0 0 20px 20px;
  box-shadow: 0 .7em 2em rgba(0,0,0,.08);
  padding: 1.3em 1.4em 1.5em;
  position: relative;
  z-index: 1;
}
.person-card__year { font-size: .78em; color: var(--color-text-muted); margin-bottom: .3em; }
.person-card__name { font-size: 1.3em; font-weight: 700; color: #1a1a1a; margin-bottom: .9em; }
.person-card__catch { font-size: .92em; line-height: 1.65; color: #444444; }

.person-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .6em;
  margin-top: 1.1em;
}
.person-card__tags .prs-tag { font-size: .74em; padding: .5em 1.1em; }

@media (hover: hover) {
  .person-card { transition: transform .35s cubic-bezier(.16,1,.3,1); }
  .person-card:hover { transform: translateY(-.3em); }
  .person-card:hover .person-card__info { box-shadow: 0 1.2em 2.4em rgba(0,0,0,.12); }
}

@media (prefers-reduced-motion: reduce) {
  .person-card__photo img { transition: none; transform: none; }
  .person-card { transition: none; }
}

/* ==========================================================================
   ワイド画面での左右余白調整 (aboutAim.html / person_XX.html / person.html)
   横幅が広がりすぎると文章が読みにくくなるため。
   ========================================================================== */
@media (min-width: 1100px) {
  .msg-inner,
  .phi-inner,
  .str-inner,
  .num-inner,
  .int-inner,
  .svc-inner,
  .prs-inner,
  .tre-inner,
  .rec-inner,
  .menu-section,
  .person-grid {
    max-width: min(95vw, 90em);
  }
}