/*
Theme Name: TeckLabo-F
Author: h.f
Version: 1.0
Description: This is a custom theme for a portfolio and blog site.
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* リセットCSSはそのまま */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* bodyの基本スタイル */
body {
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', YuGothic, 'メイリオ', Meiryo, sans-serif;
    line-height: 1.7; 
    color: #111;
    background: #fff;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ページ全体のメインコンテンツ */
main {
  flex-grow: 1; /* メインコンテンツが利用可能なスペースをすべて占める */
}

a {
  color: #007acc;
  text-decoration: none;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Header */
header {
  background-color: #E8E8E8;
  border-bottom: 1px solid #ccc;
  position: sticky;
  top: 0;
  z-index: 100;
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0; /* ヘッダー内のパディングを直接指定 */
}

/* h1を中央揃え */
header h1 {
  font-size: 2.0rem; 
  margin: 0;
  font-weight: 700; 
  letter-spacing: -0.5px; 
  color: #1a1a1a; 
}

/* ナビゲーションを右寄せに */
nav {
  display: flex;
  justify-content: flex-end;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

nav ul li a {
  color: #555; 
  text-decoration: none;
  padding: 5px 0;
  position: relative;
  transition: color 0.3s ease;
}

/* ナビゲーションのホバー・アクティブエフェクト */
nav ul li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0; /* または -5px など、調整 */
  width: 0; /* 初期幅は0 */
  height: 2px;
  background-color: #007acc; /* アクセントカラー */
  transition: width 0.3s ease;
}

nav ul li a:hover {
  color: #007acc;
}

nav ul li a:hover::after {
  width: 100%; /* ホバー時に100%に */
}

/* Hero */
.main {
  background-image: url('img/tecklab_main2.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 285px 0;
  text-align: left;
}

.main h2 {
  font-size: 2rem; 
   margin-bottom: 1rem;
   color: #fff;
   font-weight: 700;
}

.main p {
  color: #fff;
}

/* Section */
.section {
  padding: 60px 0;
}

.section h2 {
  font-size: 2rem;
   margin-bottom: 1rem;
   font-weight: 700;
}

.section h3 {
  font-size: 1.2rem;
  margin-top: 1.2rem;
  margin-bottom: 0.8rem;
}

/* About セクションの調整 */
#about .container p {
  max-width: 850px;
  margin-bottom: 2rem;
}

.skill-title {
  margin-bottom: 2rem;
  position: relative;
}

/* スキルカードを並べるグリッドコンテナ */
.skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

/* 個別のスキルカード */
.skill-card {
  background-color: #f8f8f8; /* 背景色を付けて区切りを明確に */
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* 軽い影で立体感を */
  border-left: 5px solid #007acc; /* アクセントライン */
  transition: transform 0.3s ease;
}

.skill-card:hover {
  transform: translateY(-5px); /* ホバーで少し浮き上がらせる */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.skill-card h4 {
  font-size: 1.1rem;
  color: #1a1a1a;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.skill-card h4 i {
  color: #007acc;
  margin-right: 10px;
}

.skill-card p {
  font-size: 0.95rem;
  color: #555;
  margin: 0;
}

/* Aboutセクションの自己紹介文章の整形 */
.about-text {
	　display: block;
	　margin-top: 1.5rem;
    margin-bottom: 2rem !important; 
}

/* メディアクエリ：モバイルでは max-width を解除し、通常表示に戻します */
@media (max-width: 768px) {
    .about-text {
        max-width: 100%;
    }
}

/* 最新記事セクションのレイアウト調整 */
#latest-posts {
    /* AboutやWorksと同様に padding: 60px 0; が .section により適用されています */
    background-color: #f9f9f9; /* 背景色を付けてAboutやWorksと視覚的に区切る（任意） */
}

#latest-posts h2 {
    /* サイトの見出しスタイルに合わせる */
    font-size: 2rem;
    margin-bottom: 2rem;
    font-weight: 700;
}

/* ブログ一覧へ移動するCTAボタンのラッパー */
.blog-cta-wrapper {
    text-align: center;
    margin-top: 40px; 
}

/* ブログ一覧へ移動するCTAボタンのスタイル */
.blog-cta {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007acc; 
    color: #fff !important;
    border-radius: 5px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.blog-cta:hover {
    background-color: #005f99;
}

/* Works */
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
  gap: 30px;
  margin-top: 30px;
}

/* 既存のwork-itemの上書き (margin-bottom: 40px を解消) */
.work-item {
  margin-bottom: 0 !important; 
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.work-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.work-item img {
  width: 100%;
  height: auto; 
  display: block;
  border-radius: 0; 
  margin-bottom: 0; 
  max-width: none; 
}

.work-detail {
  padding: 15px;
  background-color: #fff;
}

.work-detail h4 {
  font-size: 1.2rem;
  margin: 0 0 5px;
  color: #1a1a1a;
}

.work-detail p {
  font-size: 0.9rem;
  color: #666;
  margin: 0;
}

/* Worksの詳細タイトルの強調 */
.work-detail h4 {
    font-size: 1.3rem; /* 既存の 1.2rem から少し大きく */
    margin: 0 0 5px;
    color: #1a1a1a;
    font-weight: 700; /* 強調 */
}

/* Worksのボタン（CTA）のスタイル */
.work-cta {
    display: block;
    text-align: center;
    padding: 8px 0;
    margin-top: 10px;
    background-color: #007acc;
    color: #fff !important;
    border-radius: 0 0 8px 8px; 
    font-size: 0.9rem;
    font-weight: 700;
    transition: background-color 0.3s ease;
}

.work-cta:hover {
    background-color: #005f99; 
}

/* Footer */
footer {
  background: #111;
  color: #fff;
  text-align: center;
  font-size: 0.9rem;
  width: 100%;
}

.footer-container {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 60px 0;
}

/* Animation */
.fadein {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.fadein.show {
  opacity: 1;
  transform: translateY(0);
}

/* Media Queries for Responsive Design */
@media (max-width: 768px) {
  .container {
      width: 95%;
  }

  /* Header */
  header .container {
      flex-direction: column;
      padding-top: 15px;
  }

  header h1 {
      font-size: 1.5rem;
      margin-bottom: 10px;
  }

  nav ul {
      flex-direction: column;
      align-items: center;
      gap: 10px;
  }
	
  #gnav ul li a {
    color: #333;
    padding: 15px 0; 
  }

  /* ハンバーガーメニューボタンのスタイル */
  .menu-btn {
      position: fixed;
      top: 15px;
      right: 15px;
      width: 40px;
      height: 40px;
      cursor: pointer;
      z-index: 200;
  }

  .menu-btn span {
      display: inline-block;
      width: 100%;
      height: 2px;
      background-color: #333;
      position: absolute;
      transition: 0.4s ease;
  }

  .menu-btn span:nth-of-type(1) {
      top: 10px;
  }

  .menu-btn span:nth-of-type(2) {
      top: 19px;
  }

  .menu-btn span:nth-of-type(3) {
      top: 28px;
  }

  /* ハンバーガーメニューがクリックされたときのスタイル */
  .menu-btn.active span:nth-of-type(1) {
      top: 19px;
      transform: rotate(45deg);
  }

  .menu-btn.active span:nth-of-type(2) {
      opacity: 0;
  }

  .menu-btn.active span:nth-of-type(3) {
      top: 19px;
      transform: rotate(-45deg);
  }

  /* ナビゲーションメニューのスタイル */
  #gnav {
      position: fixed;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100vh;
      background: rgba(255, 255, 255, 0.95);
      z-index: 150;
      transition: 0.5s ease-in-out;
  }

  #gnav.panelactive {
      left: 0;
  }

  #gnav ul {
      flex-direction: column;
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }

  #gnav ul li a {
      font-size: 1.2rem;
      padding: 10px 0;
      display: block;
      color: #333;
  }

  /* Main Section */
  .main {
      padding: 60px 0;
      background-size: cover;
  }

  .main h2 {
      font-size: 1.5rem;
      margin-bottom: 0.5rem;
  }

  .main p {
      font-size: 1.0rem;
  }

  /* Sections */
  .section {
      padding: 40px 0;
  }

  /* Works */
  .work-item img {
      max-width: 100%;
  }
}

