/* =======================================
  1. 基本設定（変数・body・共通タグ）
======================================= */
:root {
  --color-bg: #ffffff; /* 背景 */
  --color-bg-alt: #ffffff;/* 代替背景 */
  --color-text: #000000;/* テキスト */
  --color-primary: #d32f2f;/* メインカラー */
  --color-primary-hover: #f44336;/* ホバー時 */
  --color-border: #d32f2f;/* ボーダー */
}

html, body {
  overflow-x: hidden; /* ✅ 横スクロール抑制（全体） */
}

/* 電話番号リンクの視認性向上（スマホ自動リンク対策） */
a[href^="tel"] {
  color: var(--color-primary);  /* 背景と対照的な色に */
  text-decoration: none;
  font-weight: bold;
}

a[href^="tel"]:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* リンクの基本スタイル */
a {
  color: var(--color-primary); /* 例：#00ffff */
  text-decoration: underline;
}

/* ホバー時の効果 */
a:hover {
  color: var(--color-primary-hover); /* 例：#33ffff */
  text-decoration: underline;
}

a.important-link {
  display: inline-block;
  background-color: var(--color-primary);
  color: #ffffff;
  font-weight: bold;
  padding: 0.4rem 1rem;
  border-radius: 6px;
  text-decoration: none; /* ← ボタンには下線いらない */
  transition: background-color 0.3s, color 0.3s;
}

a.important-link:hover {
  background-color: var(--color-primary-hover);
  color: #0e1a2b;
}

body {
  margin: 0;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  letter-spacing: 0.02em;
  background-color: var(--color-bg);
  color: var(--color-text);
}

a:hover,
button:hover {
  color: var(--color-primary-hover);
  transition: color 0.3s ease;
}

a:focus,
button:focus {
  outline: 2px dashed var(--color-primary);
  outline-offset: 3px;
}

h2 {
  margin: 1.5rem 0 1rem;
  font-size: 2rem;
  border-left: 5px solid var(--color-primary);
  padding-left: 1rem;
  margin-bottom: 1.5rem;
}

p {
  margin-bottom: 1rem;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.section-title {
  color: var(--color-primary);
  font-weight: bold;
}

/* セクション背景の交互カラー */
.section-dark {
  background-color: var(--color-bg-alt);
}

.section-light {
  background-color: var(--color-bg-alt);
}




/* =======================================
  2. ヘッダー・フッターナビゲーション
======================================= */


footer {
  background-color: #ffffff !important; /* ← 強制的に白に上書き */
  color: #000000 !important;
  padding: 2rem 1rem;
  text-align: center;
  border-top: 1px solid #e0e0e0; /* 上に薄い境界線を追加（任意） */
}


.footer-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2rem;
  width: 100%
  max-width: none;
  margin: 0 auto;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

.footer-info {
  flex: 1 1 300px;
  color: #000000;
  font-size: 0.9rem;
  line-height: 1.6;
}

.footer-nav {
  flex: 1 1 300px;
}

.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav li {
  margin-bottom: 0.5rem;
}

.footer-nav a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-nav a:hover {
  color: var(--color-primary-hover);
}

.instagram-button-container {
  flex: 1 1 300px;
  text-align: center;
}

.footer-logo {
  max-width: 200px;
  height: auto;
  margin-bottom: 1rem;
  display: block;
}


/* スマホ：中央揃え */
@media screen and (max-width: 768px) {
  .footer-inner {
  display: flex;
  align-items: flex-start; /* 高さを中身分だけにする */    
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0rem; /* 項目間の余白ゼロ */
    padding: 0; /* 上下余白ゼロ */
    padding-bottom: 0;
  }

  /* 会社情報とナビ共通の余白調整 */
  .footer-info  {
    max-height: 230px; /* 最大高さを制限 */    
    text-align: left;
    margin-top: 500.5rem; /* 値は好みで調整 */
    margin: 0;        /* 外余白ゼロ */
    padding: 0;       /* 内余白ゼロ */
  }

  .footer-info p,
  .footer-nav p {
    margin: 0;        /* 段落余白ゼロ */
    padding: 0;
    line-height: 1.4; /* 行間は最小限 */
  }

  .footer-info p:last-child,
  .footer-nav p:last-child {
    margin-bottom: 0; /* 最後の段落の下余白もゼロ */
  }


  .footer-nav  {
    max-height: 80px; /* 最大高さを制限 */    

    
  }


  .footer-nav ul {
    gap: 0; /* リンク間隔ゼロ */
  }

  .footer-nav li {
    margin-bottom: 0; /* 下余白ゼロ */
  }

  .instagram-button-container {
  max-height: 50px; /* 最大高さを制限 */    
    margin: 0;  /* 外余白ゼロ */
    padding: 0; /* 内余白ゼロ */
  }

  footer {
    padding-bottom: 0; /* フッター下余白ゼロ */
  }

  footer small {
    display: block;
    margin: 0; /* コピーライト上下余白ゼロ */
    padding: 0; /* 内余白ゼロ */
  }

  .footer-logo {
    margin-top: 2rem; /* 値は調整 */
  }




  
}


/* PC：左揃え */
@media screen and (min-width: 769px) {
  .footer-info {
    text-align: left;
  }
}



.header {
  background-color: var(--color-bg);
  padding: 1rem;

  /* ▼ スクロール追従用に追加 ▼ */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* 影で浮かせる */
}

/* 固定ヘッダーの高さ分の余白をbodyに追加（style.cssのどこかに追記） */
body {
  padding-top: 80px; /* ヘッダーの高さに合わせて調整 */
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;  /* ← 左右に16pxの余白を追加 */
  box-sizing: border-box;
}

.logo a {
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
  color: #000000
}

.pc-nav {
  display: none;
}

.pc-nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pc-nav ul li {
  margin-left: 1.5rem;
}

.pc-nav ul li a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  transition: color 0.3s;
}

.pc-nav ul li a:hover {
  color: var(--color-primary);
}

.pc-nav li:last-child {
  height: 30px;
  margin-right: 16px; /* 余白の大きさは調整可 */
  display: flex;
  align-items: center; /* 上下中央揃え */
  justify-content: center; /* 水平方向も中央に */  
}


/* PC用ヘッダーのInstagramアイコン調整 */
.pc-nav img[alt="インスタグラム"] {
  width: 35px; /* ここで好みの大きさに */
  height: auto;

}



.footer-nav {
  margin-bottom: 1.5rem;
}

.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
}

.footer-nav li a {
  color: #ffffff
  font-weight: bold;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.footer-nav li a:hover {
  color: #ffffff
  text-decoration: underline;
}




/* =======================================
  3. スマホ用ドットナビゲーション
======================================= */
.dot-nav-toggle {
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
  display: block;
}

.dot-grid {
  display: grid;
  grid-template-columns: repeat(3, 8px);
  grid-gap: 4px;
}

.dot-grid span {
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: 50%;
}

.dot-nav-overlay {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(14, 26, 43, 0.95);
  z-index: 9999;
}

.dot-nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 2rem;
  justify-items: center;
}

.dot-item {
  background: #f5f5f5;
  border-radius: 20px;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--color-primary);
  transition: all 0.3s ease;
}

.dot-item img {
  width: 36px;
  height: 36px;
  margin-bottom: 0.5rem;
}

.dot-item span {
  font-size: 0.8rem;
}

.dot-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 10px #00ffff88;
}

