/*
Theme Name: AFFINGER Child
Template: affinger
Description: AFFINGER6 対応
Version: 20240601
*/

aside .kanren {
    padding-top: 7px;
}

.p-navi .st-prev {
    padding: 15px 14px 15px 0;
}
    .p-navi p {
        font-size: 0.8em;
        line-height: 1.4;
    }

.wp-block-latest-posts li a {
        color: #4a81a1;
        font-weight: 500;
    }

#st_toc_container:not(.over_toc_content):not(.side_toc_content):not(.st_toc_contracted):not(.only-toc), .st_toc_container:not(.over_toc_content):not(.side_toc_content):not(.st_toc_contracted):not(.only-toc) {
    padding: 20px 20px 30px 20px;
}

#st_toc_container li li, .st_toc_container li li {
    padding: 2px 0 0;
}
main .post #st_toc_container:not(.over_toc_content):not( .side_toc_content ).st_toc_style_default > ul > li > ul, main .post .st_toc_container.st_toc_style_default > ul > li > ul {
    padding-bottom: 3px;
}

main .post #st_toc_container:not(.over_toc_content):not( .side_toc_content ).st_toc_style_default ul ul,main .post .st_toc_container.st_toc_style_default ul ul {
    padding: 5px 0 10px 1.2em;
    margin-bottom: 0;
}

    header .smanone ul.menu {
        background-color: #497995a8;
    }
    header .smanone ul.menu li a {
        color: #ffffff;
    }

.clip-memotext {
    padding-left: 0.4em;
}

main ul li, main ol li {
    padding-top: 0.1em;
    padding-bottom: 0.4em;
    line-height: 1.5em !important;
}

/*media Queries スマートフォンとタブレットサイズ（959px以下）で適応したいCSS - スマホ・タブレット
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 959px) {


	/*-- ここまで --*/
}
	
/*media Queries タブレットサイズ（600px～959px）のみで適応したいCSS -タブレットのみ
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 959px) {


	/*-- ここまで --*/
}	
	
/*media Queries タブレット（600px）以上で適応したいCSS -タブレット・PC
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) {

/* 記事一覧をカード型にする */
.kanren dl {
    margin-bottom: 5px;
    padding: 14px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* hover時にカードを浮かせる */
.kanren dl:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    border-color: #ccc;
}

/* カード内の余白調整 */
.kanren dl dt,
.kanren dl dd {
    margin: 0;
    padding: 0;
}

/* 記事一覧のカテゴリー */
.st-catgroup.itiran-category .catname {
    font-size: 10px;
    margin: 0 0 2px;
    padding: 3px;
}
.catname {
    background: #c8d9ff;
}

/* 記事一覧カード（最後の要素） */
.kanren dl:last-child {
    margin-bottom: 5px;  /* 他のカードと同じ間隔 */
    padding: 14px;        /* 他と統一 */
    border: 1px solid #e0e0e0; 
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* hover時の演出 */
.kanren dl:last-child:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    border-color: #ccc;
}


/* 記事タイトル：はっきり黒基調＋囲み */
#contentInner .post .entry-title:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no):not(.st-css-no2) {
    font-size: 28px;
    line-height: 1.5;
    font-weight: 800;
    color: #111; /* 黒基調で強調 */
    margin: 11px 0 9px;
    padding: 14px 27px;
    border: 2px solid #000; /* はっきり黒枠 */
    border-radius: 6px;
    background: #fff; /* 白背景でコントラスト強調 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* 影で立体感 */
    transition: all 0.3s ease;
}

/* hover時の演出 */
#contentInner .post .entry-title:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no):not(.st-css-no2):hover {
    background: #f5f5f5; /* 薄グレーに反転 */
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}


/* サイドバー見出しデザイン */
.h2modoki,
h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no2) {
    background: #f8f9fa; /* 薄いグレーで落ち着いた背景 */
    border-left: 4px solid #007acc; /* 左ラインをアクセントカラーに */
    padding: 4px 13px;
    margin: 20px 0 10px;
    border-radius: 6px; /* 角丸で柔らかさを出す */
    font-size: 18px;
    font-weight: bold;
    color: #333; /* 読みやすい濃いグレー */
    line-height: 1.5;
    transition: background 0.3s ease, color 0.3s ease;
}

/* ホバー時の演出（クリック可能な見出しっぽく） */
.h2modoki:hover,
h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):hover {
    background: #e6f2fa; /* 少し青みを帯びた背景 */
    color: #005a99; /* 文字色も変化 */
}



table thead th {
    font-size: 1.1em;
}

.post table tr td, table tr td {
        font-size: 14px;
        line-height: 26px;
    }

.clip-memobox {
    padding: 17px 12px 17px 14px;
}

/* ===============================
   Ribbon H2（斜めカット＋上下ピンク）
   下側が隠れないよう調整済み
================================= */

