/* =========================================================
   rokkatei-fan.com add.css v3
   目的：タイトル画像に合わせた柔らかい菓子サイト風デザイン
   修正点：ヘッダー白背景の解消 / h2文字ズレ修正 / スマホメニュー崩れ対策
   HTML変更なし・追加CSSのみ
   ========================================================= */

:root{
  --rf-pink:#ef5b79;
  --rf-pink-dark:#d83f63;
  --rf-pink-soft:#ffe9ef;
  --rf-red:#d94757;
  --rf-mint:#d9efe6;
  --rf-mint2:#eef9f3;
  --rf-cream:#fffaf2;
  --rf-cream2:#fff6ec;
  --rf-brown:#5b4036;
  --rf-brown2:#7a5d52;
  --rf-line:#ecd6ca;
  --rf-shadow:0 10px 26px rgba(103,67,55,.09);
}

/* ------------------------------
   全体
------------------------------ */
html,
body{
  overflow-x:hidden;
}

html{
  background:#fffaf6;
}

body{
  color:#4f4039;
  background:
    radial-gradient(circle at 12px 12px, rgba(239,91,121,.045) 0 2px, transparent 3px),
    linear-gradient(180deg,#fffdf9 0%,#fff8f2 48%,#fffaf6 100%) !important;
  background-size:34px 34px,auto !important;
  line-height:1.85;
  letter-spacing:.02em;
}

img,
iframe,
video{
  max-width:100%;
}

img{
  height:auto;
}

a{
  color:#c63f58;
  text-underline-offset:3px;
}

a:hover{
  color:#e85d78;
}

/* ------------------------------
   ヘッダー：白背景を消して、背景画像風の色に統一
------------------------------ */
#header{
  position:relative;
  z-index:2;
  background:
    radial-gradient(circle at 44px 18px, rgba(255,255,255,.95) 0 4px, transparent 4.5px),
    radial-gradient(circle at 120px 35px, rgba(255,255,255,.88) 0 3px, transparent 3.5px),
    linear-gradient(#242924 0 58px, transparent 58px),
    linear-gradient(180deg,#d8efe6 58px,#eef8f2 100%) !important;
  background-size:170px 58px,220px 58px,auto,auto !important;
  border:0 !important;
  border-bottom:4px solid var(--rf-pink) !important;
  box-shadow:0 3px 0 rgba(255,255,255,.72) inset, 0 8px 22px rgba(94,55,48,.08) !important;
}

#head-in,
#header #head-in,
.head-cover,
#header .head-cover,
#header .info{
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

#head-in{
  max-width:1280px;
  margin:0 auto !important;
}

.head-cover{
  min-height:126px !important;
  height:auto !important;
  padding:14px 22px 12px !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
}

#sitename{
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
  text-align:left !important;
}

#sitename a{
  display:inline-block !important;
  line-height:1 !important;
  text-decoration:none !important;
}

#sitename img{
  display:block !important;
  width:315px !important;
  max-width:min(82vw,430px) !important;
  height:auto !important;
  filter:drop-shadow(0 3px 0 rgba(255,255,255,.75)) drop-shadow(0 8px 14px rgba(116,67,54,.12));
}

.desc{
  display:none !important;
}

/* ------------------------------
   グローバルナビ：PCは折返しチップ、スマホは横スクロール
------------------------------ */
#nav,
#gnavi{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  height:auto !important;
  overflow:visible !important;
}

#gnavi{
  padding:0 18px 14px !important;
}

#gnavi .menu-menu-container{
  display:block !important;
  width:100% !important;
  overflow:visible !important;
}

#gnavi ul.menu,
#gnavi .menu{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:8px !important;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:12px 14px !important;
  list-style:none !important;
  background:rgba(255,250,242,.92) !important;
  border:1px solid rgba(236,214,202,.95) !important;
  border-radius:0 0 18px 18px !important;
  box-shadow:0 9px 18px rgba(103,67,55,.08) !important;
  overflow:visible !important;
}

#gnavi .menu::before,
#gnavi .menu::after{
  content:none !important;
  display:none !important;
}

#gnavi .menu li,
#gnavi .menu > li{
  float:none !important;
  display:block !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  line-height:1.35 !important;
  flex:0 0 auto !important;
}

#gnavi .menu li a,
#gnavi .menu > li > a{
  display:block !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:8px 18px !important;
  color:#5b4036 !important;
  background:#fffaf2 !important;
  border:1px solid #edcfc1 !important;
  border-radius:999px !important;
  font-size:14px !important;
  line-height:1.35 !important;
  text-align:center !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  box-shadow:0 2px 0 rgba(255,255,255,.9) inset !important;
  transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease;
}

#gnavi .menu li a:hover,
#gnavi .menu li.current-menu-item > a,
#gnavi .menu li.current-menu-parent > a{
  color:#fff !important;
  background:linear-gradient(180deg,#f47a92,#df526e) !important;
  border-color:#df526e !important;
  transform:translateY(-1px);
}

#gnavi .menu li a span{
  display:inline !important;
  line-height:inherit !important;
}

/* Luxeritasのモバイル固定ナビは、通常ナビを横スクロール化するため非表示 */
ul.mobile-nav,
.mobile-nav{
  display:none !important;
}

/* ------------------------------
   コンテンツ基礎
------------------------------ */
.container{
  max-width:1280px !important;
  margin:26px auto 0 !important;
  padding:0 18px !important;
  box-sizing:border-box !important;
}

#primary,
#main,
#sidebar,
#core,
#mainEntity{
  box-sizing:border-box !important;
}

#main,
#sidebar{
  background:transparent !important;
}

/* パンくず */
#breadcrumb{
  margin:0 0 18px !important;
  padding:10px 14px !important;
  color:#7d665d !important;
  background:rgba(255,255,255,.88) !important;
  border:1px solid var(--rf-line) !important;
  border-radius:999px !important;
  box-shadow:0 5px 15px rgba(112,72,60,.06) !important;
  font-size:13px !important;
  line-height:1.5 !important;
}

#breadcrumb a{
  color:#7a5047 !important;
  text-decoration:none !important;
}

#breadcrumb i{
  color:var(--rf-pink) !important;
}

/* ------------------------------
   記事カード
------------------------------ */
.post,
#mainEntity.post,
#core .post{
  padding:28px 30px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,250,245,.97)) !important;
  border:1px solid var(--rf-line) !important;
  border-radius:18px !important;
  box-shadow:var(--rf-shadow) !important;
  box-sizing:border-box !important;
}

.entry-title{
  position:relative !important;
  margin:0 0 18px !important;
  padding:0 0 14px 20px !important;
  color:#4d372f !important;
  background:transparent !important;
  border:0 !important;
  border-bottom:2px solid #f6d6df !important;
  font-size:clamp(24px,3vw,34px) !important;
  line-height:1.42 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  overflow:visible !important;
}

.entry-title::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:.38em !important;
  width:8px !important;
  height:1.15em !important;
  background:linear-gradient(180deg,#f48aa0,#d94864) !important;
  border-radius:999px !important;
  box-shadow:0 0 0 4px #ffeaf0 !important;
}

.meta,
.meta a{
  color:#7a665e !important;
  font-size:13px !important;
}

.meta i{
  color:var(--rf-pink) !important;
  margin-right:5px !important;
}

.post p{
  margin:1.05em 0 !important;
}

.post strong,
.kyotyo1,
.redb,
.fby,
.red{
  color:var(--rf-pink-dark) !important;
}

/* ------------------------------
   h2崩れ対策：高さ固定・疑似要素・古い背景をリセット
------------------------------ */
#main article h2,
#core h2,
#mainEntity h2,
.post h2,
.post-h2-title h2,
.sns-msg h2{
  box-sizing:border-box !important;
  position:relative !important;
  display:block !important;
  clear:both !important;
  float:none !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:36px 0 18px !important;
  padding:13px 18px 13px 42px !important;
  color:#5a3e35 !important;
  background:linear-gradient(90deg,#fff1f5 0%,#fffaf2 72%,#fff 100%) !important;
  border:1px solid #f3ccd6 !important;
  border-left:0 !important;
  border-radius:14px !important;
  box-shadow:0 6px 16px rgba(131,76,61,.07) !important;
  font-size:clamp(20px,2.4vw,27px) !important;
  font-weight:700 !important;
  line-height:1.45 !important;
  letter-spacing:.02em !important;
  text-align:left !important;
  text-indent:0 !important;
  text-shadow:none !important;
  overflow:visible !important;
  transform:none !important;
}

#main article h2::before,
#core h2::before,
#mainEntity h2::before,
.post h2::before,
.post-h2-title h2::before,
.sns-msg h2::before{
  content:"" !important;
  position:absolute !important;
  left:16px !important;
  top:50% !important;
  width:12px !important;
  height:12px !important;
  margin:0 !important;
  padding:0 !important;
  transform:translateY(-50%) !important;
  background:#ec6d86 !important;
  border:0 !important;
  border-radius:50% !important;
  box-shadow:0 0 0 4px #ffeaf0 !important;
}

#main article h2::after,
#core h2::after,
#mainEntity h2::after,
.post h2::after,
.post-h2-title h2::after,
.sns-msg h2::after{
  content:none !important;
  display:none !important;
}

.post h3,
.side-title,
.widgettitle,
.widget-title{
  position:relative !important;
  margin:28px 0 14px !important;
  padding:10px 14px 10px 16px !important;
  color:#5a3e35 !important;
  background:#fff8f2 !important;
  border:0 !important;
  border-bottom:2px solid #f4c9d4 !important;
  border-radius:12px 12px 0 0 !important;
  font-size:19px !important;
  line-height:1.45 !important;
  box-shadow:none !important;
}

/* ------------------------------
   画像・本文パーツ
------------------------------ */
.wp-caption,
figure.wp-caption{
  max-width:100% !important;
  padding:10px !important;
  background:#fffdf9 !important;
  border:1px solid var(--rf-line) !important;
  border-radius:16px !important;
  box-shadow:0 8px 22px rgba(113,74,62,.08) !important;
  box-sizing:border-box !important;
}

.wp-caption img,
.post figure img,
.post img.size-full,
.post img.alignnone{
  border-radius:12px !important;
}

.wp-caption-text{
  margin:8px 0 2px !important;
  color:#816b61 !important;
  font-size:13px !important;
  text-align:center !important;
}

.point{
  margin:20px 0 !important;
  padding:18px 20px !important;
  background:#fff6ed !important;
  border:1px solid #f2dac8 !important;
  border-radius:16px !important;
  box-shadow:0 4px 14px rgba(118,76,57,.06) !important;
}

.point ul{
  margin:0 !important;
}

.point li{
  margin:.35em 0 !important;
}

blockquote{
  position:relative !important;
  margin:24px 0 !important;
  padding:22px 24px !important;
  color:#5f4b44 !important;
  background:#fffdf8 !important;
  border:1px dashed #e7c3b8 !important;
  border-left:6px solid #ef8fa3 !important;
  border-radius:16px !important;
  box-shadow:0 7px 18px rgba(112,72,60,.06) !important;
}

blockquote::before{
  content:"引用" !important;
  position:absolute !important;
  right:16px !important;
  top:-12px !important;
  padding:2px 10px !important;
  color:#fff !important;
  background:#e56a82 !important;
  border-radius:999px !important;
  font-size:12px !important;
}

/* ------------------------------
   サイドバー
------------------------------ */
#sidebar .widget{
  margin-bottom:18px !important;
  padding:18px !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid var(--rf-line) !important;
  border-radius:18px !important;
  box-shadow:var(--rf-shadow) !important;
  box-sizing:border-box !important;
}