.dot-item.active {
  width: 60px;
  height: 60px;
  background:var(--color-bg: #ffffff);
  color: var(--color-primary);
  align-self: center; /* ← 縦方向の中央揃え */
  justify-self: center; /* ← 横方向の中央揃え（念のため） */  
}

/* アイコンサイズも小さくする */
.dot-item.active img {
  width: 24px;
  height: 24px;
  filter: none; /* 色反転キャンセル（白背景対応） */
}

@media screen and (min-width: 769px) {
  .dot-nav-toggle {
    display: none;
  }
  .pc-nav {
    display: block;
    margin-left: auto;
  }
}

/* =======================================
  4. ヒーローセクション（TOPページ）
======================================= */
/* === Heroキャッチアニメーション（TOP専用）=== */

.hero-title-animated {
  color: #ffffff; /* ← 文字色を白に指定 */
}


/* ▼ TOPページ専用：ヒーロータイトル文字揃え */
.index-page .hero-title-animated {
  display: inline-block;
  text-align: left;        /* 左揃えに */
  white-space: nowrap;     /* 不要な折返し防止 */
}

.index-page .hero-title-animated .word {
  display: block;          /* 1行ずつブロック化 */
  text-align: left;
}


/* ▼ スマホ時（768px以下）は中央揃え */
@media (max-width: 768px) {
  .index-page .hero-title-animated {
    text-align: center;
    white-space: normal; /* 折返し有効に戻す */
  }
  .index-page .hero-title-animated .word {
    text-align: center;
  }
}




.hero-title-animated span {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  animation: heroFadeSlideIn 0.8s ease-out forwards;
}

.hero-title-animated .delay-1 { animation-delay: 0.2s; }
.hero-title-animated .delay-2 { animation-delay: 0.6s; }
.hero-title-animated .delay-3 { animation-delay: 0.8s; }
.hero-title-animated .delay-4 { animation-delay: 1.0s; }

@keyframes heroFadeSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--color-bg);
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 92%;
  object-fit: cover;
  filter: brightness(90%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--color-text);
  padding: 0 1rem;
}

.hero-content h1 {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7); /* 文字を浮き立たせる */
}


.hero-content p {
  font-size: 1.5rem;
  margin-top: 0;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); /* ← 文字を見やすく */
}


/* =======================================
  5. お知らせセクション
======================================= */
.news-section {
  background: rgba(255, 255, 255, 0.05);
  padding: 2rem 1rem;
  border-radius: 12px;
  margin-top: 0;
  margin-bottom: 0;
}

/* ▼ .news-list のみスクロール対応を追加 ▼ */
.news-list {
  list-style: none;
  padding: 0 1rem 0 0; /* ← padding-rightだけ指定して他は0に */
  margin: 0;           /* ← ここが追加ポイント！ */
  max-height: 150px;
  overflow-y: auto;
}

/* スクロールバーのカスタマイズ（オプション） */
.news-list::-webkit-scrollbar {
  width: 6px;
}

.news-list::-webkit-scrollbar-thumb {
  background-color: var(--color-primary);
  border-radius: 4px;
}

.news-list::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.05);
}

/* ▼ PC表示用：日付と本文を横並びにする構成 ▼ */
.news-list li {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.news-list .date {
  color: var(--color-primary);
  font-weight: bold;
  white-space: nowrap;
}

.news-list .news-text {
  color: var(--color-text);
}

.more-button {
  margin-top: 1.5rem;
  text-align: center;
}

.more-button a {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-bg);
  padding: 0.7rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
}

.more-button a:hover {
  background-color: #00cccc;
}


/*誘導コンテンツ*/
/* =======================================
  TOP：縦スクロール案内
======================================= */
.promo-scroll {
  background: #f7f8fb;         /* ごく薄いグレーで段を分ける */
  padding: 2.5rem 0 3rem;
}

.promo-scroll .kana-heading {
  text-align: left;
  margin: 0 auto 1.5rem;
  max-width: 1200px;
  padding: 0 1rem;
}

/* 1カード＝画像＋テキストの横並び（PC） */
.promo-block {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto 1.5rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  overflow: hidden;
}

/* 交互に左右を入れ替える（上から数えて偶数番目）*/
.promo-scroll .promo-block:nth-of-type(even) {
  flex-direction: row-reverse;
}

/* 画像は大きめ、縦横比をきれいに */
.promo-block > img {
  flex: 0 0 48%;
  width: 48%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* テキスト側 */
.promo-text {
  flex: 1;
  min-width: 0;
}

.promo-text h3 {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem);
  margin: .25rem 0 .5rem;
  line-height: 1.35;
}

.promo-text .promo-sub,
.promo-text h3 span {
  display: inline-block;
  font-size: .95rem;
  color: var(--color-primary);
  margin-left: .35rem;
}

.promo-text p {
  font-size: 1.05rem;
  line-height: 1.85;
  margin: .25rem 0 1rem;
  color: #222;
}

