/*
Theme Name: Lilac Bloom
Theme URI: https://mitumine.stars.ne.jp/Lilac-Bloom/
Author: Bloom Studio
Author URI: https://mitumine.stars.ne.jp/Lilac-Bloom/
Description: すぐに美しいブログを。直感的でシンプルなWordPressテーマ
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Copyright: Bloom Studio
Text Domain: lilac-bloom
Tags: blog, translation-ready
Tested up to: 6.9
Requires PHP: 7.4
Requires at least: 5.0
*/

/*******************************************************************************
 *
 * カスタムプロパティ
 *
 *******************************************************************************/
:root {
    --base-main-px: 30px;
    
    --base-widget-icon-size: 1.5rem;
}

/*******************************************************************************
 *
 * テンプレート用
 *
 *******************************************************************************/
img.alignleft {
	display: block; 
	margin: 0 auto 0 0;
}
img.aligncenter {
	display: block; 
	margin: 0 auto;
}
img.alignright {
	display: block; 
	margin: 0 0 0 auto;
}
img.alignnone {
	display: block; 
	margin: 0 0 0 0;
}

/*******************************************************************************
 *
 * body用
 *
 *******************************************************************************/
body {
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
	overflow-x: hidden;

}

/*******************************************************************************
 *
 * main用
 *
 *******************************************************************************/
#main {
	margin-bottom: var(--base-main-px);
}


/*******************************************************************************
 *
 * widget用
 *
 *******************************************************************************/
.widget-title {
	font-size: 1.2rem;
	font-weight: 600;
	margin-top: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 5px;
}

.widget ul {
  margin: 0px;
}
.widget ul li a {
	text-decoration: none;
}

.widget_archive ul,
.widget_categories ul,
.widget_rss ul,
.widget_meta ul,
.widget_pages ul,
.widget_recent_entries ul,
.widget_recent_comments ul,
.widget_nav_menu ul {
   padding: 0px;
}

.widget_archive li,
.widget_categories li,
.widget_rss li,
.widget_meta li,
.widget_pages li,
.widget_recent_entries li,
.widget_recent_comments li {
  list-style: none;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  border-bottom: dashed 1px #9e9e9e;
  padding: 5px 0;
}

.widget_archive li:last-of-type,
.widget_categories li:last-of-type,
.widget_rss li:last-of-type,
.widget_meta li:last-of-type,
.widget_pages li:last-of-type,
.widget_recent_entries li:last-of-type,
.widget_recent_comments li:last-of-type {
    border-style: none;
}

.widget_archive li::before,
.widget_categories li::before,
.widget_rss li::before,
.widget_meta li::before,
.widget_pages li::before,
.widget_recent_entries li::before,
.widget_recent_comments li::before,
.widget_nav_menu li.menu-item-has-children > a::before,
.widget_nav_menu li:not(.menu-item-has-children) > a::before {
  margin-right: 8px;
  font-size: var(--base-widget-icon-size);
}

.widget_archive li::before {
  content: "\eddb";
  font-family: 'MingCute';
}
.widget_categories li::before {
  content: "\efa5";
  font-family: 'MingCute';
}
.widget_rss li::before {
  content: "\f219";
  font-family: 'MingCute';
}
.widget_meta li::before {
  content: "\f46d";
  font-family: 'MingCute';
}
.widget_pages li::before {
  content: "\f0d9";
  font-family: 'MingCute';
}
.widget_recent_entries li::before {
  content: "\f135";
  font-family: 'MingCute';
}
.widget_recent_comments li::before {
  content: "\ebbb";
  font-family: 'MingCute';
}

.widget_media_gallery .gallery-size-thumbnail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}
.widget_media_gallery .gallery-size-thumbnail .gallery-item {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 5px;
    border: solid 2px #7c7c7c;
}

.widget_nav_menu ul {
	list-style: none;
}
.widget_nav_menu li ul {
	display: none;
	padding-left: 20px;
	margin-bottom: 5px;
}

.footer-widgets-container section {
    margin-bottom: 20px;
}


