@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/*******************************
   全体のバランス
********************************/
body{
background: whitesmoke;
}
.main.main {
  margin: 0px;
  padding-top: 15px;
  padding-right: 10px;
  padding-bottom: 0px;
  padding-left: 10px;
}

/* 全体のはみ出しを物理的に封印
（追従サイドバー・sticky対応版） */
html, body {
    /* overflow-x: hidden の代わりに clip を使用します */
    /* clip はスクロールコンテキストを壊さずに、はみ出しだけを切り取ります */
    overflow-x: clip !important;
}

.entry-content {
/*本文下の空白を削除*/
padding-bottom: 25px !important;
margin-bottom: 0px !important;
/*リンクアンダーライン補正*/
text-decoration-skip-ink: none !important;
}

/*********************
reCAPTCHA の表示を消す
**********************/
.grecaptcha-badge { visibility: hidden; }

/**********************
**動画のサイズ・位置
***********************/
.video-container {
margin: 0px auto;
max-width: 90%;
margin: -10px auto 0px;
}

/*************************
   ヘッダー
**************************/
.header {
  padding-top: 0px; /*ヘッダー上マージン*/
  padding-bottom: 0px; /*ヘッダー下マージン*/
}

/* サイトネーム位置調整 */
.header-container-in.hlt-top-menu .logo-header .site-name {
margin-top: 0px;
margin-bottom: 0;
}

/* サイトロゴ */
.logo.logo-header.logo-text {
	padding-top: 0;
	padding-bottom: 0;
}

/*サイトロゴのフォント変更*/
.logo-header a span {
font-family: "Cinema Letter";
color: whitesmoke !important;
font-size:21px;
font-weight: 900;
text-shadow: 0.1em 0.1em 0.1em #E0C0E0;
}

/* キャッチフレーズ位置調整 */
.tagline {
	margin-top:-10px;
	margin-bottom: 0px;
	font-style:italic;
}

/*キャッチフレーズのフォント変更*/
.tagline {
font-family: "Cinema Letter";
font-size: 12px;
color:white;
}

/**************************
   フッター・コピーライト
***************************/

.footer {
    background-color: #ffffff !important;
    color: #444 !important;
	margin-top: 0;
    padding: 40px 0 20px 0 !important;
	border-top: 1px solid rgba(221, 160, 221, 0.4) !important;
    box-shadow: 0 -5px 15px rgba(221, 160, 221, 0.1) !important;
}

.footer-menu a {
    color: #666 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.footer-menu a:hover {
    color: #DDA0DD !important;
}

.article-footer, .entry-footer {
margin-right: 0 !important;
margin-left: 0 !important;
padding-top: 0px !important;
padding-bottom: 15px !important;
}

.copyright {
    font-family: "Cinema Letter" !important;
    font-size: 14px !important;
    letter-spacing: 0.15em !important;
    color: #800080 !important;
    text-align: center !important;
}


/******************************
トップページ「リスト」
*******************************/
.list-title-in {
    font-size: 18pt;
    text-align: center;
}
.list-title {
    margin-top: 1em;
    margin-bottom: 0.5em;
}

.no-thumbnail .widget-entry-cards div.widget-entry-card-content {
    font-size: 14pt;
    line-height: 1.5em;
    padding-right: .5em;
    padding-left: .2em;
}

/* 枠（親要素）の上下余白を対称にする */
.widget-entry-cards .a-wrap {
padding-top: 12px !important;
    padding-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid #e5e5e5 !important; 
    border-radius: 4px;
}

/* タイトル文字自体の「余計な下マージン」を削除 */
.widget-entry-card-title {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}
/* 3. コンテンツ全体のマージンをゼロ */
.widget-entry-card-content {
    margin: 0 !important;
}

/*矢印を垂直中央に配置する */
.widget-entry-cards .a-wrap::after {
    content: '\f105' !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    color: #800080 !important;
    position: absolute;
    right: 1em;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 1.2em;
    line-height: 1;
    display: flex;
    align-items: center;
}

/* 「もっと見る」ボタン */
.list-more-button {
font-size: 14px;
font-family: "Hiragino Kaku Gothic ProN" !important;
color: blueviolet;
width: 200px;
padding: 0.5em 3em;
margin: 1.5em auto 2.5em auto;
border: solid 1px blueviolet;
}
.list-more-button:hover{
background: blueviolet;
border: solid 1px blueviolet;
color:#fff;
}
.list-more-button:active{
background: whitesmoke;
border: solid 1px whitesmoke;
color: blueviolet;
}

