/*
Theme: 映画ブログ用テーマ
Author: [あなたの名前]
Responsive: yes
Description:
白・黒・グレーを基調とした、映画ブログに最適なミニマルデザイン。
*/

/* -------------------------------------------
グローバル設定
------------------------------------------- */
/* フォント、行間、背景色などを設定します */
body {
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif;
line-height: 1.8;
background-color: #ffffff;
color: #333;
}

/* リンク */
a {
color: #666;
text-decoration: none;
transition: color 0.3s;
}

a:hover {
color: #000;
text-decoration: underline;
}

/* -------------------------------------------
ヘッダー
------------------------------------------- */
#blog-title {
text-align: center;
background-color: #333; /* 濃いグレーの背景 */
padding: 40px 20px;
border: none;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* 影を強く */
margin-bottom: 40px;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}

#blog-title-inner {
text-align: center;
}

#blog-title a {
font-size: 1em; /* ブログ名の文字を小さく */
font-weight: bold;
color: #fff; /* 白い文字色 */
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

#blog-title a:hover {
color: #ccc;
}

#blog-description {
font-size: 1em;
color: #ccc; /* 説明文の文字色も統一 */
margin-top: 15px;
}

/* -------------------------------------------
メニューバー (新しいデザイン: シンプル・ミニマル)
------------------------------------------- */
/*
 * ナビゲーションメニューのスタイル */
.global-nav {
  /* スタイル1の要素: 背景は透明、影なし、余白なし */
  background-color: transparent;
  padding: 0;
  text-align: center;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 40px;
}

.global-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  /* スタイル4の要素: 背景色と角丸 */
  background-color: #e9e9e9; /* 新しい背景色 */
  border-radius: 10px;
}

.global-nav li {
  margin: 0;
  /* スタイル4の要素: ボーダーなし */
  border-right: none;
}

.global-nav a {
  /* スタイル4の要素: パディング調整とトランジション */
  color: #666;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 20px; /* スタイル4のパディングを適用 */
  transition: all 0.3s ease;
  display: block;
}

/* スタイル4の要素: ホバー時の背景色と文字色の変更 */
.global-nav a:hover {
  color: #fff;
  background-color: #333;
  text-decoration: none;
}


/* -------------------------------------------
パンくずリスト (新しいデザイン: シンプル・ミニマル)
------------------------------------------- */
/* パンくずリストのコンテナ */
.breadcrumb {
background-color: transparent; /* 背景を透明に */
border: none;
border-radius: 0;
box-shadow: none;
padding: 0;
margin-bottom: 30px;
font-size: 0.9em;
}

.breadcrumb ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
}

.breadcrumb li {
display: inline-flex;
align-items: center;
}

/* セパレーター */
.breadcrumb li:not(:last-child)::after {
content: '→';
margin: 0 8px;
color: #999;
}

/* 最後の項目（現在地） */
.breadcrumb li:last-child {
font-weight: bold;
color: #333;
}

.breadcrumb a {
color: #666;
text-decoration: none;
transition: all 0.3s ease;
}

a:hover {
text-decoration: underline;
}


/* -------------------------------------------
記事一覧
------------------------------------------- */
/* 記事セクション */
.entry {
border: 1px solid #eee;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* 影を強く */
margin-bottom: 40px;
}


h1.entry-title {
background-color: #333;
padding: 20px 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* 影を強く */
margin-bottom: 20px;
border-bottom: none;
}

.entry-title a {
font-size: 1.0em; /* フォントを少し大きく */
font-weight: bold;
color: #fff;
}

