/* 追加の最小スタイル（Tailwindの補助） */
.cta-button { position: relative; overflow: hidden; transition: all .3s ease; }
.cta-button::before { content:''; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:9999px; background:rgba(255,255,255,.2); transform:translate(-50%,-50%); transition:width .6s,height .6s; }
.cta-button:hover::before { width:300px; height:300px; }
.cta-button:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(59,130,246,.4); }

/* Aspect Ratio Utility */
.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-\[4\/3\] {
  aspect-ratio: 4 / 3;
}

/* Line Clamp Utility */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

@media (min-width: 768px) {
  .md-line-clamp-2 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}

/* スライダー レイアウト調整 */
.case-track { width: 300%; }
.case-card { width: 100%; }

/* カスタムフォントサイズ */
  .text-2xl {
    font-size: 2.5rem !important;
  }
  
  .text-4xl {
    font-size: 1.7rem !important;
  }

/* 全体的なline-height調整 */
.text-xl {
    line-height: 1.6 !important;
}

.text-2xl {
    line-height: 1.5 !important;
}

.text-3xl {
    line-height: 1.4 !important;
}

.text-4xl {
    line-height: 1.3 !important;
}

.text-5xl {
    line-height: 1.2 !important;
}

.text-6xl {
    line-height: 1.1 !important;
}

/* clamp()で指定されたテキストのline-height */
.text-\[clamp\(1\.5rem\,3vw\,2\.5rem\)\] {
    line-height: 1.5 !important;
}

.text-\[clamp\(1rem\,2vw\,1\.25rem\)\] {
    line-height: 1.6 !important;
}

.text-\[clamp\(2rem\,4vw\,3rem\)\] {
    line-height: 1.4 !important;
}

/* 見出しの余白調整 */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.3 !important;
}

/* 段落の余白調整 */
p {
    line-height: 1.7 !important;
}

/* プロジェクトカードのテキスト */
.prose p {
    line-height: 1.8 !important;
}

/* カスタム高さ */
.h-14 {
    height: 3.0rem !important;
}

/* 料金プランセクションのh3専用フォントサイズ */
.pricing-h3 {
    font-size: 1.8rem !important;
}

/* ルビ（傍点）のフォントサイズ調整 */
ruby rt {
    font-size: 1.2em !important;
}

/* アニメーション付き背景パターン */
.animated-bg {
    position: relative;
    overflow: hidden;
    background: #f1f5f9;
}

.animated-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle 200px at 20% 20%, rgba(59, 130, 246, 0.3) 0%, transparent 50%),
        radial-gradient(circle 300px at 80% 80%, rgba(99, 102, 241, 0.25) 0%, transparent 50%),
        radial-gradient(circle 250px at 50% 50%, rgba(59, 130, 246, 0.2) 0%, transparent 50%);
    animation: float 15s ease-in-out infinite;
    z-index: 0;
}

.animated-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle 180px at 60% 40%, rgba(99, 102, 241, 0.25) 0%, transparent 50%),
        radial-gradient(circle 220px at 40% 60%, rgba(59, 130, 246, 0.2) 0%, transparent 50%);
    animation: float 12s ease-in-out infinite reverse;
    z-index: 0;
}

.animated-bg > * {
    position: relative;
    z-index: 1;
}

@keyframes float {
    0% {
        transform: translateY(0px) translateX(0px) scale(1) rotate(0deg);
        opacity: 0.6;
    }
    25% {
        transform: translateY(-30px) translateX(25px) scale(1.3) rotate(90deg);
        opacity: 1;
    }
    50% {
        transform: translateY(-15px) translateX(-20px) scale(0.8) rotate(180deg);
        opacity: 0.7;
    }
    75% {
        transform: translateY(25px) translateX(15px) scale(1.2) rotate(270deg);
        opacity: 0.9;
    }
    100% {
        transform: translateY(0px) translateX(0px) scale(1) rotate(360deg);
        opacity: 0.6;
    }
}

/* マウス追従アニメーション */
.mouse-follow-bg {
    position: relative;
    overflow: hidden;
    background: #ffffff;
}

.mouse-follow-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle 300px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(59, 130, 246, 0.15) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.mouse-follow-bg:hover::before {
    opacity: 1;
}

.mouse-follow-bg > * {
    position: relative;
    z-index: 1;
}