/* ＋／－のアイコン */
.widget_nav_menu li.menu-item-has-children > a::before {
    content: '+';
    color: #ca2a2a;
    font-weight: 600;
    margin-right: 8px; /* ←リンク文字との間隔 */
}
.widget_nav_menu li.menu-item-has-children.open > a::before {
    content: '-';
    color: #ca2a2a;
}

.widget_nav_menu li.menu-item-has-children {
  position: relative;
  caret-color: transparent;
}

.widget_nav_menu li.menu-item-has-children .submenu-toggle {
  position: absolute;
  left: -5px; 
  top: 12px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  background: transparent;
}

.widget_nav_menu li:not(.menu-item-has-children) > a::before {
	content: "\ebe9";
	font-family: 'MingCute';
}
/* トップ階層のうち、子メニューを持たない li は強制的に非表示 */
.widget_nav_menu > div > ul > li:not(.menu-item-has-children) > a::before {
  content: none !important;
}

#wp-calendar {
    width: 100%;
    border-collapse: collapse;
}
#wp-calendar caption {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    padding: 10px 0;
    text-align: center;
}
#wp-calendar thead th {
    font-size: 0.9rem;
    color: #555;
    text-align: center;
    padding: 5px;
}
#wp-calendar tbody td {
    text-align: center;
    padding: 10px;
    border: 1px solid #696969;
    transition: background-color 0.3s ease;
}
#wp-calendar tbody td:hover {
    background-color: #e9e9e9;
}
#wp-calendar tbody td a {
font-size: 0.8rem;
    text-decoration: none;
    color: #0073aa;
    font-weight: 600;
        cursor: pointer;
}
#wp-calendar tbody td#today {
    background-color: #0073aa;
    color: #fff;
    font-weight: 600;
}
#wp-calendar tbody td#today a {
    color: #fff;
}
nav.wp-calendar-nav {
    display: flex;
    justify-content: space-between;
}

.lilac-custom-search-form {
	position: relative;
	width: 100%;
	max-width: 350px;
	border: 1px solid #000000;
	border-radius: 25px;
	background-color: #f0f0f0;
}
.lilac-custom-search-field {
    width: 100%;
    padding: 10px 45px 10px 20px;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: #000000;
    outline: none;
}
.lilac-custom-search-field:-webkit-autofill {
  box-shadow: none;
  transition: background-color 5000s ease-in-out 0s;
}
.lilac-custom-search-submit {
    position: absolute;
    right: 15px;
    top: 55%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 1.5rem;
    color: #000000;
}

.widget_tag_cloud .tagcloud a {
    font-size: 0.8rem !important; /* !important; が不明状態 */
    line-height: 1.0rem;
    display: inline-block;
    border: 1px solid #555555;
    padding: 10px;
    margin: 3px 3px 5px;
    border-radius: 4px;
    text-decoration: none;
}



/*******************************************************************************
 *
 * テーマの全体的なレイアウト
 *
 *******************************************************************************/
#content-w {
	display: flex;
	gap: 2rem;
	margin: 0 auto;
	padding: 0 20px;
	margin-top: var(--base-main-px);
}

.site-main {
    border-radius: 10px;
    border: solid 1px #000000;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

#primary {
    flex: 1; /* 残りのスペースをすべて使う */
    min-width: 0; /* フレックスアイテムの最小幅をリセット */
}

/*******************************************************************************
 *
 * サイドバー関連
 *
 *******************************************************************************/
/* サイドバーが左側の場合 */
.has-sidebar-left #content-w {
    flex-direction: row-reverse;
}

/* サイドバーが表示されない場合 */
.no-sidebar .content-area {
    width: 100%;
}
.no-sidebar .widget-area {
    display: none;
}

/* サイドバーエリアのスタイル */
.widget-area {
    flex-shrink: 0;
}

/* サイドバー枠 */
.widget-area section {
    border: solid 1px #000000;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    padding: 10px;
    margin-bottom: 15px;
}

/* 追従サイドバー */
#sticky-sidebar-widgets {
    position: sticky;
    top: 95px;
}



/*******************************************************************************
 *
 * ブログ記事リストのスタイル
 *
 *******************************************************************************/
main article.entry {
	display: flex;
	align-items: center;
	margin: 10px 10px;
	border-bottom-style: dashed;
}
main article.entry:last-of-type {
    border-style: none;
}