#sidebar .widget ul{
  margin:0 !important;
  padding-left:0 !important;
  list-style:none !important;
}

#sidebar .widget li{
  position:relative !important;
  padding:8px 0 8px 16px !important;
  border-bottom:1px dotted #ead7cf !important;
}

#sidebar .widget li:last-child{
  border-bottom:0 !important;
}

#sidebar .widget li::before{
  content:"" !important;
  position:absolute !important;
  left:1px !important;
  top:1.05em !important;
  width:6px !important;
  height:6px !important;
  background:#ef89a0 !important;
  border-radius:50% !important;
}

#sidebar .widget a{
  color:#604940 !important;
  text-decoration:none !important;
}

#sidebar .widget a:hover{
  color:var(--rf-pink-dark) !important;
}

.search-form{
  display:flex !important;
  gap:6px !important;
  align-items:center !important;
}

.search-field{
  width:100% !important;
  min-width:0 !important;
  padding:9px 11px !important;
  border:1px solid #e7cfc6 !important;
  border-radius:999px !important;
  background:#fffdf9 !important;
  box-sizing:border-box !important;
}

.search-submit,
input[type="submit"]{
  padding:8px 14px !important;
  color:#fff !important;
  background:linear-gradient(180deg,#f47a92,#d94757) !important;
  border:0 !important;
  border-radius:999px !important;
  box-shadow:0 3px 8px rgba(216,63,99,.18) !important;
  cursor:pointer !important;
}

/* ------------------------------
   SNS・前後ナビ
------------------------------ */
.snsfb li a{
  border-radius:999px !important;
  box-shadow:0 4px 12px rgba(90,60,50,.08) !important;
}

#pnavi .next,
#pnavi .prev{
  background:rgba(255,255,255,.96) !important;
  border:1px solid var(--rf-line) !important;
  border-radius:16px !important;
  box-shadow:var(--rf-shadow) !important;
  overflow:hidden !important;
}

#pnavi a{
  color:#5b4036 !important;
  text-decoration:none !important;
}

.ps-wrap{
  border-radius:16px !important;
  background:#fffdf9 !important;
}

.ps-label{
  color:#9b8175 !important;
  font-size:12px !important;
}

/* ------------------------------
   タブレット
------------------------------ */
@media (max-width: 991px){
  .container{
    margin-top:18px !important;
    padding:0 12px !important;
  }

  .post,
  #mainEntity.post,
  #core .post{
    padding:22px 18px !important;
  }

  #gnavi{
    padding:0 10px 12px !important;
  }

  #gnavi .menu{
    gap:6px !important;
    padding:10px !important;
    border-radius:0 0 14px 14px !important;
  }

  #gnavi .menu li a{
    padding:8px 12px !important;
    font-size:13px !important;
  }
}

/* ------------------------------
   スマホ：メニューを縦並びにせず、横スクロールチップ化
------------------------------ */
@media (max-width: 600px){
  #header{
    background:
      radial-gradient(circle at 44px 17px, rgba(255,255,255,.95) 0 3.5px, transparent 4px),
      radial-gradient(circle at 118px 33px, rgba(255,255,255,.85) 0 2.8px, transparent 3.3px),
      linear-gradient(#242924 0 54px, transparent 54px),
      linear-gradient(180deg,#d8efe6 54px,#eef8f2 100%) !important;
    background-size:150px 54px,190px 54px,auto,auto !important;
    border-bottom-width:3px !important;
  }

  .head-cover{
    min-height:104px !important;
    padding:12px 10px 10px !important;
    align-items:flex-end !important;
    justify-content:center !important;
  }

  #sitename{
    text-align:center !important;
  }

  #sitename img{
    width:auto !important;
    max-width:min(86vw,315px) !important;
    max-height:64px !important;
  }

  #gnavi{
    padding:0 0 10px !important;
  }

  #gnavi .menu-menu-container{
    display:block !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    padding:0 10px !important;
    box-sizing:border-box !important;
  }

  #gnavi .menu-menu-container::-webkit-scrollbar{
    display:none !important;
  }

  #gnavi ul.menu,
  #gnavi .menu{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
    width:max-content !important;
    min-width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:9px 8px !important;
    border-radius:14px !important;
    overflow:visible !important;
  }

  #gnavi .menu li,
  #gnavi .menu > li{
    flex:0 0 auto !important;
    width:auto !important;
  }

  #gnavi .menu li a,
  #gnavi .menu > li > a{
    padding:8px 14px !important;
    font-size:13px !important;
    line-height:1.25 !important;
    white-space:nowrap !important;
  }

  .mobile-nav{
    display:none !important;
  }

  #breadcrumb{
    border-radius:14px !important;
    line-height:1.55 !important;
    overflow-wrap:anywhere !important;
  }

  .entry-title{
    padding-left:16px !important;
    font-size:24px !important;
  }

  #main article h2,
  #core h2,
  #mainEntity h2,
  .post h2,
  .post-h2-title h2,
  .sns-msg h2{
    margin:30px 0 16px !important;
    padding:12px 14px 12px 36px !important;
    font-size:20px !important;
    line-height:1.5 !important;
    min-height:0 !important;
    height:auto !important;
  }

  #main article h2::before,
  #core h2::before,
  #mainEntity h2::before,
  .post h2::before,
  .post-h2-title h2::before,
  .sns-msg h2::before{
    left:14px !important;
    width:10px !important;
    height:10px !important;
  }

  #sidebar .widget{
    padding:15px !important;
  }
}

/* かなり狭い画面 */
@media (max-width: 380px){
  #sitename img{
    max-width:90vw !important;
  }

  #gnavi .menu li a{
    padding:7px 12px !important;
    font-size:12.5px !important;
  }

  .post,
  #mainEntity.post,
  #core .post{
    padding:20px 14px !important;
  }
}

/* =========================================================
   v4 fix：引用ラベルが隠れる問題の調整
   ---------------------------------------------------------
   blockquote右上の「引用」ラベルを枠内に収め、スマホでも欠けないようにする
   ========================================================= */

.post blockquote,
#core blockquote,
#mainEntity blockquote {
  position: relative !important;
  overflow: visible !important;
  margin: 26px 0 !important;
  padding: 34px 24px 24px !important;
  background: #fffdf8 !important;
  border: 1px dashed #e7c3b8 !important;
  border-left: 6px solid #ef8fa3 !important;
  border-radius: 16px !important;
  box-shadow: 0 7px 18px rgba(112,72,60,.06) !important;
  box-sizing: border-box !important;
}

.post blockquote::before,
#core blockquote::before,
#mainEntity blockquote::before {
  content: "引用" !important;
  position: absolute !important;
  top: 10px !important;
  right: 14px !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 22px !important;
  padding: 0 10px !important;
  color: #fff !important;
  background: #e56a82 !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: 0 2px 6px rgba(216,63,99,.18) !important;
  transform: none !important;
}

.post blockquote p:first-child,
#core blockquote p:first-child,
#mainEntity blockquote p:first-child {
  margin-top: 0 !important;
  padding-right: 54px !important;
}

.post blockquote a,
#core blockquote a,
#mainEntity blockquote a {
  word-break: break-word !important;
}

/* テーマ側の巨大な引用符装飾がある場合、本文やラベルに被らないよう薄く背面へ */
.post blockquote::after,
#core blockquote::after,
#mainEntity blockquote::after {
  z-index: 0 !important;
  pointer-events: none !important;
}

.post blockquote > *,
#core blockquote > *,
#mainEntity blockquote > * {
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 600px) {
  .post blockquote,
  #core blockquote,
  #mainEntity blockquote {
    padding: 38px 16px 20px !important;
  }

  .post blockquote::before,
  #core blockquote::before,
  #mainEntity blockquote::before {
    top: 10px !important;
    right: 12px !important;
    min-width: 38px !important;
    height: 21px !important;
    font-size: 11px !important;
  }

  .post blockquote p:first-child,
  #core blockquote p:first-child,
  #mainEntity blockquote p:first-child {
    padding-right: 0 !important;
  }
}


/* =========================================================
   v5 fix：カテゴリ一覧カードのタイトル文字サイズ調整
   ---------------------------------------------------------
   /category/new/ などの一覧ページで、カード内タイトルが大きく
   なりすぎる問題を調整。PC・スマホ両方で読みやすいサイズへ。
   ========================================================= */

/* 一覧・アーカイブ系の記事カードタイトル */
.archive .entry-title,
.category .entry-title,
.search-results .entry-title,
.home .entry-title,
.blog .entry-title,
#list .entry-title,
#list .post .entry-title,
#main .grid .entry-title,
#main .post-list .entry-title,
#main article .grid .entry-title {
  font-size: clamp(20px, 2.05vw, 27px) !important;
  line-height: 1.45 !important;
  letter-spacing: 0.01em !important;
  margin: 0 0 14px !important;
  padding: 0 0 14px 18px !important;
}