/* CTAボタン（既存トーンに合わせた控えめ版） */
.promo-button {
  display: inline-block;
  padding: .9rem 1.6rem;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(211,47,47,.25);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.promo-button:hover {
  background: var(--color-primary-hover);
  color: #fff; /* ← これを追記 */
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(211,47,47,.35);
}

/* スマホ：縦積み＋余白縮小 */
@media (max-width: 768px) {
  .promo-block {
    flex-direction: column;
    gap: .9rem;
    padding: 1rem;
    border-radius: 14px;
    margin: 0 1rem 1rem;
  }
  .promo-block > img {
    width: 100%;
    flex: 0 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
  }
  .promo-text h3 { font-size: 1.25rem; }
  .promo-text p  { font-size: .98rem; }
  .promo-button  { width: 100%; text-align: center; }
}

/* スクロール時のふわっと表示（既存 .fade-section を強調） */
.promo-block.fade-section {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease, box-shadow .2s ease;
}
.promo-block.fade-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 交互レイアウト（PC・タブレット） */
@media (min-width: 769px) {
  .promo-scroll .promo-block:nth-of-type(even) {
    flex-direction: row-reverse;
  }
}

/* スマホ：1カラムの縦カードに */
@media (max-width: 768px) {
  .promo-scroll {
    padding: 1.2rem .8rem;
  }

  .promo-scroll .kana-heading {
    text-align: left;
    font-size: 1.2rem;
    margin-bottom: .8rem;
  }

  .promo-scroll .promo-block {
    flex-direction: column;
    gap: .6rem;
    border-radius: 12px;
    margin-bottom: .9rem;
  }

  .promo-scroll .promo-block > img {
    width: 100%;
    flex: none;
    aspect-ratio: 16 / 9;     /* スマホは少し横長に */
  }

  .promo-scroll .promo-text {
    padding: .8rem .9rem 1rem;
  }

  .promo-scroll .promo-text h3 {
    font-size: 1.1rem;
  }

  .promo-scroll .promo-text h3 span {
    font-size: .85rem;
  }

  .promo-scroll .promo-text p {
    font-size: .95rem;
  }

  /* ボタンは横幅にゆとりを持たせる */
  .promo-scroll .promo-button {
    width: 100%;
    text-align: center;
    margin-right: 0;
    margin-top: .4rem;
    padding: .9rem 1rem;
  }
}

/* キーボード操作とアクセシビリティ強化 */
.promo-scroll .promo-button:focus-visible {
  outline: 3px solid #ffb3b3;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(211,47,47,.2);
}



/*誘導ボタン*/
.philosophy-button {
  display: inline-block;
  padding: 1rem 2.5rem;
  font-size: 1rem;
  font-weight: bold;
  color: #000;
  background: linear-gradient(90deg, #fff200, #aaff00);
  border: none;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 0 25px rgba(255, 255, 0, 0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.philosophy-button:hover {
  transform: scale(1.1);
  box-shadow: 0 0 40px rgba(255, 255, 100, 0.85);
}






/* === 2カラム横並びカード（Grid版）=== */
.promo-block.promo-twins {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 上段2カラム */
  gap: 1rem;
  border-radius: 12px;
  overflow: hidden;
}

/* 各カラム */
.promo-block.promo-twins .promo-col {
  background: #fff;
  display: flex;
  flex-direction: column;
  min-width: 0; /* 文字折返し用 */
}

.promo-block.promo-twins .promo-col img {
  width: 100%;              
  aspect-ratio: 16 / 9;     
  object-fit: cover;       
  display: block;
  margin: 0 auto;          
  border-radius: 12px;     /* ← 丸角を追加 */
  box-shadow: 0 6px 18px rgba(0,0,0,.08); /* 他画像と同じ影を付与 */
}

.promo-block.promo-twins .promo-inner {
  padding: 1rem;
}

/* ✅ ボタンは下段で中央＆横断 */
.promo-twins .promo-button-wrap {
  grid-column: 1 / -1;     
  text-align: center;      
  margin: 1.5rem 0 0;
  width: 100%;
}
.promo-twins .promo-button {
  display: inline-block;
}

/* twins内のh3をpromo-scrollと統一 */
.promo-block.promo-twins h3 {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem);
  font-weight: bold;
  margin-bottom: 0.5rem;
  text-align: center;
}

/* twins内のpをpromo-scrollに合わせる */
.promo-block.promo-twins p {
  font-size: 1.05rem;
  line-height: 1.8;
  margin: 0 0 1rem;
  text-align: center;   /* ← PCでは中央寄せ */
}

/* スマホでは1カラム＋ボタンはその下 */
@media (max-width: 768px) {
  .promo-block.promo-twins {
    grid-template-columns: 1fr;
  }

  /* スマホ時だけpを左寄せに */
  .promo-block.promo-twins p {
    text-align: left;
  }
}


@media (max-width: 768px) {
  .promo-block {
    flex-direction: column !important;
    align-items: flex-start;
  }

  .promo-block > img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 240px;  /* ←任意調整：必要なら上限つける */
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    border-radius: 12px;
  }

  .promo-text {
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
  
  }

  .promo-button {
    width: 100%;
    display: block;
    margin-top: 0.5rem;
  }
}

@media (max-width: 768px) {
  .promo-scroll .promo-button {
    display: block;              /* 中央配置の前提 */
    width: 100%;                 /* 幅いっぱい */
    max-width: 100%;             /* 念のため */
    margin: 0 auto 0.6rem;       /* 上下バランス＆中央寄せ */
    text-align: center;          /* テキスト中央 */
    padding: .9rem 1rem;
    box-sizing: border-box;     /* padding考慮 */
  }
}


/* スマホのみ表示 */
.sp-only {
  display: none;
}

@media (max-width: 768px) {
  .sp-only {
    display: inline;
  }
}


/* =======================================
   6. Instagram表示（統合版・省略＋高さ統一＋スワイプ＋自動スクロール対応）
======================================= */
.instagram-section {
  margin-top: 0;
  max-height: 800px;
  overflow: hidden;
  position: relative;
}

.instagram-gallery {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.instagram-gallery::-webkit-scrollbar {
  display: none;
}

/* ✅ ホバー時は自動スクロールを抑制 */
.instagram-gallery:hover {
  scroll-behavior: auto !important;
}

.insta-post {
  flex: 0 0 auto;
  width: 280px;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid var(--color-primary); 
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
  text-align: left;
  height: 320px;
  scroll-snap-align: start;
}

.insta-post:hover {
  transform: translateY(-4px);
}

.insta-post img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px 8px 0 0;
  transition: transform 0.3s ease;
  display: block;
}

.insta-caption {
  flex-grow: 1;
  padding: 0.8rem;
  color: var(--color-text);
  font-size: 0.85rem;
  background-color: #ffffff;
  border-top: 1px solid #e0e0e0;    /* 上に境界線をつける */
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); /* 軽い内側の影 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}

.insta-user {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: normal;
  font-size: 0.75rem;
  color: #aaa;
}

.user-icon {
  width: 30px !important;
  height: 30px !important;
  object-fit: contain;
  margin-right: 4px;
  display: inline-block;
  vertical-align: middle;
}

.insta-date {
  font-size: 0.75rem;
  color: #ccc;
  margin-bottom: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.insta-text {
  font-size: 0.8rem;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Instagram埋め込み関連（旧構成残す場合） */
.instagram-scroll-wrapper {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  display: flex;
  gap: 1rem;
  padding-bottom: 1rem;
  scroll-behavior: smooth;
  margin-top: 2rem;
  scrollbar-width: none;
}

.instagram-scroll-wrapper::-webkit-scrollbar {
  display: none;
}

.instagram-scroll-track {
  display: flex;
  gap: 20px;
  flex-wrap: nowrap;
  box-sizing: border-box;
  width: max-content;
}

.instagram-embed-wrapper {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 300px;
  max-width: 100%;
  box-sizing: border-box;
}

/* Instagram内のリンクだけ下線を消す */
.instagram-section a {
  text-decoration: none;
}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* =======================================
  7. 会社紹介ページのヒーローセクション
======================================= */
/* 拠点紹介LINK */
.branch-button {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  background-color: #f9f9f9;   /* 白背景に馴染む淡いグレー */
  color: #333;                 /* 黒文字で読みやすい */
  border: 1px solid #ccc;      /* 薄い枠でボタン感を残す */
  border-radius: 4px;          /* 丸すぎず自然な角丸 */
  font-size: 0.85rem;
  font-weight: normal;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.branch-button:hover {
  background-color: #eee;      /* ホバー時：少し濃く */
  border-color: #bbb;          /* 枠もやや強調 */
  color: #000;                 /* 黒でくっきり */
}



/* 会社概要内の会社案内PDF表紙 */
.company-overview .guide-cover {
  max-width: 200px; /* 小さめに */
  width: 100%;
  border: 1px solid #ccc; /* 落ち着いた枠線 */
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.company-overview .guide-cover:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}





/*得意先一覧LINK*/
.clients-button {
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #f5f5f5;   /* 白背景に馴染む淡いグレー */
  color: #333;                 /* 黒文字で可読性 */
  border: 1px solid #ccc;      /* 薄い枠でボタン感 */
  font-weight: bold;
  font-size: 1rem;
  text-align: center;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 0 20px rgba(138, 173, 255, 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.clients-button:hover {
  background-color: #e0e0e0;   /* ホバー時に少し濃く */
  border-color: #bbb;
  color: #000;
}


.company-hero {
  position: relative;
  width: 100%;
  height: 60vh;
  overflow: hidden;
  background-color: var(--color-bg);
}

.company-hero-background video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(90%);
  z-index: 1;
}

.company-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #ffffff;
  padding: 2rem;
}

.company-hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.company-hero p {
  font-size: 1.5rem;
}

/* =======================================
  8. 会社紹介ページセクション（理念・概要など）
======================================= */
.company-overview,
.company-philosophy,
.company-history,
.company-access {
  padding: 3rem 1rem;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 0;
  padding-bottom: 2rem;
  border-radius: 10px;
  position: relative;
}

.company-overview ul,
.company-history ul {
  list-style: none;
  padding: 0;
}

.company-overview li,
.company-history li {
  margin: 1.5rem 0;
  text-align: left;
  font-size: 1.1rem;
  padding-left: 30px;
}

.company-philosophy p {
  font-size: 1.2rem;
  text-align: justify;
  line-height: 1.8;
}

.company-overview h2,
.company-philosophy h2,
.company-history h2 {
  position: relative;
  padding-left: 30px;
  text-align: left;
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.philosophy-center {
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}

.philosophy-center h3 {
  text-align: left;
  color: var(--color-primary);
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.philosophy-list {
  list-style: none;
  padding-left: 0;
  text-align: left;
  max-width: 100%;
  margin: 0;
}

.philosophy-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.8rem;
  padding-left: 1rem;
}

.philosophy-list li strong {
  color: var(--color-primary);
  font-weight: bold;
}

/* デフォルト（PC用）では「：」を表示 */
.philosophy-list li strong::after {
  content: "：";
  margin-left: 0.2rem;
  color: var(--color-primary);
  font-weight: bold;  
}

.philosophy-list .bullet {
  flex: 0 0 auto;
  margin-right: 0.5rem;
  color: var(--color-primary);
  font-weight: bold;
  margin-left: 0;
}


/* === 追加：事業内容セクション（画像・ボタン付き） === */
.business-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 3rem;
}

.business-flex.reverse {
  flex-direction: row-reverse;
}

.business-text {
  flex: 1 1 55%;
}

.business-text p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.2rem;
  text-align: justify;
}

.business-image {
  flex: 1 1 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.business-image img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.business-button-below {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}

.button-link {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.button-link:hover {
  background-color: var(--color-primary-hover);
}

/* 追加：目立たせるボタン（Electric部門画像下） */
.button-link.prominent {
  background-color: var(--color-primary);
  color: #fff;
  padding: 0.9rem 2rem;
  font-size: 1.1rem;
  font-weight: bold;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 255, 255, 0.4);
  transition: all 0.3s ease;
}

.button-link.prominent:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 255, 255, 0.6);
}


/* =======================================
  9. 会社概要テーブル
======================================= */
.company-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.company-table th,
.company-table td {
  padding: 0.8rem;
  font-size: 1rem;
  border: 1px solid var(--color-border);
}

.company-table th {
  background-color: var(--color-bg-alt);
  color: var(--color-primary);
  width: 25%;
}

.company-table td {
  background-color: var(--color-bg-alt);
  color: var(--color-text);
  text-align: left;
  vertical-align: top;
  padding-left: 1rem;
}

.company-table ul {
  padding-left: 0;
  margin-left: 0;
  list-style: none;
}

.company-table ul li {
  margin-bottom: 0.5rem;
  padding-left: 1rem;
  text-indent: -1rem;
}

/* =======================================
  10. タイムライン（沿革）
======================================= */
.timeline-wrapper {

  padding: 0;
}

.timeline {
  position: relative;
  width: 80%;
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 2rem;
  
  border-radius: 10px;
}

.timeline-line {
  position: absolute;
  top: 120px;
  bottom: 900px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: calc(100% - 150px);
  background: var(--color-primary);
  z-index: 1;
}

.timeline-item {
  position: relative;
  margin: 3rem 0;
}

.dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  background-color: var(--color-primary);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(255, 150, 150, 0.3);
  z-index: 5;
}