@media (max-width: 576px) {
  .main h2 {
      font-size: 0.9rem;
  }

  .main p {
      font-size: 0.6rem;
  }
}

/* ...既存のCSSはそのまま... */

/* ----------------------------------- */
/* ブログ一覧ページ用 */
/* ----------------------------------- */
#blog {
  padding-top: 60px;
}

#blog h2 {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 2rem;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.blog-post {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-post:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.blog-post a {
  display: block;
  color: #111;
}

.blog-post img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.post-content {
  padding: 15px;
}

.blog-post h3 {
  font-size: 1.2rem;
  margin: 0 0 10px;
  line-height: 1.4;
}

.blog-post .post-date {
  font-size: 0.8rem;
  color: #666;
  margin: 0;
}

.blog-post p {
  font-size: 0.9rem;
  margin: 10px 0 0;
}

/* カテゴリ一覧表示ページ用CSS */
.all-categories-list {
    margin-top: 30px;
}

.category-section {
    margin-bottom: 40px; /* カテゴリ間の間隔 */
    padding-bottom: 20px;
    border-bottom: 1px solid #eee; /* 区切り線 */
}

.category-section h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.category-section h3 a {
    color: #1a1a1a; /* リンク色 */
    text-decoration: none;
    transition: color 0.3s;
}

.category-section h3 a:hover {
    color: #007acc; /* ホバー色 */
}

.category-section ul {
    list-style: disc inside;
    padding-left: 20px;
}