/* カードが2列表示のときは少しだけ控えめに */
@media (min-width: 768px) {
  .archive #main .grid .entry-title,
  .category #main .grid .entry-title,
  .archive #main article .entry-title,
  .category #main article .entry-title {
    font-size: 25px !important;
    line-height: 1.5 !important;
  }
}

/* スマホでは大きすぎないが、タップ前に読みやすいサイズへ */
@media (max-width: 600px) {
  .archive .entry-title,
  .category .entry-title,
  .search-results .entry-title,
  .home .entry-title,
  .blog .entry-title,
  #list .entry-title,
  #list .post .entry-title,
  #main .grid .entry-title,
  #main .post-list .entry-title,
  #main article .grid .entry-title {
    font-size: 21px !important;
    line-height: 1.48 !important;
    padding-left: 16px !important;
  }
}

/* 一覧カード内の装飾バーもタイトルサイズに合わせて少し細く */
.archive .entry-title::before,
.category .entry-title::before,
.search-results .entry-title::before,
.home .entry-title::before,
.blog .entry-title::before,
#list .entry-title::before,
#main .grid .entry-title::before,
#main .post-list .entry-title::before,
#main article .grid .entry-title::before {
  width: 7px !important;
  height: 1.05em !important;
  top: .32em !important;
}

/* 個別記事ページのh1はこれまで通り大きめを維持 */
.single .entry-title {
  font-size: clamp(24px, 3vw, 34px) !important;
  line-height: 1.42 !important;
}


/* =========================================================
   v6 fix：ヘッダーに「ランダムに雪が降っているような」表現を追加
   ---------------------------------------------------------
   画像なし、CSSのみで実装
   ・大小の雪を2レイヤーで配置
   ・ごくゆっくり下に流れるアニメーション
   ・既存レイアウトを壊さないようヘッダー上部だけに適用
   ========================================================= */

#header {
  position: relative !important;
  overflow: hidden !important;
}

/* ヘッダー上部のビジュアル帯 */
#header::before,
#header::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 150px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.95 !important;
  will-change: transform !important;
}

/* 大きめの雪 */
#header::before {
  background:
    radial-gradient(circle, rgba(255,255,255,.98) 0 3px, transparent 3.6px) 2% 14px / 210px 82px repeat,
    radial-gradient(circle, rgba(255,255,255,.95) 0 2.5px, transparent 3.1px) 18% 56px / 250px 96px repeat,
    radial-gradient(circle, rgba(255,255,255,.92) 0 2.8px, transparent 3.3px) 39% 25px / 280px 88px repeat,
    radial-gradient(circle, rgba(255,255,255,.96) 0 2.4px, transparent 3px) 61% 68px / 230px 90px repeat,
    radial-gradient(circle, rgba(255,255,255,.92) 0 2.7px, transparent 3.3px) 79% 18px / 260px 92px repeat;
  animation: rfSnowFallA 18s linear infinite !important;
}

/* 小さめの雪 */
#header::after {
  background:
    radial-gradient(circle, rgba(255,255,255,.88) 0 1.7px, transparent 2.2px) 6% 22px / 170px 70px repeat,
    radial-gradient(circle, rgba(255,255,255,.84) 0 1.4px, transparent 2px) 29% 48px / 190px 76px repeat,
    radial-gradient(circle, rgba(255,255,255,.86) 0 1.6px, transparent 2.1px) 54% 14px / 160px 68px repeat,
    radial-gradient(circle, rgba(255,255,255,.82) 0 1.5px, transparent 2px) 74% 44px / 185px 74px repeat,
    radial-gradient(circle, rgba(255,255,255,.88) 0 1.4px, transparent 1.9px) 91% 11px / 175px 72px repeat;
  animation: rfSnowFallB 26s linear infinite !important;
}

#head-in,
.head-cover,
#nav,
#gnavi,
#gnavi .menu,
.mobile-nav {
  position: relative !important;
  z-index: 2 !important;
}

@keyframes rfSnowFallA {
  0% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(28px);
  }
}

@keyframes rfSnowFallB {
  0% {
    transform: translateY(-18px);
  }
  100% {
    transform: translateY(24px);
  }
}

/* 動きが苦手な環境では停止 */
@media (prefers-reduced-motion: reduce) {
  #header::before,
  #header::after {
    animation: none !important;
  }
}

/* スマホでは雪の帯を少し低めにして主張を抑える */
@media (max-width: 600px) {
  #header::before,
  #header::after {
    height: 108px !important;
  }

  #header::before {
    background:
      radial-gradient(circle, rgba(255,255,255,.98) 0 2.4px, transparent 3px) 4% 10px / 160px 68px repeat,
      radial-gradient(circle, rgba(255,255,255,.92) 0 2px, transparent 2.6px) 33% 40px / 180px 72px repeat,
      radial-gradient(circle, rgba(255,255,255,.95) 0 2.2px, transparent 2.8px) 67% 18px / 170px 70px repeat;
  }

  #header::after {
    background:
      radial-gradient(circle, rgba(255,255,255,.84) 0 1.4px, transparent 1.9px) 11% 19px / 130px 56px repeat,
      radial-gradient(circle, rgba(255,255,255,.82) 0 1.2px, transparent 1.8px) 48% 34px / 140px 60px repeat,
      radial-gradient(circle, rgba(255,255,255,.86) 0 1.3px, transparent 1.8px) 83% 9px / 135px 58px repeat;
  }
}


/* =========================================================
   v7 fix：雪を少なめ＋上部の黒帯を半分程度に調整
   ---------------------------------------------------------
   ・黒いドット帯を約58px → 約30pxへ
   ・雪の数と主張を控えめに
   ・既存レイアウトは維持
   ========================================================= */

/* 黒帯の高さを半分程度に */
#header {
  background:
    radial-gradient(circle at 45px 10px, rgba(255,255,255,.95) 0 3px, transparent 3.6px),
    radial-gradient(circle at 128px 22px, rgba(255,255,255,.9) 0 2px, transparent 2.7px),
    linear-gradient(#242824 0 30px, transparent 30px),
    linear-gradient(180deg, #d8eee5 30px, #ecf8f1 100%) !important;
  background-size: 210px 30px, 260px 30px, auto, auto !important;
}

/* 雪レイヤーを控えめに */
#header::before,
#header::after {
  height: 118px !important;
  opacity: 0.72 !important;
}

/* 大きめの雪：数を減らす */
#header::before {
  background:
    radial-gradient(circle, rgba(255,255,255,.92) 0 2.4px, transparent 3px) 7% 18px / 290px 96px repeat,
    radial-gradient(circle, rgba(255,255,255,.88) 0 2.1px, transparent 2.7px) 43% 46px / 340px 108px repeat,
    radial-gradient(circle, rgba(255,255,255,.9) 0 2.3px, transparent 2.9px) 82% 25px / 320px 102px repeat !important;
  animation: rfSnowFallA 24s linear infinite !important;
}

/* 小さめの雪：さらに控えめ */
#header::after {
  background:
    radial-gradient(circle, rgba(255,255,255,.72) 0 1.3px, transparent 1.9px) 18% 34px / 250px 90px repeat,
    radial-gradient(circle, rgba(255,255,255,.68) 0 1.2px, transparent 1.8px) 62% 16px / 280px 96px repeat,
    radial-gradient(circle, rgba(255,255,255,.7) 0 1.2px, transparent 1.8px) 92% 58px / 260px 92px repeat !important;
  animation: rfSnowFallB 34s linear infinite !important;
}

/* 黒帯が低くなった分、ヘッダー内の余白を少し調整 */
.head-cover {
  min-height: 104px !important;
  padding-top: 8px !important;
  padding-bottom: 10px !important;
}

@media (max-width: 600px) {
  #header {
    background:
      radial-gradient(circle at 34px 9px, rgba(255,255,255,.95) 0 2.6px, transparent 3.2px),
      radial-gradient(circle at 104px 20px, rgba(255,255,255,.9) 0 1.8px, transparent 2.4px),
      linear-gradient(#242824 0 28px, transparent 28px),
      linear-gradient(180deg, #d8eee5 28px, #ecf8f1 100%) !important;
    background-size: 160px 28px, 210px 28px, auto, auto !important;
  }

  #header::before,
  #header::after {
    height: 88px !important;
    opacity: 0.64 !important;
  }

  #header::before {
    background:
      radial-gradient(circle, rgba(255,255,255,.88) 0 2px, transparent 2.6px) 9% 13px / 230px 78px repeat,
      radial-gradient(circle, rgba(255,255,255,.84) 0 1.9px, transparent 2.5px) 72% 38px / 250px 82px repeat !important;
  }

  #header::after {
    background:
      radial-gradient(circle, rgba(255,255,255,.62) 0 1.1px, transparent 1.7px) 32% 25px / 210px 72px repeat,
      radial-gradient(circle, rgba(255,255,255,.64) 0 1.1px, transparent 1.7px) 88% 9px / 220px 76px repeat !important;
  }

  .head-cover {
    min-height: 86px !important;
    padding-top: 6px !important;
    padding-bottom: 8px !important;
  }
}


/* =========================================================
   v8 fix：雪のランダム感を戻す
   ---------------------------------------------------------
   ・雪が縦列に見えないよう、レイヤーごとに位置・サイズを細かくずらす
   ・落下方向に横揺れを追加
   ・黒帯はv7同様、低めを維持
   ・雪量は控えめのまま、配置だけ自然に
   ========================================================= */

/* 雪レイヤー：位置は固定せず、複数サイズを不規則に重ねる */
#header::before,
#header::after {
  height: 118px !important;
  opacity: 0.72 !important;
  transform: translate3d(0, 0, 0);
}