article .post-thumbnail {
    width: 30%;
}

/* 既存の img セレクタに width: 100%; を追加 */
article .post-thumbnail img {
    width: 100%;
/*    aspect-ratio: 16 / 9; */
}

article .entry-content-wrapper {
	width: 70%;
    padding: 10px;
}

article .entry-header {
    margin-bottom: 10px;
}

article .entry-title {
    font-size: 1.1rem;
    margin: 0;
}
article .entry-title a {
	text-decoration: none;
}

article .entry-meta {
    font-size: 0.8rem;
    color: #888;
}

article .entry-categories {
    margin-left: 10px;
}
article .entry-categories a {
	margin-right: 5px;
}

article .tags-content {
	margin-top: 5px;
}
article .tags-content .entry-tags a {
	margin-right: 5px;
}

article .entry-summary a {
	text-underline-offset: 4px;
}
article .entry-summary p {
    font-size: 0.9rem;
    line-height: 1.5rem;
    
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
}





/*******************************************************************************
 *
 * ページネーション
 *
 *******************************************************************************/
#content-w .pagination {
    margin: 20px 0;
    display: flex;
    justify-content: center;
}

#content-w .pagination ul.page-numbers {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
}

#content-w .pagination ul.page-numbers li {
    margin: 0 5px;
}

#content-w .pagination ul.page-numbers a,
#content-w .pagination ul.page-numbers span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    text-decoration: none;
    color: #888;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: background-color 0.3s, border-color 0.3s;
}

#content-w .pagination ul.page-numbers a:hover,
#content-w .pagination ul.page-numbers a:focus {
    background-color: #f0f0f0;
    color: #555;
    border-color: #ccc;
}

#content-w .pagination .current {
    background-color: #f0f0f0;
    font-weight: 600;
    color: #555;
    border-color: #ccc;
    cursor: default;
}



/*******************************************************************************
 *
 * ヘッダーメニュー
 *
 *******************************************************************************/
#masthead {
    display: flex;
    align-items: center;
    min-height: 80px;
/*    max-height: 80px; */
    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}

#masthead .site-title a {
    text-decoration: none;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px;
    margin: 0 auto;
}

/* ロゴ画像のサイズを調整 */
.site-branding img {
    max-height: 70px;
}

/* ナビゲーションリスト全体（一番上の階層） */
.main-navigation > ul {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
}

/* 子メニューを持つ親メニュー項目 */
.main-navigation li.menu-item-has-children {
    position: relative;
        padding-left: 5px;
}

/* aタグのスタイル */
.main-navigation li a {
    display: block;
    position: relative;
    padding: 10px 15px;
    white-space: nowrap;
}

/* ＋／－アイコンはCSSで制御 */
.main-navigation li.menu-item-has-children > a::before {
    content: '+';
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1.5rem;
    transition: transform 0.3s;
    color: #ff0000;
}

.main-navigation li.menu-item-has-children.open > a::before {
    content: '-';
    top: 55%;
    transform: translateY(-50%) rotate(180deg);
}

/* 開閉用にJS対応する透明なボックスを用意 */
.main-navigation li.menu-item-has-children {
  position: relative;
  caret-color: transparent;
}

.main-navigation li.menu-item-has-children .submenu-toggle {
	position: absolute;
	left: -10px;
	top: 5px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	background: transparent;
}



/* 子メニューを持たないメニュー項目に別のアイコンを配置 */
.main-navigation li:not(.menu-item-has-children) > a::before {
    content: "\ebe9";
    font-family: 'MingCute';
    position: absolute;
    left: calc(100vw / 120 * -1);
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
}

/* 子メニュー（サブメニュー）をデフォルトで非表示にする */
.main-navigation li ul {
    display: none;
/*    position: absolute; */
    top: 100%;
    left: 0%;
    width: auto; /* 幅をコンテンツの幅に合わせる */
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 99;
    padding-left: 20px;
    
	max-height: 400px; /* ここで「最大何ピクセルまで広がるか」を指定 */
	overflow-y: auto;  /* 中身がmax-heightを超えたらスクロールを出す */

	/* スクロールバーのデザイン（任意：細くする） */
	scrollbar-width: thin;
}