.dot::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 80px;
  height: 2px;
  background-color: var(--color-primary);
  transform: translateY(-50%);
}

.timeline-item.left .dot::after {
  right: 100%;
}

.timeline-item.right .dot::after {
  left: 100%;
}

.timeline-content {
  position: relative;
  width: 25%;
  padding: 1rem;
  
  border-radius: 8px;
  border: 1px solid #f8bcbc; /* ← 淡い赤い枠線を追加 */
  box-shadow: 0 0 15px rgba(255, 150, 150, 0.3);
  font-size: 1rem;
}

.timeline-content.left {
  margin-left: calc(50% - 25% - 120px);
  text-align: right;
}

.timeline-content.right {
  margin-left: calc(50% + 90px);
  text-align: left;
}

.timeline-date {
  color: var(--color-primary);
  font-weight: bold;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.timeline-description {
  font-size: 1rem;
}

.timeline-item.hidden {
  display: none;
}

.more-image-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: block;
  margin: 2rem auto 0;
  transition: transform 0.3s ease;
}

.more-image-button:hover {
  transform: scale(1.1);
}

.more-image-button img {
  transition: transform 0.3s ease;
}

.more-image-button.open img {
  transform: rotate(180deg);
}

.more-button-float {
  position: relative;
  width: 100%;
  height: 0;
}

.more-image-button {
  position: absolute;
  top: -40px;
  left: 52%;
  transform: translateX(-50%);
  background-color: var(--color-bg-alt);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 10;
  border-radius: 50%;
}

.more-image-button:hover {
  transform: translateX(-50%) scale(1.1);
}
/* =======================================
  11. フェードイン・遅延アニメーション
======================================= */
.fade-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-section.visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }
.delay-4 { transition-delay: 0.8s; }
.delay-5 { transition-delay: 1s; }
.delay-6 { transition-delay: 1.2s; }
.delay-7 { transition-delay: 1.4s; }
/* =======================================
  12. Instagram
======================================= */




/* =======================================
  13. 取扱メーカー・得意先一覧
======================================= */

/* 取扱メーカー・得意先ページ専用：ヒーロータイトル位置調整 */
.manufacturers-page .company-hero-content h1,
.clients-page .company-hero-content h1 {
  margin-top: 10rem; /* ← 下げ幅。必要に応じて調整 */
  text-align: center; /* 念のため中央揃え */
}

@media (max-width: 768px) {
  .manufacturers-page .company-hero-content h1,
  .clients-page .company-hero-content h1 {
    margin-top: 5rem;  /* ← スマホは少し控えめに */
  }
}

.kana-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0;
}

.kana-filter button {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  padding: 0.5em 1em;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.kana-filter button:hover {
  background-color: var(--color-primary);
  color: var(--color-bg);
  box-shadow: 0 0 8px var(--color-primary);
}

.kana-filter button.active {
  background-color: var(--color-primary);
  color: var(--color-bg);
  box-shadow: 0 0 8px var(--color-primary);
}

.kana-heading {
  background: #ffffff;
  color: #d32f2f;
  border-left: 4px solid #d32f2f;
}


.company-name-link {
  color: #000000; /* 黒文字 */
  text-decoration: none; /* 下線なし */
  font-weight: bold;
  font-size: 1rem;
  transition: color 0.3s ease;
}

.company-name-link:hover {
  color: #d32f2f; /* ホバー時にほんのり赤く（調整可能） */
  text-decoration: underline;
}


.manufacturer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1em;
}

.manufacturer-card {
  background-color: var(  --color-bg);
  color: var(  --color-text);
  font-weight: 600;
  padding: 0.8em 1em;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  
  height: auto;
  border: 1px solid var(--color-border);

}

.manufacturer-card h3 {
  margin-bottom: 0.5rem; /* ← デフォルトの上下マージンを縮める */
}



/* clients.html専用ボタンスタイル */


.clients-page .manufacturer-card {
  background-color: var(  --color-bg);
  color: var(  --color-text);
  font-weight: 600;
  padding: 0.8em 1em;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  
  height: auto;
  border: 1px solid var(--color-border);
  margin-bottom: 2rem;

}


.clients-page .manufacturer-card a {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 6px 12px;
  background-color: #00acc1;  /* 青緑系ボタン */
  color: #ffffff;
  border-radius: 4px;
  font-size: 0.85em;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.clients-page .manufacturer-card a:hover {
  background-color: #00838f;
  transform: scale(1.05);
}





.clients-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}




.client-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.client-section.visible {
  opacity: 1;
  transform: translateY(0);
}





.manufacturer-card img.client-logo {
  width: 100%;
  height: 60px;
  object-fit: contain;
  background-color: #ffffff;
  border-radius: 6px;
  padding: 4px;
  display: block;
  margin: 10px auto 3px;
}
/* =======================================
  14. 拠点紹介セクション
======================================= */
.branch-divider {
  border: none;
  height: 2px;
  background-color: #f4f4f4;
  margin: 40px 0;
}

/* 拠点カードを横並びに */
.branch-card {
  display: flex;
  align-items: stretch;  /* ← 高さを揃えるポイント */
  gap: 1rem;
  margin-bottom: 40px;
}

.branch-info {
  flex: 1;
}

.branch-map {
  flex: 2;               /* 横幅の比率 */
  display: flex;         /* 中のiframeを高さ100%に */
}

.branch-map iframe {
  width: 100%;
  height: 100%;          /* ← 左の高さに合わせて自動調整される */
  border: 0;
  border-radius: 8px;
}


