/*
Theme Name: Fukasawa Child
Template: fukasawa
*/
@charset "UTF-8";

/* 親テーマのスタイルに合わせるため、詳細に指定 */
.post.single .custom-fields-inline {
    margin-top: 20px;
    font-size: 11px; /* 文字サイズを11pxに設定 */
    line-height: 1.2;
    color: #333; /* 親テーマと同じ色に統一 */
}

.post.single .custom-fields-inline span {
    color: inherit; /* 親要素の色を継承 */
    font-size: 11px; /* 文字サイズを11pxに設定 */
}

.post.single .custom-fields-inline strong {
    color: inherit; /* 親要素の色を継承 */
    font-size: inherit; /* 親要素のサイズを継承 */
    font-weight: normal; /* フォントの太さを通常に設定 */
}

/* プロフィール表示部分のCSS */
.uwp_widgets.uwp_widget_author_box {
    max-width: 600px; /* 必要に応じて幅を調整 */
    margin: 2px auto 20px auto; /* 上2px、下20pxの余白を追加して中央に配置 */
    padding: 2px; /* 内側余白を2pxに設定 */
    background-color: #f9f9f9; /* 背景色を設定（必要に応じて変更） */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
    border-radius: 8px; /* 角を丸くする */
    border: 1px solid #ddd; /* 薄い枠線を追加 */
}

/* ウィジェットのスタイル */
.mobile-widget {
    padding: 10px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    margin-top: 10px;
}

/* ウィジェットタイトルのスタイル */
.mobile-widget .widgettitle {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

/* ウィジェット内のリンクのスタイル */
.mobile-widget a {
    color: #019EBD;
    text-decoration: none;
}

.mobile-widget a:hover {
    color: #007B9E;
    text-decoration: underline;
}

/* ナビゲーションがアクティブな時の表示スタイル */
.nav-toggle.active + .mobile-navigation {
    display: block;
}

/* メニューの初期状態を非表示にする */
.mobile-navigation {
    display: none;
}

/* スマホ表示用の追加スタイル */
@media (max-width: 768px) {
  .mobile-navigation {
    padding: 20px;
  }
}

/* ギャラリー全体のスタイル設定 */
.user-gallery {
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 列の幅を300px以上に設定 */
    gap: 10px; /* アイテム間の間隔を10pxに設定 */
    justify-content: center; 
    padding: 20px; /* ギャラリー全体に余白を追加 */
    padding-top: 53px; /* 上部にさらに微調整を加えた余白を追加 */
    margin-left: 1.7mm; /* ギャラリー全体を右に1.7mm寄せる */
}

/* スマホ表示用のスタイル設定 */
@media (max-width: 600px) {
    .user-gallery {
        padding-top: 20px; /* スマホ表示時の上部の隙間を20pxに設定 */
    }
}

/* 各ギャラリーアイテム（リンク）のスタイル設定 */
.user-gallery a {
    display: block;
    width: 100%;
    padding-bottom: 66.66%; /* 3:2のアスペクト比を設定 */
    position: relative;
    margin-right: 4mm; /* 画像を右に4mm寄せる */
}

/* ギャラリー内の画像のスタイル設定 */
.user-gallery img {
    width: 100%; 
    height: 100%; 
    object-fit: cover; /* 画像を切り抜いて全体を覆う */
    position: absolute; 
    top: 0; 
    left: 0; 
}

/* レスポンシブデザインの設定 */
@media (max-width: 600px) {
    .user-gallery {
        grid-template-columns: repeat(2, 1fr); /* スマホ表示用に2列に設定 */
    }
}

@media (min-width: 601px) and (max-width: 1200px) {
    .user-gallery {
        grid-template-columns: repeat(3, 1fr); /* タブレット表示用に3列に設定 */
    }
}

@media (min-width: 1201px) {
    .user-gallery {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* デスクトップ表示用に列を自動調整 */
    }
}

/* ページネーション全体のスタイル設定 */
.pagination {
    display: flex; /* フレックスボックスを使用して、項目を横並びにする */
    justify-content: flex-start; /* ページネーションを左揃えに設定 */
    margin: 20px 0; /* ページネーションの上下に余白を追加 */
    padding-left: 2mm; /* 左側に2mmの余白を追加して画像の淵から離す */
    margin-top: -1mm; /* ページネーションを1mm下に移動 */
    margin-left: 10px; /* ページネーション全体を右に寄せる */
}

/* ページ番号とナビゲーションリンクのスタイル設定 */
.pagination a, .pagination span {
    margin: 0 5px; /* 各ページ番号間の間隔を設定 */
    padding: 10px 15px; /* ページ番号の内側の余白を設定 */
    background-color: #f1f1f1; /* バックグラウンドカラーを設定 */
    color: #333; /* テキストカラーを設定 */
    text-decoration: none; /* テキストの下線を削除 */
    border-radius: 5px; /* 角を丸くする */
}

/* 現在のページ番号のスタイル設定 */
.pagination .current {
    background-color: #333; /* 現在のページのバックグラウンドカラー */
    color: #fff; /* 現在のページのテキストカラー */
}

/* コメント編集ボタンを非表示にする */
.comment-actions .comment-edit-link {
    display: none;
}
.comment-actions .sep {
    display: none;
}

/* カスタムメッセージのスタイル */
.custom-message {
    margin-top: 20px; /* 上部の間隔 */
    padding: 10px; /* パディング */
    border: none; /* 枠線を削除 */
    background-color: transparent; /* 背景色を削除 */
    border-radius: 0; /* 角の丸みを削除 */
}

/* 右揃え用のCSSクラス */
.tR {
    text-align: right; /* テキストを右揃えに設定 */
}