/* 記事下部のカテゴリー */
.entry-categories {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.entry-categories a {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 20px;
box-shadow: none;
padding: 8px 16px;
font-size: 0.9em;
color: #555;
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
}
.entry-categories a:hover {
background-color: #000;
color: #fff;
border-color: #000;
text-decoration: none;
transform: none; /* ホバー時の回転を削除 */
}

/* READ MOREボタン */
.entry-see-more {
display: block;
width: fit-content;
margin-left: auto;
margin-top: 10px;
background-color: #444;
color: #fff;
padding: 8px 20px;
border-radius: 9999px;
text-decoration: none;
font-size: 0.9em;
transition: all 0.3s ease;
}

.entry-see-more:hover {
background-color: #000;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* -------------------------------------------
記事本文
------------------------------------------- */
.entry-content {
font-size: 1.0em;
}

/* 画像 */
.entry-content img {
max-width: 100%;
height: auto;
margin: 20px 0;
border: 1px solid #eee;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
border-radius: 8px;
}

/* リスト */
.entry-content ul {
list-style-type: disc;
margin: 1.5em 0;
padding-left: 2em;
}

.entry-content ol {
margin: 1.5em 0;
padding-left: 2.5em;
}

.entry-content dl {
margin: 1.5em 0;
}

.entry-content dt {
font-weight: bold;
margin-top: 1em;
}

.entry-content dd {
margin-left: 1.5em;
}

/* 小見出し */
.entry-content h3 {
font-size: 1.2em; /* h3のフォントサイズを調整 */
border-left: 5px solid #666;
padding-left: 10px;
margin-top: 2em;
margin-bottom: 1em;
font-weight: bold;
}

.entry-content h4 {
font-size: 1.2em;
border-left: 5px solid #999;
padding-left: 10px;
margin-top: 1.5em;
margin-bottom: 0.8em;
}

.entry-content h5 {
font-size: 1.2em;
background-color: #f5f5f5;
padding: 3px 10px;
border-radius: 5px;
display: inline-block;
}

.entry-content blockquote {
border-left: 4px solid #999;
background-color: #f8f8f8;
margin: 1.5em 0;
padding: 10px 20px;
border-radius: 8px;
}

/* 目次 */
.table-of-contents {
border: 1px solid #ddd;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
padding: 20px;
background-color: #fff;
border-radius: 8px;
display: table;
max-width: 600px;
width: calc(100% - 40px);
margin: 1em auto;
font-size: 1.0em;
}

.table-of-contents::before {
content: "目次";
display: block;
font-weight: bold;
margin-bottom: 15px;
font-size: 1.2em;
border-bottom: 1px dotted #666;
padding-bottom: 5px;
text-align: center;
}

.table-of-contents h2 {
font-size: 1em;
font-weight: bold;
margin-bottom: 0;
border-left: none;
padding-left: 0;
}

.table-of-contents ul {
list-style-type: square;
padding-left: 2em;
}

.table-of-contents ol {
margin: 1.5em 0;
padding-left: 2.5em;
}

.table-of-contents li {
line-height: 1.7;
margin-bottom: 10px;
color: #333;
font-family: apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,"Helvetica Neue",Arial,sans-serif;
word-wrap: break-word;
font-size: 16px;
box-sizing: border-box;
}

/* ネストされたリスト（階層） */
.table-of-contents ul ul {
list-style-type: square;
margin-top: 5px;
margin-bottom: 5px;
padding-left: 3em;
}

.table-of-contents ol ul {
list-style-type: square;
margin-top: 5px;
margin-bottom: 5px;
padding-left: 3em;
}

.table-of-contents ul ol,
.table-of-contents ol ol {
list-style-type: decimal;
margin-top: 5px;
margin-bottom: 5px;
padding-left: 3em;
}


/* コメント欄へのリンクをボタンにする */
.leave-comment-title {
display: inline-block;
background-color: #444;
color: #fff;
padding: 10px 20px;
border-radius: 9999px;
text-decoration: none;
font-size: 0.9em;
border: none;
transition: background-color 0.3s ease;
}

.leave-comment-title:hover {
background-color: #000;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* 記事内のコードブロック */
pre {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: 15px 20px;
border-radius: 8px;
white-space: pre-wrap;
word-wrap: break-word;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05);
line-height: 1.4;
}

/* -------------------------------------------
記事内のリンク
------------------------------------------- */
.entry-content a {
font-weight: bold;
border-bottom: 2px solid #ccc;
padding-bottom: 2px;
transition: all 0.3s ease-in-out;
}

.entry-content a:hover {
border-bottom: 2px solid #000;
transform: translateY(-2px);
}


/* -------------------------------------------
記事フッター
------------------------------------------- */
/* 記事の最後にID、シェアボタン、読者ボタンを横並びにするスタイル */
.entry-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
border-top: 1px solid #ddd;
margin-top: 30px;
font-size: 0.9em;
flex-wrap: wrap;
gap: 15px;
}

.entry-footer .date,
.entry-footer .author-id,
.entry-footer .share-buttons,
.entry-footer .follower-button {
flex-grow: 1;
text-align: center;
}

.entry-footer .share-buttons {
display: flex;
justify-content: center;
gap: 10px;
}

/* -------------------------------------------
サイドバー
------------------------------------------- */
.hatena-module {
border: 1px solid #eee;
padding: 30px 20px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* 影を強く */
margin-bottom: 40px;
}

.hatena-module-title {
background-color: #333;
padding: 15px 20px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* 影を強く */
color: #fff;
border-bottom: none;
margin-bottom: 20px;
/* 記事本文のフォントを適用 */
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif;
line-height: 1.8;
}

/* -------------------------------------------
   検索ボックス
   ------------------------------------------- */
/* 検索ボックスのカスタマイズ */

/* 検索ボックス全体のコンテナ */
.hatena-module-search-box {
  background: none;
  border: none;
  padding: 20px 15px 20px 15px; /* 左右と下に余白を追加 */
}

/* 検索ボックスのタイトル（「検索」の部分） */
.hatena-module-search-box .hatena-module-title {
  font-size: 1.0rem;
  font-weight: ;
  padding-bottom: 10px; /* 下に余白を追加 */
  margin-bottom: 10px; /* さらに下に余白を追加 */
  border-bottom: 2px solid #a89f92;
}

/* 検索フォーム */
.hatena-module-search-box .search-form {
  display: flex;
  align-items: center;
  gap: 10px; /* 検索窓とボタンの間に余白を追加 */
  margin-top: 15px;
}

/* 検索入力欄（テキストボックス） */
.hatena-module-search-box .search-module-input {
  flex-grow: 1;
  padding: 10px 20px; /* 左右の余白を増やしました */
  font-size: 1rem;
  border: 2px solid #d4d0cb;
  border-radius: 50px;
  outline: none;
  transition: border-color 0.3s ease;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* 検索入力欄にフォーカスした時 */
.hatena-module-search-box .search-module-input:focus {
  border-color: #a89f92;
}

/* プレースホルダーの色 */
.hatena-module-search-box .search-module-input::placeholder {
  color: #a89f92;
  opacity: 0.8;
}

/* 検索ボタン */
.hatena-module-search-box .search-module-button {
  padding: 10px 20px;
  /* margin-left: -40px; を削除して、gapで余白を調整 */
  border: none;
  background-color: #333;
  color: #fff;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  white-space: nowrap; /* ボタン内のテキストが折り返さないように */
}

/* 検索ボタンにカーソルが乗った時 */
.hatena-module-search-box .search-module-button:hover {
  background-color: #baa894;
  transform: translateY(-1px);
}

/* 検索ボタンがクリックされた時 */
.hatena-module-search-box .search-module-button:active {
  background-color: #8c8273;
  transform: translateY(0);
}


/* サイドバーのカテゴリもクリーンなスタイルに変更 */
.hatena-module-category a {
background-color: #fff;
border: 1px solid #ddd;
box-shadow: none;
padding: 8px 12px;
font-size: 1.0em;
color: #333; /* 文字色を統一 */
text-decoration: none;
transition: all 0.3s ease;
transform: none; /* ホバー時の回転を削除 */
display: block;
margin-bottom: 10px;
border-radius: 6px;
}

.hatena-module-category a:hover {
background-color: #f0f0f0;
color: #000;
}



/* ---------------------------------------------------- */
/* サイドバーの関連記事のデザイン */
/* ---------------------------------------------------- */

/* サイドバー内の関連記事モジュールのタイトルと本文の余白 */
#box2 .hatena-module-related-entries,
#box3 .hatena-module-related-entries {
    padding: 0;
    margin: 0;
}

/* サイドバーの「関連記事」タイトルに余白を追加 */
#box2 .hatena-module-related-entries .hatena-module-title,
#box3 .hatena-module-related-entries .hatena-module-title {
    padding: 10px; /* 上下左右に余白を追加 */
    margin-bottom: 10px; /* タイトルと最初の記事の間にスペースを追加 */
}