/* 大きめの雪：横方向の間隔をバラバラにして縦列感を消す */
#header::before {
  background:
    radial-gradient(circle, rgba(255,255,255,.94) 0 2.8px, transparent 3.4px) 3% 14px / 337px 101px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.88) 0 2.2px, transparent 2.9px) 19% 54px / 421px 119px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.92) 0 2.5px, transparent 3.1px) 37% 31px / 389px 96px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.86) 0 2px, transparent 2.7px) 58% 70px / 467px 132px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.9) 0 2.4px, transparent 3px) 73% 22px / 353px 111px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.86) 0 2.1px, transparent 2.8px) 91% 62px / 497px 126px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.74) 0 1.9px, transparent 2.5px) 12% 96px / 541px 148px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.78) 0 2.1px, transparent 2.7px) 84% 103px / 593px 152px no-repeat !important;
  background-repeat: repeat !important;
  animation: rfSnowDriftA 24s linear infinite !important;
}

/* 小さめの雪：さらに細かく、位置を散らす */
#header::after {
  background:
    radial-gradient(circle, rgba(255,255,255,.7) 0 1.4px, transparent 2px) 8% 32px / 263px 87px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.62) 0 1.1px, transparent 1.7px) 23% 11px / 317px 103px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.68) 0 1.3px, transparent 1.9px) 44% 67px / 293px 91px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.58) 0 1px, transparent 1.6px) 52% 24px / 379px 117px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.66) 0 1.2px, transparent 1.8px) 69% 82px / 331px 99px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.64) 0 1.2px, transparent 1.8px) 86% 39px / 407px 124px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.52) 0 .9px, transparent 1.5px) 96% 7px / 449px 136px no-repeat !important;
  background-repeat: repeat !important;
  animation: rfSnowDriftB 34s linear infinite !important;
}

/* 斜めにふわっと流す。縦一直線に見えないようX方向も動かす */
@keyframes rfSnowDriftA {
  0% {
    transform: translate3d(-8px, -14px, 0);
  }
  35% {
    transform: translate3d(9px, 2px, 0);
  }
  70% {
    transform: translate3d(-4px, 18px, 0);
  }
  100% {
    transform: translate3d(12px, 34px, 0);
  }
}

@keyframes rfSnowDriftB {
  0% {
    transform: translate3d(10px, -20px, 0);
  }
  30% {
    transform: translate3d(-12px, -2px, 0);
  }
  65% {
    transform: translate3d(7px, 15px, 0);
  }
  100% {
    transform: translate3d(-14px, 30px, 0);
  }
}

/* v6の縦落ちアニメ指定が残っていても上書き */
@keyframes rfSnowFallA {
  0% {
    transform: translate3d(-8px, -14px, 0);
  }
  35% {
    transform: translate3d(9px, 2px, 0);
  }
  70% {
    transform: translate3d(-4px, 18px, 0);
  }
  100% {
    transform: translate3d(12px, 34px, 0);
  }
}

@keyframes rfSnowFallB {
  0% {
    transform: translate3d(10px, -20px, 0);
  }
  30% {
    transform: translate3d(-12px, -2px, 0);
  }
  65% {
    transform: translate3d(7px, 15px, 0);
  }
  100% {
    transform: translate3d(-14px, 30px, 0);
  }
}

@media (max-width: 600px) {
  #header::before,
  #header::after {
    height: 88px !important;
    opacity: 0.66 !important;
  }

  #header::before {
    background:
      radial-gradient(circle, rgba(255,255,255,.9) 0 2.1px, transparent 2.7px) 7% 12px / 213px 77px no-repeat,
      radial-gradient(circle, rgba(255,255,255,.84) 0 1.8px, transparent 2.4px) 31% 44px / 267px 86px no-repeat,
      radial-gradient(circle, rgba(255,255,255,.86) 0 1.9px, transparent 2.5px) 58% 23px / 241px 81px no-repeat,
      radial-gradient(circle, rgba(255,255,255,.78) 0 1.7px, transparent 2.3px) 88% 55px / 293px 92px no-repeat !important;
    background-repeat: repeat !important;
    animation: rfSnowDriftA 25s linear infinite !important;
  }

  #header::after {
    background:
      radial-gradient(circle, rgba(255,255,255,.62) 0 1.1px, transparent 1.7px) 14% 28px / 177px 62px no-repeat,
      radial-gradient(circle, rgba(255,255,255,.58) 0 1px, transparent 1.6px) 46% 9px / 221px 70px no-repeat,
      radial-gradient(circle, rgba(255,255,255,.6) 0 1px, transparent 1.6px) 74% 41px / 203px 66px no-repeat,
      radial-gradient(circle, rgba(255,255,255,.54) 0 .9px, transparent 1.5px) 93% 19px / 257px 76px no-repeat !important;
    background-repeat: repeat !important;
    animation: rfSnowDriftB 36s linear infinite !important;
  }
}


/* =========================================================
   v9 fix：本文内 h3 / h4 の装飾を追加
   ---------------------------------------------------------
   ・h2より控えめ、でも記事内で見出しとして分かりやすい装飾
   ・六花亭ファン.comのやわらかいピンク×クリーム系に統一
   ・PC / スマホ両対応
   ・サイドバーの .side-title には影響しないよう、本文内だけに限定
   ========================================================= */

/* 本文内 h3 */
.single .post h3,
#mainEntity.post h3,
#core .post h3 {
  position: relative !important;
  margin: 34px 0 16px !important;
  padding: 12px 18px 12px 44px !important;
  color: #5a3e35 !important;
  font-size: clamp(19px, 2.2vw, 24px) !important;
  line-height: 1.55 !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  background:
    linear-gradient(90deg, rgba(255, 237, 243, .96) 0%, rgba(255, 250, 241, .96) 70%, rgba(255,255,255,.86) 100%) !important;
  border: 1px solid #f3ccd6 !important;
  border-left: 0 !important;
  border-radius: 15px !important;
  box-shadow: 0 6px 15px rgba(131, 76, 61, .06) !important;
}

/* h3左の丸いお菓子風アイコン */
.single .post h3::before,
#mainEntity.post h3::before,
#core .post h3::before {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  width: 16px !important;
  height: 16px !important;
  transform: translateY(-50%) !important;
  background:
    radial-gradient(circle at 35% 35%, #fff 0 18%, transparent 19%),
    radial-gradient(circle at 65% 62%, rgba(255,255,255,.85) 0 9%, transparent 10%),
    linear-gradient(135deg, #ff91a6, #e85270) !important;
  border-radius: 50% !important;
  box-shadow:
    0 0 0 4px #ffe8ef,
    0 3px 7px rgba(216, 63, 99, .22) !important;
}

/* h3下に細いライン */
.single .post h3::after,
#mainEntity.post h3::after,
#core .post h3::after {
  content: "" !important;
  position: absolute !important;
  left: 44px !important;
  right: 18px !important;
  bottom: -7px !important;
  height: 2px !important;
  background: linear-gradient(90deg, #f49aaa, rgba(244, 154, 170, 0)) !important;
  border-radius: 999px !important;
}

/* 本文内 h4 */
.single .post h4,
#mainEntity.post h4,
#core .post h4 {
  position: relative !important;
  margin: 28px 0 12px !important;
  padding: 8px 12px 8px 24px !important;
  color: #69483e !important;
  font-size: clamp(17px, 1.9vw, 20px) !important;
  line-height: 1.55 !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px dotted #f1bdc8 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* h4左の小さなアクセント */
.single .post h4::before,
#mainEntity.post h4::before,
#core .post h4::before {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  top: .72em !important;
  width: 10px !important;
  height: 10px !important;
  background: #ef6f89 !important;
  border-radius: 50% 50% 50% 0 !important;
  transform: rotate(-45deg) !important;
  box-shadow: 0 0 0 3px #ffe8ef !important;
}

/* h4の余計な疑似要素がテーマ側にある場合のリセット */
.single .post h4::after,
#mainEntity.post h4::after,
#core .post h4::after {
  content: none !important;
}

/* h3/h4直後の余白を少し整える */
.single .post h3 + p,
#mainEntity.post h3 + p,
#core .post h3 + p,
.single .post h4 + p,
#mainEntity.post h4 + p,
#core .post h4 + p {
  margin-top: 12px !important;
}

/* 一覧カード内のh3/h4に誤って効きすぎないよう調整 */
.archive .post h3,
.category .post h3,
.search-results .post h3,
.home .post h3,
.blog .post h3,
.archive .post h4,
.category .post h4,
.search-results .post h4,
.home .post h4,
.blog .post h4 {
  margin-top: 22px !important;
}

/* スマホ調整 */
@media (max-width: 600px) {
  .single .post h3,
  #mainEntity.post h3,
  #core .post h3 {
    margin: 30px 0 15px !important;
    padding: 11px 14px 11px 38px !important;
    font-size: 20px !important;
    line-height: 1.55 !important;
    border-radius: 13px !important;
  }

  .single .post h3::before,
  #mainEntity.post h3::before,
  #core .post h3::before {
    left: 14px !important;
    width: 13px !important;
    height: 13px !important;
    box-shadow:
      0 0 0 3px #ffe8ef,
      0 3px 7px rgba(216, 63, 99, .18) !important;
  }

  .single .post h3::after,
  #mainEntity.post h3::after,
  #core .post h3::after {
    left: 38px !important;
    right: 14px !important;
  }

  .single .post h4,
  #mainEntity.post h4,
  #core .post h4 {
    margin: 24px 0 10px !important;
    padding: 7px 10px 7px 22px !important;
    font-size: 18px !important;
  }

  .single .post h4::before,
  #mainEntity.post h4::before,
  #core .post h4::before {
    left: 3px !important;
    width: 9px !important;
    height: 9px !important;
  }
}


/* =========================================================
   v10 fix：h3 / h4 をシンプルに調整
   ---------------------------------------------------------
   ・h2と見分けがつくように、h3は下線型、h4は左ライン型へ
   ・装飾は控えめにして、本文の邪魔をしない
   ・本文内の見出しだけに限定
   ========================================================= */

/* 本文内 h3：シンプルな下線型 */
.single .post h3,
#mainEntity.post h3,
#core .post h3 {
  position: relative !important;
  margin: 34px 0 16px !important;
  padding: 0 0 9px 18px !important;
  color: #5a3e35 !important;
  font-size: clamp(19px, 2.1vw, 23px) !important;
  line-height: 1.55 !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid #f3c3cf !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* h3左の細いアクセント */