/* 色・形状のカスタム変数 */
:root{
  --h2-ribbon-bg: #2b2b2b;      /* リボン（帯）の色 */
  --h2-text: #ffffff;           /* 文字色 */
  --h2-slash-main: #7b82d7;
  --h2-slash-sub:  #f9d1de;     /* ピンク(淡) */
  --h2-cut-angle: 8%;           /* 斜めカットの強さ */
  --h2-ribbon-radius: 8px;      /* 帯の角丸 */
  --h2-bleed: 7px;             /* 疑似要素の“はみ出し”量＝下側の確保分 */
  --h2-slash-thickness: 6px;    /* ピンク線の太さ */
}

/* 固定ヘッダー向け（任意） */
.post h2 { scroll-margin-top: 80px; }

/* 見出し本体 */
.post h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
  position: relative;
  /* 通常マージン + 下側に余白を追加して疑似要素分を確保 */
  margin: clamp(18px,3vw,28px) 0 calc(clamp(11px,3vw,11px) + var(--h2-bleed));
  padding: clamp(6px,0.8vw,18px) clamp(9px,1.4vw,28px);
  color: var(--h2-text);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.01em;
  background: none;
  overflow: visible;
  /* スタッキングコンテキストを作り、子の z-index を安定化 */
  z-index: 0;
  transform: translateZ(0);
}

/* リボン（帯）本体：斜めにカット */
.post h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no)::after{
  content: "";
  position: absolute;
  /* 上下左右に拡張（端欠け防止） */
  inset: -8px -3px;
  background: var(--h2-ribbon-bg);
  clip-path: polygon(
    0 var(--h2-cut-angle),
    100% 0,
    100% calc(100% - var(--h2-cut-angle)),
    0 100%
  );
  border-radius: var(--h2-ribbon-radius);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  /* 見出しテキストの背面、ピンクよりは上 */
  z-index: -1;
}

/* 上下のピンクスラッシュ（2本） */
.post h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no)::before{
  content: "";
  position: absolute;
  /* 帯よりさらに外へ（特に下方向に多めに出す） */
  inset: -7px -3px;
  background:
    linear-gradient(-6deg, var(--h2-slash-main), var(--h2-slash-main))
      top left / 130% var(--h2-slash-thickness) no-repeat,
    linear-gradient(-6deg, var(--h2-slash-sub),  var(--h2-slash-sub))
      bottom left / 130% var(--h2-slash-thickness) no-repeat;
  filter: drop-shadow(0 2px 0 rgba(255,255,255,0.25));
  /* リボンより下、でも同一スタック内に収める */
  z-index: -2;
}

/* 見出しがリンク全体のときの下線対策 */
.post h2 a{
  color: inherit;
  text-decoration: none;
}
.post h2 a:hover,
.post h2 a:focus{
  opacity: .92;
}

/* 直後の段落の上マージン微調整 */
.post h2 + p { margin-top: 0.65em; }

/* 既存のグローバルh2の余計な指定をリセット */
h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no2){
  background: transparent;
  color: inherit;
  margin: 0;
}

	/*-- ここまで --*/
}

/*media Queries PCサイズ（960px）以上で適応したいCSS - PCのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (min-width: 960px) {


	/*-- ここまで --*/
}

/*media Queries スマホサイズ（599px）以下で適応したいCSS - スマホのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (max-width: 599px) {

.kanren {
    padding-top: 4px;
}

.st-tabs__tab {
    padding: 2px !important;
}

.kanren dt {
    width: 125px;
}
:root main .kanren:not(.st-cardbox) dt:not(.st-cardbox) img {
    float: none;
    width: 95% !important;
}
.post h5 {
    font-size: 16px;
    line-height: 20px;
    padding-right: 9px;
}


.post .st-catgroup.itiran-category {
    padding: 0 0 1px;
}

/* 記事一覧をカード型にする */
.kanren dl {
    margin-bottom: 2px;
    padding: 9px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* hover時にカードを浮かせる */
.kanren dl:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    border-color: #ccc;
}

/* カード内の余白調整 */
.kanren dl dt,
.kanren dl dd {
    margin: 0;
    padding: 0;
}

/* 記事一覧のカテゴリー */
.st-catgroup.itiran-category .catname {
    font-size: 10px;
    margin: 0 0 2px;
    padding: 3px;
}
.catname {
    background: #c8d9ff;
}

/* 記事一覧カード（最後の要素） */
.kanren dl:last-child {
    margin-bottom: 3px;  /* 他のカードと同じ間隔 */
    padding: 9px;        /* 他と統一 */
    border: 1px solid #e0e0e0; 
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* hover時の演出 */
.kanren dl:last-child:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    border-color: #ccc;
}


/* 記事タイトル：はっきり黒基調＋囲み */
#contentInner .post .entry-title:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no):not(.st-css-no2) {
    font-weight: 800;
    color: #111; /* 黒基調で強調 */
    margin: 11px 0 9px;
    padding: 9px 15px;
    border: 2px solid #000; /* はっきり黒枠 */
    border-radius: 6px;
    background: #fff; /* 白背景でコントラスト強調 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* 影で立体感 */
    transition: all 0.3s ease;
}