/* トップ階層のうち、子メニューを持たない li は強制的に非表示 */
.main-navigation > ul > li:not(.menu-item-has-children) > a::before {
  content: none !important;
}

/* 子メニューの各項目 */
.main-navigation li ul li {
    padding: 5px 10px;
    border-bottom: 1px solid #eee;
}

/* メニューのビュレットを消す */
.main-navigation ul {
    list-style: none;
}



/*******************************************************************************
 *
 * フッターメニュー
 *
 *******************************************************************************/
.site-footer {
	margin-top: var(--base-main-px) !important;
}
.footer-widgets-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto;
	padding: 20px 40px;
}
.footer-widgets-container > .footer-widget-column {
    padding: 10px;
}

.site-info {
	text-align: center;
    padding: 10px 10px;
}
.powered-by {
	font-size: 0.75rem;
}

.lilac-footer-menu {
    text-align: center;
    padding: 10px;
}

.footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px; /* メニュー間の余白 */
}

.footer-nav-list li a {
    text-decoration: none;
    color: inherit; /* 文字色は親要素に合わせる */
    font-size: 0.9rem;
}

.footer-nav-list li a:hover {
    text-decoration: underline;
}


/*******************************************************************************
 *
 * コンテンツブロック設定
 *
 *******************************************************************************/
.lilac-custom-content-block-top,
.lilac-custom-content-block-bottom {
    margin: 0px auto;
    margin-top: var(--base-main-px);
    max-width: 90vw;
}



/*******************************************************************************
 *
 * カテゴリブロック設定別
 *
 *******************************************************************************/
.category-block-after_title,
.category-block-after_content {
}



/*******************************************************************************
 *
 * パンくずリスト
 *
 *******************************************************************************/
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
list-style: none;
	font-size: 0.9rem;
    color: #000000;
}

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

.breadcrumb-list li:not(:last-child)::after {
  content: "\f1f9";
  	font-family: 'MingCute';
     top: 5%;
    position: relative;
}
.breadcrumb-list li a {
    text-decoration: none;
}



/*******************************************************************************
 *
 *  page.php のレイアウト
 *
 *******************************************************************************/
.fixed-post-content {
    width: 95%;
    margin: 0 auto;
    margin-top: var(--base-main-px);
    margin-bottom: var(--base-main-px);
}



/*******************************************************************************
 *
 *  single.php のレイアウト
 *
 *******************************************************************************/
.single .entry-header {
    width: 90%;
    margin: 0 auto;
    margin-bottom: 10px;
}

/* 投稿タイトル */
.single .entry-title {
	font-size: 2.5rem;
    margin: 0 auto;
}

.single-post-thumbnail {
	width: 60%;
	aspect-ratio: 16 / 9;

	margin: 0 auto;
	margin-bottom: 30px;
}

.single-post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}



/*******************************************************************************
 *
 *  archive.php search.php のレイアウト
 *
 *******************************************************************************/
.archive-search-content {
    width: 95%;
    margin: 0 auto;
    margin-top: var(--base-main-px);
    margin-bottom: var(--base-main-px);
}


/*******************************************************************************
 *
 *  404.php のレイアウト
 *
 *******************************************************************************/
.page-404-content {
    width: 95%;
    margin: 0 auto;
    margin-top: var(--base-main-px);
    margin-bottom: var(--base-main-px);
    text-align: center;
}

/*******************************************************************************
 *
 *  SNSシェアボタン
 *
 *******************************************************************************/
.sns-share-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
  gap: 10px;
}
.sns-share-item a {
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
}

.sns-share-list li {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 4px;
}

.sns-share-list li:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.77);
}

.sns-share-list li.twitter-share,
.sns-share-list li.facebook-share,
.sns-share-list li.line-share,
.sns-share-list li.hatena-share,
.sns-share-list li.pocket-share {
    padding: 10px;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.77);
}
.sns-share-list li.twitter-share {
    background-color: #000000;
}
.sns-share-list li.facebook-share {
    background-color: #3b5998;
}
.sns-share-list li.line-share {
    background-color: #00b900;
}
.sns-share-list li.hatena-share {
    background-color: #00a5de;
}
.sns-share-list li.pocket-share {
    background-color: #f27985;
}



