@charset "UTF-8";

/* 基本設定 */

body {
  background: #303035 !important;
  color: #ffffff !important;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN",
    "Yu Gothic", "游ゴシック", "Meiryo", "メイリオ", sans-serif;
}

img {
  max-width: 100%;
}

a:link,
a:visited,
a:hover,
a:active {
  color: inherit;
  text-decoration: none;
}

/* font */

.michroma-regular {
  font-family: "Michroma", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* nav */
/* ----------------------------------- */
/* 1. 基本となる固定メニューのスタイル */
/* ----------------------------------- */
.fixed-bottom-menu {
  /* 画面下部に固定 */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;

  /* 初期状態を非表示に設定 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;

  /* その他の装飾 */
  background-color: #202025;
  font-size: 2rem;
  font-weight: bold;
  z-index: 1000;
  padding: 10px 0;
  text-align: center;
}

/* 2. 表示時にJSで付与するクラス */
.fixed-bottom-menu.is-visible {
  opacity: 1;
  visibility: visible;
}

/* 3. デバイス幅による表示制御 (768px未満は強制非表示) */
@media (max-width: 767px) {
  .fixed-bottom-menu {
    display: none !important;
  }
}

.fixed-bottom-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap; /* これを追加 */
}

.fixed-bottom-menu ul li {
  /* 区切り線のスペースを確保し、中央揃えを助けるために、
     li自体ではなくa要素にflexアイテムの役割を持たせることが多いですが、
     ここではliで完結させます。*/

  /* メニュー間の無駄な余白をリセット */
  flex-shrink: 0;
}

/* リンク要素 (a) - クリック範囲と見た目を調整 */
.fixed-bottom-menu ul li a {
  display: block;
  padding: 10px 20px; /* クリックしやすいよう上下左右にパディング */
  text-decoration: none;
}

/* ハンバーガー */



/* top-page */

.nuekawa-icon {
  width: 100%;
  border-radius: 50%;
  overflow: hidden;
  padding: 2rem 0 2rem 0;
}

.my-name-is-nuekawa {
  margin: 0 0 2rem 0;
  padding: 2rem 0 0 0;
  font-size: 4rem;
  border-bottom: 1px solid #ffffff;
}

.my-title {
  font-size: 2rem;
}

.BG-color-2 {
  background: #404045;
}

.home-section-caption {
  font-size: 2rem;
  font-weight: bolder;
  border-bottom: 1px solid #ffffff;
  margin: 2rem;
}

.link-item {
  width: 90%; /* 横幅を80%に */
  padding: 1.5rem 0;
  border: 2px solid #ffffff; /* 枠線（ライン）の色と太さ */
  border-radius: 10rem; /* 角丸の半径（高さ20pxに対し10pxでカプセル型） */
  margin: 2rem auto; /* 中央寄せと上下の余白 */
  box-sizing: border-box; /* paddingやborderをwidth/heightに含める */
  font-size: 2rem;
}

.link-item:hover {
  background: #505055;
  transition: background-color 0.2s; /* ホバー時の変化を滑らかにする */
}

.spacer-2rem {
  padding: 2rem;
}

.youtube-player {
  /* 親要素の幅いっぱいに表示するため、幅は特に指定しない（デフォルトで100%になるため） */
  width: 100%;
  position: relative;
  /* 16:9 のアスペクト比 (9 / 16 = 0.5625) */
  padding-top: 56.25%;
  height: 0;
  overflow: hidden; /* 念のため */
  margin: 2rem 0;
}

.youtube-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

footer {
  background-color: #202025;
}

.footer-menu {
  list-style: none;
}

.footer-links {
  list-style: none;
}

.footer-container {
  padding: 2rem 0 0 0;
}

.copyright {
  font-size: 0.6rem;
}

/* info */

article {
  margin-bottom: 15px; /* 記事間のスペース */
  padding-bottom: 5px;
  border-bottom: 1px solid #ffffff; /* 簡易的な区切り線 */
}