/**********************
   エントリーカード
***********************/

.entry-card-snippet,
.related-entry-card-snippet {
    /* font-family: "Kakumin Regular" !important; */
}

.ect-vertical-card .entry-card-wrap .entry-card-content {
    padding-bottom: 0;
}

/******************************
グローバルナビメニュー
*******************************/
.header-container {
border-top: none;
}
.fixed-header {
box-shadow: none;
}

#navi .navi-in > .menu-header .item-label{
font-size: 16px;
}
#navi .navi-in > .menu-header .sub-caption{
font-weight: bold;
}
#navi .navi-in > .menu-header .sub-menu {
background: #333333;
margin-left: -1px;
}
#navi .navi-in > .menu-header .sub-menu .sub-caption {
padding-left: 2em;
}
#navi .navi-in > .menu-header .sub-menu li {
border-top: 2px groove #111;
}
li#menu-item-11249 div.item-label {
font-size: 15px !important;
}

.navi-in>ul .sub-menu li li {
margin-top: 0px;
}

/* メニューの区切り線 */
#navi .navi-in > ul > li{
  border-left: 1px solid #000000;
}
#navi .navi-in > ul > li:last-child{
  border-right: 1px solid #000000;
}
.navi-in > ul > .menu-item-has-children > a::after{
  right: 10px;
}


/****************************
 本文「更新日」アイコン
****************************/
.fa-history:before{
	font-family: "Font Awesome 6 Free";
	content: "\f1da";
	font-weight: 900;
	color: blueviolet;
}


/*****************************
  投稿日・更新日の制御
******************************/
/* 外枠：右寄せ確定 */
#main .article-header .date-tags.typesquare_option {
    display: flex;
    flex-direction: row !important;
    justify-content: flex-end !important;
    gap: .5em;
    width: 100%;
    margin: 12px 0;
    padding: 0;
}

/* テキスト部分サイズを固定（PC・スマホ共通） */
#main .article-header .date-tags.typesquare_option .post-date,
#main .article-header .date-tags.typesquare_option .post-update,
#main .article-header .date-tags.typesquare_option span,
#main .article-header .date-tags.typesquare_option time {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

/* 内部ユニットの基本整列 */
#main .article-header .date-tags.typesquare_option .post-date,
#main .article-header .date-tags.typesquare_option .post-update {
    display: flex !important;
    align-items: center !important;
    gap: 1px !important;
    margin: 0 !important;
}

/* スマホ専用（480px以下）：右寄せ＆アイコン垂直整列 */
@media screen and (max-width: 480px) {
    #main .article-header .date-tags.typesquare_option {
        display: table;
        width: auto;
        margin-left: auto;
        margin-right: 0;
        border-spacing: 0 4px;
    }

    #main .article-header .date-tags.typesquare_option .post-date,
    #main .article-header .date-tags.typesquare_option .post-update {
        display: table-row !important;
    }

    #main .article-header .date-tags.typesquare_option .fa,
    #main .article-header .date-tags.typesquare_option span,
    #main .article-header .date-tags.typesquare_option time {
        display: table-cell !important;
        vertical-align: middle !important;
        text-align: left !important;
        white-space: nowrap !important;
        padding: 0 2px !important;
    }

    #main .article-header .date-tags.typesquare_option .fa {
        width: 26px !important;
        text-align: center !important;
    }
}



/****************************
カテゴリータグスペース
*****************************/

.entry-categories-tags {
  margin-top: 2px;
	margin-bottom: 0em;
}
.entry-categories-tags>div {
    margin-bottom: 0em;
    margin-left: 0em;
}

/**********************
    目次
***********************/
/*タイトル文字の太さ色*/
.toc-title{
position: relative;
padding: 5px 0px;
background: #300060;
color: #fff;
font-weight: bold;
padding: 0;
}
/*背景色、枠線*/
.toc {
background: #f4f5f7;
border: 1px solid #300060 !important;
}
/*文字の色と大きさ*/
.toc a {
color: #0693cd;
font-size: 16px;
}