/*******************************************************************************
 *
 *  関連投稿
 *
 *******************************************************************************/
.related-posts-list {
  display: flex;
  flex-wrap: wrap;
      justify-content: center;
  gap: 20px;
  padding: 0;
  list-style: none; /* デフォルトのリストスタイルを非表示に */
}

/* 各関連投稿アイテムのスタイル */
.related-posts-list .related-post-item {
  display: flex;
  flex-direction: column; /* 要素を縦方向に並べる */
  width: calc(50% - 20px); /* 2列表示の場合の幅を計算 */
  box-sizing: border-box; /* paddingとborderを幅に含める */
  border: 1px solid #a5a5a5; /* 枠線を追加 */
  border-radius: 5px; /* 角を丸くする */
  padding: 5px;

}

/* サムネイルのコンテナ */
.related-post-thumbnail {
  width: 100%;
/*  height: 200px; */ /* サムネイルの高さを固定 */

}

.related-post-thumbnail img {
  width: 100%;
  height: 100%;
}

/* コンテンツ部分のスタイル */
.related-post-content {
  padding: 15px;
}

.related-post-title {
  font-size: 1.1rem;
  margin-top: 0;
}

.related-post-title a,
.related-post-excerpt a {
    text-decoration: none;
}

.related-post-excerpt {
  font-size: 0.9em;
}
.related-post-excerpt a p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* カテゴリとタグを横並びにするためのスタイル */
.related-post-meta {
    display: flex;
    flex-wrap: wrap;
        flex-direction: column;
}

.related-post-categories a,
.related-post-tags a {
    padding-right: 5px;
    text-decoration: none;
	font-size: 0.8rem;
    line-height: 1.5rem;
}



/*******************************************************************************
 *
 *  コメント
 *
 *******************************************************************************/
#comments ul {
	list-style: none;
	padding: 0px;
}

.comment {
    margin-bottom: 2rem;
    padding: 1.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #f9f9f9;
}
.comment-author.vcard {
    display: flex;
    align-items: center;
}
/* アバター */
.comment-author .avatar {
    border-radius: 50%; /* アバターを円形に */
    border: 2px solid #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        margin-right: 1%;
}

/* 投稿者名と日付 */
.comment-meta .fn,
.comment-meta .comment-metadata {
    font-weight: 600;
}

/* コメント本文 */
.comment-content {
    margin-top: 1.0rem;
    line-height: 1.5rem;
}

/* 返信リンク */
.comment-reply-link {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: #0073aa;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.comment-reply-link:hover {
    background-color: #005a87;
}


.comment .children {
    margin: 1.5rem 0 0 2rem;
    border-left: 2px solid #ccc;
}


p.comment-form-comment {
    display: flex;
    flex-direction: column;
}


/*******************************************************************************
 *
 *  キービジュアルのスタイル
 *
 *******************************************************************************/
.keyvisual {
	overflow: hidden;
	position: relative;
}

.keyvisual-full {
}
.keyvisual-container {
	margin: 0 auto;
}

.keyvisual-media {
	width: 100%;
	height: auto;
}

.keyvisual-text-overlay {
	font-size: 3.5rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
	z-index: 10;
	text-align: center;
 	width: 70%	
}

#keyvisual-slider {
    visibility: hidden;  /* 要素の枠は残す */
    opacity: 0;          /* 中身を透明にする */
    transition: opacity .3s ease; /* slick化後フェードイン */
}

#keyvisual-slider.slick-initialized {
    visibility: visible;
    opacity: 1;
}

.slick-dots {
    bottom: 20px;
    z-index: 20;
}

.slick-prev, .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 50px !important;  /* 矢印の幅を大きくする */
    height: 50px !important; /* 矢印の高さを大きくする */
}
.slick-prev:before,
.slick-next:before {
	font-size: 1.5rem !important;
}

.slick-prev {
    left: 3% !important;
}

.slick-next {
    right: 3% !important;
}

.slick-prev:before, .slick-next:before {
	color: #0073aa;
    font-size: 50px !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);

}
.slick-slide img,
.slick-slide video {
  object-fit: cover;
}