/* トカテック専用フォント（一時無効化） */

/* 背景画像無限スクロール */
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.scroll-bg {
  overflow: hidden;
}

.scroll-bg__wrap {
  display: flex;
  width: 200%;
}

.scroll-bg__list {
  display: flex;
  width: 100%;
  animation: infinity-scroll-left 60s infinite linear;
}

.scroll-bg__item {
  width: 100vw;
  height: 518px;
  background-image: url('../images/mv.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .scroll-bg__item {
    height: 500px;
    background-size: cover;
  }
  
  .hero {
    height: 500px !important;
  }
}

@media (max-width: 480px) {
  .scroll-bg__item {
    height: 400px;
    background-size: cover;
  }
  
  .hero {
    height: 400px !important;
  }
}

/* タブレット対応 */
@media (min-width: 769px) and (max-width: 1024px) {
  .scroll-bg__item {
    height: 400px;
  }
  
  .hero {
    height: 400px !important;
  }
}

/* 全体的なレスポンシブ対応 */
@media (max-width: 768px) {
  /* ナビゲーション */
  nav {
    padding: 0.5rem 1rem;
  }
  
  nav img {
    height: 1.2rem;
  }
  
  nav a {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    white-space: nowrap;
  }
  
  /* ヘッダー全体の調整 */
  header {
    padding: 0.3rem 0;
  }
  
  /* ロゴの高さ調整 */
  .h-8 {
    height: 1.5rem !important;
  }
  
  /* 無料相談ボタンの調整 */
  nav .inline-flex {
    gap: 0.25rem;
  }
  
  nav .material-symbols-outlined {
    font-size: 1rem;
  }
  
  /* ヒーローセクション */
  .hero h1, .hero p {
    font-size: clamp(1rem, 5vw, 1.5rem) !important;
    line-height: 1.1;
    margin-bottom: 0.75rem;
  }
  
  .hero p {
    font-size: clamp(0.75rem, 3vw, 0.9rem);
    line-height: 1.3;
  }
  
  /* メインキャッチの改行防止 */
  .hero .whitespace-nowrap {
    white-space: nowrap !important;
    display: inline !important;
  }
  
  /* セクション間隔 */
  .py-24 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  /* セクション1の人物イラスト調整 */
  .h-full {
    height: 39% !important;
  }
  
  /* News&Columnセクションと記事一覧のサムネイル途切れ防止 */
  /* 記事一覧ページ（/news/）のサムネイル調整 */
  .aspect-video {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }
  
  .aspect-video img {
    height: 100% !important;
    object-fit: cover !important;
  }
  
  /* TOPページのNews&Columnサムネイル調整 */
  .news-section .w-24.h-24 {
    height: 6rem !important;
  }
  
  .news-section .w-24.h-24 img {
    height: 100% !important;
    object-fit: cover !important;
  }
  
  /* 人物イラストの位置調整 */
  .absolute.right-0 {
    right: -10% !important;
    bottom: -18% !important;
    z-index: 0 !important;
  }
  
  /* セクション1のテキスト改行防止 */
  .about .prose p {
    font-size: clamp(0.9rem, 3.5vw, 1.1rem) !important;
    line-height: 1.7 !important;
    white-space: nowrap !important;
    margin-bottom: 0.75rem !important;
  }
  
  .about .prose .font-bold {
    font-size: clamp(1.2rem, 5vw, 1.5rem) !important;
    white-space: nowrap !important;
  }
  
  .px-5 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* 見出しサイズ */
  .text-[clamp(2rem,4vw,3rem)] {
    font-size: clamp(1.2rem, 5vw, 1.5rem) !important;
  }
  
  /* 全体的なフォントサイズ調整 */
  .text-xl {
    font-size: 1rem !important;
  }
  
  .text-2xl {
    font-size: 1.25rem !important;
  }
  
  .text-3xl {
    font-size: 1.5rem !important;
  }
  
  .text-lg {
    font-size: 0.95rem !important;
  }
  
  /* サービスカード */
  .service-card .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  
  .service-card .pr-96 {
    padding-right: 1rem !important;
  }
  
  .service-card .absolute.right-6 {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    height: 200px !important;
    margin-bottom: 1rem;
  }
  
  /* プロセスセクション */
  .step-card {
    padding: 1.5rem !important;
  }
  
  .step-card .absolute.right-6 {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    height: 200px !important;
    margin: 1rem 0;
  }
  
  .step-card .pr-96 {
    padding-right: 1rem !important;
  }
  
  /* 料金プラン */
  .pricing .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  
  .pricing .max-w-6xl {
    max-width: 100%;
  }
  
  /* チームセクション */
  .team .grid {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
  
  .team .w-40 {
    width: 200px !important;
    height: 200px !important;
  }
  
  /* スマホでの画像表示改善 */
  .team .w-48 {
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    aspect-ratio: 1 !important;
  }
  
  .team .w-40 {
    width: 100% !important;
    max-width: 250px !important;
    height: auto !important;
    aspect-ratio: 1 !important;
  }
  
  /* サービスカードの画像表示改善 */
  .service-card .w-full.h-80 {
    height: 250px !important;
    width: 100% !important;
  }
  
  /* サービスカードの画像のみ左右途切れ防止 */
  .service-card img {
    width: 100% !important;
    height: 100% !important;
  }
  
  /* STEPカードの画像表示改善 */
  .step-card .absolute.right-6 {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 300px !important;
    height: 200px !important;
    margin: 1rem auto !important;
  }
  
  .step-card .pl-0.md\:pl-20.pr-96 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  
  /* 画像のobject-fit調整 */
  .team img,
  .step-card img,
  .changes img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* グリッドレイアウト全般 */
  .grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  
  .grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  
  /* 問題カードの自動スライダー */
  section.problems .grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  
  section.problems .grid::-webkit-scrollbar {
    display: none !important;
  }
  
  section.problems .problem-card {
    flex: 0 0 calc(100vw - 2.6rem) !important;
    min-width: calc(100vw - 2.6rem) !important;
    margin-right: 0.3rem !important;
  }
  
  section.problems .max-w-7xl {
    padding-left: 0.3rem !important;
    padding-right: 0.3rem !important;
  }
  
  /* STEP1-3のスライダー表示 */
  section.process .space-y-12 {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 1rem !important;
  }
  
  section.process .space-y-12::-webkit-scrollbar {
    display: none !important;
  }
  
  section.process .step-card {
    flex: 0 0 calc(100vw - 2rem) !important;
    min-width: calc(100vw - 2rem) !important;
    margin-bottom: 0 !important;
    height: auto !important;
    min-height: 500px !important;
  }
  
  /* STEPカードの番号丸を小さく */
  section.process .step-card .w-16 {
    width: 2rem !important;
    height: 2rem !important;
    font-size: 1rem !important;
  }
  
  /* ケーススタディのカード幅調整 */
  section.case-studies .case-card {
    max-width: calc(100vw - 2rem) !important;
  }
  
  section.case-studies .case-card .bg-gradient-to-br {
    padding: 1.5rem !important;
  }
  
  section.case-studies .case-card h3 {
    font-size: 1.1rem !important;
  }
  
  section.case-studies .case-card .text-lg {
    font-size: 0.9rem !important;
  }
  
  section.case-studies .case-card h4 {
    font-size: 0.9rem !important;
  }
  
  section.case-studies .case-card li,
  section.case-studies .case-card p {
    font-size: 0.85rem !important;
  }
  
  /* text-xlクラスのスマホ時フォントサイズ調整 */
  .text-xl {
    font-size: 1.4rem !important;
  }
  
  /* サービスカードの見出しフォントサイズ調整 */
  section.services .service-card h3 {
    font-size: 1.7rem !important;
  }
  
  /* サービスカードのサブコピー調整 */
  section.services .service-card .text-gray-600.text-lg {
    font-weight: 600 !important;
    font-size: 1.25rem !important;
  }
  
  /* サービスカードの説明部分フォントサイズ調整 */
  section.services .service-card p {
    font-size: 0.85rem !important;
  }
  
  /* サービスカードのレイアウト調整（スマホでは縦並び） */
  section.services .service-card .grid {
    grid-template-columns: 1fr !important;
  }
  
  section.services .service-card .grid > div:last-child {
    margin-top: 2rem !important;
  }
  
  /* サービスカードのパディング調整（スマホ） */
  section.services .service-card {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  
  /* チームメンバースライダー（スマホ） - 首都圏チームのみ */
  section.team > div > div:last-child > div > .grid.grid-cols-1.md\:grid-cols-3 {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 1rem !important;
    padding-right: 1rem !important;
  }
  
  section.team > div > div:last-child > div > .grid.grid-cols-1.md\:grid-cols-3::-webkit-scrollbar {
    display: none !important;
  }
  
  section.team > div > div:last-child > div > .grid.grid-cols-1.md\:grid-cols-3 > div {
    flex: 0 0 calc(100vw - 5rem) !important;
    min-width: calc(100vw - 5rem) !important;
  }
  
  
  
  
  /* スライダーインジケーター */
  section.process .step-indicators {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-top: 1.5rem !important;
  }
  
  section.process .step-indicators .indicator-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: #d1d5db !important;
    transition: background-color 0.3s !important;
  }
  
  section.process .step-indicators .indicator-dot.active {
    background-color: #3b82f6 !important;
    width: 12px !important;
    height: 12px !important;
  }
  
  
  /* フォーム */
  .contact-form .grid {
    grid-template-columns: 1fr !important;
  }
  
  /* 実績スライダー */
  .case-slider {
    overflow-x: hidden;
  }
  
  /* スライダー共通設定 - PC・スマホ共通 */
  .case-slider {
    overflow-x: hidden;
  }
  
  .case-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  
  .case-card {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
  
  /* スマホ用画像ポップアップ */
  @media (max-width: 768px) {
    .service-thumbnail {
      cursor: pointer;
    }
    
    .service-thumbnail:hover {
      opacity: 0.8;
    }
  }
}

/* より小さい画面用の追加調整 */
@media (max-width: 480px) {
  /* ヒーローセクション - より小さく */
  .hero h1, .hero p {
    font-size: clamp(0.9rem, 4vw, 1.2rem) !important;
    line-height: 1.1;
    margin-bottom: 0.5rem;
  }
  
  .hero p {
    font-size: clamp(0.7rem, 2.5vw, 0.8rem);
    line-height: 1.2;
  }
  
  /* さらに小さなフォントサイズ */
  .text-xl {
    font-size: 0.9rem !important;
  }
  
  .text-2xl {
    font-size: 1.1rem !important;
  }
  
  .text-3xl {
    font-size: 1.3rem !important;
  }
  
  .text-lg {
    font-size: 0.85rem !important;
  }
  
  /* 小画面でのヘッダー調整 */
  nav {
    padding: 0.3rem 0.75rem;
  }
  
  header {
    padding: 0.2rem 0;
  }
  
  .h-8 {
    height: 1.2rem !important;
  }
  
  nav img {
    height: 1rem;
  }
  
  nav a {
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
  }
  
  nav .inline-flex {
    gap: 0.2rem;
  }
  
  /* パディング調整 */
  .hero .max-w-5xl {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  /* セクション間隔をさらに縮小 */
  .py-24 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}

/* HairDevotion経営専用のスタイル */
.font-medium {
  font-weight: 500;
}

/* スマホでのサムネ画像表示改善 */
@media (max-width: 768px) {
  /* 実績紹介セクションの画像アスペクト比調整 */
  .gallery .aspect-\[16\/10\] {
    aspect-ratio: 4/3 !important;
    min-height: 200px !important;
  }
  
  /* 画像の表示方法を調整 */
  .gallery img {
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* グリッドレイアウトの調整 */
  .gallery .grid {
    gap: 1rem !important;
  }
  
  /* カードのパディング調整 */
  .gallery .p-6 {
    padding: 1rem !important;
  }
}

/* より小さい画面での追加調整 */
@media (max-width: 480px) {
  /* 実績紹介セクションの画像をさらに調整 */
  .gallery .aspect-\[16\/10\] {
    aspect-ratio: 3/2 !important;
    min-height: 180px !important;
  }
  
  /* 画像の表示を最適化 */
  .gallery img {
    object-fit: cover !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* カードのパディングをさらに調整 */
  .gallery .p-6 {
    padding: 0.75rem !important;
  }
  
  /* テキストサイズの調整 */
  .gallery h4 {
    font-size: 1rem !important;
  }
  
  .gallery p {
    font-size: 0.8rem !important;
  }
}

/* 記事詳細用スタイル */
.article-content {
  color: #334155;
  line-height: 1.9;
  font-feature-settings: "palt";
}

/* 見出し */
.article-content h1 {
  /* h1はページタイトルとして別途スタイルされているため、記事内では基本的に使わないが念のため */
  font-size: 2rem;
  font-weight: 800;
  color: #1e293b;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e2e8f0;
}

.article-content h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  margin-top: 4rem;
  margin-bottom: 2rem;
  padding: 1rem 1.5rem;
  background-color: #f8fafc;
  border-left: 6px solid #3b82f6;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.article-content h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #334155;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #3b82f6;
  display: inline-block;
}

/* リスト */
.article-content ul,
.article-content ol {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  padding: 1.5rem 2rem;
  background-color: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.article-content ul {
  list-style: none;
}

.article-content ol {
  list-style: none;
  counter-reset: article-counter;
}

.article-content li {
  margin-bottom: 0.75rem;
  line-height: 1.7;
  position: relative;
  padding-left: 1.5rem;
}

.article-content li:last-child {
  margin-bottom: 0;
}

/* ulマーカー */
.article-content ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  background-color: #3b82f6;
  border-radius: 50%;
}

/* olマーカー */
.article-content ol > li {
  padding-left: 2rem;
}

.article-content ol > li::before {
  counter-increment: article-counter;
  content: counter(article-counter);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #3b82f6;
  color: white;
  font-size: 0.85em;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* ネストされたリスト */
.article-content ul ul,
.article-content ol ol,
.article-content ul ol,
.article-content ol ul {
  margin-top: 0.75rem;
  margin-bottom: 0;
  padding: 0;
  background-color: transparent;
  border: none;
  padding-left: 1rem;
}

.article-content ul ul > li::before {
  background-color: transparent;
  border: 2px solid #3b82f6;
}

/* テーブル */
.article-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 2rem;
  margin-bottom: 2rem;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
}

.article-content th {
  background-color: #f1f5f9;
  color: #334155;
  font-weight: 700;
  padding: 1rem;
  text-align: left;
  border-bottom: 2px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
}

.article-content th:last-child {
  border-right: none;
}

.article-content td {
  padding: 1rem;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  background-color: white;
}

.article-content td:last-child {
  border-right: none;
}

.article-content tr:last-child td {
  border-bottom: none;
}

.article-content tr:hover td {
  background-color: #f8fafc;
}

/* その他要素 */
.article-content a {
  color: #2563eb;
  text-decoration: none;
  border-bottom: 1px solid #2563eb;
  transition: all 0.2s;
  font-weight: 500;
}

.article-content a:hover {
  color: #1d4ed8;
  border-bottom-width: 2px;
  background-color: rgba(37, 99, 235, 0.05);
}

.article-content strong {
  background: linear-gradient(transparent 70%, #bfdbfe 70%);
  padding: 0 0.2em;
  font-weight: 700;
  color: #1e293b;
}

.article-content em {
  font-style: normal;
  font-weight: bold;
  color: #f59e0b;
}

.article-content blockquote {
  border-left: 4px solid #cbd5e1;
  padding: 1.5rem;
  margin: 2rem 0;
  background-color: #f8fafc;
  color: #475569;
  font-style: italic;
  border-radius: 0 8px 8px 0;
}

.article-content code {
  background-color: #f1f5f9;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 0.9em;
  color: #ef4444;
  border: 1px solid #e2e8f0;
}

.article-content pre {
  background-color: #1e293b;
  color: #f8fafc;
  padding: 1.5rem;
  border-radius: 12px;
  overflow-x: auto;
  margin: 2rem 0;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.article-content pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
  border: none;
}

.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 2rem auto;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  display: block;
}

.article-content hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, #cbd5e1, transparent);
  margin: 4rem 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .article-content h1 {
    font-size: 1.75rem;
  }
  
  .article-content h2 {
    font-size: 1.3rem;
    padding: 0.75rem 1rem;
    margin-top: 3rem;
  }
  
  .article-content h3 {
    font-size: 1.25rem;
  }
  
  .article-content table {
    font-size: 0.8rem;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  .article-content th,
  .article-content td {
    padding: 0.75rem;
  }
  
  .article-content ul,
  .article-content ol {
    padding: 1rem 1.25rem;
  }
}