/* 目次の設定：左寄せ（中身に合わせる） */
.article .toc,
.entry-content .toc,
div#toc_container {
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
    display: table !important;
    max-width: 95% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-break: break-all !important;
    clear: both !important;
}

/*H3の目次番号を消す*/
.toc ol.toc-list > li li{
list-style: none;
}
.article .toc-list > li li {
list-style: none;
}

/*H3の文字を小さく*/
.toc-list > li li a {
font-weight: normal;
font-size: 95%;
color: #708090;
margin-left: -10px;
}

/*H3の目次番号を点にする*/
.toc-list > li li ::before {
content: '';
width: 5px;
height: 5px;
display: inline-block;
left: -8px;
border-radius: 100%;
background: #cdcdcd;
position: relative;
margin-bottom: 2px;
}

/****************************
 タイトルのデザイン（H1〜H4）
****************************/

/*** H1 ***/
#main h1.entry-title {
    position: relative;
    font-family: "Jun 501" !important;
    font-size: 26px;
    margin-top: 15px;
    margin-bottom: 0px;
	  padding-bottom: 0px;
    line-height: 1.4;
    color: #333 !important;
    text-shadow: 
        0.05em 0.05em 0.1em rgba(0, 0, 0, 0.2),
        0.1em 0.2em 0.15em plum,
        -1px -1px 0px rgba(255, 255, 255, 0.5) !important;
    border-bottom: none !important;
}
/* 下線の再構築：奥行きのあるツートンライン */
#main h1.entry-title::after {
    display: block;
    content: "";
    height: 8px;
    margin-top: 8px;
    background: linear-gradient(to right, #800080, #DDA0DD 70%, #ffffff 100%) !important;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(128, 0, 128, 0.2) !important;
}

/*** H1直下のNEW!調整 ***/
#main h1.entry-title > span:not(.new-txt),
#main h1.entry-title > em:not(.new-txt) {
    font-family: "Jun 501", sans-serif !important;
    font-size: 24px !important;
}
/* NEW!マーク：サイト全体でサイズと挙動を統一して固定 */
.new-txt {
    display: inline-block !important;
    font-family: "Shin Maru Go Regular", sans-serif !important;
    font-size: 10px !important;       /* サイドバー基準のサイズ */
    font-weight: normal !important;
    vertical-align: middle !important;
    margin-left: 5px !important;
    padding: 1px 3px !important;
    background-color: crimson !important;
    color: #fff !important;
    border-radius: 3px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

/* H1横にある時に少しだけ大きくする（微調整） */
#main .entry-title .new-txt {
    font-size: 11px !important;
    margin-top: -2px !important;
}

/*** H2（大見出し）：画面端まで伸びる紫の帯 ***/
.article h2 {
    font-family: "UD新ゴ M" !important;
    font-weight: 900;
    font-size: 21px;
    letter-spacing: 0.05em;
    color: #ffffff !important;
    text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.6),
			1px 1px 1px rgba(255, 255, 255, 0.3) !important;
    margin: 2em -10px 1.5em;
    padding: 12px 20px;
    background: linear-gradient(to right, #800080, #dda0dd) !important;
    border: none !important;
    border-left: 3px solid #4b0082 !important;
    border-radius: 0 4px 4px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}
/* 擬似要素の装飾をリセット */
.article h2::before,
.article h2::after {
    display: none;
    content: none;
    border: none;
}

/*** H3（見出し）***/
.article h3 {
    font-family: "Jun 501" !important;
		color: #333 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2) !important;
		font-size: 22px !important;
    background: transparent !important;
    border: none !important;
    position: relative;
    padding-left: 1em !important; 
    padding-bottom: 8px !important;
    display: block !important;
    margin-left: -10px !important;
    margin-right: -10px !important;
}
.article h3::after {
    content: "";
    position: absolute !important;
    left: 5px !important; 
    bottom: -2px; 
    display: block;
    height: 5px;
    background: linear-gradient(to right, #800080 0%, #800080 10%, #ffffff 80%, #DDA0DD 100%) !important;
    width: calc(100% - 10px) !important;
    border-radius: 50px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2) !important;
}