/*******************************************************************************
 *
 *  ナビゲーションリスト
 *
 *******************************************************************************/
.post-navigation-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 20px 0;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.post-navigation-list li {
    flex: 1;
    display: flex;
    align-items: center;
}
/* 左右のナビゲーションアイテムの配置 */
.prev-post-link a {
	width: 100%;
	display: flex;
	justify-content: flex-end;

}
/* リンクとコンテンツの配置 */
.post-navigation-list a {
    display: flex;
    align-items: center;
    padding: 10px;
    text-decoration: none;
       transition: background-color 0.3s;
}

.post-navigation-list a:hover {
    background-color: #f5f5f5;
}


.post-nav-thumbnail {
	display: flex;
	align-items: center;
	max-width: 80px;
	max-height: 80px;
	min-width: 80px;
	min-height: 80px;
}

.post-nav-thumbnail img {
    width: 100%;
    height: 100%;
}

.next-post-link a {
     width: 100%;
}

.next-post-link a .post-nav-content,
.prev-post-link a .post-nav-content {
    display: flex;
    flex-direction: column;
}
.prev-post-link a .post-nav-content {
margin-right: 15px;
    text-align: right;
}

.next-post-link a .post-nav-content {
margin-left: 15px;
    text-align: left;
}

.post-navigation-list {
    position: relative;
}
.post-navigation-list::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0.5px;
    height: 100%;
    background-color: #ccc;
}



/*******************************************************************************
 *
 *  ヘッダー画像用
 *
 *******************************************************************************/
/* ヘッダー画像用 */
.page-header-image {
    position: relative; /* 子要素の基準となるように設定 */
/*    overflow: hidden; */
/*    height: 300px; */
    margin: 0 auto;
    margin-top: var(--base-main-px);
}

.page-header-image-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.page-header-image-overlay {
    position: absolute; /* 親要素に対して絶対位置指定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒色 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-header-image-title {
    color: #FFFFFF;
    text-align: center;
    font-size: 1.7rem;
    line-height: 2.5rem;
    padding: 10px;
}




/*******************************************************************************
 *
 *   ローディング画面
 *
 *******************************************************************************/
body.preloader-active {
    overflow: hidden;
}

/* プリローダー全体のスタイル */
#lilac-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff; /* 背景色 */
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#lilac-preloader.preloader-hidden {
    opacity: 0;
    visibility: hidden;
}

body.preloader-active {
    overflow: hidden; /* 読み込み中にスクロールさせない */
}

/* スピナー（読み込み中のアイコン）のスタイル */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db; 
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}





/*******************************************************************************
 *
 *   ハンバーガーメニュー
 *
 *******************************************************************************/
.hamburger-menu-toggle {
    display: none; /* デフォルトでは非表示 */
    padding: 0;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    top: 5px;
    z-index: 999;
}
.hamburger-menu-toggle .line {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #333;
    margin-bottom: 5px;
    transition: transform 0.3s ease;
}

/* メニューが開いたときの線の動き */
.hamburger-menu-toggle[aria-expanded="true"] .line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger-menu-toggle[aria-expanded="true"] .line:nth-child(2) {
    opacity: 0;
}

.hamburger-menu-toggle[aria-expanded="true"] .line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}





/*******************************************************************************
 *
 *   トップにスクロールボタン
 *
 *******************************************************************************/
#wp-back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	height: 44px;
	border: none;
	border-radius: 22px;
	background: rgba(0,0,0,.65);
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0.5px;
	box-shadow: 0 6px 20px rgba(0,0,0,.25);
	cursor: pointer;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .25s ease, transform .25s ease, background .2s ease;
  
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px); /* 少し下から浮き上がる演出 */
  
}

#wp-back-to-top::before {
  font-family: 'MingCute';
  content: "\e93e"; /* ←アイコンフォントのコード */
}

#wp-back-to-top:hover,
#wp-back-to-top:focus {
  background: rgba(0,0,0,.8);
  outline: none;
}
#wp-back-to-top.is-visible {
	opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#wp-back-to-top[hidden] { display: none; }