.single .post h3::before,
#mainEntity.post h3::before,
#core .post h3::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: .28em !important;
  width: 6px !important;
  height: 1.2em !important;
  background: #ef6f89 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  transform: none !important;
}

/* h3の余計な疑似要素を消す */
.single .post h3::after,
#mainEntity.post h3::after,
#core .post h3::after {
  content: none !important;
}

/* 本文内 h4：さらに控えめな左ライン型 */
.single .post h4,
#mainEntity.post h4,
#core .post h4 {
  position: relative !important;
  margin: 26px 0 10px !important;
  padding: 3px 0 3px 14px !important;
  color: #6b4c42 !important;
  font-size: clamp(17px, 1.8vw, 19px) !important;
  line-height: 1.6 !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 4px solid #f1a7b6 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* h4の疑似要素は使わない */
.single .post h4::before,
#mainEntity.post h4::before,
#core .post h4::before,
.single .post h4::after,
#mainEntity.post h4::after,
#core .post h4::after {
  content: none !important;
}

/* h3/h4直後の余白 */
.single .post h3 + p,
#mainEntity.post h3 + p,
#core .post h3 + p,
.single .post h4 + p,
#mainEntity.post h4 + p,
#core .post h4 + p {
  margin-top: 10px !important;
}

/* スマホ調整 */
@media (max-width: 600px) {
  .single .post h3,
  #mainEntity.post h3,
  #core .post h3 {
    margin: 30px 0 14px !important;
    padding: 0 0 8px 16px !important;
    font-size: 20px !important;
    line-height: 1.55 !important;
  }

  .single .post h3::before,
  #mainEntity.post h3::before,
  #core .post h3::before {
    width: 5px !important;
    height: 1.15em !important;
  }

  .single .post h4,
  #mainEntity.post h4,
  #core .post h4 {
    margin: 23px 0 9px !important;
    padding: 2px 0 2px 12px !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
    border-left-width: 4px !important;
  }
}


/* =========================================================
   v11 fix：h3 / h4 の文字影を完全にオフ
   ---------------------------------------------------------
   ・h3の文字に影が出ないよう text-shadow を明示的に解除
   ・h4も念のため解除
   ・h2の装飾には影響させない
   ========================================================= */

.single .post h3,
#mainEntity.post h3,
#core .post h3,
.single .post h4,
#mainEntity.post h4,
#core .post h4 {
  text-shadow: none !important;
  filter: none !important;
}

.single .post h3 a,
#mainEntity.post h3 a,
#core .post h3 a,
.single .post h4 a,
#mainEntity.post h4 a,
#core .post h4 a {
  text-shadow: none !important;
  filter: none !important;
}


/* =========================================================
   v12 fix：board内の参考リンクデザイン調整
   ---------------------------------------------------------
   ・「参考」ラベルとリンク部分をサイト全体のピンク×クリーム系に統一
   ・リンクの背景色をやわらかくし、角丸カード風に
   ・スマホでも改行が自然になるよう調整
   ========================================================= */

/* 参考ボックス全体 */
.single .post .board,
#mainEntity.post .board,
#core .post .board {
  margin: 22px 0 !important;
  padding: 22px 24px !important;
  background: #fffdf8 !important;
  border: 1px solid #eadbd2 !important;
  border-radius: 16px !important;
  box-shadow: 0 7px 18px rgba(112,72,60,.06) !important;
  box-sizing: border-box !important;
}

/* board内の参考リンク行 */
.single .post .board p.link,
#mainEntity.post .board p.link,
#core .post .board p.link {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 14px 0 0 !important;
  padding: 12px 14px !important;
  background: #fff7ef !important;
  border: 1px solid #f1d6c9 !important;
  border-radius: 12px !important;
  line-height: 1.75 !important;
  box-sizing: border-box !important;
}

/* CSS側で参考ラベルを統一 */
.single .post .board p.link::before,
#mainEntity.post .board p.link::before,
#core .post .board p.link::before {
  content: "参考" !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  height: 26px !important;
  margin-top: 2px !important;
  color: #7a554a !important;
  background: #eaf6ef !important;
  border: 1px solid #cfe8d8 !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* 既存テーマ側の参考ラベル・先頭ラベルがある場合の見た目を補正 */
.single .post .board p.link > span:first-child:not(.kome),
#mainEntity.post .board p.link > span:first-child:not(.kome),
#core .post .board p.link > span:first-child:not(.kome) {
  display: none !important;
}

/* リンク本体 */
.single .post .board p.link a,
#mainEntity.post .board p.link a,
#core .post .board p.link a {
  color: #c63f58 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(198,63,88,.35) !important;
  text-underline-offset: 3px !important;
  word-break: break-word !important;
}

.single .post .board p.link a:hover,
#mainEntity.post .board p.link a:hover,
#core .post .board p.link a:hover {
  color: #e85d78 !important;
  border-bottom-color: rgba(232,93,120,.65) !important;
}

/* .kome が薄くなりすぎる場合の補正 */
.single .post .board p.link .kome,
#mainEntity.post .board p.link .kome,
#core .post .board p.link .kome {
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* スマホはラベルを上に出して読みやすく */
@media (max-width: 600px) {
  .single .post .board,
  #mainEntity.post .board,
  #core .post .board {
    padding: 18px 16px !important;
  }

  .single .post .board p.link,
  #mainEntity.post .board p.link,
  #core .post .board p.link {
    display: block !important;
    padding: 12px 13px !important;
  }

  .single .post .board p.link::before,
  #mainEntity.post .board p.link::before,
  #core .post .board p.link::before {
    margin: 0 0 8px !important;
  }
}


/* =========================================================
   v14 fix：トップ画像スライダーのタイトル文字を強めに調整
   ---------------------------------------------------------
   前回の指定で変わらない場合、スライダー側のclass名が想定外の可能性が高い。
   Luxeritas系・Swiper系・slick系・pickup系・top-list系を広めに指定。
   ただし、本文・サイドバーの通常リンクには影響しにくいように、
   画像付きスライダー/ピックアップ系の範囲に限定。
   ========================================================= */