/*** H4（小見出し） ***/
.article h4 {
    font-family: "UD Shin Go Conde90 M" !important;
	  font-size: 18px !important;
    font-weight: bold !important;
	  color: #444 !important;
    background: #ffeff5 !important;
    border: none !important;
    border-left: 4px solid #800080 !important;
    border-radius: 0 4px 4px 0 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) !important;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.05) !important;	
	  margin-left: -5px !important;
    margin-top: 2.5em !important;
    margin-bottom: 1.2em !important;
padding: 5px 12px 5px 1em !important;
    display: block !important;
}


/*****************************
 ページネーションとSNSエリア
******************************/

.pager-post-navi.post-navi-border a.a-wrap {
    border: 1px solid #808080 !important;
    border-radius: 20px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center;
    background: #ffffff !important;
    text-decoration: none !important;
    overflow: hidden;
}

.pager-post-navi.post-navi-border a.a-wrap:hover {
    background: #800080 !important;
    color: #ffffff !important;   
    border-color: #800080 !important;
}

/* クリックした瞬間（アクティブ） */
.pager-post-navi.post-navi-border a.a-wrap:active {
    background: whitesmoke !important;
    color: #800080 !important;
    border-color: #800080 !important;
}

/* フォントサイズとアイコンの微調整 */
.pager-post-navi a.prev-post .prev-post-title,
.pager-post-navi a.next-post .next-post-title {
    font-size: 14px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-family: "Jun 301" !important;*/
}

/* アイコン（iconfont）の余白 */
.pager-post-navi a .iconfont {
    padding-right: .2em !important;
    padding-left: .2em !important;
    color: inherit !important; 
}

/* 矢印を有効化 */
.pager-post-navi .fa-chevron-left::before {
    content: "\f359" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}
.pager-post-navi .fa-chevron-right::before {
    content: "\f35a" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/*** リストページ：ナビゲーション ***/
/*「次のページ」通常時 */
.archive .pagination-next-link,
.category .pagination-next-link,
.tag .pagination-next-link {
    color: #800080 !important;   
    background-color: #f9f0ff !important;
    border: 1px solid #DDA0DD !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 50px !important;
    transition: all 0.3s ease !important;
}

/* 「次のページ」ホバー時 */
.archive .pagination-next-link:hover {
    background-color: #800080 !important;
    color: #ffffff !important;   
    border-color: #800080 !important;
}

/* 現在地 */
.archive .page-numbers.current,
.category .page-numbers.current,
.tag .page-numbers.current {
    background-color: #800080 !important;
    color: #ffffff !important;   
    border-color: #800080 !important;
    font-weight: bold !important;
    cursor: default !important; 
}

/* 数字ボタンのホバー：リンクがある数字だけ反応 */
.archive .page-numbers:not(.current):not(.dots):hover,
.category .page-numbers:not(.current):not(.dots):hover,
.tag .page-numbers:not(.current):not(.dots):hover {
    background-color: #800080 !important;
    color: #ffffff !important;
    border-color: #800080 !important;
    transform: translateY(-2px);
}

/* 「・・・」通常時 ＆ ホバー時 */
.archive .page-numbers.dots,
.archive .page-numbers.dots:hover {
    background-color: #ffffff !important;
    color: #800080 !important;
    border-color: #DDA0DD !important;
    transform: none !important;
    cursor: default !important;
}

/* スマホ版でも「・・・」を隠さず表示させる補正 */
@media screen and (max-width: 480px) {
    .archive .page-numbers.dots,
    .category .page-numbers.dots,
    .tag .page-numbers.dots {
        display: inline-flex !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
}


/*******************************
 footnoteの設定（左右全幅）
********************************/
sup {
    font-size: 10px;
}
sup:before {
    content: "[";
}
sup:after {
    content: "]";
}

/* 記事H4の影響を防ぎつつ、左右一杯（帯状）に広げる設定 */
body .article .easy-footnote-title h4 {
    font-size: 16px;
    font-family: "Midashi Go MB31";
    background-color: whitesmoke !important;
    border-top: 1px solid #808080 !important;
    border-bottom: 1px solid #808080 !important;
    border-right: 1px solid #808080 !important;
    border-left: .2em solid black !important;
    margin-left: -10px !important;
    margin-right: -10px !important;
    margin-top: 3em;
    padding-left: 15px !important;
    padding-top: .2em !important;
    padding-bottom: .2em !important;
    color: #333 !important;
}

.easy-footnotes-wrapper {
    font-size: 14px; /*リスト自体はそのままでOK */
}



/**********************
 引用ブロックの調整
***********************/
.font-awesome-5 blockquote::before {
display: inline-block;
position: absolute;
font-size: 18px;
font-weight: bold;
color: white;
background: rgba(128,0,128,.5);
top: .4em;
left: .5em;
width: 34px;
height: 34px;
text-align: center;
line-height: 1.8em;
border-radius: 50%;
}
.wp-block-quote {
border-width: 1px 1px 1px .4em;
}
blockquote p {
position: relative;
margin-left: 0em;
}
blockquote cite {
display: block;
font-size: 12px;
text-align: right;
border-top: 1px dashed plum;
padding-top: .3em;
}

/*********************
ブランクボックスの設定
**********************/
.blank-box {
background: #ffffef !important;
border: 1px solid black !important;
padding: 1.2em;
}

/**********************
Pz-LinkCard マージン
***********************/
.lkc-external-wrap {
margin: 0 auto 25px auto;
}

/**********************
Enlighterの調整
***********************/
.enlighter-default {
padding: 0 !important;
margin-bottom: 1.8em;
margin-left: 1em;
}
.enlighter span {
line-height: 1.8em;
}


/*********************************
    関連記事・コメントタイトル
*********************************/
#main .related-entry-heading, 
#main .comment-title {
    font-family: 'Jun 501', sans-serif !important;
    font-size: 22px !important;
    font-weight: bold !important;
    color: #333 !important;
    margin: 3em 0 1.5em !important;
    padding: 0 0 12px 0 !important;
    position: relative !important;
    display: block !important;
    border: none !important;
    background: transparent !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1) !important;
}

