/*
 * 研究室で追加したスタイル（2026-10-26 に style.css の末尾から分離）
 * style.css の後に読み込まれます。追加・修正はこのファイルに行ってください。
 */

/* 記事本文の可読性向上 */
.article-content {
  font-size: 1.1rem; /* 少し大きく */
  line-height: 1.8;   /* 行間を広げて読みやすく */
  color: #d1ecf1;       /* 真っ黒より少しグレーの方が目が疲れません */
}

.article-content p {
  margin-bottom: 1.5rem; /* 段落間の余白 */
}

/* メタ情報（日付・執筆者）のスタイル */
.article-meta {
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.article-meta span {
  display: inline-block;
}

/* 画像の装飾 */
.article-content img {
  border-radius: 8px; /* 緩やかな角丸 */
  transition: transform 0.3s ease;
}

.article-content img:hover {
  transform: scale(1.01); /* 軽いホバー効果 */
}

/* 戻るボタンのカスタマイズ */
.btn-outline-primary {
  border: 2px solid #79efb4;
  color: #fff;
  border-radius: 30px;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-outline-primary:hover {
  background-color: #79efb4;
  border-color: #79efb4;
  color: #fff;
  text-decoration: none;
}

/* --- 共通のアクセントカラー変数（既存の--primaryを活用） --- */
:root {
  --accent-color: #79efb4;
}

/* --- トップページ：キーワードカード --- */
/* キーワードカード本体のスタイル修正 */
.keyword-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #333333; /* 背景色をダークグレーに変更 */
  padding: 40px 30px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* 影を少し強めて浮かび上がらせる */
  transition: all 0.3s ease;
  border: 1px solid #444; /* 境界線を背景に近い色にして馴染ませる */
}

.keyword-card:hover {
  transform: translateY(-5px);
  border-bottom: 4px solid var(--accent-color);
}

.keyword-card .icon-circle {
  width: 60px;
  height: 60px;
  background: rgba(121, 239, 180, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--accent-color);
  font-size: 24px;
}

/* タイトル（h3）の文字色を白にする */
.keyword-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #ffffff !important; /* 文字色を白に変更 */
}

/* 本文（p）の文字色を白（または少し薄い白）にする */
.keyword-card p {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8); /* 完全に真っ白より少し透過させると読みやすくなります */
  margin-bottom: 0;
}

/* --- ニュース一覧：モダンカード --- */
.news-card-modern {
  border-radius: 15px;
  overflow: hidden;
  background: #333333;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s ease;
}