/* Luxeritas / pickup / carousel / slider 系のタイトルリンクをまとめて小さく */
#pickup a,
.pickup a,
.pickup-post a,
.pickup-posts a,
#pickup-posts a,
#post-slider a,
.post-slider a,
#top-carousel a,
.top-carousel a,
#top-slider a,
.top-slider a,
#top-news a,
.top-news a,
#headlines a,
.headlines a,
#headline a,
.headline a,
#thk-slider a,
.thk-slider a,
#thk-carousel a,
.thk-carousel a,
#thk_pickup a,
.thk_pickup a,
#thk-pickup a,
.thk-pickup a,
#thk_carousel a,
.thk_carousel a,
#thk-carousel a,
.thk-carousel a,
.swiper a,
.swiper-container a,
.swiper-wrapper a,
.slick-slider a,
.slick-list a,
.slick-track a,
ul.slick-dots + * a,
[class*="pickup"] a,
[class*="Pickup"] a,
[class*="carousel"] a,
[class*="Carousel"] a,
[class*="slider"] a,
[class*="Slider"] a,
[class*="swiper"] a,
[class*="Swiper"] a,
[class*="slick"] a,
[class*="Slick"] a {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

/* 画像上に重なる黒帯・タイトル要素を直接調整 */
#pickup [class*="title"],
.pickup [class*="title"],
.pickup-post [class*="title"],
.pickup-posts [class*="title"],
#post-slider [class*="title"],
.post-slider [class*="title"],
#top-carousel [class*="title"],
.top-carousel [class*="title"],
#top-slider [class*="title"],
.top-slider [class*="title"],
#headlines [class*="title"],
.headlines [class*="title"],
#headline [class*="title"],
.headline [class*="title"],
#thk-slider [class*="title"],
.thk-slider [class*="title"],
#thk-carousel [class*="title"],
.thk-carousel [class*="title"],
.swiper [class*="title"],
.swiper-container [class*="title"],
.slick-slider [class*="title"],
.slick-list [class*="title"],
.slick-track [class*="title"],
[class*="pickup"] [class*="title"],
[class*="Pickup"] [class*="title"],
[class*="carousel"] [class*="title"],
[class*="Carousel"] [class*="title"],
[class*="slider"] [class*="title"],
[class*="Slider"] [class*="title"],
[class*="swiper"] [class*="title"],
[class*="Swiper"] [class*="title"],
[class*="slick"] [class*="title"],
[class*="Slick"] [class*="title"] {
  font-size: 14px !important;
  line-height: 1.35 !important;
  max-height: 2.9em !important;
  overflow: hidden !important;
  padding: 6px 8px !important;
  box-sizing: border-box !important;
}

/* 画像カードの黒い帯内のh系・p系にも効かせる */
#pickup h2,
#pickup h3,
#pickup p,
.pickup h2,
.pickup h3,
.pickup p,
#post-slider h2,
#post-slider h3,
#post-slider p,
.post-slider h2,
.post-slider h3,
.post-slider p,
#top-carousel h2,
#top-carousel h3,
#top-carousel p,
.top-carousel h2,
.top-carousel h3,
.top-carousel p,
#top-slider h2,
#top-slider h3,
#top-slider p,
.top-slider h2,
.top-slider h3,
.top-slider p,
#headlines h2,
#headlines h3,
#headlines p,
.headlines h2,
.headlines h3,
.headlines p,
.swiper h2,
.swiper h3,
.swiper p,
.swiper-container h2,
.swiper-container h3,
.swiper-container p,
.slick-slider h2,
.slick-slider h3,
.slick-slider p,
[class*="pickup"] h2,
[class*="pickup"] h3,
[class*="pickup"] p,
[class*="carousel"] h2,
[class*="carousel"] h3,
[class*="carousel"] p,
[class*="slider"] h2,
[class*="slider"] h3,
[class*="slider"] p,
[class*="swiper"] h2,
[class*="swiper"] h3,
[class*="swiper"] p,
[class*="slick"] h2,
[class*="slick"] h3,
[class*="slick"] p {
  font-size: 14px !important;
  line-height: 1.35 !important;
  max-height: 2.9em !important;
  overflow: hidden !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* スライダー画像の下部オーバーレイが大きい場合 */
#pickup .overlay,
.pickup .overlay,
#post-slider .overlay,
.post-slider .overlay,
#top-carousel .overlay,
.top-carousel .overlay,
#top-slider .overlay,
.top-slider .overlay,
.swiper .overlay,
.swiper-container .overlay,
.slick-slider .overlay,
[class*="pickup"] .overlay,
[class*="carousel"] .overlay,
[class*="slider"] .overlay,
[class*="swiper"] .overlay,
[class*="slick"] .overlay {
  padding: 6px 8px !important;
  min-height: 0 !important;
}

/* 画像上のタイトルが white-space:nowrap で切れている場合の解除 */
#pickup a,
.pickup a,
#post-slider a,
.post-slider a,
#top-carousel a,
.top-carousel a,
#top-slider a,
.top-slider a,
.swiper a,
.swiper-container a,
.slick-slider a,
[class*="pickup"] a,
[class*="carousel"] a,
[class*="slider"] a,
[class*="swiper"] a,
[class*="slick"] a {
  white-space: normal !important;
  word-break: break-word !important;
}

/* PCは少しだけ大きくしてもOK */
@media (min-width: 1000px) {
  #pickup a,
  .pickup a,
  #post-slider a,
  .post-slider a,
  #top-carousel a,
  .top-carousel a,
  #top-slider a,
  .top-slider a,
  #headlines a,
  .headlines a,
  .swiper a,
  .swiper-container a,
  .slick-slider a,
  [class*="pickup"] a,
  [class*="carousel"] a,
  [class*="slider"] a,
  [class*="swiper"] a,
  [class*="slick"] a,
  #pickup [class*="title"],
  .pickup [class*="title"],
  #post-slider [class*="title"],
  .post-slider [class*="title"],
  #top-carousel [class*="title"],
  .top-carousel [class*="title"],
  #top-slider [class*="title"],
  .top-slider [class*="title"],
  .swiper [class*="title"],
  .swiper-container [class*="title"],
  .slick-slider [class*="title"],
  [class*="pickup"] [class*="title"],
  [class*="carousel"] [class*="title"],
  [class*="slider"] [class*="title"],
  [class*="swiper"] [class*="title"],
  [class*="slick"] [class*="title"] {
    font-size: 15px !important;
  }
}

/* スマホはさらに小さめ */
@media (max-width: 600px) {
  #pickup a,
  .pickup a,
  #post-slider a,
  .post-slider a,
  #top-carousel a,
  .top-carousel a,
  #top-slider a,
  .top-slider a,
  #headlines a,
  .headlines a,
  .swiper a,
  .swiper-container a,
  .slick-slider a,
  [class*="pickup"] a,
  [class*="carousel"] a,
  [class*="slider"] a,
  [class*="swiper"] a,
  [class*="slick"] a,
  #pickup [class*="title"],
  .pickup [class*="title"],
  #post-slider [class*="title"],
  .post-slider [class*="title"],
  #top-carousel [class*="title"],
  .top-carousel [class*="title"],
  #top-slider [class*="title"],
  .top-slider [class*="title"],
  .swiper [class*="title"],
  .swiper-container [class*="title"],
  .slick-slider [class*="title"],
  [class*="pickup"] [class*="title"],
  [class*="carousel"] [class*="title"],
  [class*="slider"] [class*="title"],
  [class*="swiper"] [class*="title"],
  [class*="slick"] [class*="title"] {
    font-size: 12px !important;
    line-height: 1.32 !important;
    max-height: 2.7em !important;
  }
}


/* =========================================================
   v15 fix：トップ画像スライダーのタイトルをさらに小さく
   ---------------------------------------------------------
   ・まだ少し見切れるため、PC/スマホともに一段小さく調整
   ・黒帯の余白もさらに少し詰める
   ========================================================= */

/* スライダー系タイトルをさらに小さく */
#pickup a,
.pickup a,
.pickup-post a,
.pickup-posts a,
#pickup-posts a,
#post-slider a,
.post-slider a,
#top-carousel a,
.top-carousel a,
#top-slider a,
.top-slider a,
#top-news a,
.top-news a,
#headlines a,
.headlines a,
#headline a,
.headline a,
#thk-slider a,
.thk-slider a,
#thk-carousel a,
.thk-carousel a,
#thk_pickup a,
.thk_pickup a,
#thk-pickup a,
.thk-pickup a,
#thk_carousel a,
.thk_carousel a,
#thk-carousel a,
.thk-carousel a,
.swiper a,
.swiper-container a,
.swiper-wrapper a,
.slick-slider a,
.slick-list a,
.slick-track a,
[class*="pickup"] a,
[class*="Pickup"] a,
[class*="carousel"] a,
[class*="Carousel"] a,
[class*="slider"] a,
[class*="Slider"] a,
[class*="swiper"] a,
[class*="Swiper"] a,
[class*="slick"] a,
[class*="Slick"] a {
  font-size: 12.5px !important;
  line-height: 1.28 !important;
}

/* title系要素もさらに調整 */
#pickup [class*="title"],
.pickup [class*="title"],
.pickup-post [class*="title"],
.pickup-posts [class*="title"],
#post-slider [class*="title"],
.post-slider [class*="title"],
#top-carousel [class*="title"],
.top-carousel [class*="title"],
#top-slider [class*="title"],
.top-slider [class*="title"],
#headlines [class*="title"],
.headlines [class*="title"],
#headline [class*="title"],
.headline [class*="title"],
#thk-slider [class*="title"],
.thk-slider [class*="title"],
#thk-carousel [class*="title"],
.thk-carousel [class*="title"],
.swiper [class*="title"],
.swiper-container [class*="title"],
.slick-slider [class*="title"],
.slick-list [class*="title"],
.slick-track [class*="title"],
[class*="pickup"] [class*="title"],
[class*="Pickup"] [class*="title"],
[class*="carousel"] [class*="title"],
[class*="Carousel"] [class*="title"],
[class*="slider"] [class*="title"],
[class*="Slider"] [class*="title"],
[class*="swiper"] [class*="title"],
[class*="Swiper"] [class*="title"],
[class*="slick"] [class*="title"],
[class*="Slick"] [class*="title"] {
  font-size: 12.5px !important;
  line-height: 1.28 !important;
  max-height: 2.65em !important;
  padding: 5px 7px !important;
}

/* 画像カードの黒帯内のh系・p系も小さく */
#pickup h2,
#pickup h3,
#pickup p,
.pickup h2,
.pickup h3,
.pickup p,
#post-slider h2,
#post-slider h3,
#post-slider p,
.post-slider h2,
.post-slider h3,
.post-slider p,
#top-carousel h2,
#top-carousel h3,
#top-carousel p,
.top-carousel h2,
.top-carousel h3,
.top-carousel p,
#top-slider h2,
#top-slider h3,
#top-slider p,
.top-slider h2,
.top-slider h3,
.top-slider p,
#headlines h2,
#headlines h3,
#headlines p,
.headlines h2,
.headlines h3,
.headlines p,
.swiper h2,
.swiper h3,
.swiper p,
.swiper-container h2,
.swiper-container h3,
.swiper-container p,
.slick-slider h2,
.slick-slider h3,
.slick-slider p,
[class*="pickup"] h2,
[class*="pickup"] h3,
[class*="pickup"] p,
[class*="carousel"] h2,
[class*="carousel"] h3,
[class*="carousel"] p,
[class*="slider"] h2,
[class*="slider"] h3,
[class*="slider"] p,
[class*="swiper"] h2,
[class*="swiper"] h3,
[class*="swiper"] p,
[class*="slick"] h2,
[class*="slick"] h3,
[class*="slick"] p {
  font-size: 12.5px !important;
  line-height: 1.28 !important;
  max-height: 2.65em !important;
}

/* PCで広くても控えめに */
@media (min-width: 1000px) {
  #pickup a,
  .pickup a,
  #post-slider a,
  .post-slider a,
  #top-carousel a,
  .top-carousel a,
  #top-slider a,
  .top-slider a,
  #headlines a,
  .headlines a,
  .swiper a,
  .swiper-container a,
  .slick-slider a,
  [class*="pickup"] a,
  [class*="carousel"] a,
  [class*="slider"] a,
  [class*="swiper"] a,
  [class*="slick"] a,
  #pickup [class*="title"],
  .pickup [class*="title"],
  #post-slider [class*="title"],
  .post-slider [class*="title"],
  #top-carousel [class*="title"],
  .top-carousel [class*="title"],
  #top-slider [class*="title"],
  .top-slider [class*="title"],
  .swiper [class*="title"],
  .swiper-container [class*="title"],
  .slick-slider [class*="title"],
  [class*="pickup"] [class*="title"],
  [class*="carousel"] [class*="title"],
  [class*="slider"] [class*="title"],
  [class*="swiper"] [class*="title"],
  [class*="slick"] [class*="title"] {
    font-size: 13px !important;
    line-height: 1.28 !important;
  }
}

/* スマホはさらに小さく */
@media (max-width: 600px) {
  #pickup a,
  .pickup a,
  #post-slider a,
  .post-slider a,
  #top-carousel a,
  .top-carousel a,
  #top-slider a,
  .top-slider a,
  #headlines a,
  .headlines a,
  .swiper a,
  .swiper-container a,
  .slick-slider a,
  [class*="pickup"] a,
  [class*="carousel"] a,
  [class*="slider"] a,
  [class*="swiper"] a,
  [class*="slick"] a,
  #pickup [class*="title"],
  .pickup [class*="title"],
  #post-slider [class*="title"],
  .post-slider [class*="title"],
  #top-carousel [class*="title"],
  .top-carousel [class*="title"],
  #top-slider [class*="title"],
  .top-slider [class*="title"],
  .swiper [class*="title"],
  .swiper-container [class*="title"],
  .slick-slider [class*="title"],
  [class*="pickup"] [class*="title"],
  [class*="carousel"] [class*="title"],
  [class*="slider"] [class*="title"],
  [class*="swiper"] [class*="title"],
  [class*="slick"] [class*="title"] {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    max-height: 2.55em !important;
    padding: 4px 6px !important;
  }
}


/* =========================================================
   v16 fix：トップ画像スライダーのタイトル下切れ対策
   ---------------------------------------------------------
   ・文字サイズだけでなく、タイトル帯の位置と高さを調整
   ・下側が切れる症状に対して、bottom / height / overflow を補正
   ・Luxeritas系 / swiper / slick / pickup系を広めに対象化
   ========================================================= */

/* スライダー各アイテムの下側が切れないようにする */
#pickup .swiper-slide,
.pickup .swiper-slide,
#pickup .slick-slide,
.pickup .slick-slide,
#pickup li,
.pickup li,
#post-slider .swiper-slide,
.post-slider .swiper-slide,
#top-carousel .swiper-slide,
.top-carousel .swiper-slide,
#top-slider .swiper-slide,
.top-slider .swiper-slide,
[class*="pickup"] .swiper-slide,
[class*="carousel"] .swiper-slide,
[class*="slider"] .swiper-slide,
[class*="pickup"] li,
[class*="carousel"] li,
[class*="slider"] li {
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 画像カード本体 */
#pickup article,
.pickup article,
#pickup .post,
.pickup .post,
#post-slider article,
.post-slider article,
#top-carousel article,
.top-carousel article,
#top-slider article,
.top-slider article,
[class*="pickup"] article,
[class*="carousel"] article,
[class*="slider"] article,
[class*="pickup"] .post,
[class*="carousel"] .post,
[class*="slider"] .post {
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* タイトル帯の位置を明示 */
#pickup [class*="title"],
.pickup [class*="title"],
#post-slider [class*="title"],
.post-slider [class*="title"],
#top-carousel [class*="title"],
.top-carousel [class*="title"],
#top-slider [class*="title"],
.top-slider [class*="title"],
#headlines [class*="title"],
.headlines [class*="title"],
#headline [class*="title"],
.headline [class*="title"],
#thk-slider [class*="title"],
.thk-slider [class*="title"],
#thk-carousel [class*="title"],
.thk-carousel [class*="title"],
.swiper [class*="title"],
.swiper-container [class*="title"],
.slick-slider [class*="title"],
.slick-list [class*="title"],
.slick-track [class*="title"],
[class*="pickup"] [class*="title"],
[class*="Pickup"] [class*="title"],
[class*="carousel"] [class*="title"],
[class*="Carousel"] [class*="title"],
[class*="slider"] [class*="title"],
[class*="Slider"] [class*="title"],
[class*="swiper"] [class*="title"],
[class*="Swiper"] [class*="title"],
[class*="slick"] [class*="title"],
[class*="Slick"] [class*="title"] {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  padding: 6px 8px 7px !important;
  min-height: 2.9em !important;
  max-height: 3.2em !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-height: 1.26 !important;
  font-size: 12.5px !important;
  background: rgba(48, 43, 40, .74) !important;
}

/* タイトルリンク・p・h系も同じ高さ基準に */
#pickup [class*="title"] a,
.pickup [class*="title"] a,
#post-slider [class*="title"] a,
.post-slider [class*="title"] a,
#top-carousel [class*="title"] a,
.top-carousel [class*="title"] a,
#top-slider [class*="title"] a,
.top-slider [class*="title"] a,
#headlines [class*="title"] a,
.headlines [class*="title"] a,
#headline [class*="title"] a,
.headline [class*="title"] a,
#thk-slider [class*="title"] a,
.thk-slider [class*="title"] a,
#thk-carousel [class*="title"] a,
.thk-carousel [class*="title"] a,
.swiper [class*="title"] a,
.swiper-container [class*="title"] a,
.slick-slider [class*="title"] a,
[class*="pickup"] [class*="title"] a,
[class*="carousel"] [class*="title"] a,
[class*="slider"] [class*="title"] a,
[class*="swiper"] [class*="title"] a,
[class*="slick"] [class*="title"] a {
  display: inline !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: #fff !important;
  text-decoration: none !important;
  white-space: normal !important;
  word-break: break-word !important;
}

/* pやh要素がタイトル帯として使われている場合の保険 */
#pickup h2,
#pickup h3,
#pickup p,
.pickup h2,
.pickup h3,
.pickup p,
#post-slider h2,
#post-slider h3,
#post-slider p,
.post-slider h2,
.post-slider h3,
.post-slider p,
#top-carousel h2,
#top-carousel h3,
#top-carousel p,
.top-carousel h2,
.top-carousel h3,
.top-carousel p,
#top-slider h2,
#top-slider h3,
#top-slider p,
.top-slider h2,
.top-slider h3,
.top-slider p,
.swiper h2,
.swiper h3,
.swiper p,
.swiper-container h2,
.swiper-container h3,
.swiper-container p,
.slick-slider h2,
.slick-slider h3,
.slick-slider p,
[class*="pickup"] h2,
[class*="pickup"] h3,
[class*="pickup"] p,
[class*="carousel"] h2,
[class*="carousel"] h3,
[class*="carousel"] p,
[class*="slider"] h2,
[class*="slider"] h3,
[class*="slider"] p {
  line-height: 1.26 !important;
}

/* 画像自体は少し高めにしてタイトル帯のぶん余裕を作る */
#pickup img,
.pickup img,
#post-slider img,
.post-slider img,
#top-carousel img,
.top-carousel img,
#top-slider img,
.top-slider img,
.swiper img,
.swiper-container img,
.slick-slider img,
[class*="pickup"] img,
[class*="carousel"] img,
[class*="slider"] img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* PCでは少しだけ読みやすく */
@media (min-width: 1000px) {
  #pickup [class*="title"],
  .pickup [class*="title"],
  #post-slider [class*="title"],
  .post-slider [class*="title"],
  #top-carousel [class*="title"],
  .top-carousel [class*="title"],
  #top-slider [class*="title"],
  .top-slider [class*="title"],
  .swiper [class*="title"],
  .swiper-container [class*="title"],
  .slick-slider [class*="title"],
  [class*="pickup"] [class*="title"],
  [class*="carousel"] [class*="title"],
  [class*="slider"] [class*="title"],
  [class*="swiper"] [class*="title"],
  [class*="slick"] [class*="title"] {
    font-size: 13px !important;
    min-height: 3.0em !important;
    max-height: 3.3em !important;
  }
}

/* スマホはさらにコンパクト */
@media (max-width: 600px) {
  #pickup [class*="title"],
  .pickup [class*="title"],
  #post-slider [class*="title"],
  .post-slider [class*="title"],
  #top-carousel [class*="title"],
  .top-carousel [class*="title"],
  #top-slider [class*="title"],
  .top-slider [class*="title"],
  .swiper [class*="title"],
  .swiper-container [class*="title"],
  .slick-slider [class*="title"],
  [class*="pickup"] [class*="title"],
  [class*="carousel"] [class*="title"],
  [class*="slider"] [class*="title"],
  [class*="swiper"] [class*="title"],
  [class*="slick"] [class*="title"] {
    font-size: 10.5px !important;
    line-height: 1.22 !important;
    min-height: 2.55em !important;
    max-height: 2.8em !important;
    padding: 4px 6px 5px !important;
  }
}


/* =========================================================
   v17 fix：トップ画像スライダーのタイトル下切れを確実に止める
   ---------------------------------------------------------
   これまでの2行表示だと、スライダー本体側の高さ制限により
   下段が埋もれるため、スライダー上のタイトルは1行省略表示に変更。
   見切れ防止を優先。
   ========================================================= */

/* スライダーのタイトル帯は1行固定にする */
#pickup [class*="title"],
.pickup [class*="title"],
.pickup-post [class*="title"],
.pickup-posts [class*="title"],
#pickup-posts [class*="title"],
#post-slider [class*="title"],
.post-slider [class*="title"],
#top-carousel [class*="title"],
.top-carousel [class*="title"],
#top-slider [class*="title"],
.top-slider [class*="title"],
#top-news [class*="title"],
.top-news [class*="title"],
#headlines [class*="title"],
.headlines [class*="title"],
#headline [class*="title"],
.headline [class*="title"],
#thk-slider [class*="title"],
.thk-slider [class*="title"],
#thk-carousel [class*="title"],
.thk-carousel [class*="title"],
#thk_pickup [class*="title"],
.thk_pickup [class*="title"],
#thk-pickup [class*="title"],
.thk-pickup [class*="title"],
#thk_carousel [class*="title"],
.thk_carousel [class*="title"],
#thk-carousel [class*="title"],
.thk-carousel [class*="title"],
.swiper [class*="title"],
.swiper-container [class*="title"],
.swiper-wrapper [class*="title"],
.slick-slider [class*="title"],
.slick-list [class*="title"],
.slick-track [class*="title"],
[class*="pickup"] [class*="title"],
[class*="Pickup"] [class*="title"],
[class*="carousel"] [class*="title"],
[class*="Carousel"] [class*="title"],
[class*="slider"] [class*="title"],
[class*="Slider"] [class*="title"],
[class*="swiper"] [class*="title"],
[class*="Swiper"] [class*="title"],
[class*="slick"] [class*="title"],
[class*="Slick"] [class*="title"] {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  display: block !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  margin: 0 !important;
  padding: 5px 8px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: rgba(48, 43, 40, .72) !important;
  transform: none !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}

/* タイトル内のリンク・h・pも1行で省略 */
#pickup [class*="title"] a,
.pickup [class*="title"] a,
#post-slider [class*="title"] a,
.post-slider [class*="title"] a,
#top-carousel [class*="title"] a,
.top-carousel [class*="title"] a,
#top-slider [class*="title"] a,
.top-slider [class*="title"] a,
#headlines [class*="title"] a,
.headlines [class*="title"] a,
#headline [class*="title"] a,
.headline [class*="title"] a,
#thk-slider [class*="title"] a,
.thk-slider [class*="title"] a,
#thk-carousel [class*="title"] a,
.thk-carousel [class*="title"] a,
.swiper [class*="title"] a,
.swiper-container [class*="title"] a,
.swiper-wrapper [class*="title"] a,
.slick-slider [class*="title"] a,
.slick-list [class*="title"] a,
.slick-track [class*="title"] a,
[class*="pickup"] [class*="title"] a,
[class*="carousel"] [class*="title"] a,
[class*="slider"] [class*="title"] a,
[class*="swiper"] [class*="title"] a,
[class*="slick"] [class*="title"] a,
#pickup [class*="title"] h2,
#pickup [class*="title"] h3,
#pickup [class*="title"] p,
.pickup [class*="title"] h2,
.pickup [class*="title"] h3,
.pickup [class*="title"] p,
[class*="pickup"] [class*="title"] h2,
[class*="pickup"] [class*="title"] h3,
[class*="pickup"] [class*="title"] p,
[class*="carousel"] [class*="title"] h2,
[class*="carousel"] [class*="title"] h3,
[class*="carousel"] [class*="title"] p,
[class*="slider"] [class*="title"] h2,
[class*="slider"] [class*="title"] h3,
[class*="slider"] [class*="title"] p {
  display: block !important;
  width: 100% !important;
  height: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-size: inherit !important;
  line-height: 18px !important;
  color: #fff !important;
  text-decoration: none !important;
  -webkit-line-clamp: unset !important;
}

/* タイトル帯が画像の外へ押し出されないよう、カード側を相対配置 */
#pickup li,
.pickup li,
#pickup article,
.pickup article,
#pickup .post,
.pickup .post,
#post-slider li,
.post-slider li,
#post-slider article,
.post-slider article,
#top-carousel li,
.top-carousel li,
#top-carousel article,
.top-carousel article,
#top-slider li,
.top-slider li,
#top-slider article,
.top-slider article,
.swiper-slide,
.slick-slide,
[class*="pickup"] li,
[class*="carousel"] li,
[class*="slider"] li,
[class*="pickup"] article,
[class*="carousel"] article,
[class*="slider"] article,
[class*="pickup"] .post,
[class*="carousel"] .post,
[class*="slider"] .post {
  position: relative !important;
  overflow: hidden !important;
}

/* スマホは少しだけ低く */
@media (max-width: 600px) {
  #pickup [class*="title"],
  .pickup [class*="title"],
  #post-slider [class*="title"],
  .post-slider [class*="title"],
  #top-carousel [class*="title"],
  .top-carousel [class*="title"],
  #top-slider [class*="title"],
  .top-slider [class*="title"],
  .swiper [class*="title"],
  .swiper-container [class*="title"],
  .swiper-wrapper [class*="title"],
  .slick-slider [class*="title"],
  [class*="pickup"] [class*="title"],
  [class*="carousel"] [class*="title"],
  [class*="slider"] [class*="title"],
  [class*="swiper"] [class*="title"],
  [class*="slick"] [class*="title"] {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 4px 6px !important;
    font-size: 10.5px !important;
    line-height: 16px !important;
  }

  #pickup [class*="title"] a,
  .pickup [class*="title"] a,
  #post-slider [class*="title"] a,
  .post-slider [class*="title"] a,
  #top-carousel [class*="title"] a,
  .top-carousel [class*="title"] a,
  #top-slider [class*="title"] a,
  .top-slider [class*="title"] a,
  .swiper [class*="title"] a,
  .swiper-container [class*="title"] a,
  .slick-slider [class*="title"] a,
  [class*="pickup"] [class*="title"] a,
  [class*="carousel"] [class*="title"] a,
  [class*="slider"] [class*="title"] a,
  [class*="swiper"] [class*="title"] a,
  [class*="slick"] [class*="title"] a {
    height: 16px !important;
    max-height: 16px !important;
    line-height: 16px !important;
  }
}

/* ============================================================
   V21 HEADER ONLY — 2026-10-31
   add_v17.css の本文・記事カード・サイドバー・スライダーは変更しない。
   ハマナスと包装なしの焼き菓子３種類の描き起こし水彩イラストを使用。
   画像：rokkatei_header_v21_sweets.webp / rokkatei_header_v21_sweets_mobile.webp
   ============================================================ */

/* 旧雪・黒帯のヘッダー装飾を解除 */
#header {
  position:relative !important;
  overflow:visible !important;
  background:#f8fbf7 !important;
  background-image:linear-gradient(180deg,#f8fbf7,#fffaf6) !important;
  border:0 !important;
  border-bottom:1px solid #e5ebe5 !important;
  box-shadow:none !important;
}
#header::before,
#header::after {
  content:none !important;
  display:none !important;
  animation:none !important;
  background:none !important;
}
#header #head-in {
  position:relative !important;
  width:100% !important;
  max-width:1330px !important;
  margin:0 auto !important;
  padding:14px 18px 0 !important;
  box-sizing:border-box !important;
}

/* 白い横長カード。右側には実際に描いた水彩イラスト */
#header .head-cover {
  position:relative !important;
  min-height:208px !important;
  height:auto !important;
  padding:26px 34px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  background-color:#fffdf9 !important;
  background-image:
    linear-gradient(90deg,rgba(255,253,249,1) 0%,rgba(255,253,249,.98) 24%,rgba(255,253,249,.91) 39%,rgba(255,253,249,.12) 59%,rgba(255,253,249,0) 77%),
    url("rokkatei_header_v21_sweets.webp") !important;
  background-size:cover, cover !important;
  background-position:center,center !important;
  background-repeat:no-repeat,no-repeat !important;
  border:1px solid #dfe9e0 !important;
  border-radius:27px !important;
  box-shadow:0 9px 28px rgba(65,91,73,.09) !important;
  overflow:hidden !important;
}
#header .head-cover::before,
#header .head-cover::after {
  content:none !important;
  display:none !important;
}