/* リストのデフォルトスタイルと余白をリセット */
#box2 .hatena-module-related-entries .hatena-module-body ul,
#box3 .hatena-module-related-entries .hatena-module-body ul {
    list-style: none; /* リストの黒点を非表示にする */
    margin: 0;
    padding: 0 10px; /* 左右に10pxの余白を追加 */
}

/* 記事ごとのカードデザイン */
#box2 .hatena-module-related-entries li,
#box3 .hatena-module-related-entries li {
    background-color: #ffffff;
    border: 1px solid #e0e0e0; /* 細い枠線を追加 */
    border-radius: 12px;
    padding: 15px;
    margin: 0 0 15px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 影をより深く、立体的に */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* ホバー時に少し浮き上がるエフェクトを強化 */
#box2 .hatena-module-related-entries li:hover,
#box3 .hatena-module-related-entries li:hover {
    transform: translateY(-5px); /* さらに少し浮き上がらせる */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* ホバー時の影をより濃く */
}

/* 記事タイトルと説明文の装飾をなくし、色を継承 */
#box2 .hatena-module-related-entries a,
#box3 .hatena-module-related-entries a {
    text-decoration: none;
    color: inherit;
}

/* タイトルを太字に */
#box2 .hatena-module-related-entries a.related-entries-title-link,
#box3 .hatena-module-related-entries a.related-entries-title-link {
    font-weight: bold;
}