/* hover時の演出 */
#contentInner .post .entry-title:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no):not(.st-css-no2):hover {
    background: #f5f5f5; /* 薄グレーに反転 */
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

/* ===============================
   Ribbon H2（斜めカット＋上下ピンク）
   下側が隠れないよう調整済み
================================= */

/* 色・形状のカスタム変数 */
:root{
  --h2-ribbon-bg: #2b2b2b;      /* リボン（帯）の色 */
  --h2-text: #ffffff;           /* 文字色 */
  --h2-slash-main: #7b82d7;
  --h2-slash-sub:  #f9d1de;     /* ピンク(淡) */
  --h2-cut-angle: 8%;           /* 斜めカットの強さ */
  --h2-ribbon-radius: 8px;      /* 帯の角丸 */
  --h2-bleed: 7px;             /* 疑似要素の“はみ出し”量＝下側の確保分 */
  --h2-slash-thickness: 6px;    /* ピンク線の太さ */
}

/* 固定ヘッダー向け（任意） */
.post h2 { scroll-margin-top: 80px; }

/* 見出し本体 */
.post h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
  position: relative;
  /* 通常マージン + 下側に余白を追加して疑似要素分を確保 */
  margin: clamp(18px,3vw,28px) 0 calc(clamp(11px,3vw,28px) + var(--h2-bleed));
  padding: clamp(6px,1.8vw,18px) clamp(9px,1.4vw,28px);
  color: var(--h2-text);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.01em;
  background: none;
  overflow: visible;
  /* スタッキングコンテキストを作り、子の z-index を安定化 */
  z-index: 0;
  transform: translateZ(0);
}

/* リボン（帯）本体：斜めにカット */
.post h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no)::after{
  content: "";
  position: absolute;
  /* 上下左右に拡張（端欠け防止） */
  inset: -8px -11px;
  background: var(--h2-ribbon-bg);
  clip-path: polygon(
    0 var(--h2-cut-angle),
    100% 0,
    100% calc(100% - var(--h2-cut-angle)),
    0 100%
  );
  border-radius: var(--h2-ribbon-radius);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  /* 見出しテキストの背面、ピンクよりは上 */
  z-index: -1;
}

/* 上下のピンクスラッシュ（2本） */
.post h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no)::before{
  content: "";
  position: absolute;
  /* 帯よりさらに外へ（特に下方向に多めに出す） */
  inset: -7px -11px;
  background:
    linear-gradient(-6deg, var(--h2-slash-main), var(--h2-slash-main))
      top left / 130% var(--h2-slash-thickness) no-repeat,
    linear-gradient(-6deg, var(--h2-slash-sub),  var(--h2-slash-sub))
      bottom left / 130% var(--h2-slash-thickness) no-repeat;
  filter: drop-shadow(0 2px 0 rgba(255,255,255,0.25));
  /* リボンより下、でも同一スタック内に収める */
  z-index: -2;
}

/* 見出しがリンク全体のときの下線対策 */
.post h2 a{
  color: inherit;
  text-decoration: none;
}
.post h2 a:hover,
.post h2 a:focus{
  opacity: .92;
}

/* 直後の段落の上マージン微調整 */
.post h2 + p { margin-top: 0.65em; }

/* 既存のグローバルh2の余計な指定をリセット */
h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no2){
  background: transparent;
  color: inherit;
  margin: 0;
}

 .post table tr td {
    font-size: 11px;
    line-height: 18px;
}

table thead th {
    font-size: 0.8em;
}

.clip-memobox {
    padding: 13px 10px 10px 14px;
}

#topnews-box dd {
    padding-bottom: 2px;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #ccc;
    font-size: 11px;
    margin-bottom: 3px;
}
#topnews-box div {
    padding: 0 10px 5px;
}
#topnews-box div.rss-bar {
    margin-bottom: 3px;
    padding: 5px 6px;
}
#topnews-box {
    padding: 0 0 6px;
    margin-bottom: 8px;
}
#topnews-box dt {
    font-size: 12px;
    padding-bottom: 3px;
}
.sns {
    padding: 5px 0 7px;
}
#side {
        padding-top: 4px;
    }

h2:not([class^="is-style-st-heading-custom-"]):not( [class*=" is-style-st-heading-custom-"] ):not(.st-css-no2), .h2modoki {
    padding-top: 4px;
    padding-right: 12px;
    padding-bottom: 4px;
    padding-left: 14px;
}
h2.has-st-regular-font-size, h2:not([class^="is-style-st-heading-custom-"]):not( [class*=" is-style-st-heading-custom-"] ):not(.st-css-no2) {
    font-size: 16px;
    line-height: 28px;
}
main ul {
    margin-left: 0.4em;
}
.st-mybox {
    margin: 20px 0;
    padding: 0 15px;
}
.st-middle-menu .menu li a {
    background: #3c4c6185;
    color: #ffffff;
}
	/*-- ここまで --*/
}