/* ヘッダー行全体をトリガーにするためのスタイル */
.post-header-row {
  display: flex; /* flexboxで要素を横並びにする */
  justify-content: space-between; /* 要素を両端に配置 */
  align-items: baseline; /* ベースラインで揃える */
  padding: 5px 0;

  /* クリック可能であることを示す */
  cursor: pointer;
  transition: background-color 0.2s; /* ホバー時の変化を滑らかにする */
}

/* ホバー時のエフェクト (クリック可能であることを強調) */
.accordion-trigger-row:hover {
  background-color: #505055;
}

/* 開いている状態の行のスタイル (オプション: 線を透明にして記事本文と一体化) */
.accordion-trigger-row.is-open {
  /* 記事本体との境目を曖昧にする */
  border-bottom: 1px solid transparent;
}

/* --- 左側（日付とタイトル）のレイアウト --- */

/* 日付とタイトルの左側コンテナ (タイトル突き抜け防止のキー) */
.post-meta-left {
  display: flex;
  align-items: baseline;
  gap: 15px; /* 日付とタイトルの間隔 */

  /* タイトルが長くなったときに縮むことを許可 */
  flex-shrink: 1;
  flex-grow: 1;
  min-width: 0; /* タイトルが縮む余地を与える */
}

/* 日付のスタイル */
.post-date {
  white-space: nowrap; /* 折り返さない */
  flex-shrink: 0; /* 幅を固定し、縮まないようにする */
}

/* タイトルを含む要素 */
.post-title-link {
  min-width: 0; /* タイトルが縮む余地を与える */
  /* 長い単語でも強制的に折り返す */
  overflow-wrap: break-word;
  word-wrap: break-word;
  color: inherit; /* 文字色を継承 */
}

/* --- 右側（カテゴリとタグ）のレイアウト --- */

/* カテゴリとタグの右側コンテナ */
.post-meta-right {
  display: flex; /* カテゴリとタグを横並びにする */
  gap: 10px; /* カテゴリとタグの間のスペース */
  align-items: baseline;
  justify-content: flex-end; /* 全体を右揃えにする */
  margin-left: 10px; /* 左側の要素との間にスペースを空ける */

  flex-shrink: 0; /* 縮まないようにする */
  white-space: nowrap; /* 折り返さない */
}

/* タグのスタイル調整 (the_tags() が出力する ul/li に対応) */
.post-meta-right .tag-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* ul/li を横並びにする */
  gap: 10px; /* タグ間のスペース */
  white-space: nowrap;
}

/* タグ個別のリンクスタイル */
.post-meta-right .tag-links a {
  text-decoration: none;
  color: inherit;
}

/* --- アコーディオンコンテンツ（記事本文）--- */

/* アコーディオンコンテンツ（記事本文）の初期状態 */
.accordion-content {
  display: none; /* 初期状態では非表示 */
  padding: 10px 0 15px 15px; /* 少しインデントして本文と分かるように */

  /* 可読性のための行間 */
  line-height: 1.6;
}

/* page, single */

.page-header {
  background: #202025;
}

.page-title {
  font-size: 3rem;
  padding: 6rem 0;
}

.page-content {
  padding: 2rem 0;
}

/*
 * 全ての見出し (h2, h3, h4, h5, h6) に共通する基本設定
 */
h2, h3, h4, h5, h6 {
    /* フォントの太さ: 読みやすいように少し太く */
    font-weight: bold;
    /* 上下の余白: コンテンツとの間に空間を作り、区切りを明確に */
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

/*
 * レベルごとの具体的なデザイン設定
 */

/* H2: セクションタイトル - 大きく、下に線を引いて強調 */
h2 {
  font-size: 2.5rem;
  padding: 0.5rem 1rem;
  background-color: #606065;
  margin-left: 0;
}

/* H3: 小見出し - 中くらいのサイズ、左側にシンプルなボーダー */
h3 {
    font-size: 2.5rem;
    padding-left: 1rem; /* ボーダーと文字の間に隙間 */
    border-left: 5px solid #ffffff; /* 水色の縦線で区切り */
}

/* H4: さらに細かい見出し - やや小さく、背景色で目立たせる */
h4 {
  font-size: 2rem;
  padding-left: 0.5rem;
  border-bottom: 1px solid #ffffff;
}