/* This is the StyleCatcher theme addition. Do not remove this block. */
@import url(https://rujip.net/mt/mt-static/support/theme_static/rainier/css/base.css);
@import url(https://rujip.net/mt/mt-static/support/theme_static/rainier/css/rainier-white/screen.css);
/* end StyleCatcher imports */


#header #header-inner #header-content {
  background-image: url(https://rujip.net/blogs/kabe2026/assets_c/2026/01/20251026-thumb-4096x4096-9072.jpg);
}


@font-face {
  font-family: "ancoo";
  src: url("https://2ttf.com/webfont/5Ak2K8aU9AW/webfont.ttf") format("truetype");
}

/* Sample using the font */
body {
  font-family: "ancoo";
}

a {
  text-decoration: none; /* リンクの下線をなくす */
}

.recent-entry-body {
  display: inline-block;
  width: 30%;
  margin: 1%;
  vertical-align: top;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.recent-entry-body a {
  text-decoration: none;
  color: inherit;
}

/* メインページのカード形式 */
.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between; /* カード間に均等なスペースを確保 */
}

/* 各記事カードのスタイル */
.entry-card {
  display: inline-block;
  width: 30%; /* 横並び3列 */
  margin-bottom: 20px; /* 下に余白 */
  vertical-align: top;
  text-align: center;
  border: 1px solid #ddd; /* 枠線 */
  padding: 15px; /* カード内の余白 */
  box-sizing: border-box;
  background-color: #fff;
  transition: box-shadow 0.3s ease-in-out; /* ホバー時に影をつける */
}

.entry-card:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* ホバー時に影をつける */
}

.entry-card img {
  width: 100%;
  height: auto; /* 画像の高さは自動調整 */
  border-radius: 8px; /* 角を丸く */
}

.entry-date {
  margin-top: 10px;
  font-size: 14px;
  color: #888;
}

.entry-date a {
  text-decoration: none;
  color: inherit;
}

.entry-date a:hover {
  text-decoration: underline;
}

/* Xボタン（Twitterシェアボタン）右寄せ */
.tweet-right-align {
  display: block;
  text-align: right;
}

.tweet-right-align .twitter-share-button {
  display: inline-block;
  margin-left: auto;
  margin-right: 0;
}

/* Xボタン見た目控えめ */
.twitter-share-button {
  transform: scale(0.8); /* サイズを80%に */
  transform-origin: center;
  display: inline-block;
  margin-left: auto;
  margin-right: 0; /* 右寄せ */
}

/* ナチュラルタグクラウド */
.tag-cloud .tag {
  display: inline-block;
  margin: 5px 8px;
  padding: 6px 12px;
  border-radius: 16px;
  background-color: #f9f6f1; /* ナチュラル生成り色 */
  border: 1px solid #e0dcd4;
  color: #5b4b3a;
  font-family: "ancoo", serif;
  font-size: 14px;
  transition: all 0.3s ease;
}

.tag-cloud .tag a {
  text-decoration: none;
  color: inherit;
}

.tag-cloud .tag:hover {
  background-color: #eae5df;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* タグランク別フォントサイズ */
.tag-cloud .rank-1 { font-size: 12px; }
.tag-cloud .rank-2 { font-size: 13px; }
.tag-cloud .rank-3 { font-size: 14px; }
.tag-cloud .rank-4 { font-size: 15px; }
.tag-cloud .rank-5 { font-size: 16px; }
.tag-cloud .rank-6 { font-size: 17px; }
.tag-cloud .rank-7 { font-size: 18px; font-weight: bold; }

/*記事数*/
.widget-entry-count .widget-content {
  text-align: right;
  font-size: 0.8em;
}

/* サムネイル画像のスタイル */
.entry-thumbnail {
  width: 100%;
  height: auto; /* 高さを自動調整 */
  border-radius: 8px; /* 角を丸く */
}

/* スマホやタブレット対応 */
@media screen and (max-width: 768px) {
  .image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /*justify-content: space-between; /* カード間に均等なスペースを確保 */
  }

  .entry-card {
    display: inline-block;
    width: 48%; /* 横並び2列 */
    margin-bottom: 20px; /* 下に余白 */
    vertical-align: top;
    text-align: center;
    border: 1px solid #ddd; /* 枠線 */
    padding: 15px; /* カード内の余白 */
    box-sizing: border-box;
    background-color: #fff;
    transition: box-shadow 0.3s ease-in-out; /* ホバー時に影をつける */
  }

/* プルダウンメニューのスタイル（PC・スマホ共通） */
.year-dropdown,
.category-dropdown,
.category-dropdown .sub-category {
  width: 100%;
  height: 36px;
  font-size: 1.1rem; /* ここを合わせる */
  padding: 12px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
}

/* スマホ表示用の追加調整 */
@media (max-width: 768px) {
  .year-dropdown,
  .category-dropdown,
  .category-dropdown .sub-category {
    width: 100%; /* 横幅を100%に */
    font-size: 1rem; /* 少しフォント小さくするならここに */
  }
}

  select {
    display: block;
    margin-bottom: 10px; /* 下に余白を追加 */
  }
}