/* サムネイル画像に角丸を適用 */
#box2 .hatena-module-related-entries img.related-entries-image,
#box3 .hatena-module-related-entries img.related-entries-image {
    border-radius: 8px;
}

/* 日付を非表示に */
#box2 .hatena-module-related-entries .related-entries-date-link,
#box3 .hatena-module-related-entries .related-entries-date-link {
    display: none;
}

/* ---------------------------------------------------- */
/* 記事下の関連記事のデザイン */
/* ---------------------------------------------------- */

/* 記事フッター内の関連記事にスタイルを適用 */
.entry-footer-modules .hatena-module-related-entries {
    padding: 0;
    margin: 0;
}

/* リストのデフォルトスタイルと余白をリセット */
.entry-footer-modules .hatena-module-related-entries .hatena-module-body ul {
    list-style: none; /* リストの黒点を非表示にする */
    margin: 0;
    padding: 0;
}

/* 記事ごとのカードデザイン */
.entry-footer-modules .hatena-module-related-entries li {
    background-color: #ffffff;
    border: 1px solid #e0e0e0; /* 細い枠線を追加 */
    border-radius: 12px;
    padding: 15px;
    margin: 10px; /* 上下左右に10pxの余白を追加 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 影をより深く、立体的に */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* ホバー時に少し浮き上がるエフェクトを強化 */
.entry-footer-modules .hatena-module-related-entries li:hover {
    transform: translateY(-5px); /* さらに少し浮き上がらせる */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* ホバー時の影をより濃く */
}

/* 記事タイトルと説明文の装飾をなくし、色を継承 */
.entry-footer-modules .hatena-module-related-entries a {
    text-decoration: none;
    color: inherit;
}

/* タイトルを太字に */
.entry-footer-modules .hatena-module-related-entries a.related-entries-title-link {
    font-weight: bold;
}

/* サムネイル画像に角丸を適用 */
.entry-footer-modules .hatena-module-related-entries img.related-entries-image {
    border-radius: 8px;
}

/* 日付を非表示に */
.entry-footer-modules .hatena-module-related-entries .related-entries-date-link {
    display: none;
}

/* フッターの「関連記事」タイトルの余白を調整 */
.entry-footer-modules .hatena-module-related-entries .hatena-module-title {
    padding: 10px; /* 上下左右に余白を追加 */
}


/* ---------------------------------------------------- */
/* 最新記事のデザイン */
/* ---------------------------------------------------- */

/* 最新記事リストのデフォルトスタイルと余白をリセット */
.hatena-module-recent-entries .hatena-module-body ul,
.recent-entries {
    list-style: none; /* リストの黒点を非表示にする */
    margin: 0;
    padding: 0; /* 左側の余白を削除 */
}

/* 最新記事ごとのカードデザイン */
.urllist-item {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 15px;
    margin: 0 0 15px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    /* 新しい変更：Flexboxを使って画像とタイトルを横並びにする */
    display: flex;
    align-items: center; /* 垂直方向の中央揃え */
    gap: 15px; /* 画像とタイトルの間に隙間を作る */
}

/* ホバー時のエフェクト */
.urllist-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* 記事タイトルとサムネイル画像のスタイル */
.urllist-title-link {
    font-weight: bold;
    text-decoration: none;
    color: inherit;
    /* 新しい変更：Flexbox内でタイトルが柔軟に幅をとるようにする */
    flex-grow: 1;
}

.urllist-image {
    border-radius: 8px;
    /* 新しい変更：画像のサイズを固定する */
    width: 80px;
    height: 80px;
    object-fit: cover; /* 画像の比率を保ちながら要素内に収める */
    flex-shrink: 0; /* 画像の縮小を防ぐ */
}

/* ---------------------------------------------------- */
/* 注目記事のデザイン */
/* ---------------------------------------------------- */

/* 注目記事リストのデフォルトスタイルと余白をリセット */
.hatena-module-entries-access-ranking .hatena-module-body ul {
    list-style: none;
    margin: 0;
    padding: 0; /* 左側の余白を削除 */
}

/* 注目記事ごとのカードデザイン */
.hatena-module-entries-access-ranking .entry-list-item {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 15px;
    margin: 0 0 15px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* ホバー時のエフェクト */
.hatena-module-entries-access-ranking .entry-list-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* 記事タイトルとサムネイル画像のスタイル */
.hatena-module-entries-access-ranking .entry-title-link {
    font-weight: bold;
    text-decoration: none;
    color: inherit;
}

.hatena-module-entries-access-ranking .entry-image {
    border-radius: 8px;
}

/* -------------------------------------------
フッター
------------------------------------------- */
#footer {
border-top: 1px solid #ddd;
border-radius: 0;
box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05);
background-color: #333;
color: #eee;
padding: 10px 20px;
text-align: center;
max-width: none;
margin: 30px 0 0 0;
}