/* ▼ スマホ時：1カラム＋地図を先頭に常時表示 */
/* === 拠点紹介：スマホ用レイアウト === */
@media (max-width: 768px) {
  .branch-card {
    display: flex;
    flex-direction: column; /* 縦並び */
  }

  .branch-card iframe {
    order: -1;             /* 地図を先頭へ */
    width: 100%;           /* 横いっぱい */
    aspect-ratio: 1 / 1;   /* 正方形で表示 */
    height: auto;          /* 高さは自動 */
  }

  .branch-card p {
    margin: 0.5rem 0;
  }
}



/* =======================================
  15. 採用情報ページ
======================================= */

/* PC表示時：スラッシュでつなぐ */
.sp-break::after {
  content: " / ";
}

/* スマホ表示時：改行に置き換え */
@media (max-width: 768px) {
  .sp-break::after {
    content: "\A";     /* 改行コード */
    white-space: pre;  /* 改行を有効に */
  }
}


/*ボタンカラー元コード
.mynavi-button {
  display: inline-block;
  padding: 1rem 2rem;
  background: linear-gradient(90deg, #00f5ff, #00ff6a);
  color: #000; /* 通常時は黒字
  border: none;
  border-radius: 999px;
  font-weight: bold;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 0 20px rgba(0, 255, 128, 0.7);
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.mynavi-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(0, 255, 128, 1);
  color: #000; /* ★ホバー時も黒字に固定 
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.6); /* ★ぼかしで補助
}

*/


/*ボタンカラー比較用　一時記述　20250829*/