@media (max-width: 767px) {
  #wp-back-to-top {
  	display: none;
    right: 16px;
    bottom: 16px;
    font-size: 16px;
    padding: 0 18px;
    height: 48px;
    border-radius: 24px;
  }
}



/*******************************************************************************
 *
 *   Screen Reader Text
 *
 *******************************************************************************/
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}


/*******************************************************************************
 *
 *    WordPress Standard Classes (Recommended)
 *
 *******************************************************************************/
/* 1. 投稿の固定表示 (.sticky) */
.sticky {
    display: block;
}

/* 2. 画像のキャプション (.wp-caption) */
.wp-caption {
    max-width: 100%;
    margin-bottom: 20px;
}

.wp-caption-text {
    text-align: center;
    font-size: 0.85em;
    padding: 5px 0;
    color: #666;
}

/* 3. ギャラリーのキャプション (.gallery-caption) */
.gallery-caption {
    font-size: 0.85em;
    padding: 5px 0;
    color: #666;
}

/* 4. 投稿者のコメント強調 (.bypostauthor) */
.bypostauthor {
    background-color: #f9f9f9;
}



/*******************************************************************************
 *
 * 文字を絶対に改行させないためのベース設定
 *
*******************************************************************************/
.fit-text {
    display: inline-block;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: clip; /* はみ出た分を三点リーダーにしない設定 */
    vertical-align: middle;
    max-width: 100%;
    /* iOS Safariでの文字サイズ自動調整を防止 */
    -webkit-text-size-adjust: 100%;
}





/*******************************************************************************
 *
 * スマホ・タブレット対応
 *
*******************************************************************************/
@media only screen and (max-width: 1024px) {

	/*------------------------------------------------------------------------------
	 - ナビゲーションメニュー
	 ------------------------------------------------------------------------------*/
	/* モバイル用メニュー全体が長い場合 */
	.main-navigation[aria-expanded="true"] {
		max-height: 80vh; /* 画面の高さの80%までに制限 */
		overflow-y: auto; /* メニュー全体もスクロール可能に */
	}
	.main-navigation li.menu-item-has-children > a::before {
	    left: 0px;
	}
	.main-navigation li ul {
	    left: 5px;
	    width: 95%;
	}

	.main-navigation li:not(.menu-item-has-children) > a::before {
    	left: 0px;
    }
    .widget_nav_menu li.menu-item-has-children .submenu-toggle,
    .main-navigation li.menu-item-has-children .submenu-toggle {
		width: 55px;
		height: 55px;
	}

	/*------------------------------------------------------------------------------
	 - ハンバーガーメニュー
	 ------------------------------------------------------------------------------*/
    .hamburger-menu-toggle {
        display: block;
    }
    .main-navigation {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        z-index: 998;
    }
    .main-navigation[aria-expanded="true"] {
        display: block;
    }
    #site-navigation ul {
        flex-direction: column;
        padding: 10px 0;
    }
    #site-navigation ul {
    	margin-left: 20px;
    }
    #site-navigation li a {
        padding: 15px 25px;
        border-bottom: 1px solid #eee;
    }
    
 	/*------------------------------------------------------------------------------
	 - サイドバー
	 ------------------------------------------------------------------------------*/
	#content-w,
	.has-sidebar-left #content-w,
	.has-sidebar-right #content-w {
	    flex-direction: column !important; /* 強制的に縦並びにする */
	    gap: 0;
	    padding: 0 20px;
	}
	.widget-area {
		width: 100%  !important; /* サイドバーを全幅にする */
	}
	
	/*------------------------------------------------------------------------------
	 - ナビゲーションリスト
	 ------------------------------------------------------------------------------*/
	.post-navigation {
		margin: var(--base-main-px) 0px;
	}
	 .post-navigation-list {
		display: initial;
		border: initial;
		border-radius: initial;
    }
    
    .post-navigation-list li {
		flex: initial;
		display: flex;
		align-items: center;
		border: solid 1px #ccc;
	    margin-bottom: 10px;
    }
    .prev-post-link a .post-nav-content,
    .next-post-link a .post-nav-content {
		display: flex;
		flex-direction: column;
    }
    .post-nav-content {
        width: 70%;
    }
    
	.post-nav-thumbnail {
	    width: 30%;
	}
	.post-nav-thumbnail img {
		width: 100%;
		aspect-ratio: 16 / 9;
		object-fit: initial;
	}
	
	.post-navigation-list::after {
		content: initial;
	}
}