/* フッターのコンテンツ */
#footer-inner {
max-width: none;
margin: 0;
padding: 0;
}

.footer {
text-align: center;
font-size: 0.7em;
color: #eee;
}

/* フッター内のリンクの色 */
.services a,
.services a:hover {
color: #f0f0f0 !important;
}

#footer-inner .footer-address-name {
color: #f0f0f0 !important;
}

#footer-inner address a {
color: #f0f0f0 !important;
}

/* -------------------------------------------
トップへ戻るボタン
------------------------------------------- */
/* ボタンの基本スタイルと非表示設定 */
.scroll-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: #444;
color: #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 1.5em;
opacity: 0;
transition: opacity 0.3s, transform 0.3s, background-color 0.3s;
pointer-events: none;
z-index: 1000;
}

/* ボタンが表示されるときのスタイル */
.scroll-to-top.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}

.scroll-to-top:hover {
background-color: #000;
transform: scale(1.1);
}

/* -------------------------------------------
ページャ
------------------------------------------- */
.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 50px;
  margin-bottom: 50px;
  border-top: 1px solid #ddd;
  padding-top: 20px;
}

.pager-prev,
.pager-next {
  flex: 1;
  text-align: center;
  font-size: 1.1em;
  position: relative;
}

.pager-prev a::before {
  content: '<< Prev';
  font-size: 1rem;
  color: #666;
  font-weight: bold;
}

.pager-next a::after {
  content: 'Next >>';
  font-size: 1rem;
  color: #666;
  font-weight: bold;
}

.pager-prev a:hover,
.pager-next a:hover {
  color: #333;
  text-decoration: none;
  transform: translateY(-5px);
}


/* -------------------------------------------
記事フッターのIDを非表示にする（完全版）
------------------------------------------- */
.entry-footer .entry-author-id,
.entry-footer .user-name-hatena-id,
.user-name-hatena-id,
.user-name-nickname,
.user-name-paren {
display: none;
}

/* -------------------------------------------
2カラムレイアウト（PC用）
------------------------------------------- */
#container {
max-width: none;
margin: 0;
}

#content-inner {
display: flex;
justify-content: center;
gap: 50px;
max-width: 1280px;
margin: 0 auto;
}

#wrapper {
width: 850px;
}

#box2 {
width: 380px;
margin-left: 10px;
}

/* -------------------------------------------
レスポンシブデザイン（タブレット・スマホ用）
------------------------------------------- */
@media (max-width: 1024px) {
/* 1024px以下（タブレット）での調整 */
#content-inner {
flex-direction: row;
justify-content: space-between;
padding: 0 20px;
gap: 20px;
}

#wrapper {
width: auto;
flex: 3;
}

#box2 {
width: auto;
flex: 1;
margin-left: 0;
}

#blog-title a {
font-size: 2em;
}
}

@media (max-width: 768px) {
/* 768px以下（スマートフォン）での調整 */
#content-inner {
flex-direction: column;
gap: 0;
padding: 0 10px;
}
}