.mynavi-button {
  display: inline-block;
  padding: 1rem 2rem;
  border: none;
  border-radius: 999px;
  font-weight: bold;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

/* ===============================
   Mynaviボタン カラーバリエーション
   =============================== */

/* バリエーション①：グリーン×シアン系
   → フレッシュ・未来志向・元気さを表現 */
.mynavi-button.greenblue {
  background: linear-gradient(90deg, #00f5ff, #00ff6a);
  color: #000;
  box-shadow: 0 0 20px rgba(0, 255, 128, 0.7);
}
.mynavi-button.greenblue:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(0, 255, 128, 1);
}

/* バリエーション②：レッド系
   → コーポレートカラー寄せ、力強さ・情熱を表現 */
.mynavi-button.red {
  background: linear-gradient(90deg, #d32f2f, #f44336);
  color: #fff;
  box-shadow: 0 0 20px rgba(211, 47, 47, 0.5);
}
.mynavi-button.red:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(244, 67, 54, 0.8);
}

/* バリエーション③：ブルー系
   → 信頼感・誠実さ・落ち着きを表現 */
.mynavi-button.blue {
  background: linear-gradient(90deg, #1976d2, #42a5f5);
  color: #fff;
  box-shadow: 0 0 20px rgba(25, 118, 210, 0.5);
}
.mynavi-button.blue:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(66, 165, 245, 0.8);
}

/* バリエーション④：オレンジ系
   → 元気・親しみやすさ・明るい雰囲気を表現 */
.mynavi-button.orange {
  background: linear-gradient(90deg, #ff9800, #ffc107);
  color: #000;
  box-shadow: 0 0 20px rgba(255, 152, 0, 0.6);
}
.mynavi-button.orange:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(255, 193, 7, 0.9);
}

/* バリエーション⑤：パープル系
   → 知性・洗練・先進性を表現 */
.mynavi-button.purple {
  background: linear-gradient(90deg, #7b2ff7, #9d4edd);
  color: #fff;
  box-shadow: 0 0 20px rgba(155, 77, 221, 0.7);
}
.mynavi-button.purple:hover {
  background: linear-gradient(90deg, #6a11cb, #8a2be2);
  box-shadow: 0 0 30px rgba(155, 77, 221, 1);
}

/* バリエーション⑥：ゴールド系
   → 高級感・安定感・信頼を表現 */
.mynavi-button.gold {
  background: linear-gradient(90deg, #ffb300, #ffd54f);
  color: #000;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}
.mynavi-button.gold:hover {
  background: linear-gradient(90deg, #ff9800, #ffc107);
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.9);
}

/* バリエーション⑦：ピンク系
   → 優しさ・親しみやすさ・温かみを表現 */
.mynavi-button.pink {
  background: linear-gradient(90deg, #ff6ec4, #ff92a5);
  color: #fff;
  box-shadow: 0 0 20px rgba(255, 105, 180, 0.6);
}
.mynavi-button.pink:hover {
  background: linear-gradient(90deg, #ff4081, #ff79a8);
  box-shadow: 0 0 30px rgba(255, 105, 180, 0.9);
}

/* バリエーション⑧：ライトグリーン系
   → 安心感・フレッシュ・自然な印象を表現 */
.mynavi-button.green {
  background: linear-gradient(90deg, #43e97b, #38f9d7);
  color: #000;
  box-shadow: 0 0 20px rgba(56, 249, 215, 0.6);
}
.mynavi-button.green:hover {
  background: linear-gradient(90deg, #34d399, #10b981);
  box-shadow: 0 0 30px rgba(56, 249, 215, 0.9);
}

/* バリエーション⑨：マイナビ転職カラー
   → ロゴカラー（水色＋赤）を反映し、一体感を演出 */
.mynavi-button.mynavi-colors {
  background: linear-gradient(90deg, #00a0e9, #e60012);
  color: #fff; /* 白字で可読性確保 */
  box-shadow: 0 0 20px rgba(0, 160, 233, 0.6);
}
.mynavi-button.mynavi-colors:hover {
  transform: scale(1.05);
  background: linear-gradient(90deg, #0090d0, #c40010); /* 少し濃いトーン */
  box-shadow: 0 0 30px rgba(230, 0, 18, 0.8);
}

/* バリエーション⑨-Light：マイナビ転職カラー（明るめ）
   → シアンを少し明るく、赤を朱色寄りにして柔らかい印象に */
.mynavi-button.mynavi-colors-light {
  background: linear-gradient(90deg, #33cfff, #ff4d4d);
  color: #fff; /* 白字で可読性確保 */
  box-shadow: 0 0 20px rgba(51, 207, 255, 0.6);
}
.mynavi-button.mynavi-colors-light:hover {
  transform: scale(1.05);
  background: linear-gradient(90deg, #66dbff, #ff6666); /* ホバーでさらに明るく */
  box-shadow: 0 0 30px rgba(255, 77, 77, 0.8);
}

/* サイト基調に馴染むグリーンベース（落ち着きトーン） */
.mynavi-button.site-green {
  background: linear-gradient(90deg, #4ade80, #22d3ee); /* 彩度控えめの緑×シアン */
  color: #000;
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.4);
}
.mynavi-button.site-green:hover {
  background: linear-gradient(90deg, #34d399, #06b6d4); /* 濃くして強調 */
  box-shadow: 0 0 30px rgba(34, 211, 238, 0.7);
}

/* サイト基調に馴染むレッドベース */
.mynavi-button.site-red {
  background: linear-gradient(90deg, #d32f2f, #f87171); /* 赤～少し明るい赤 */
  color: #fff;
  box-shadow: 0 0 20px rgba(211, 47, 47, 0.5);
}
.mynavi-button.site-red:hover {
  background: linear-gradient(90deg, #b91c1c, #ef4444);
  box-shadow: 0 0 30px rgba(211, 47, 47, 0.8);
}











body.no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

.company-overview p strong::after {
  content: "：";
  margin-left: 0.2rem;
}

.recruit-steps li strong::after {
  content: "：";
  margin-left: 0.2rem;
}

/* 採用スケジュール（ステップ） */
.recruit-steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
}

.recruit-steps li {
  position: relative;
  margin-bottom: 1.5rem;
  padding: 1rem 1rem 1rem 3rem;
  line-height: 1.6;
  background: var(--color-bg);         /* ← 背景白に */
  color: var(--color-text);            /* ← 黒文字に */
  border-left: 4px solid var(--color-primary);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(211, 47, 47, 0.2); /* ← 赤に変更 */
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transition-delay: calc(var(--step-order, 0) * 0.2s);
}

.recruit-steps li.visible {
  opacity: 1;
  transform: translateY(0);
}

.recruit-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.8rem;
  height: 1.8rem;
  background: var(--color-primary); /* 赤バッジ */
  color: #ffffff;                   /* 白文字 */
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(211, 47, 47, 0.2); /* ← 赤に変更 */
  font-size: 0.9rem;
  z-index: 1;
}


/* ラベル */
.job-select-box label {
  display: block;
  text-align: center;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  color: #ffffff;

}

/* セレクトボックス本体 */
.job-select {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 0 auto 1.5rem auto;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  color: #fff;
  border: 2px solid var(--color-primary);
  border-radius: 6px;
  appearance: none; /* 標準デザインを解除 */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%227%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200l5%207%205-7z%22%20fill%3D%22%23fff%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 10px 7px;
  background-color: var(--color-bg);
  color: #000000; /* ← 黒文字に変更 */
  cursor: pointer;
  transition: all 0.3s ease;
}

.job-select:hover,
.job-select:focus {
  box-shadow: 0 6px 20px rgba(211, 47, 47, 0.2); /* ← 赤に変更 */
  outline: none;
}





/* PCでも共通情報ボックスに枠を表示 */
.job-box.common-info {
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 2rem;

  background-color: var(--color-bg);
  box-shadow: 0 6px 20px rgba(211, 47, 47, 0.2); /* ← 赤に変更 */
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.job-box.common-info dt,
.job-box.common-info dd {
  color: #000000; /* 明示的に黒文字指定 */
  opacity: 1;     /* もし薄くなっていれば強制 */
}




/* 各職種の詳細ボックス（上段） */
.job-detail {
  display: none;
  padding: 1rem;
  color: #000000; /* ← 黒文字に変更 */
  background-color: var(--color-bg);
  border-left: 4px solid var(--color-primary);
  border: 1px solid var(--color-primary);
  margin-bottom: 1rem;
  border-radius: 8px;
  transition: opacity 0.3s ease;
  opacity: 0;
  box-shadow: 0 6px 20px rgba(211, 47, 47, 0.2); /* ← 赤に変更 */

  /* 👇追加部分：横幅と中央寄せ */
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.job-detail h4,
.job-common h4,
.job-box h4 {
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 1rem;
}

.job-detail dl,
.job-common dl,
.job-box dl  {
  margin: 0;
  text-align: left;
}

.job-detail dt,
.job-common dt,
.job-box dt   {
  font-weight: bold;
  margin-top: 0.8rem;
}

.job-detail dd,
.job-common dd,
.job-box dd   {
  margin-left: 0;
  margin-bottom: 0.5rem;
}

.job-detail.active {
  display: block;
  opacity: 1;
}

/* 共通情報ボックス調整 */
.common-info {
  margin-top: 2rem;
}

.staff-card-row {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 2rem;
}

.staff-card {
  color: #000000; /* ← 黒文字に変更 */
  background-color: var(--color-bg);
  padding: 1rem;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(211, 47, 47, 0.2); /* ← 赤に変更 */
  max-width: 200px;
  transition: transform 0.3s;
}

.staff-card:hover {
  transform: scale(1.05);
}

.staff-label {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-bg);
  font-weight: bold;
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.staff-photo {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 0.5rem;
}

.staff-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 2rem;
  box-sizing: border-box;
}

.staff-overlay.active {
  display: flex;
}

/* 横並びの時間別カードコンテナ */
.timeline-horizontal {
  display: none;
  gap: 1.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding: 1rem;
  max-width: 90vw;
  max-height: 80vh;
  scroll-behavior: smooth;

  /* Firefox用スクロールバー */
  scrollbar-color: #d32f2f #ffffff; /* 赤つまみ × 白背景 */
  scrollbar-width: thin;
}

/* Webkitブラウザ用スクロールバー（Chrome, Edge など） */
.timeline-horizontal::-webkit-scrollbar {
  height: 10px;
}

.timeline-horizontal::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #00ffff, #007c7c);
  border-radius: 6px;
}

.timeline-horizontal::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  box-shadow: inset 0 0 5px rgba(0, 255, 255, 0.2);
}


.timeline-horizontal.active {
  display: flex;
}

/* 各時間帯カード - モダンで柔らかく */
.timeline-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;

  flex: 0 0 100%;
  max-height: 90vh;
  max-width: 100%;
  overflow: hidden;

  background-color: #ffffff;      /* ← 完全な白背景に */
  color: #000000;                 /* ← 黒文字に */
  border-radius: 18px;
  padding: 1.2rem;

  box-sizing: border-box;
  box-shadow: 0 6px 20px rgba(211, 47, 47, 0.2); /* ← 赤に変更 */
  scroll-snap-align: start;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.timeline-card .text-content {
  flex: 1;
}

.timeline-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(211, 47, 47, 0.3); /* ← 赤系に */
}

.timeline-card .time {
  position: relative;
  display: inline-block;
  background: #d32f2f;  /* 背景赤 */
  color: #ffffff;       /* 白文字 */
  font-weight: bold;
  padding: 0.2rem 0.8rem;
  border-radius: 20px;
  font-size: 0.85rem;
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.2);
  margin-bottom: 0.5rem;
}

.timeline-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-top: 2rem;
}

.timeline-card img {
  flex: 0 0 40%;
  max-width: 40%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 255, 255, 0.15);
}

.close-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: #ffffff;  /* 背景白 */
  color: #d32f2f;              /* × の文字を赤に */
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}




.scroll-hint {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  color: #d32f2f; /* 赤文字に */
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  z-index: 5;
  animation: blinkHint 1.2s ease-in-out infinite;
  pointer-events: none;
  display: none;
  white-space: nowrap;
  text-shadow: 0 0 4px rgba(211, 47, 47, 0.7); /* 赤系の光彩 */
}

@keyframes blinkHint {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ▼ 全体として非表示（初期） */
.sp-only, .pc-only {
  display: none;
}

/* ▼ スマホのみ表示 */
@media screen and (max-width: 768px) {
  .sp-only {
    display: block;
  }
}

/* ▼ PCのみ表示 */
@media screen and (min-width: 769px) {
  .pc-only {
    display: block;
  }
}

.instagram-button-container {
  text-align: center;
  margin: 2.5rem 0;
}

.instagram-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 2rem;
  font-size: 1.1rem;
  font-weight: bold;
  color: #fff; /* ホバーでも見えやすい */
  background: linear-gradient(135deg, #ff6a00, #ff2dc4); /* 反対色系グラデーション */
  border: none;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 0 20px rgba(255, 100, 200, 0.6);
  transition: all 0.3s ease;
  animation: float 3s ease-in-out infinite;
}

.instagram-cta-button:hover {
  color: #fff;
  transform: scale(1.06);
  box-shadow: 0 0 28px rgba(255, 100, 200, 0.85);
}

.instagram-cta-button .icon-inline {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1); /* アイコンを白く保つ */
}


/* ▼ 採用担当者より（見出しと本文を左寄せ） */
#recruit-message { 
  text-align: left !important;   /* 親で中央寄せされているのを打ち消す */
}
#recruit-message .section-title,
#recruit-message p {
  text-align: left !important;
  margin-left: 0;
}





@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@media screen and (max-width: 768px) {
  .timeline-card {
    flex-direction: column;
    align-items: center;
    text-align: left;
  }

  .timeline-card img {
    max-width: 100%;
    height: auto;
    margin-top: 1rem;
  }

  .timeline-card .text-content {
    width: 100%;
  }

  .timeline-card p {
    font-size: 0.9rem;
    margin-top: 1rem;
  }

  .scroll-hint.sp-only {
    display: block;
    font-size: 0.75rem;
    padding: 0.3rem 0.8rem;
  }

  .timeline-horizontal {
    max-width: 100vw;
    padding: 0.5rem;
    gap: 1rem;
  }
}






/* =======================================
  16. ページトップボタン
======================================= */
.page-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #ffffff;
  font-weight: bold;
  border: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(30px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  box-shadow: 0 0 28px rgba(255, 100, 200, 0.85);
}

.page-top.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

footer {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
  background: #142c45;
  font-size: 0.9rem;
  color: #cccccc;
  flex-direction: column;
}



/* =======================================
 17 パンくず：濃紺×シアンの世界観
======================================= */
header.site-header {
  background: transparent;
}

/* 半透明ダーク＋薄いシアングロー（まずはフォールバック） */
.breadcrumb {
  background-color: #ffffff !important; /* 完全な白背景に変更 */
  color: #000000 !important;            /* テキスト色も黒に */
  backdrop-filter: none !important;     /* ぼかし効果をオフに */
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #ccc;        /* 必要なら薄グレーのボーダー */
  box-shadow: none;                     /* 不要な影を削除 */
  /* Bootstrapの区切りを "›" に変更（公式のやり方） */
  --bs-breadcrumb-divider: "➔";
}

/* color-mix() が使えるブラウザでは少しリッチに上書き */
@supports (color: color-mix(in oklab, white, black)) {
  .breadcrumb {
    border-bottom: 1px solid color-mix(in oklab, var(--color-primary) 15%, transparent);
    box-shadow: 0 4px 24px color-mix(in oklab, var(--color-primary) 8%, transparent);
  }
}

/* 余白を統一（Bootstrapユーティリティより優先） */
.breadcrumb.container {
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
  margin-bottom: 0 !important;
}

/* リンク色とホバー発光 */
.breadcrumb .breadcrumb-item a {
  color: var(--color-primary);
  text-decoration: none;
}
.breadcrumb .breadcrumb-item a:hover {
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
}

/* Bootstrapの divider は変数で出るが、古い環境向けに保険で色だけ指定 */
.breadcrumb-item + .breadcrumb-item::before {
  content: "➔" !important; 
  color: rgba(211, 47, 47, 0.6); /* ← var(--color-primary) に近い赤 */
  padding: 0 .5rem;
}

/* アクティブをバッジ風に強調 */
.breadcrumb .breadcrumb-item.active {
  position: relative;
  background: transparent !important;  /* 背景透明 */
  color: #d32f2f !important;           /* ブランドカラー赤で強調 */
  font-weight: bold;
  border-radius: 6px;
  padding: 2px 8px;
  /* ▼ 矢印分の余白を確保（調整可） */
  margin-left: 1.25rem; 
  display: inline-block;
  white-space: nowrap; /* 改行でバッジ崩れ防止 */
  line-height: 1.3;
}

/* アクティブ項目の前の区切りを外側に配置 */
.breadcrumb-item.active::before {
  content: "➜" !important;
  position: absolute;
  /* ▼ 確保した余白内に矢印を配置（微調整可） */
  left: -1rem; 
  top: 50%;
  transform: translateY(-50%);
  color: #d32f2f;
  font-weight: 700;
  font-size: 1.05em;
  z-index: 2; /* バッジより前面 */
  text-shadow:
    0 0 2px #fff,   /* 白の縁取りで埋もれ防止 */
    0 0 4px rgba(0,0,0,.3);
}


/* （任意）完了見出しも少しだけ発光 */
.page-completion h1 {
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.35);
}

/* 先頭がアクティブのときは矢印非表示（保険） */
.breadcrumb .breadcrumb-item:first-child.active::before {
  content: "";
}

@media (max-width: 600px) {
  .breadcrumb.container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
  }

  .breadcrumb .breadcrumb-item {
    display: block;
    font-size: 0.85rem;
    padding: 0.2rem 0.5rem;
    background: transparent !important; /* 白背景を透明に変更 */
    color: #000000 !important;
    border-left: 3px solid var(--color-primary); /* 通常は縦線 */
    position: relative;
  }

  .breadcrumb .breadcrumb-item.active {
    background: transparent !important;  /* 背景透明 */
    color: #d32f2f !important;           /* ブランドカラー赤で強調 */
    font-weight: bold;
    border-left: none !important;       /* 縦線は消す */
    padding-left: 1.2rem;               /* 矢印分の余白 */
  }

  /* アクティブ時のみ矢印を表示 */
  .breadcrumb .breadcrumb-item.active::before {
    content: "➜";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #d32f2f;
    font-weight: bold;
  }

  /* 通常の矢印は非表示 */
  .breadcrumb-item::before {
    content: none !important;
  }
}


/* =======================================
  18. プライバシーポリシー
======================================= */
/* ===== Privacy Policy ===== */


.policy-toc {
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}


.policy-container {
  max-width: 860px;
  margin: 0 auto;
}

/* 目次（TOC） */
.policy-toc {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 1rem auto 2rem;
  background: #fafafa;
}
.policy-toc h2 {
  margin: 0 0 .5rem;
  font-size: 1.1rem;
  border: none;
  padding-left: 0;
  color: #333;
}
.policy-toc ol {
  margin: 0;
  padding-left: 1.25rem;
}
.policy-toc a {
  text-decoration: none;
}
.policy-toc a:hover {
  text-decoration: underline;
}

/* 本文セクション */
.policy-article {
  margin: 2rem 0;
}
.policy-article h2 {
  display: flex;
  align-items: center;
  gap: .5rem;
  border-left: 4px solid var(--color-primary);
  padding-left: .75rem;
  margin: 2rem 0 1rem;
  font-size: 1.45rem;
  scroll-margin-top: 100px;  /* ← ヘッダー高さ + 余裕分に調整 */
}
.policy-article h2 .sec-no {
  display: inline-block;
  min-width: 2.4rem;
  text-align: center;
  background: #fff1f1;
  color: var(--color-primary);
  border: 1px solid #ffd6d6;
  border-radius: 999px;
  font-size: .95rem;
  padding: .1rem .5rem;
}

/* 定義・段落の読みやすさ */
.policy-article p {
  margin: .6rem 0 0.9rem;
  line-height: 1.9;
}
.policy-article ul, .policy-article ol {
  margin: .4rem 0 .9rem 1.2rem;
}

/* 注記カード（例：問い合わせ窓口） */
.policy-note {
  border: 1px solid #eee;
  border-left: 4px solid var(--color-primary);
  background: #fff;
  padding: 1rem 1.25rem;
  border-radius: 8px;
}

/* 末尾の版情報 */
.policy-revision {
  border-top: 1px dashed #ddd;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
}
.policy-revision dl {
  display: grid;
  grid-template-columns: 9em 1fr;
  gap: .4rem .8rem;
  margin: 0;
}
.policy-revision dt { color: #555; }
.policy-revision dd { margin: 0; }

.policy-list {
  list-style: none;
  padding: 0;
  margin: 0.5em 0 1.5em;
}

.policy-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  line-height: 1.8;
}

.policy-list li::before {
  content: attr(data-marker);
  color: #d32f2f;
  flex-shrink: 0;
}

.subheading {
  font-weight: bold;
  margin: 1rem 0 0.4rem;
  line-height: 1.6;
}

.policy-block {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.policy-subblock {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  font-weight: bold;
  line-height: 1.8;
  margin-top: 1.5em;
}

.policy-subblock::before {
  content: attr(data-marker);
  color: #d32f2f;
  flex-shrink: 0;
}


@media (max-width: 768px) {
  .policy-toc {
    padding: .9rem 1rem;
    text-align: left;         /* 全体を左寄せ */
  }

  .policy-toc h2 {
    font-size: clamp(1rem, 2.5vw, 1.25rem); /* スマホで縮小、PCでは1.25rem上限 */
    white-space: nowrap;                  /* 改行させない */
    overflow: hidden;                     /* はみ出しを防ぐ */
    text-overflow: ellipsis;             /* 万が一収まらない場合は「…」 */
  }

  .policy-article h2 {
    font-size: 1.25rem;
  }

  /* ▼ 修正済みの TOCリスト部分 ▼ */
  .policy-toc ol {
    list-style-type: decimal !important;
    list-style-position: outside !important;
    padding-left: 1.5em !important;
    margin: 0 !important;
  }

  .policy-toc ol li {
    all: unset; /* ← 一旦すべてのスタイルをリセット */
    display: list-item !important; /* ← 通し番号を表示させる本命 */
    list-style-type: decimal !important;
    list-style-position: outside !important;
    font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 0.25em;
    margin: 0;
  }
}






/* =======================================
  19. レスポンシブ対応（スマホ用/小さい画面用）
======================================= */
/* ▼ PC表示は1201px以上 */
@media screen and (min-width: 1201px) {
  .pc-nav {
    display: block;   /* PCナビ表示 */
  }
  .dot-nav-toggle {
    display: none;    /* ドットナビ非表示 */
  }
}

/* ▼ タブレット以下はドットナビに切り替え */
@media screen and (max-width: 1200px) {
  .pc-nav {
    display: none;    /* PCナビ非表示 */
  }
  .dot-nav-toggle {
    display: block;   /* ドットナビ表示 */
  }




}

@media screen and (max-width: 768px) {

  .hero-content h1 {
    font-size: 2rem;
  }
  .hero-content p {
    font-size: 1.2rem;
  }

  .company-hero h1 {
    font-size: 2rem;
  }
  .company-hero p {
    font-size: 1.2rem;
  }

  .container {
    width: 80%;
    margin: 0 auto;
  }

  .company-table {
    width: 90%;
    margin: 2rem auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .company-table tr {
    width: 100%;
    display: block;
    border: 1px solid var(--color-border);
    margin-bottom: 1.5rem;
    border-radius: 10px;
    overflow: hidden;
    background-color:: var(--color-bg-alt);
    box-sizing: border-box;
  }

  .company-table th,
  .company-table td {
    display: block;
    width: 100%;
    text-align: center;
    word-break: break-word; /* ← 長文が自然に折り返されるように */
    padding: 1rem;
    font-size: 1.1rem;
    border: none;
    box-sizing: border-box;
  }

  .company-table th {
    background-color:: var(--color-bg-alt);
    color: var(--color-primary);
    font-weight: bold;
    border-bottom: 1px solid var(--color-border);
  }

  .company-table td {
    background-color:: var(--color-bg-alt);
    white-space: nowrap;                 /* 改行させない */
    font-size: clamp(0.8rem, 2.8vw, 1.1rem); /* 自動で縮小 */
    overflow: hidden;                   /* はみ出し防止 */
    text-overflow: ellipsis;            /* 省略記号（...）で対応 */
  }

  .company-table ul,
  .company-table li {
    text-align: center;
    padding-left: 0;
    margin-left: 0;
  }

  .company-table li {
    white-space: nowrap;                 /* 改行させない */
    font-size: clamp(0.8rem, 2.8vw, 1.1rem); /* 自動で縮小 */
    overflow: hidden;                   /* はみ出し防止 */
    text-overflow: ellipsis;            /* 省略記号（...）で対応 */
  }






.philosophy-list {
  list-style: none;
  padding-left: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 90%;
}

.philosophy-list li {
  flex-direction: column;     /* 横並び → 縦並びに切替 */
  align-items: flex-start;  /* 👈 中央寄せを解除して左寄せ */
  text-align: left;         /* 👈 テキストも左寄せに */
  padding-left: 0;            /* 左の余白を消す */
  margin-bottom: 1.5rem;      /* 行間を少し広く */
}

.philosophy-list li strong,
.philosophy-list .bullet {
  display: block;             /* 改行 */
  margin-bottom: 0.3rem;
  margin-right: 0;
  color: var(--color-primary);
  font-weight: bold;
  text-align: left;         /* 👈 強調文字も左寄せに */  
}

  .philosophy-list li strong::after {
    content: "";
  }

  .instagram-embed-flex {
    grid-template-columns: 1fr;
  }

  .manufacturer-grid {
    grid-template-columns: 1fr;
  }

  .client-section {
    flex: 1 1 100%;
  }

  .timeline {
    width: 90%;
    margin: 0 auto;
  }

  .timeline-line {
    top: 80px;
    bottom: 0;
    left: 30px;
    transform: none;
  }

  .timeline-item {
    margin: 2rem 0;
  }

  .dot {
    left: 23px;
    transform: none;
  }

  .dot::after {
    display: none;
  }

  .timeline-content,
  .timeline-content.left,
  .timeline-content.right {
    width: auto;
    margin-left: 60px !important;
    margin-right: 0 !important;
    text-align: left;
  }

  .clients-grid {
    grid-template-columns: 1fr; /* 1列にする */
  }

  .client-section {
    min-width: auto;
    flex: 1 1 100%;
    margin-bottom: 2rem;
  }

  .manufacturer-card {
    width: 100%;
    box-sizing: border-box;
  }

  .manufacturer-card a {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  .client-section h2 {
    font-size: 1.1rem;
    text-align: center;
  }

.page-top {
  width: 50px;
  height: 50px;
  font-size: 0.75rem;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

  .pc-only {
    display: none;
  }
  .sp-only {
    display: block;
  }

  .job-box {
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    background-color: #1e2b3a;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.1);
  }

  .job-box h4 {
    margin-top: 0;
    color: var(--color-primary);
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
  }

  .job-box dl {
    margin: 0;
  }

  .job-box dt {
    font-weight: bold;
    color: #fff;
    margin-top: 0.5rem;
  }

  .job-box dd {
    margin: 0 0 0.8rem 0;
    color: #ccc;
  }

  .recruit-steps li {
    background: var(--color-bg);         /* ← 背景白に */
    color: var(--color-text);            /* ← 黒文字に */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    font-size: 0.95rem;
    padding: 1.2rem 1rem 1rem 1rem; /* 上を多めに・左調整 */
  }

  .recruit-steps li::before {
    background: var(--color-primary); /* 赤バッジ */
    color: #ffffff;                   /* 白文字 */
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.8rem;
    left: 0.8rem;
    top: 0.8rem; /* 上に配置して段落と重ならないように */
    transform: none;
  }

  .recruit-steps li strong {
    display: block;
    color: var(--color-primary);
    font-weight: bold;
    margin-left: 2.4rem; /* 番号との余白 */
    margin-bottom: 0.4rem;
  }

  .recruit-steps li strong::after {
    content: ""; /* コロン消去 */
  }

.company-overview p strong::after {
    content: ""; /* コロン消去 */
  }

  /* ▼ お知らせリスト：スマホ表示で段組みに変更 ▼ */
  .news-list li {
    flex-direction: column;
    align-items: flex-start;
  }

  .news-list .date {
    margin-bottom: 0.2rem;
  }

  .company-overview .container {
    max-width: 90%;
    margin: 0 auto;
    padding: 1rem 0;
  }

  .company-overview h3.section-title {
    font-size: 1.2rem;
    color: var(--color-primary);
    margin-top: 2rem;
    margin-bottom: 1rem;
    text-align: left;
  }

  .company-overview p,
  .company-overview address {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.2rem;
    text-align: left;
  }

  .company-overview p strong {
    display: block;
    color: var(--color-primary);
    margin-bottom: 0.3rem;
  }

  .company-overview address {
    font-style: normal; /* 通常の文章のように扱う */
  }

  .staff-card-row {
    flex-direction: column;
    align-items: center;
  }




}