#main .related-entry-heading::after, 
#main .comment-title::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    display: block !important;
    height: 5px !important;
    background: linear-gradient(to right, #800080, #DDA0DD 70%, #ffffff 100%) !important;
    width: 100% !important;
    border-radius: 3px !important;
}

#main .related-entry-heading::before {
    content: "\f00b" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    margin-right: 0.5em !important;
    color: #800080 !important;
}

#main .comment-title::before {
    content: "\f075" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    margin-right: 0.5em !important;
    color: #800080 !important;
}


/*******************************
     サイドバー
********************************/

.sidebar {
    border-width: 0 !important;
    padding: 5px 5px 15px 5px !important;
    display: block;
    visibility: visible;
}

.sidebar .widget-entry-card-title {
    font-size: 15px !important;
    font-family: "Jun 501" !important;
    color: #111 !important;
    line-height: 1.5 !important;
}

.sidebar .widget-entry-card-title:hover {
    text-decoration: none !important;
}

#sidebar {
    margin: 0 !important;
    padding: 0 !important;
}

#sidebar .widget-entry-cards .a-wrap {
    margin: .1em !important;
    padding-top: 5px !important;   
    padding-bottom: 5px !important; 
    position: relative !important;
    display: block;
	  transition: all 0.25s ease;
}
/* 右へスライド*/
#sidebar .widget-entry-cards .a-wrap:hover {
    transform: translateX(5px);   
}
/* 矢印のロジックもサイドバー専用に隔離 */
#sidebar .widget-entry-cards .a-wrap::after {
    content: '\f105' !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    color: #800080 !important;
    position: absolute;
    right: 1em;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 1.2em;
    line-height: 1;
    display: flex;
    align-items: center;
}

/* サイドバー新着記事に投稿日と更新日を表示*/
.widget_new_entries .display-none {
  display: block;
	padding: 0 !important;
	font-size: 10pt;
	line-height: 1em;
	width: 100%;
}

/* 基本デザインのパーティション */
.border-partition .a-wrap {
    border-bottom: 1px solid rgba(128, 0, 128, 0.15) !important;
}

/* 最初のカードの前調整 */
.border-partition .a-wrap:first-of-type {
  border-top: none;
	padding-top: 10px;
}

/* ホバー時の全体反転アクション（下線を排除）  */

#sidebar .widget-entry-cards .a-wrap:hover {
    background-color: #800080 !important;
    text-decoration: none !important;
    transform: translateX(5px);   
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