.news-card-modern:hover {
  box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.news-card-modern .category-tag {
  position: absolute;
  top: 15px;
  left: 15px;
  background: var(--accent-color);
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.news-card-modern .date {
  color: #999999;
  font-size: 13px;
  font-weight: 500;
}

.news-card-modern .heading {
  font-size: 1.1rem;
  line-height: 1.4;
  margin-bottom: 10px;
}

.news-card-modern .excerpt {
  font-size: 0.9rem;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 2行で省略 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- セクションタイトル（共通） --- */
.heading-section h2 {
  font-weight: 800;
  position: relative;
  display: inline-block;
  padding-bottom: 15px;
}

.heading-section h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background: var(--accent-color);
}

/* ニュースカードの画像サイズを固定 */
.news-card-modern .block-20 {
  height: 220px;
  background-size: cover;
  background-position: center center;
  display: block;
  position: relative;
}

/* テキストの行数制限（タイトルが長すぎる場合の対策） */
.news-card-modern .heading {
  height: 3em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ニュースカードのタイトルの高さを固定（文字数によるズレ防止） */
.news-card-modern .heading {
  font-size: 1.1rem;
  min-height: 3.2em; /* 2行分を確保 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* NEWSカードのテキストエリアを暗くし、リンクを白にする */
.news-card-modern .text {
  background: #222; /* 背景を濃いグレーに */
  transition: background 0.3s ease;
}

.news-card-modern .text h3 a {
  color: #ffffff !important; /* 文字を白に固定 */
  text-decoration: none;
}

/* ホバーした時だけアクセントカラー（緑）にする */
.news-card-modern .text h3 a:hover {
  color: #79efb4 !important;
}

/* 日付などのメタ情報も白っぽく調整 */
.news-card-modern .meta span {
  color: rgba(255, 255, 255, 0.6);
}

/* ===== プロジェクト（1行フル幅） ===== */
.project-item {
  display: flex;
  margin-bottom: 50px;
  background: #333333;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  transition: 0.3s;
}

.project-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 35px rgba(0,0,0,0.12);
}

.project-image {
  width: 40%;
  min-height: 250px;
  background-size: cover;
  background-position: center;
}

.project-text {
  width: 60%;
  padding: 30px;
}

@media (max-width: 768px) {
  .project-item {
    flex-direction: column;
  }
  .project-image,
  .project-text {
    width: 100%;
  }
}

/* ===== block-3をフル幅カード化 ===== */
.project-full {
  background: #222;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 60px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  transition: 0.3s;
}

.project-full:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 35px rgba(0,0,0,0.12);
}

/* 画像サイズ安定 */
.project-full .image {
  width: 40%;
  min-height: 260px;
  background-size: cover;
  background-position: center;
}

/* テキスト側 */
.project-full .text {
  width: 60%;
  padding: 40px;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .project-full {
    flex-direction: column;
  }
  .project-full .image,
  .project-full .text {
    width: 100%;
  }
}

.about-desc .p-5 {
  background: #222;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

/* プロジェクト・ニュースアイテム専用の四角形スタイル */
.project-item.square-style {
    border-radius: 0 !important;
    overflow: hidden; /* 子要素のはみ出しを制御 */
}

/* 画像部分の角を四角にする */
.project-item.square-style .project-image {
    border-radius: 0 !important;
}

/* ボタンを四角にする */
.project-item.square-style .btn-primary {
    border-radius: 0 !important;
    /* 必要に応じて枠線の太さなどを調整 */
}

/* テキストボックス部分の調整（枠線がある場合） */
.project-item.square-style .project-text {
    border-radius: 0 !important;
}

.project-item.square-style .project-image {
    flex: 0 0 45%;    /* 横幅 */
    aspect-ratio: 16 / 10; /* 横16:縦9の比率にする */
    
    /* heightは指定不要（比率で自動計算されます） */
    background-size: cover;
    border-radius: 0 !important;
}

/* Aboutセクション専用スタイル */
.ftco-about-section .about-img {
    background-size: cover;
    background-position: center;
    min-height: 400px; /* スマホ表示時の最低高さ */
    border-radius: 0 !important;
}

/* テキストエリアの装飾 */
.about-text {
    width: 100%;
}

.about-text h2 {
    font-weight: 700;
    color: #333;
}

/* リンクのデザインを少し整える */
.link-item {
    color: rgba(255, 255, 255, 0.85); /* 暗い背景でも読めるように（旧: #333） */
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.link-item:hover {
    color: #79efb4; /* 研究室のアクセントカラー */
    padding-left: 5px;
    text-decoration: none;
}

/* 四角形を維持 */
.square-style {
    border-radius: 0 !important;
}

/* PC表示時、画像を左に固定しテキストと高さを揃える */
@media (min-width: 768px) {
    .ftco-about-section .row {
        min-height: 550px;
    }
}

/* 画像を一切切らずに表示し、角を四角にする */
.custom-square-img {
    width: 200%;
    height: auto;      /* 高さを自動にすることで比率を維持し、切れるのを防ぐ */
    display: block;
    border-radius: 0 !important; /* 完全に四角形 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* 軽い影をつけて浮かび上がらせる */
}

/* リンクのデザイン調整 */
.link-item {
    color: rgba(255, 255, 255, 0.85); /* 暗い背景でも読めるように（旧: #333） */
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    padding: 8px 0;
    border-bottom: 2px solid transparent;
}

.link-item:hover {
    color: #79efb4; /* メインカラー */
    padding-left: 5px;
    border-bottom: 2px solid #79efb4;
    text-decoration: none;
}

/* NEWSカード内のボタン専用スタイル */
.news-card-modern .btn-primary {
    background-color: #333333; /* 通常時はダークグレー（またはお好みの色） */
    border-color: #333333;
    color: #ffffff;
    border-radius: 0 !important; /* 角を四角にする */
    transition: all 0.3s ease;    /* 変化を滑らかにする */
}

/* ホバー時にアクセントカラーに変更 */
.news-card-modern .btn-primary:hover {
    background-color: #79efb4 !important; /* アクセントカラー（緑） */
    border-color: #79efb4 !important;
    color: #333333 !important;           /* 文字を暗くして読みやすく */
}

/* ホバー時にアクセントカラーに変更 */
.project-item .btn-primary:hover {
    background-color: #79efb4 !important; /* アクセントカラー（緑） */
    border-color: #79efb4 !important;
    color: #333333 !important;           /* 文字を暗くして読みやすく */
}

/* ホバー時にアクセントカラーに変更 */
.about-desc .btn-primary:hover {
    background-color: #79efb4 !important; /* アクセントカラー（緑） */
    border-color: #79efb4 !important;
    color: #333333 !important;           /* 文字を暗くして読みやすく */
}