.category-section ul li {
    margin-bottom: 5px;
}

/* ----------------------------------- */
/* 記事詳細ページ用 */
/* ----------------------------------- */
#single-post {
  padding: 60px 0;
}

.post-title {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.post-date {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 20px;
}

.post-image {
    max-width: 700px; 
    width: 100%;  
    margin: 0 auto 30px; 
    height: auto;
    border-radius: 8px;
}

.post-image img {
    width: 100%;
    height: auto;
    display: block;
}

.post-body h3 {
  font-size: 1.5rem;
  margin-top: 30px;
  margin-bottom: 10px;
}

.post-body p {
  margin-bottom: 20px;
}

.post-body ul {
  list-style-position: inside;
  margin-left: 20px;
}

.post-body pre {
  background-color: #f4f4f4;
  padding: 15px;
  border-radius: 5px;
  overflow-x: auto;
  margin-bottom: 20px;
}

/* ----------------------------------- */
/* 記事本文内の特殊レイアウト用 */
/* ----------------------------------- */

/* 2つの要素を横並びにするためのコンテナ */
.two-column-layout {
    display: flex;
    flex-wrap: wrap; 
    gap: 20px; 
    margin: 30px 0; 
    align-items: flex-start; 
}

/* 横並びにする要素（図、表など）に適用するクラス */
.two-column-layout > * {
    flex: 1 1 45%; 
    min-width: 280px; 
}

/* 真理値表など、幅が狭くてもよい要素のためのクラス */
.two-column-layout .narrow-item {
    flex-basis: 30%;
    flex-grow: 0;
    min-width: 200px;
}

/* モバイル対応：768px以下で縦並びに戻す */
@media (max-width: 768px) {
    .two-column-layout {
        flex-direction: column; 
    }
    /* 縦並びの際には幅を100%にする */
    .two-column-layout > *, 
    .two-column-layout .narrow-item {
        width: 100%;
        min-width: unset;
    }
}

/* ★ 記事本文（.post-body）内の全ての画像に適用するCSSを追加 */
.post-body img {
    max-width: 100%; 
    height: auto; 
    display: block;
}
/* ----------------------------------- */
/* 記事詳細ページ用 - レイアウト修正 */
/* ----------------------------------- */

/* 2カラムレイアウト用のラッパー */
.content-area {
    display: flex;
    gap: 40px; 
    align-items: flex-start;
}

/* メインコンテンツエリアの幅を設定 */
.main-content {
    flex: 1 1 70%;
    order: 0; 
}

/* サイドバーの幅を設定 */
.sidebar-menu {
    width: 300px; 
    order: 1; 
    
    /* サイドバーの装飾 */
    padding: 20px;
    background-color: #f7f7f7;
    border-radius: 8px;
    
    /* サイドバー内のリストスタイルを調整 */
    list-style: none;
    margin: 0;
}

.sidebar-menu h3 {
    font-size: 1.3rem;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid #007acc; /* 例として下線を追加 */
    padding-bottom: 5px;
}

.sidebar-menu ul {
    list-style: none;
    padding: 0;
}

.sidebar-menu ul li {
    margin-bottom: 8px;
}

/* モバイルでの調整（768px以下で縦並びに戻す） */
@media (max-width: 768px) {
    .content-area {
        flex-direction: column; /* 縦並びに戻す */
    }
    .main-content, .sidebar-menu {
        width: 100%; /* 幅を100%にする */
        order: initial; /* 順序をリセットし、HTMLの順に戻す */
    }
    .sidebar-menu {
        margin-top: 20px;
    }
}

/* ----------------------------------- */
/* 記事詳細ページ用 - サイドバーコンテンツ */
/* ----------------------------------- */

/* サイドバー内の各ウィジェット/セクションのデザイン */
.sidebar-menu > div {
    margin-bottom: 30px; /* 各ウィジェット間の余白 */
}

/* カテゴリ一覧（widget-category）と最新記事（widget-recent-posts）の見出し */
.sidebar-menu .widget-category h3,
.sidebar-menu .widget-recent-posts h3 {
    font-size: 1.2rem;
    margin-top: 0; /* aside.sidebar-menu h3 のスタイルを上書き */
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 2px solid #007acc;
    font-weight: 700;
}

/* カテゴリリスト（wp_list_categoriesが出力するli要素全体） */
.sidebar-menu ul li {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #ccc; /* リストの区切り線 */
}

.sidebar-menu ul li a {
    display: block;
    color: #555;
    transition: color 0.3s;
    /* 投稿件数を含む場合でも綺麗に表示されるように調整 */
}

.sidebar-menu ul li a:hover {
    color: #007acc;
}

/* カテゴリの投稿件数（もしwp_list_categoriesで表示している場合） */
.sidebar-menu ul li span {
    color: #999;
    font-size: 0.85rem;
    margin-left: 5px;
}