/* ホバー時に文字・日付・矢印をすべて白く反転 */
#sidebar .widget-entry-cards .a-wrap:hover .widget-entry-card-title,
#sidebar .widget-entry-cards .a-wrap:hover .display-none,
#sidebar .widget-entry-cards .a-wrap:hover::after {
    color: #ffffff !important;
}


/* 3. スマホ・タブレット表示（834px以下）のみ、端まで広げる */
@media screen and (max-width: 834px) {
    .sidebar {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
    .sidebar .widget {
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/***************************
 サイドバータイトル
****************************/
/* サイドバーの全タイトル（h3）に適用 */
body .widget-sidebar-scroll-title.widget-title,
body .widget-sidebar-scroll-title.widget-title *,
.sidebar h3,
.sidebar h3 span {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    color: #222 !important;
    font-family: 'Jun 501' !important;
    font-size: 22px !important;
    letter-spacing: .1em;
    border: none !important;
    background-color: transparent !important;
    position: relative;
    padding-bottom: 10px;

    /* 文字の立体感：H1の手法（ハイライト・メイン影・残像）を継承 */
    text-shadow: 
        -1px -1px 0px rgba(255, 255, 255, 0.6),
        0.05em 0.05em 0.1em rgba(0, 0, 0, 0.2),
        0.1em 0.2em 0.15em plum !important;
}

.sidebar h3::after {
    height: 3px !important;
    margin-top: 5px !important;
    background: linear-gradient(to right, #DDA0DD, #800080) !important;
}

/* 下のグラデーション線を生成：立体的なバーに変更 */
#sidebar .widget-title::after,
#sidebar-scroll .widget-title::after {
    display: block;
    content: "";
    height: 6px;
    margin-top: 6px;
    background: linear-gradient(to right, #DDA0DD, #800080 60%, #ffffff 100%) !important;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(128, 0, 128, 0.2) !important;
}


/********************
 サイドバーカテゴリー
*********************/

/* リスト区切り線を薄い実線 */
.widget_categories ul li a,
.widget_archive ul li a,
.widget_pages ul li a,
.widget_meta ul li a {
    border-bottom: 1px solid rgba(128, 0, 128, 0.15) !important;
}

.widget_categories ul li a {
    line-height: 1.6;
    font-size: 16px;
    font-family: "Shin Go Medium" !important;
    font-weight: bold !important;
    color: #333 !important;
    padding: 8px 10px;
    display: block;
    border-bottom: 1px solid rgba(128, 0, 128, 0.15) !important; 
    transition: all 0.2s ease;
}

/* カテゴリーアイコン：色を濃紫にしてクリアに */
.widget_categories ul li a::before {
    font: var(--fa-font-solid);
    content: "\f00b";
    color: #800080;
    font-size: 16px;
	  font-weight: 900;
    margin-right: 0.6em;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8);
}

/* ホバー時の反応：背景を薄ピンクにして浮き上がらせる */
.widget_categories ul li a:hover {
    background: #ffeff5 !important;
    color: #800080 !important;
    padding-left: 10px;
}

/*********************
 サイドバータグ一覧（クリア版）
**********************/
.tag-cloud-link {
    font-size: 13px !important;
    font-weight: bold !important;
    font-family: "Jun 301" !important;
    color: #666 !important;
    background: #fff !important;
    border: 1px solid #DDA0DD !important;
    border-radius: 4px;
    padding: 2px 10px !important;
    margin: 0 4px 8px 0 !important;
    line-height: 2em;
    display: inline-block;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.tag-cloud-link:hover {
    background: #800080 !important;
    color: #fff !important;
    border-color: #800080 !important;
}
.fa-tag:before {
font-family:"Font Awesome 6 Free";
font: var(--fa-font-solid);
content:"\f02c";
color: #202020;
}

/**********************
 サイドバー検索窓
***********************/

/* 入力エリア本体 */
.search-edit, input[type=text].search-edit {
    background: #ffffff !important; 
    font-size: 14.5px;
    font-family: "Shin Go Medium" !important;
    border: 1px solid #DDA0DD !important;
    border-radius: 4px;
    padding: 8px 12px;
    line-height: 1.5em;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* フォーカス時やアイコンの設定 */
.search-edit:focus {
    border-color: #800080 !important;
    background: #ffeff5 !important;
    outline: none;
    box-shadow: 0 0 5px rgba(128, 0, 128, 0.2) !important;
}

.fa-search:before {
    content: "\f002";
    color: #800080;
    font-weight: 900;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8);
}

.search-box {
    margin-top: -5px !important;
    margin-bottom: 10px !important;
}
.widget_search {
   margin-top: 0 !important;
    padding-top: 0 !important;
}


/******************************************
モバイル・タブレット統合管理（834px以下）
（レスポンシブデザイン用のメディアクエリ）
*******************************************/

@media screen and (max-width: 834px) {
/* スクロールバー非表示 */
    html, body { -ms-overflow-style: none; scrollbar-width: none; }
    ::-webkit-scrollbar { display: none !important; }
/* PC用ヘッダーの完全消去 */
#header {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

/* レイアウトの共通調整 */
    .container {
		margin-top: 0 !important;
	}
    .main.main {
        padding-left: 10px !important;
        padding-right: 10px !important;
        overflow-x: hidden;
    }

/* 記事タイトル H1 */
html body h1.entry-title.typesquare_option {
        margin-top: 35px !important;
        margin-bottom: 20px !important;
        font-size: 26px !important; 
    }
	
	/* 文字サイズ（タブレット） */
	.page-body { font-size: 16px; }
    .article h2 {  font-size: 21px !important;} 
    .article h3 { font-size: 19px !important; }

/************* タイトルバー開始 ***************/

/*** メニュー ***/
.mobile-menu-buttons {
	background-image: url(https://harmonia-web.com/wp-content/uploads/2025/11/harmonia-web_banner.jpg) !important;
    background-size: cover !important;
    background-position: center !important;
    border-bottom: none !important; 
    box-shadow: none !important; 
    height: 60px !important;
    z-index: 9999;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 60px !important;
}

/*** ロゴ ***/
.logo-menu-button {
        font-family: "Cinema Letter" !important;
        font-size: 26px !important; 
        display: block !important; 
        text-shadow: 0.1em 0.1em 0.2em plum !important;
    }

	/* ロゴのマージンを除去して位置を固定 */	
.mobile-menu-buttons .logo-menu-button {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}	
/* ロゴ：リンクを直接白くする */
.mobile-menu-buttons .logo-menu-button a {
    color: #ffffff !important; 
    font-family: "Cinema Letter" !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    font-size: 24px !important;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8) !important;
line-height: 1 !important;
    display: block !important;
    text-shadow: 
        -1px -1px 0px rgba(255, 255, 255, 0.5), 
        1px 1px 0px rgba(0, 0, 0, 0.8),
        2px 2px 3px rgba(0, 0, 0, 0.9),
        0px 0px 5px rgba(221, 160, 221, 0.6) !important;
}
/* 左右のボタンも高さを揃えて、全体のバランスをとる */
.mobile-menu-buttons .menu-button {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}
/* メニューと検索のアイコン色：ロゴに合わせて白へ  */
.mobile-menu-buttons .menu-button > a {
    color: #dcdcdc !important;
}
.mobile-menu-buttons .search-menu-icon .fa-search:before {
    color: #dcdcdc !important; /* 紫の沈みを解消 */
	}
/* 各ボタンの垂直中央合わせ（高さを揃える） */
.mobile-menu-buttons .menu-button,
.mobile-menu-buttons .search-menu-button,
.mobile-menu-buttons .logo-menu-button {
    height: 100% !important;
    display: flex !important;
    align-items: center !important; /* 垂直中央に寄せる */
    justify-content: center !important;
}	
/************* タイトルバー終了 ***************/
	
	
/* サイドバー全体の枠を画面幅いっぱいに拡張 */
  .sidebar {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    border: none !important;
  }
/* ウィジェット個別の枠内余白も極限まで削る */
  .sidebar .widget {
    padding-left: 2px !important;
    padding-right: 2px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
/* リスト・カテゴリー・新着記事に特有の左余白を強制削除 */
  .sidebar ul,
  .sidebar li,
  .sidebar ol {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
/* フォルダーアイコンの調整 */
  .widget_categories ul li a,
  .widget_archive ul li a,
  .widget_pages ul li a,
  .widget_meta ul li a {
    padding-left: 5px !important;
  }
/* 新着記事カードの横幅調整 */
  .widget_new_entries .widget-entry-cards {
     margin: 0 !important;
  }
}


@media screen and (max-width: 480px){
    .sidebar h3 {
        font-size: 16px !important;
    }

/***** H1 *****/
    html body h1.entry-title.typesquare_option {
		font-size: 24px !important;
		line-height: 1.3 !important;
        display: block !important;
        position: relative !important;
        width: 98vw !important;
        max-width: 98vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 15px 0 !important;
padding-top: 0 !important;
    padding: 0 !important;
    }
    html body h1.entry-title.typesquare_option::after {
        content: "" !important;
        display: block !important;
        width: 100% !important;
        left: 0 !important;
        transform: none !important;
    height: 7px !important;
    position: relative !important;
    top: 10px !important;
        margin: 0 !important;
    }
	
/***** H2 ***** */
    body .article h2 {
	font-size: 19px !important;
    width: auto !important;
    margin-left: -10px !important;
	margin-right: -10px !important;
    border-radius: 0 !important;
    padding-left: 20px !important; 
    padding-right: 20px !important;
    }	
	
/***** H3,H4 *****/
    .article h3, .article h4,  
    .easy-footnote-title h4, .toc {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .article h3 { font-size: 18px !important; }
   
/* モバイルヘッダーロゴ */
    .mobile-menu-buttons .logo-menu-button a {
        font-family: "Cinema Letter" !important;
        font-size: 20px !important;
        white-space: nowrap !important;
        display: block !important;
        text-shadow: 0.1em 0.1em 0.2em plum !important;
    }
		
/* リンクデザインとの調整 */
.mobile-menu-buttons .logo-menu-button a {
    color: #ffffff !important; 
    font-family: "Cinema Letter" !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    font-size: 24px !important;
/* 親要素からの影の干渉をすべてリセット */
    filter: none !important;
	  box-shadow: none !important;
    -webkit-filter: none !important;
    line-height: 1 !important;
    display: block !important;
/* 4層のtext-shadowのみを適用 */
    text-shadow: 
        -1px -1px 0px rgba(255, 255, 255, 0.5), 
        1px 1px 0px rgba(0, 0, 0, 0.8),
        2px 2px 3px rgba(0, 0, 0, 0.9),
        0px 0px 5px rgba(221, 160, 221, 0.6) !important;
}

/* 目次の突き抜け防止 */
    .article .toc, .entry-content .toc {
        max-width: 100% !important;
        width: auto !important;
        display: block !important;
    }
	
/* 関連記事・コメントタイトル */
    .related-entry-heading, 
    .comment-title {
        font-size: 17px !important;
        letter-spacing: .05em !important;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }
   
/* 画像の影とリサイズ */
    img { 
        box-shadow: 0px 2px 5px 0 rgba(0,0,0,.2) !important; 
        max-width: 100% !important;
        height: auto !important;
    }	
}


/*********************
モバイルスライドインメニュー
**********************/
/** 逆から開く **/
.navi-menu-content {
background: #ffeff5;
	left: auto;
  right: 0;
  transform: translateX(105%);
}
/* 背景色 */
.navi-menu-content {
background-color: #f4f4ff;
}
.navi-menu-content ul a{
background-color: #f4f4ff;
}

span.fas.fa-times::before{
font-size: 16pt;
font-family: "Font Awesome 6 Free";
content: "\f057";
font-weight: 900;
color:#808080;
}
.menu-drawer li{
font-family: "Jun 501";
font-weight: bold;
color: #800080;
line-height:2em;
}
.menu-drawer li li{
padding-left: .9em;
line-height:2em;
}
.menu-drawer .sub-menu li li a {
margin: 0 .2em 0 .2em;
padding-left: .5em;
}
.menu-drawer a{
font-size: 12pt;
font-weight:bold;
color:#545454;
margin: 0;
border-top: 1px dotted plum;
}
.menu-drawer a:hover{
background-color: #efe0ff;
}

.menu-content .menu-drawer {
padding: 0 1em;
font-size: 12pt;
}
.menu-content .menu-drawer .sub-menu {
padding:0;
}
.menu-content .menu-drawer .sub-menu li{
	padding: 0 1em;
	font-size: 9pt;
}
.menu-content .menu-drawer .sub-menu li li{
	padding: 0 1em;
	font-size: 8pt;
}