/* .info は .head-cover 内の要素。2重のカードを作らない */
#header .head-cover .info {
  position:relative !important;
  z-index:3 !important;
  width:100% !important;
  max-width:650px !important;
  min-width:0 !important;
  text-align:left !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
#header #sitename {
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
  display:block !important;
  width:100% !important;
  line-height:1.2 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#header #sitename a {
  display:block !important;
  width:fit-content !important;
  max-width:100% !important;
  color:#344e45 !important;
  text-decoration:none !important;
  line-height:1.2 !important;
  white-space:normal !important;
  overflow:visible !important;
}
/* 元のタイトル画像は画面に出さず、アクセシビリティ上はaltを保持 */
#header #sitename img {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  clip-path:inset(50%) !important;
  border:0 !important;
  opacity:0 !important;
}
#header #sitename a::before {
  content:"六花亭ファン.com" !important;
  display:block !important;
  color:#33584e !important;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif !important;
  font-size:clamp(32px,3.15vw,47px) !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  letter-spacing:.025em !important;
  text-shadow:0 2px 0 rgba(255,255,255,.75) !important;
}
#header #sitename a::after {
  content:"北海道の銘菓と、季節のおいしい話題をお届け" !important;
  display:block !important;
  margin:13px 0 0 !important;
  padding:0 !important;
  color:#617569 !important;
  font-size:15px !important;
  font-weight:500 !important;
  line-height:1.75 !important;
  letter-spacing:.035em !important;
  text-shadow:none !important;
}
#header .desc {
  display:none !important;
}