/*******************************************************************************
 *
 * タブレット対応
 *
*******************************************************************************/
@media only screen and (max-width: 1024px) and (min-width: 768px) {

 	/*------------------------------------------------------------------------------
	 - キービジュアルのスタイル
	 ------------------------------------------------------------------------------*/
	.keyvisual-text-overlay {
		font-size: 2.6rem;
	}

	/*------------------------------------------------------------------------------
	 - フッターメニュー
	 ------------------------------------------------------------------------------*/
	.footer-widgets-container > .footer-widget-column {
		width: 45% !important;
	}
	
	/*------------------------------------------------------------------------------
	 - ナビゲーションメニュー
	 ------------------------------------------------------------------------------*/
    .widget_nav_menu li.menu-item-has-children .submenu-toggle {
		width: 35px;
		height: 25px;
	}
}






/*******************************************************************************
 *
 * スマホ対応
 *
*******************************************************************************/
@media only screen and (max-width: 767px) {

	 /*------------------------------------------------------------------------------
	 - main用
	 ------------------------------------------------------------------------------*/
	#main h2 {
		font-size: 1.5rem;
		line-height: 2.0rem;
	}

	 /*------------------------------------------------------------------------------
	 - ヘッダーメニュー
	 ------------------------------------------------------------------------------*/
	#masthead .site-title {
	   font-size: 1.5rem;
	}
	
 	/*------------------------------------------------------------------------------
	 - キービジュアルのスタイル
	 ------------------------------------------------------------------------------*/
	.keyvisual-text-overlay {
		font-size: 1.3rem;
	}
	.slick-prev, .slick-next {
	    width: 30px !important;
	    height: 30px !important;
	}
	.slick-prev:before,
	.slick-next:before {
		font-size: 1.5rem !important;
	}
	
	/*------------------------------------------------------------------------------
	 -  single.php のレイアウト
	 ------------------------------------------------------------------------------*/
	.single-post-thumbnail {
		width: 90%;
	}	

	/*------------------------------------------------------------------------------
	 - 投稿一覧
	 ------------------------------------------------------------------------------*/
	.site-branding img {
		max-height: 50px;
	}

	main article.entry {
		flex-wrap: wrap;
		align-items: center;
	}

	article .post-thumbnail {
		width: 100%;
	}
	article .entry-content-wrapper {
		width: 100%;
	}

	/*------------------------------------------------------------------------------
	 - ページネーション
	 ------------------------------------------------------------------------------*/
	#content-w .pagination ul.page-numbers a,
	#content-w .pagination ul.page-numbers span {
	    min-width: 10px;
	    height: 40px;
	    font-size: 0.9rem;
	}
	#content-w .pagination ul.page-numbers {
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: center;
	}

	#content-w .pagination ul.page-numbers li a.prev,
	#content-w .pagination ul.page-numbers li a.next {
		width: 85vw;
		margin: 10px;
	}

 	/*------------------------------------------------------------------------------
	 - ヘッダー画像用
	 ------------------------------------------------------------------------------*/
	.page-header-image-title {
	    font-size: 1.3rem;
	    line-height: 2.0rem;
	}
	
	/*------------------------------------------------------------------------------
	 - 投稿一覧
	 ------------------------------------------------------------------------------*/
	.related-posts-list .related-post-item {
	    width: 100%;
	}
	
	
	/*------------------------------------------------------------------------------
	 - フッターメニュー
	 ------------------------------------------------------------------------------*/
	.footer-widgets-container {
	     padding: 20px 20px;
	 }
	.footer-widgets-container > .footer-widget-column {
		width: 100% !important;
	}
	
	/*------------------------------------------------------------------------------
	 - ナビゲーションメニュー
	 ------------------------------------------------------------------------------*/
    .widget_nav_menu li.menu-item-has-children .submenu-toggle {
		width: 35px;
		height: 25px;
	}
}