/* ヘッダー直下のメニューは、参考サイトのようなすっきりした緑文字 */
#header #nav,
#header #gnavi {
  position:relative !important;
  z-index:5 !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  height:auto !important;
}
#header #gnavi {
  padding:9px 0 12px !important;
}
#header #gnavi ul.menu,
#header #gnavi .menu {
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:center !important;
  gap:2px 9px !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:4px 2px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
#header #gnavi .menu li a,
#header #gnavi .menu > li > a {
  padding:7px 9px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:8px !important;
  box-shadow:none !important;
  color:#31584b !important;
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  text-decoration:none !important;
  transform:none !important;
}
#header #gnavi .menu li a:hover,
#header #gnavi .menu li.current-menu-item > a,
#header #gnavi .menu li.current-menu-parent > a {
  color:#b74566 !important;
  background:#fff0f2 !important;
  border:0 !important;
  box-shadow:none !important;
  transform:none !important;
}

@media (max-width:991px) {
  #header #head-in {padding:12px 12px 0 !important;}
  #header .head-cover {
    min-height:184px !important;
    padding:22px 26px !important;
  }
  #header #sitename a::before {font-size:clamp(29px,4vw,40px) !important;}
  #header #sitename a::after {font-size:13px !important;}
  #header #gnavi .menu li a {font-size:13px !important;padding:7px 8px !important;}
}

@media (max-width:600px) {
  #header #head-in {padding:9px 9px 0 !important;}
  #header .head-cover {
    min-height:154px !important;
    padding:18px 15px !important;
    border-radius:19px !important;
    background-image:
      linear-gradient(90deg,rgba(255,253,249,1) 0%,rgba(255,253,249,.99) 33%,rgba(255,253,249,.9) 57%,rgba(255,253,249,.32) 85%,rgba(255,253,249,.09) 100%),
      url("rokkatei_header_v21_sweets_mobile.webp") !important;
    background-size:cover,auto 100% !important;
    background-position:center,right center !important;
  }
  #header .head-cover .info {max-width:100% !important;}
  #header #sitename a::before {
    font-size:clamp(23px,6.25vw,30px) !important;
    letter-spacing:0 !important;
    line-height:1.28 !important;
  }
  #header #sitename a::after {
    max-width:235px !important;
    font-size:11.5px !important;
    line-height:1.6 !important;
    margin-top:9px !important;
  }
  /* V17のスマホ横スクロールメニューを維持 */
  #header #gnavi {padding:6px 0 9px !important;}
  #header #gnavi .menu-menu-container {overflow-x:auto !important;overflow-y:hidden !important;}
  #header #gnavi ul.menu,
  #header #gnavi .menu {
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    width:max-content !important;
    min-width:100% !important;
    max-width:none !important;
    gap:3px !important;
    padding:4px 0 !important;
  }
  #header #gnavi .menu li a {font-size:12px !important;padding:8px 9px !important;}
}

@media (max-width:380px) {
  #header .head-cover {min-height:145px !important;padding:16px 12px !important;}
  #header #sitename a::before {font-size:23px !important;}
  #header #sitename a::after {font-size:11px !important;max-width:210px !important;}
}