@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* =======================================================
  Cocoon Child custom by Kotafukudo
  [INDEX]
   0) Tokens（色・サイズの変数）
   1) Base & Utilities
   2) Header & Nav
   3) Hero / Slider（MetaSlider最終版）
   4) Home sections（共通余白）
   5) Components
      - Cards / Post cards / CTA / Pick list / News list
      - Announces（お知らせ2件）
      - News Head（見出し＋アイコン）
   6) Page tweaks
   7) Responsive（PC / Tablet / SP / Narrow）
======================================================= */


/* ========== 0) TOKENS ========== */
:root{
  /* Color */
  --kf-bg:   #F7F4EF;
  --kf-ink:  #340100;
  --kf-line: #e8e4dd;

  /* Layout */
  --kf-max: 1200px;     /* PCコンテンツ幅 */
  --kf-pad: 24px;       /* ベース余白 */

  /* Header (Cocoon設定に合わせる) */
  --kf-header-pc: 100px;
  --kf-header-sp: 80px;


  --peek-pc: 56px;   /* PC のぞき幅 */
  --peek-sp: 12px;   /* SP のぞき幅 */
  --slide-gap: 16px; /* スライド間 */

    --kf-header-sp: 88px;   /* 例: 64〜88pxあたりが扱いやすい */
  }

/* ========== 1) BASE & UTILITIES ========== */
#kf-home{ color:var(--kf-ink); background:#fff; }

.kf-container{
  width:min(var(--kf-max), 100%);
  margin-inline:auto;
  padding-inline:clamp(16px, 4vw, 32px);
}

.kf-center{ text-align:center; }

.kf-btn{
  display:inline-block;
  padding:.9em 1.4em;
  border:1px solid var(--kf-ink);
}

/* Grids */
.kf-grid-2, .kf-grid-3{ display:grid; gap:24px; }
.kf-grid-2{ grid-template-columns:repeat(2, 1fr); }
.kf-grid-3{ grid-template-columns:repeat(3, 1fr); }

/* Images */
.kf-hero-img{ width:100%; height:auto; display:block; }


/* ========== 2) HEADER & NAV ========== */
/* 左寄せ・縦中央。Cocoon側の高さにフィット */
.header-container, .l-header, #header{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  overflow:visible !important;
}

.header-in .logo, .header .logo, .header-logo, .site-branding, .site-title{
  height:100% !important;
  display:flex !important;
  align-items:center !important;
}

/* PC */
@media (min-width:834px){
  .header-container, .l-header, #header{ height:var(--kf-header-pc) !important; }
  .header .logo img, .header-logo img, .site-title a img,
  .custom-logo, .custom-logo-link img{
    height: calc(var(--kf-header-pc) - 12px) !important;
    width:auto !important;
    max-height:none !important;
    max-width:none !important;
    object-fit:contain !important;
    display:block !important;
  }
}

/* SP */

@media (max-width:833px){
  .header-container, .l-header, #header{ height:var(--kf-header-sp) !important; }
  .header .logo img, .header-logo img, .site-title a img,
  .custom-logo, .custom-logo-link img{
    height: calc(var(--kf-header-sp) - 8px) !important;
    width:auto !important;
    max-height:none !important;
    object-fit:contain !important;
  }
}
/* SPのみ：ヘッダーロゴを非表示 */
@media (max-width: 833px){
  .header .logo,
  .header-logo,
  .site-branding,
  .site-title { display: none !important; }
}
@media (max-width: 833px){
  .header-container, .l-header, #header{
    height: 26px !important;  /* 好みで 56–64px くらい */
  }
}


/* 全ページ共通：本文の上余白を調整 */
.content, .entry-content, main {
  margin-top: 2rem !important;
  padding-top: 0 !important;
}

/* トップのヒーロー上余白を調整 */
.home .content, .home .wrap, .home .entry-content, .home main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 先頭要素（ヒーロー）の上マージンは0に */
.home .content > *:first-child,
.home .entry-content > *:first-child,
.home .wrap > *:first-child { margin-top: 0 !important; }

/* 念のため：MetaSliderの上マージンも打ち消し */
.home .metaslider { margin-top: 0 !important; }




/* ========== 3) HERO SLIDER ========== */

.kf-hero--full{ margin:0; }
.kf-hero--full img{ display:block; border-radius:0; }
.home .content,.home .main,.home .wrap,.home .entry-content{
  margin-top:0!important; padding-top:0!important;
}
@media (max-width: 768px){
.metaslider .slides img {
    aspect-ratio: 4 / 3;
    object-fit:cover !important;
}
}
/* === PCだけ：ヒーロースライダーをブラウザ幅100%に === */
@media (min-width: 1025px) {
  .kf-hero.kf-hero--full{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: relative;
    overflow: hidden; /* 余分なはみ出しを隠す */
  }
  .kf-hero--full .metaslider .slides li,
  .kf-hero--full .metaslider .slides li img {
    aspect-ratio: 16/6;     /* ← ここで高さ調整。値を小さくすると低くなる */
    object-fit: cover;      /* 画像の切り抜き調整 */
  }
  /* MetaSlider側の幅制限を外して全幅に合わせる保険 */
  .kf-hero--full .metaslider,
  .kf-hero--full .ml-slider,
  .kf-hero--full .flexslider,
  .kf-hero--full .metaslider .slides {
    max-width: none !important;
  }

  /* 画像を横いっぱいに */
  .kf-hero--full img{
    width: 100%;
    height: auto;
    display: block;
  }
}

/* ビューポートバーやスクロールバー起因の横スクロール防止（任意） */
html, body { overflow-x: hidden; }


/* ========== 4) HOME SECTIONS（共通余白） ========== */
#kf-home section{
  padding-top: clamp(24px, 4vw, 48px);
  padding-bottom: clamp(5px, 2vw, 16px);
}


/* ========== 5) COMPONENTS ========== */
/* 5-1) Cards / News head など */

.kf-intro {
  background: #f7f4ef;
  padding: 3rem 1.5rem;
  text-align: center;
  border-bottom: 1px solid #e5ddd0;
}
.kf-intro-head {
  font-size: 1.4rem;
  margin-bottom: 1.2rem;
  color: #3c2f2f;
}
.kf-intro-text {
  line-height: 1.9;
  color: #4a3f3a;
  font-size: 0.96rem;
}


/*お知らせ見出し*/
#kf-home h2.kf-news-head, #kf-about h2.kf-about-head{
  display:flex; align-items:center; justify-content:center; gap:.5em;
  white-space:nowrap; margin:0 auto .6em; text-align:center;
}


.kf-news-head::before,
.kf-news-head::after {
  content: "" !important;
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.kf-news-head::before {
  background-image: url('assets/img/newstitle-icon-before.png') !important;
}

.kf-news-head::after {
  background-image: url('assets/img/newstitle-icon-after.png') !important;
}


@media (max-width: 767px){
  .kf-news-head { gap: 0.4em; }
  .kf-news-head::before,
  .kf-news-head::after { width: 1.6em; height: 1.6em; }
}

@media (max-width: 767px) {
  .kf-news-head {
    flex-direction: row !important; /* 横並びを強制 */
    align-items: center;
    text-align: center;
  }
}
 

.kf-card a{
  display:block;
  border-radius:0;
}
.kf-card img{ width:100%; height:auto; display:block; margin-bottom:12px; }
.kf-card h3{ font-size:1rem; margin:.5em 0; }
.kf-card p{ font-size:.9rem; line-height:1.7; }
.kf-cards {
  list-style: none;
  margin: 0 auto 2em;
  padding: 0;
  max-width: 1080px;

  display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fill, minmax(280px, 320px));
  gap: 24px;

  align-items: stretch; /* ← 各カードの高さを揃える */
}

.kf-card {
  display: flex;               /* ← カードの中をflex化 */
  flex-direction: column;      /* 縦に並べる */
  justify-content: space-between; /* 上：内容、下：ボタンを押し下げる */
}

.kf-cards .kf-card::before {
  content: none !important;
}
.kf-landing ul li::before {
    content: none !important;
}

.kf-cards{ display:grid; gap:24px; }
.kf-card{
  background:#fff;
}
.kf-card__thumb img{ display:block; width:100%; border-radius:5px; }
.kf-card__desc{ color:#555; line-height:1.8; margin:.4em 0 .8em; }

.kf-card__btn{ text-align:center; }
.kf-card__btn a{
  display:inline-block;
  padding:.6em 1.6em;
  background:#b34b1f;
  color:#fff;
  border-radius:9999px;
  text-decoration:none;
  transition:opacity .3s;
}
.kf-card__btn a:hover{ opacity:.85; }


/* 5-2) Post cards */
.kf-post a{ display:block; background:#fff; border:1px solid #ece8df; padding:16px; }
.kf-post img{ width:100%; height:auto; display:block; margin-bottom:12px; }
.kf-post time{ display:block; font-size:.85rem; opacity:.7; margin-bottom:.25em; }

/* 5-3) CTA */
.kf-cta{
  display:flex; align-items:center; justify-content:center;
  min-height:84px;
  background:#fff;
  font-weight:500;
}
/* ========== Products (犬用石けん) ========== */
.kf-products {
  padding: 56px 0 48px;
  background: #fff; /* トップ面の流れに合わせて白背景。必要なら #F7F4EF に */
}
.kf-products .kf-about__title {
  margin-bottom: 18px; /* 見出し下の余白を少し詰める */
}
.kf-products__lead {
  margin: 0 auto 28px;
  max-width: 48rem;
  line-height: 1.9;
  text-align: center;
  color: #333;
  font-size: clamp(14px, 2.5vw, 16px);
}

/* グリッド */
.kf-product-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .kf-product-list { grid-template-columns: repeat(3, 1fr);}
}
@media (min-width: 1080px) {
  .kf-product-list { grid-template-columns: repeat(4, 1fr); }
}

/* カード */
.kf-product-item a {
  display: block;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  overflow: clip; /* 角丸で画像を切る */
  text-decoration: none;
  color: inherit;
  box-shadow: 0 6px 24px rgba(0,0,0,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kf-product-item a:focus-visible {
  outline: 3px solid #7a5a56; /* 臙脂茶 */
  outline-offset: 2px;
}
.kf-product-item a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.12);
}

/* サムネイル */
.kf-product-thumb {
  margin: 0;
  background: #faf7f2; /* 生成り寄りの薄ベージュで未読感を抑える */
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.kf-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* タイトル／説明 */
.kf-product-title {
  font-size: clamp(16px, 2.6vw, 16px);
  line-height: 1.5;
  margin: 12px 14px 4px;
  font-weight: 700;
  letter-spacing: .02em;
}
.kf-product-desc {
  margin: 0 14px 14px;
  color: #444;
  font-size: clamp(13px, 2.3vw, 14px);
  line-height: 1.8;
}

/* 「もっと見る」ボタン */
.kf-products .kf-btn.kf-btn--wide {
  margin-top: 18px;
  min-width: 240px;
}
/* もし .kf-btn が未定義なら軽いスタイルを念のため */
.kf-btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid #7a5a56;
  background: #7a5a56;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-weight: 700;
  transition: filter .15s ease, transform .15s ease;
}
.kf-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.kf-btn--wide { width: min(100%, 360px); }
.kf-center { text-align: center; }


/* === About レイアウト（本文幅＝ボタン幅に揃える） === */
.kf-about__grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
  justify-items: start;
}
.kf-about__img img{ width: 100%; height: auto; display: block; }
.kf-about__textwrap{
  max-width: 36ch;
  width: 100%;
  margin: 0 auto 0 0;
}
.kf-about__text{ margin: 0 0 1rem; }
.kf-about__cta { margin-top: 16px; }
.kf-about__cta .kf-btn{
  display: block;
  width: 100%;
  text-align: center;
  padding: .7em 1.2em;
  border: 1px solid #111;
  background: #fff;
}
.kf-about__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-size: clamp(20px, 2vw, 26px);
  color: #3c2a20;
  font-weight: 500;
}

.kf-title__icon {
  width: 28px;
  height: auto;
  opacity: 0.9;
  transform: translateY(1px); /* 微調整で中央揃え */
}
@media (max-width: 600px) {
  .kf-about__title {
    flex-direction: column;
    gap: 0.4em;
  }
  .kf-title__icon {
    width: 24px;
  }
}
.kf-aboutbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7em 1.2em;
  border: 1px solid var(--kf-ink, #111);
  background: #fff;
  color: var(--kf-ink, #111);
  font-size: .92rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
  width: 100%;
  text-align: center;
  margin-top: 1rem;
}

.kf-aboutbtn:hover {
  background: #660000;
  color: #fff;
}

@media (max-width: 1023px){
  .kf-about__grid{ grid-template-columns: 1fr; gap: 24px; }
  .kf-about__textwrap{ order: 1; }
  .kf-about__img{ order: 2; }
  .kf-about__cta{ text-align: center; }
}
@media (max-width: 480px){
  .kf-about__grid{ gap: 20px; }
  .kf-about__textwrap{ max-width: 100%; }
}

/* --- Aboutページ全体 --- */
#kf-about { 
  max-width: 960px; 
  margin: 0 auto; 
  padding: 3rem 1.5rem; 
  line-height: 1.9; 
}
#kf-about h2, #kf-about h3 { 
  margin-bottom: 1rem; 
}
#kf-about h2, #kf-about h3 { 
  position: relative; 
  padding-top: 1.5rem; 
  margin-top: 2.5rem; 
}
#kf-about h2::before, #kf-about h3::before{
  content: ""; 
  display: block; 
  width: 100%; 
  height: 1px; 
  background-color: #ddd; 
  position: absolute; 
  top: 0; 
  left: 0;
}
#kf-about h2:first-of-type::before { content: none; }

.kf-about__dog { 
  display: flex; 
  align-items: center; 
  margin-bottom: 1.5rem; 
}
.kf-about__dog img {
  width: 140px; 
  height: 140px; 
  border-radius: 50%; 
  object-fit: cover; 
  margin-right: 1rem; 
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
#kf-about ul { 
  margin: 1rem 0 1.5rem 1.2rem; 
  padding: 0; 
  list-style-type: disc; 
  color: #333; 
  font-size: 0.92rem;
}
#kf-about li { 
  margin-bottom: 0.5rem; 
  line-height: 1.8; 
}
.kf-about__donation-image {
  text-align: center;
  margin: 2rem 0;
}
.kf-about__donation-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* --- hero --- */
.kf-hero--about {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  margin-bottom: 2rem; /* 写真と本文の間に呼吸を */
}

.kf-hero--about .kf-hero__img {
  display: block;
  width: 100%;
  height: min(50vh, 500px);
  object-fit: cover;
}

/* テキスト帯を非表示（写真を主役に） */
.kf-hero__text { display: none; }

/* 写真下にタイトルを自然に配置 */
.kf-about__intro h1 {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  text-align: left;
  color: #3c2a20;
  margin-bottom: 0.3em;
}

.kf-about__intro p.lead {
  font-size: 1rem;
  color: #6a584a;
  margin-bottom: 2rem;
}

/* 本文 */
#kf-about { 
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
  line-height: 1.9;
}

/* --- スマホでの左右余白を控えめに --- */
@media (max-width: 600px) {
  #kf-about {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .kf-about__intro,
  .kf-container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .kf-about__intro h1 {
    font-size: 1.15rem;
    line-height: 1.4;
  }

  .kf-about__intro p.lead {
    font-size: 0.9rem;
    line-height: 1.7;
  }

  #kf-about p {
    font-size: 0.92rem;
    line-height: 1.85;
  }
}
/* 段落を両端揃えに */
#kf-about p {
  text-align: justify;
  text-justify: inter-ideograph; /* 日本語向け */
}

/* 最終行だけは左に（最後の1行が中央に寄らないように） */
#kf-about p { text-align-last: left; }

/* 見出しは両端揃えにしない（不自然になるため） */
#kf-about h1, #kf-about h2, #kf-about h3 { text-align: left; }
/* 両端揃えを当てたい段落だけ class="ja-justify" を付ける */
.ja-justify { text-align: justify; text-justify: inter-ideograph; text-align-last: left; }
.kf-owner__grid {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.kf-owner__img img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
@media (max-width: 768px) {
  .kf-owner__grid { flex-direction: column; text-align: center; }
  .kf-owner__img img { width: 70%; max-width: 300px; }
}

/* 5-4) Pick list */
.kf-picklist {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.kf-pick {
  background: #fff;
  border: 1px solid var(--kf-line, #e8e4dd);
  text-align: center;
}
.kf-pick a{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.kf-pick img{
  aspect-ratio: 1/1;
  object-fit: cover;
  margin-bottom: 8px;
}
.kf-pick a:focus-visible{
  outline: 3px solid rgba(150,0,0,.35);
  outline-offset: 3px;
  border-radius: 14px;
}
.kf-pick img  { aspect-ratio: 1 / 1; object-fit: cover; margin: auto; }
.kf-pick__desc {
  font-size: 14px; line-height: 1.4; color: #444; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-align: left;
}
.kf-pick__title { text-align: center; }
@media (max-width: 768px){
  .kf-pick__desc { -webkit-line-clamp: 3; min-height: calc(1.6em * 3); font-size: 13px; }
  .kf-pick__title { text-align: left; }
  .kf-pick a { align-items: flex-start; }
}
@media (max-width: 768px){
  .kf-pick{ padding:14px 14px 16px; }
  .kf-pick__title{ margin-bottom:6px; }
}
@media (max-width: 1024px){ .kf-picklist { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px){
  .kf-picklist { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kf-pick { padding: 12px; }
  .kf-pick__title { font-size: 15px; }
  .kf-pick__desc { font-size: 14px; }
}
@media (max-width: 360px){ .kf-picklist { grid-template-columns: 1fr; } }

@media (max-width: 767px) {
  /* カード全体 */
  .kf-pick {
    display: flex;
    flex-direction: column; /* 画像 → テキスト 縦並び */
    align-items: center;
    text-align: center;
    border: 1px solid #e8e4dd;
    background: #fff;
  }

  /* 画像 */
  .kf-pick img {
    width: 100%;
    height: auto;
    margin-bottom: 8px;
    object-fit: cover;
  }

  /* タイトル（例：はじめて / やさしい泡） */
  .kf-pick h3 {
    font-size: 1.1rem;
    margin: 4px 0 6px;
    color: var(--kf-ink, #222);
  }

  /* 説明文 */
  .kf-pick p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
    margin: 0;
  }
}
/* ===== 犬用石けんの選び方：カードのテキストを画像の下へ ===== */
.kf-picklist .kf-pick a{
  display: flex !important;
  flex-direction: column !important;   /* ←縦積み */
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  /* 以前の grid 指定を打ち消す */
  grid-template-columns: unset !important;
}

.kf-picklist .kf-pick__img,
.kf-picklist .kf-pick img{
  width: 100%;
  aspect-ratio: 1 / 1;        /* 正方形を維持 */
  object-fit: cover;
  border-radius: 8px;
}

/* ラベル/タイトルの横書き・中央寄せを強制 */
.kf-picklist .kf-pick__title,
.kf-picklist .cat-name,
.kf-picklist .entry-title,
.kf-picklist .kf-card__title,
.kf-picklist .cat-title,
.kf-picklist figcaption,
.kf-picklist .pick-title{
  writing-mode: horizontal-tb !important;   /* ←縦書き解除 */
  text-align: center;
  line-height: 1.6;
  margin: 0;
}


/* ========== Pick：最終版（スマホは2列カード、PCは横並び） ========== */

/* ベース（どの幅でも“カード”として成立） */
.kf-picklist{
  display:grid;
  gap:12px;
  list-style:none;
  padding:0;
  margin:0;
}
.kf-pick{
  height:100%;
  border:1px solid var(--kf-line,#e8e4dd);
  background:#fff;
}
.kf-pick > a{
  display:flex;
  flex-direction:column;              /* 画像→テキスト（スマホ想定の縦並びをデフォルトに） */
  gap:8px;
  padding:12px;
  color:inherit;
  text-decoration:none;
  height:100%;
}
.kf-pick__img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
}
.kf-pick__title{
  margin:0;
  font-size:clamp(14px,3.8vw,16px);
  letter-spacing:.02em;
  text-align:left;
}
.kf-pick__desc{
  margin:0;
  font-size:clamp(12px,3.4vw,14px);
  line-height:1.7;
  color:#444;
  text-align:left;
}

/* スマホ（～767px）：2列カード */
@media (max-width:767px){
  .kf-picklist{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

/* タブレット（768–1023px）：2列・カードのまま */
@media (min-width:768px) and (max-width:1023.98px){
  .kf-picklist{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:16px;
  }
}

/* PC（>=1024px）：3～4列＆画像左・テキスト右に切替。説明は非表示 */
@media (min-width:1024px){
  .kf-picklist{
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:32px 28px;
  }
  .kf-pick > a{
    flex-direction:row;               /* 横並び */
    gap:20px;
    padding:16px;
  }
  .kf-pick__img{
    width:200px;                      /* 固定幅の正方形サムネ */
    flex:0 0 200px;
    aspect-ratio:1/1;
  }
  .kf-pick__desc{ display:none; }     /* PCは説明を出さない */
}
/* 1080px～は4列に */
@media (min-width:1080px){
  .kf-picklist{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .kf-pick__img{ width:160px; flex-basis:160px; }
}

/* アクセシビリティ */
.kf-pick a:focus-visible{
  outline:3px solid rgba(150,0,0,.35);
  outline-offset:6px;
}




/* 5-5) News list */
.kf-news__list{ list-style:none; padding:0; margin:0; border-top:1px solid var(--kf-line); }
.kf-news__list li{ border-bottom:1px solid var(--kf-line); }
.kf-news__list a{ display:flex; gap:16px; padding:14px 0; }
.kf-news__list a:hover{ text-decoration: underline; }
.kf-news__list time{ min-width:7em; font-size:.9rem; color:#666; }
.kf-news__list span{ flex:1; font-size:1rem; }

/* 5-6) Announces */
.kf-announces{ padding:8px 0; }
.kf-announces .kf-container{ display:grid; gap:24px; }
.kf-announce{
  display:grid;
  grid-template-columns:minmax(260px, 34%) 1fr;
  gap:0;
  align-items:center;
  text-decoration:none; color:inherit;
}
.kf-announce:hover .kf-announce__title{ text-decoration:underline; }
.kf-announce__thumb img{ width:80%; height:auto; display:block; object-fit:cover; }
.kf-announce__title{ font-size:clamp(16px, 2.4vw, 16px); margin:0 0 .4em; }
.kf-announce__text{ margin:0; line-height:1.9; color:#666; }

/* 5-7) News Head（アイコン＋テキスト） */
.kf-news-head{
  display:flex; align-items:center; justify-content:center;
  gap:16px; margin-bottom:16px; text-align:center;
}
.kf-news-head img{ height:50px; width:auto; display:block; }

/* 背景帯 */
.kf-band{ background:#fff; }
.kf-mail{ background:#f3ecdd; }
.kf-mail__box{ background:#fff8; border:1px solid var(--kf-line); padding:24px; }

/* お知らせバンドのリード文を太字に */
.kf-band__lead { font-weight: 600; }


/* ========== 6) PAGE TWEAKS ========== */
/* トップの固定ページタイトルを隠す */
body.home .entry-title{ display:none; }

/* テキスト色・リンク色 */
body{ color:#222; }
a{ color:#4d0000; text-decoration:none; }
a{ text-decoration-thickness: from-font; text-underline-offset: 2px; }
a:hover{ text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* 見出しトーン */
#kf-home h2{
  font-size:clamp(20px, 2.2vw, 28px);
  margin:0 0 .6em; letter-spacing:.02em;
}
#kf-home p{ line-height:1.6; padding-bottom: 10px; }

/* Journal */
.kf-journal{ background: var(--kf-bg); padding: clamp(24px, 4vw, 48px) 0; }
.kf-journal__list{ display: grid; gap: 40px; }
@media (min-width: 1024px){ .kf-journal__list{ grid-template-columns: repeat(3, 1fr); } }
.kf-jpost__link{ display: grid; gap: 14px; text-decoration: none; color: inherit; }
.kf-jpost__thumb{ width: 100%; aspect-ratio: 4/3; overflow: hidden; background: #fff; border: 1px solid #ece8df; }
.kf-jpost__thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.kf-jpost__cat{ display:inline-block; font-size:.85rem; padding:.35em .9em; border:1px solid #d9d3c7; background:#fff; margin-bottom:10px; margin-top: 10px; }
.kf-jpost__date{ display:block; font-size:.9rem; opacity:.8; margin-bottom:.25em; }
.kf-jpost__title{ font-size: clamp(16px, 2.2vw, 18px); margin: 0 0 .35em; }
.kf-jpost__excerpt{ margin: 0; line-height: 1.9; color: #666; }
@media (max-width: 1023px){
  .kf-jpost__link{ grid-template-columns: 120px 1fr; align-items: start; gap: 16px; }
  .kf-jpost__thumb{ aspect-ratio: 1 / 1; }
}
.kf-journal__more{ margin-top: 28px; }
.kf-btn--wide{
  display: inline-block; min-width: min(560px, 90%);
  text-align: center; padding: .9em 1.2em; border: 1px solid #111; background: #fff;
}
.kf-post img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

/* /journal：スマホは2カラム */
.page-journal .kf-journal__list { display: grid; gap: 40px; }
@media (max-width: 767px){
  .page-journal .kf-journal__list{ grid-template-columns: 1fr 1fr; gap:16px; }
  .kf-journal .kf-jpost__excerpt{ display:none; }
  .kf-journal .kf-jpost__title{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; text-overflow:ellipsis;
  }
}
/* /journal カード */
.page-journal .kf-jpost__link{ display:block; }
.page-journal .kf-jpost__thumb{
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; background:#fff; border: 1px solid #ece8df;
}
.page-journal .kf-jpost__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.page-journal .kf-badge{
  position:absolute; right:8px; top:8px; background:#2a6; color:#fff;
  font-size:12px; line-height:1; padding:4px 8px; border-radius:3px;
}
.page-journal .kf-jpost__date{ font-size:.8rem; opacity:.85; margin:.5em 0 0; }
.page-journal .kf-jpost__title{
  font-size:1rem; margin:.35em 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.page-journal .kf-jpost__excerpt{
  font-size:.85rem; color:#666; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cat-label {
    background-color: #fff;
    color: #600;
}
/* ── 小多福堂の日記：背景をブラウザ幅100%に ── */
.kf-journal{
  background: #f8f6f0;              /* いまの生成り色に合わせて */
  padding: 4rem 0;                  /* 上下余白はお好みで */
  /* ここから全幅化テク */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* 中のコンテンツは今まで通り中央寄せでOK */
.kf-journal .kf-container{
  max-width: 1100px;                /* 既存の幅に合わせる */
  margin: 0 auto;
  padding: 0 2rem;                  /* サイドの余白（任意） */
}

/* 横スクロールが出る環境向けの保険（任意） */
body{ overflow-x: hidden; }

/* お知らせリスト */
.kf-news__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #ccc; }
.kf-news__list li { border-bottom: 1px solid #ccc; padding: 12px 0; }
.kf-news__list a {
  display: flex; justify-content: flex-start; align-items: center; gap: 1em;
  color: inherit; text-decoration: none;
}
.kf-news__list a:hover { text-decoration: underline; }
.kf-news__list time { min-width: 7em; font-size: 0.9rem; color: #666; }
.kf-news__list span { flex: 1; font-size: 1rem; }

/* Sidebar */
.sidebar .widget { background:#fff; border:1px solid #FCF7E9; border-radius:0; padding:16px; margin:0 0 20px; }
.sidebar .widget .widgettitle, .sidebar .widget .widget-title{
  display:block; font-weight:700; font-size:1rem; letter-spacing:.02em; margin:0 0 .8em; padding:0 0 .5em; border-bottom:1px solid #FCF7E9;
}
.sidebar .widget_recent_entries ul { list-style:none; margin:0; padding:0; }
.sidebar .widget_recent_entries li { padding:.55em 0; border-bottom:1px solid #f3efe8; }
.sidebar .widget_recent_entries li:last-child { border-bottom:none; }
.sidebar .widget_recent_entries a { color:#222; text-decoration:none; }
.sidebar .widget_recent_entries a:hover { text-decoration:underline; }
.sidebar .widget_recent_comments ul { list-style:none; margin:0; padding:0; }
.sidebar .widget_recent_comments li { padding:.55em 0; border-bottom:1px solid #f3efe8; }
.sidebar .widget_recent_comments li:last-child { border-bottom:none; }
.sidebar .widget_search .search-field { width:100%; border:1px solid #FCF7E9; padding:.6em .75em; border-radius:0; }
.sidebar .widget_search .search-submit { margin-top:.5em; padding:.55em 1em; border:1px solid #222; background:#fff; }
.sidebar .widget, .sidebar .widget a { color:#222; }
.sidebar .widget p { line-height:1.8; }
.sidebar h2, .sidebar h3 { background-color: #FCF7E9; padding: 12px; margin: 16px 0; border-radius: 2px; }


/* ========== 7) RESPONSIVE ========== */
/* PCで2件横並び */
@media (min-width:1024px){
  .kf-announces .kf-container{ grid-template-columns:1fr 1fr; align-items:start; }
}
/* Tablet～SP */
@media (max-width:1023px){
  .kf-announces .kf-container{ grid-template-columns:1fr; }
  .kf-announce{ grid-template-columns:120px 1fr; gap:16px; }
  .kf-announce__thumb img{ width:120px; height:120px; object-fit:cover; }
  .kf-announce__title{ font-size:16px; }
}
/* SP（共通） */
@media (max-width:768px){
  .kf-grid-2{ grid-template-columns:1fr; }
  .kf-grid-3{ grid-template-columns:1fr; }
  .kf-about__grid{ grid-template-columns:1fr; gap:24px; }
  .kf-picklist{ grid-template-columns:repeat(2, 1fr); }
  .kf-cta{ min-height:88px; }
}
/* SPのNews Headは縦積み＆少し大きめアイコン */
@media (max-width:767px){
  .kf-news-head{ flex-direction:column; align-items:center; text-align:center; }
  .kf-news-head img{ height:50px; }
}
/* Narrow phones */
@media (max-width:480px){
  .kf-announce{ grid-template-columns:104px 1fr; gap:12px; }
  .kf-announce__thumb img{ width:104px; height:104px; }
}


/* ===== FAQ Page ===== */
#kf-faq { max-width: 960px; margin: 0 auto; padding: 2.5rem 1.25rem; }
.kf-faq__title { font-size: clamp(22px, 2.6vw, 32px); margin: 0 0 .5rem; }
.kf-faq__lead { color:#555; margin: 0 0 1.5rem; line-height:1.9; }
.kf-faq__toc { padding: .75rem 1rem; margin: 0 0 2rem; background:#fff; }
.kf-faq__toc ul { display:flex; flex-wrap:wrap; gap:.75rem 1rem; margin:0; padding:0; list-style:none; }
.kf-faq__toc a { text-decoration: none; border-bottom: 1px dotted currentColor; }
.kf-faq__section { margin: 2.5rem 0; }
.kf-faq__section h2 { position: relative; padding-top: 1.25rem; margin: 0 0 1rem; }
.kf-faq__section h2::before { content:""; position:absolute; left:0; top:0; width:100%; height:1px; background:#ddd; }
.kf-faq__qa { border:1px solid #eee;  background:#fff; margin: .75rem 0; border-radius:4px; overflow:hidden; }
.kf-faq__q { cursor: pointer; padding: .9rem 1rem; font-weight: 600; list-style:none; }
.kf-faq__qa[open] .kf-faq__q { background: #faf7f2; }
.kf-faq__a { padding: .9rem 1rem 1.1rem; border-top:1px solid #eee; line-height:1.9; }
#kf-faq ul { margin: .6rem 0 1rem 1.25rem; }
#kf-faq li { margin: .25rem 0; }
.kf-list--columns { columns: 2; column-gap: 2rem; }
@media (max-width: 768px){ .kf-list--columns { columns: 1; } }

/* ===== Usage page ===== */
#kf-usage{ max-width:960px; margin:0 auto; padding:2.5rem 1.25rem; }
.kf-usage__title{ font-size:clamp(22px,2.6vw,32px); margin:0 0 .5rem; }
.kf-usage__lead{ color:#555; margin:0 0 1.5rem; line-height:1.9; }
.kf-usage__toc{ padding:.75rem 1rem; margin:0 0 2rem; background:#fff; }
.kf-usage__toc ul{ display:flex; flex-wrap:wrap; gap:.75rem 1rem; margin:0; padding:0; list-style:none; }
.kf-usage__toc a{ text-decoration:none; border-bottom:1px dotted currentColor; }
.kf-usage__section{ margin:2.5rem 0; }
.kf-usage__section h2{ position:relative; padding-top:1.25rem; margin:0 0 1rem; }
.kf-usage__section h2::before{ content:""; position:absolute; left:0; top:0; width:100%; height:1px; background:#ddd; }
#kf-usage ul{ margin:.6rem 0 1rem 1.25rem; }
#kf-usage li{ margin:.25rem; }
.kf-steps{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.kf-step{ display:grid; grid-template-columns:40px 1fr; gap:12px; background:#fff; border-radius:4px; padding:12px; align-items:start; }
.kf-step__num{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid #ddd; border-radius:50%; font-weight:700; background: #ece8df;}
.kf-step__body strong{ display:block; margin:0 0 .25rem; }
.kf-step__text{ margin:.1rem 0 .25rem; color:#333; }
.kf-bullets{ margin:.4rem 0 0 1.2rem; }
.kf-table-wrap{ overflow-x:auto; }
.kf-table{ width:100%; border-collapse:collapse; background:#fff; }
.kf-table th, .kf-table td{ border:1px solid #ece8df; padding:.6rem .7rem; text-align:left; }
.kf-table thead th{ background:#faf7f2; }
/*.kf-cards{ list-style:none; margin:0; padding:0; display:grid; gap:16px; grid-template-columns:repeat(3,1fr); }*/
.kf-card{  background:#fff;  }
.kf-card h3{ margin:.2rem 0 .4rem; text-align: center;}
.kf-badge{ display:inline-block; font-size:.85rem; padding:.25em .6em; border:1px solid #d9d3c7; background:#fff; margin:.25rem 0 .35rem; }
.kf-note{ color:#444; margin:.4rem 0 0; }
@media (max-width:768px){
  .kf-cards{ grid-template-columns:1fr; }
  .kf-step{ grid-template-columns:32px 1fr; }
  .kf-step__num{ width:32px; height:32px; }
}
/* ---- 軽くするための上書き（追記） ---- */

/* 1) 余白をタイトに & タイトル下に細い罫線 */
.kf-usage__head{
  padding: clamp(12px,2.6vw,20px) 0 0;
  border-bottom: 1px solid var(--kf-line, #e8e4dd);
  margin-bottom: 4px;
}
.kf-usage__title{
  font-size: clamp(26px,3.2vw,40px);  /* ちょい大きめで主役感 */
  margin: 0 0 .3rem;
  line-height: 1.15;
  letter-spacing: .02em;
}
.kf-usage__lead{
  margin: .5rem;     /* 1.5rem → .5rem に圧縮 */
  line-height: 1.7;      /* 読み始めが軽く見える行間 */
  color: #666;
}

/* 2) 目次を“細タブ”化：背景と点線をやめて下線のみ */
.kf-usage__toc{
  padding: 6px 0 10px;
  margin: 0 0 14px;
  background: transparent;       /* ← ここが効く */
}
.kf-usage__toc ul{
  gap: clamp(12px,2vw,28px);
}
.kf-usage__toc a{
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
  text-decoration: none;
  border-bottom: none;           /* 点線を撤去 */
  color: inherit;
  font-size: clamp(14px,1.6vw,16px);
}
.kf-usage__toc a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:2px;
  background: transparent;
  transition: background .2s ease;
}
.kf-usage__toc a:hover::after,
.kf-usage__toc a[aria-current="page"]::after{
  background: var(--kf-ink,#111); /* 細い実線だけで存在感 */
}

/* 3) セクション見出しの“上罫線”をやめて間延びを解消 */
.kf-usage__section{ margin: 2rem 0; }
.kf-usage__section h2{
  padding-top: 0;               /* 1.25rem → 0 */
  margin: 1.4rem 0 .8rem;       /* タイトに */
}
.kf-usage__section h2::before{ content: none; }

/* 4) 本文先頭の余白を潰す（テーマの癖対策） */
.page .entry-content > *:first-child{ margin-top: 0 !important; }

/* 5) SPはさらにタイトに */
@media (max-width: 768px){
  #kf-usage{ padding: 1.2rem 1rem; }      /* 2.5rem → 1.2rem */
  .kf-usage__lead{ margin-bottom: .4rem; }
}

/* ===== breadcrumb　===== */
.kf-breadcrumb{
  font-size:.86rem;
  line-height:1.6;
  color:#666;
  margin:0 0 1rem;
  white-space:nowrap;
  overflow:auto;
}
.kf-breadcrumb a{ text-decoration:none; }
.kf-breadcrumb a:hover{ text-decoration:underline; }
.kf-breadcrumb .current{ color:#3d3d3d; font-weight:500; }

/* ==== Blog breadcrumb: minimal & brand-like ==== */
#breadcrumb.breadcrumb {
  font-size: .9rem;
  line-height: 1.7;
  color: #555;               /* 本文となじむ中間トーン */
  margin: 0 0 1.2rem;
  padding: .4rem 0 .6rem;
  border-bottom: 1px solid #e8e4dd;  /* 生成りに合う薄ベージュ線 */
  white-space: nowrap;
  overflow-x: auto;          /* スマホで横スクロール可 */
  scrollbar-width: none;
}
#breadcrumb.breadcrumb::-webkit-scrollbar { display: none; }

/* 余計なアイコンたちを非表示 */
#breadcrumb .fa,
#breadcrumb .fa-fw,
#breadcrumb .sp { display: none !important; }

/* アイテムを横並び・余白 */
#breadcrumb .breadcrumb-home,
#breadcrumb .breadcrumb-item {
  display: inline-flex;
  align-items: center;
}

/* 仕切りは ›（画像やアイコンを使わない） */
#breadcrumb .breadcrumb-item::before {
  content: "›";
  display: inline-block;
  margin: 0 .5em;
  color: #a6a091;            /* うるさくないグレー寄りの臙脂茶 */
  transform: translateY(-1px);
  font-weight: 500;
}

/* リンクのスタイル */
#breadcrumb a {
  text-decoration: none;
  color: #3d3d3d;
}
#breadcrumb a:hover {
  text-decoration: underline;
}

/* 現在地（最後の要素）は少し強めに */
#breadcrumb .breadcrumb-item:last-child .breadcrumb-caption,
#breadcrumb .breadcrumb-item:last-child [itemprop="name"] {
  color: #2a2a2a;
  font-weight: 600;
}

/* 先頭（ホーム）の右にだけ軽い余白 */
#breadcrumb .breadcrumb-home { margin-right: .1em; }


/* ===== Footer===== */
footer a {
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.navi-footer-in a:hover {
  background: #fff;
}

/* ====== ヘッダーのハンバーガー配置・サイズ ====== */
@media (max-width: 833px){
  /* ボタンのクリック領域を少し大きめに */
  .menu-button, 
  #navi .menu-button, 
  .header .menu-button{
    width: 44px; height: 65px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}




/* ===== CTA: 左テキスト / 右写真 行カード ===== */
.kf-cta-features{ padding: clamp(24px,4vw,48px) 0; }
.kf-cta-features .kf-container{ display:grid; gap:24px; }

.kf-feature{
  display:grid;
  grid-template-columns: 1.05fr 1fr; /* 左テキスト / 右写真 */
  gap: clamp(16px,2.8vw,32px);
  align-items: center;
  text-decoration: none; color: inherit;
  border: 1px solid var(--kf-line, #e8e4dd);
  background:#fff; 
}
/* --- CTA 3枚をPCで横一列に & 回り込み防止 --- */
/* 3ボックス：レイアウト */
.kf-cta-features{ padding: clamp(24px,4vw,48px) 0; }
.kf-cta-features .kf-container{
  display: grid;
  grid-template-columns: 1fr;   /* SPは1列 */
  gap: 24px;
}

/* PCは3列に */
@media (min-width: 1024px){
  .kf-cta-features .kf-container{
    grid-template-columns: repeat(3, minmax(0,1fr));
    align-items: stretch;
  }
}

/* 各カードの中身：左テキスト / 右写真 */
.kf-feature{
  display: grid;
  grid-template-columns: 1.05fr 1fr; /* PC：左テキスト / 右写真 */
  gap: clamp(12px,2vw,16px);
  border: 1px solid var(--kf-line,#e8e4dd);
  background:#fff;
  text-decoration: none; 
  color: inherit;
  height: 100%;
}
/* テキスト側だけ余白 */
.kf-feature__text{
  padding: clamp(14px,2.2vw,20px);
}
/* 画像は余白ゼロで枠いっぱい（正方形） */
.kf-feature__img{
  aspect-ratio: 1 / 1;   /* PCもSPも正方形 */
  overflow: hidden;
  margin: 0;
}
.kf-feature__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kf-feature__title{
  font-size: 16px;
}
/* テキスト側だけ余白 */
.kf-feature__text{
    font-size: 16px;
  padding: clamp(3px,2.2vw,15px);
}

/* 3列レイアウト */
.kf-cta-features .kf-container{
  display: grid;
  grid-template-columns: 1fr; /* SPは1列 */
  gap: 24px;
}
@media (min-width: 1024px){
  .kf-cta-features .kf-container{
    grid-template-columns: repeat(3, minmax(0,1fr));
    align-items: stretch;
  }
}

/* 各カード全体 */
.kf-feature{
  display: grid;
  grid-template-columns: 1fr; /* デフォは縦積み */
  gap: clamp(1  2px,2vw,16px);
  border: 1px solid var(--kf-line,#e8e4dd);
  background:#fff;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* PCでもテキスト左 / 画像右に並べる */
@media (min-width: 768px){
  .kf-feature{ grid-template-columns: 1.05fr 1fr; align-items: center; }
}
.kf-category-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.kf-category-links a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--kf-line, #e8e4dd);
  text-decoration: none;
  color: var(--kf-ink, #111);
  background: #fff;
  transition: background 0.2s;
}

.kf-category-links a:hover {
  background: #f7f4ef;
}

/* ===== 小多福堂 LP共通スタイル ===== */
.kf-landing{
  max-width: var(--kf-max,1080px);
  margin: 0 auto;
  padding: clamp(24px,4vw,48px) .5rem;
  line-height: 1.9;
}
.kf-landing h1{
  font-size: clamp(26px,3vw,34px);
  margin-bottom: .6em;
  text-align: center;
  letter-spacing: .03em;
}
.kf-landing p{
  margin-bottom: .5em;
  color: #444;
}
@media screen and (min-width: 769px) { /* PC幅（769px以上）だけ適用 */
  .kf-landing .kf-lead {
    text-align: center;
  }
}

.kf-card__btn {
  text-align: center !important;
  margin-top: 1em;
}

.kf-card__btn a:focus-visible{
  outline: 3px solid rgba(179,75,31,.35);
  outline-offset: 3px;
}


.kf-card__desc {
  flex-grow: 1; /* 説明文の高さを自動調整 */
}


.kf-landing h2{
  font-size: clamp(16px,2.2vw,26px);
  margin-top: .5em;
  margin-bottom: .8em;
  letter-spacing: .02em;
  text-align: center;
}
.kf-landing ul{
  list-style: none;
  padding: 0;
  margin: 0 auto 2em;
  max-width: 1080px;
}
.kf-landing ul li{
  position: relative;
  padding-left: 1.4em;
  margin-bottom: .5em;
}
.kf-landing ul li::before{
  content: "・";
  position: absolute;
  left: 0;
  color: #7a5a56; /* 小多福堂の臙脂茶 */
}
.kf-landing .wp-block-button__link{
  background: #7a5a56;
  color: #fff;
  border-radius: 9999px;
  padding: .6em 2em;
  font-weight: 500;
  text-decoration: none;
  transition: opacity .2s;
}
.kf-landing .wp-block-button__link:hover{
  opacity: .8;
}
@media screen and (max-width: 480px){
.kf-landing p{
    text-align:left;
}
.kf-landing ul li {
    padding-left: 0em;
} 
}
/* --- 1) 1カラムテンプレートの本文を中央寄せ・同幅に統一 --- */
.page-template-page-onecolumn .entry-content{
  max-width: var(--kf-max,1080px);
  margin: 0 auto !important;
  padding: clamp(24px,4vw,48px) 1.25rem;
}

/* --- 2) kf-landing の中身も中央に揃える（保険） --- */
.page-template-page-onecolumn .kf-landing{
  max-width: var(--kf-max,1080px);
  margin: 0 auto;
  padding: clamp(24px,4vw,48px) 1.25rem;
}

/* --- 3) 見出し＆リードをガイドページ風に中央表示 --- */
.page-template-page-onecolumn .kf-landing h1{ text-align:center; }
.page-template-page-onecolumn .kf-landing p.lead,
.page-template-page-onecolumn .kf-landing .is-style-lead{
  text-align: center;
  max-width: 820px;
  margin: .4em auto 1.2em;
  font-size: clamp(18px,1.8vw,20px);
  color:#555;
}

/* --- 4) 画像の「幅広/全幅」で左右にズレるのを防止 --- */
.page-template-page-onecolumn .kf-landing .alignwide{
  max-width: min(1200px, 100%);
  margin-left: auto;
  margin-right: auto;
}
.page-template-page-onecolumn .kf-landing .alignfull{
  width: 100vw;
  margin-left: calc(50% - 50vw);  /* 画面中央にフル幅 */
  margin-right: 0;
}
/* ① 1カラム用に Cocoon の枠ごとセンター＆同幅に */
.page-template-page-onecolumn .content,
.page-template-page-onecolumn .main{
  max-width: var(--kf-max,1080px);
  margin-left: auto !important;
  margin-right: auto !important;
  float: none;              /* 念のため */
}

/* ② 1カラム時はサイドバー前提の左右余白をリセット */
.page-template-page-onecolumn .content{
  width: auto;              /* Cocoonの計算幅を解除 */
}

/* ③ 既に入れている .kf-landing を再度センターで保証 */
.page-template-page-onecolumn .kf-landing{
  max-width: var(--kf-max,1080px);
  margin-left: auto;
  margin-right: auto;
}

/* ④ “幅広/全幅” 画像のズレ補正（左右端が揃わない対策） */
.page-template-page-onecolumn .kf-landing .alignwide{
  max-width: min(1200px,100%);
  margin-left: auto;
  margin-right: auto;
}
.page-template-page-onecolumn .kf-landing .alignfull{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: 0;
}
/* カテゴリボタン（箇条書き装飾を打ち消し） */
.kf-category-links{
  list-style: none;
  margin: 0 auto 2.5rem;
  padding: 0;

  /* 1列グリッドで中央寄せ → 同じ幅にできる */
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;  /* 子要素を中央に */
  gap: 16px;
  max-width: 720px;       /* 文章幅と合わせる */
}
.kf-category-links li{
  margin: 0;
  padding: 0 !important;  /* .kf-landing ul li の左パディングを無効化 */
  position: static;       /* relative解除（不要なら可） */
}
.kf-category-links li::before{
  content: none !important;  /* 「・」を消す */
}

/* ボタン本体の見た目＆幅を統一 */
.kf-category-links a{
  display: block;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--kf-line, #e8e4dd);
  border-radius: 9999px;
  padding: .7em 1.6em;

  width: 100%;          /* 行の中で同じ幅に */
  max-width: 360px;     /* スマホで大きすぎない範囲に制限 */
  color: #7a5a56;
  background: #fff;
}

/* 画面が広いときは2列に */
@media (min-width: 768px){
  .kf-category-links{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kf-category-links a{
    max-width: 420px; /* ちょっと余裕を */
  }
}
.menu-content .menu-drawer {
    padding: 1em 30px;
    text-align: center;
}
.menu-drawer li
 {
    padding: 5px;
}
/* ===== 小多福堂 商品詳細共通スタイル ===== */
/* ===== Product page base ===== */
.kf-product{ background:#faf8f4; color:#222; }
.kf-container{ max-width:1080px; margin:0 auto; padding: 10px; }
.nowrap{ white-space:nowrap; }

/* Hero */
.kf-product__hero{ background:#fff; border-bottom:1px solid #e8e4dd; }
.kf-product__eyebrow{ font-size:.9rem; letter-spacing:.06em; color:#7a6e5f; margin-bottom:.5rem; }
.kf-product__title{ font-size: clamp(26px,3.2vw,36px); margin:.1em 0 .3em; }
.kf-product__lead{ color:#444; line-height:1.9; }
.kf-product__heroimg{ margin: 16px 0 8px; }
.kf-product__heroimg img{ width:100%; height:auto; border-radius:16px; object-fit:cover; }
.kf-product__cta{ margin:12px; text-align: center;}
.kf-product__note{ color:#777; font-size:.9rem; margin-top:6px; }

/* Buttons */
.kf-btn{ display:inline-block; padding:.75em 1.1em; border-radius:999px; text-decoration:none; border:1px solid #c9c2b8; }
.kf-btn--primary{ background:#231815; color:#fff; border-color:#231815; margin: 10px;}
.kf-btn--line{ background:#fff; color:#231815; }
.kf-btn--ghost{ background:transparent; color:#231815; }

/* Sections */
.kf-section{ padding: 1em 0; }
.kf-section--tint{ background:#fff; }

/* Grid */
.kf-grid{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width: 900px){
  .kf-grid{ grid-template-columns: 1.1fr .9fr; align-items:center; }
}
.kf-col{}
.kf-photo img{ width:100%; height:auto; border-radius:16px; object-fit:cover; }

/* Cards */
.kf-cards3{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width: 900px){ .kf-cards3{ grid-template-columns:repeat(4,1fr); } }
.kf-card{ background:#fff; border:1px solid #e8e4dd; padding:16px; }

/* Typo */
.kf-h2{ font-size: clamp(22px,2.4vw,30px); margin:0 0 .6em; letter-spacing:.02em; }
.kf-h3{ font-size: clamp(18px,1.9vw,22px); margin:.2em 0 .3em; }
.kf-h4{ font-weight:600; margin:.5em 0 .25em; }

/* Lists */
.kf-bullets{ margin: .6em 0 0; padding-left: 1.1em; }
.kf-bullets li{ margin:.2em 0; }
.kf-list{ margin:0; padding-left:1.1em; }
.kf-ol{ margin:.4em 0 .2em 1.4em; }
.kf-memo{ color:#666; font-size:.95rem; }

/* usecase */
/*.kf-usecase{ display:grid; grid-template-columns:1fr; gap:16px; }*/
@media (min-width: 900px){ .kf-usecase{ grid-template-columns:repeat(3,1fr); } }
.kf-usecase{ padding:16px; }

/* Spec */
.kf-specgrid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width: 900px){ .kf-specgrid{ grid-template-columns:repeat(3,1fr); } }

.kf-table{ width:100%; background:#fff; border:1px solid #e8e4dd; border-radius:12px; border-collapse: separate; border-spacing:0; overflow:hidden; }
.kf-table th, .kf-table td{ padding:12px 14px; border-top:1px solid #eee8de; vertical-align:top; }
.kf-table tr:first-child th, .kf-table tr:first-child td{ border-top:none; }
.kf-table th{ width:28%; background:#fbfaf7; }

/* FAQ / details */
.kf-faq{ margin:10px 0; border:1px solid #e8e4dd; border-radius:12px; padding:10px 14px; background:#fff; }
.kf-faq > summary{ cursor:pointer; font-weight:600; }
.kf-note{ margin:12px 0; }

/* Links */
.kf-linkline{ margin: 20px 0 0; text-align: center; padding: 1.2em 3em; text-decoration: underline;}
.kf-related{ display:flex; flex-wrap:wrap; gap:10px 16px; list-style:none; padding:0; margin:6px 0 0; }
.kf-related a{ text-decoration:none; border-bottom:1px dotted currentColor; }

/* Small responsive helper */
.sp{ display:none; }
@media (max-width: 600px){ .sp{ display:inline; } }
/* 使い方セクションの見出しは横書きに固定 */
#howto .kf-h2 {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed;
}
@media (max-width: 767px){
  .kf-grid {
    grid-template-columns: 1fr !important;
  }
}
/* 商品ページ配下の目次を消す（Cocoon/TOCプラグイン共通ワードを網羅） */
#kf-product .toc,
#kf-product .toc_container,
#kf-product .toc-container,
#kf-product .ez-toc-container,
#kf-product .lwptoc,
#kf-product .lwptoc_i {
  display: none !important;
}

/* =========================================================
   メインナビ：アイコン上／文字下の縦レイアウト版
   ========================================================= */

/* テキストとアイコンを縦並びに */
#navi .menu-top > li > a .caption-wrap .item-label {
  display: flex;
  flex-direction: column;   /* ← 縦方向へ */
  align-items: center;      /* ← 中央揃え */
  justify-content: center;
  gap: 0.4em;               /* ← アイコンと文字の間隔 */
  line-height: 1.2;
  text-align: center;
}

/* アイコン用の共通ボックス */
#navi .menu-top > li[class*="menu-ico-"] > a .item-label::before,
#navi .menu-top > li.menu-cart > a .item-label::before {
  content: "";
  display: block;
  width: 26px;              /* ← アイコンサイズ（調整OK） */
  height: 26px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* —— 個別のアイコン割り当て（パスは環境に合わせて差し替え） —— */
#navi .menu-top > li.menu-ico-products > a .item-label::before {
  background-image: url("assets/img/icons/nav-products.svg");
}
#navi .menu-top > li.menu-ico-guide > a .item-label::before {
  background-image: url("assets/img/icons/nav-guide.svg");
}
#navi .menu-top > li.menu-ico-blog > a .item-label::before {
  background-image: url("assets/img/icons/nav-blog.svg");
}
#navi .menu-top > li.menu-ico-store > a .item-label::before,
#navi .menu-top > li.menu-cart > a .item-label::before {
  background-image: url("assets/img/icons/nav-store.svg");
}
#navi .menu-top > li.menu-ico-faq > a .item-label::before {
  background-image: url("assets/img/icons/nav-faq.svg");
}
#navi .menu-top > li.menu-ico-contact > a .item-label::before {
  background-image: url("assets/img/icons/nav-contact.svg");
}

/* ホバーで少し動きを付ける（縦レイアウト対応版） */
#navi .menu-top > li[class*="menu-ico-"] > a:hover .item-label::before,
#navi .menu-top > li.menu-cart > a:hover .item-label::before {
  transform: translateY(-2px);
  transition: transform .2s ease;
}

/* スマホなど狭い画面では横並びに戻す場合（任意） */
@media (max-width: 833px) {
  #navi .menu-top > li > a .caption-wrap .item-label {
    flex-direction: row;
    gap: 0.45em;
  }
}

/* === モバイルドロワー：アイコン付きナビ === */
.menu-drawer{
  list-style: none;
  margin: 0;
  padding: 0 1.2rem 1.6rem;
}
.menu-drawer > li{
  margin: 0 0 1.1rem;
}
.menu-drawer > li > a{
  display: flex;
  align-items: center;
  gap: .6em;                 /* アイコンとの間隔 */
  text-decoration: none;
  line-height: 1.5;
}
.menu-drawer > li > a:hover{ text-decoration: underline; }

/* アイコン共通（サイズは好みで） */
.menu-drawer > li > a::before{
  content: "";
  display: inline-block;
  width: 1.15em;             /* 1.0–1.2emあたりで微調整 */
  height: 1.15em;
  flex: 0 0 auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* —— 個別アイコン（パスは環境に合わせて） —— */
.menu-drawer > li.menu-ico-products > a::before{
  background-image: url("assets/img/icons/nav-products.svg");
}
.menu-drawer > li.menu-ico-blog > a::before{
  background-image: url("assets/img/icons/nav-blog.svg");
}
.menu-drawer > li.menu-ico-store > a::before{
  background-image: url("assets/img/icons/nav-store.svg");
}
.menu-drawer > li.menu-ico-faq > a::before{
  background-image: url("assets/img/icons/nav-faq.svg");
}
.menu-drawer > li.menu-ico-contact > a::before{
  background-image: url("assets/img/icons/nav-contact.svg");
}

/* 文字の行高が高めのときに縦位置がズレる場合の保険（任意） */
.menu-drawer > li > a{ min-height: 44px; }  /* タップ領域も確保 */

/* ===============================
   PCだけ：ロゴ左／メニュー右・適度な幅で詰める
   =============================== */
@media (min-width: 834px){

  /* 親を横並び。ロゴ← →メニュー に分離 */
  .header-container-in.hlt-top-menu{
    display:flex;
    align-items:center;
    gap: 48px;                 /* ロゴとメニューの間隔 */
  }

  /* ナビ自体は右へ押し出し */
  .header-container-in.hlt-top-menu .navi{
    width:auto;                /* ← 100%を解除 */
    margin-left:auto;          /* 右側へ寄せる */
  }

  /* ナビの内側幅を絞って “間延び” を抑える */
  #navi .navi-in{
    max-width: 1080px;         /* メニューの最大幅（好みで900–1200px） */
    padding: 0;                /* 余白をゼロに */
    margin-left:auto;          /* 右寄せ */
  }

  /* ULを右寄せ＆余白をコントロール */
  #navi .navi-in > ul{
    display:flex;
    flex-wrap: nowrap;         /* 改行させない（必要なら wrap に戻す） */
    justify-content:flex-end;  /* 右寄せ */
    align-items:flex-end;
    column-gap: 0px; 
    row-gap: 0;
  }

  /* 見切れ対策：高さ制約と overflow を解除 */
  #navi, #navi .navi-in, #navi .navi-in > ul,
  #navi .menu-top > li > a, 
  #navi .menu-top > li > a .caption-wrap,
  #navi .menu-top > li > a .caption-wrap .item-label{
    overflow: visible !important;
  }

  /* テーマの "ヘッダー行高さ=リンク行高さ" を打ち消す */
  #navi .menu-top > li > a{
    line-height: 1.2 !important;
    padding: 14px 0 12px;      /* 上に余白を作ってアイコンが切れないように */
    display: block;
    white-space: nowrap;       /* 文字での折返し防止（長い場合は調整） */
  }

  /* アイコン上／文字下（あなたの現行指定） */
  #navi .menu-top > li > a .caption-wrap .item-label{
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    gap: .4em;
    text-align:center;
  }

  #navi .menu-top > li[class*="menu-ico-"] > a .item-label::before,
  #navi .menu-top > li.menu-cart > a .item-label::before{
    content:"";
    display:block;
    width:26px;                /* アイコンサイズ */
    height:26px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
  }
}

/* ===== Guide (mobile-first) ===== */
.kf-guide .kf-container{ max-width:960px; margin:0 auto; padding:24px 16px; }

/* 横スクロールのチップ */
.kf-chiplist{
  display:flex; gap:.5rem; overflow-x:auto; padding:.5rem .25rem 0;
  scrollbar-width:none; -ms-overflow-style:none; margin:0 0 1rem;
}
.kf-chiplist::-webkit-scrollbar{ display:none; }
.kf-chip{
  white-space:nowrap; display:inline-flex; align-items:center; justify-content:center;
  padding:.5em .9em; border:1px solid var(--kf-line,#e8e4dd);
  border-radius:999px; background:#fff; text-decoration:none; color:#553333;
  font-size:.92rem; line-height:1;
}

/* カード（スマホ1列→PC2列） */
.kf-cards--guide{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width: 860px){
  .kf-cards--guide{ grid-template-columns:1fr 1fr; gap:20px; }
}
.kf-card--guide{
  background:#fff; border:1px solid var(--kf-line,#eee4dc); 
  padding:16px 16px 14px; box-shadow:0 2px 6px rgba(0,0,0,.03);
}
.kf-card__head{ margin:0 0 .4rem; }
.kf-card__title{ font-size:1.05rem; margin:0 0 .2rem; }
.kf-card__tag{ font-size:.8rem; color:#7a5b5b; margin:0; }
.kf-card__points{ margin:.6rem 0 .8rem; padding-left:1.1em; color:#444; }
.kf-card__points li{ margin:.2rem 0; }
.kf-card__label{ font-size:.78rem; color:#7a5b5b; margin:0 0 .2rem; }
.kf-card__prod{ font-weight:600; margin:0; }
.kf-card__rec {
  background: #faf4f2 !important;
  border: 1px dashed #e8d8d3 !important;
  border-radius: 10px !important;
  padding: .6rem .7rem !important;
  margin-top: 1rem !important;
}


.kf-card__rec{
  background:#faf4f2 !important;
  border:1px dashed #e8d8d3 !important;
  border-radius:10px !important;
  padding:.6rem .7rem !important;
  margin-top:1rem !important;
}
.kf-card__prodlist{ list-style:none; padding:0; margin:0; }
.kf-card__prodlist li{ margin:.25em 0; }
.kf-card__prodlist a{ text-decoration: underline dotted; color: inherit; }
.kf-card__prodlist a:hover{ color: var(--kf-accent, #660000); }

/* 念のため：残っている旧ボタン類を無効化（全体に影響しない場合のみ） */

.kf-chiplist { display:none !important; }


/* CTA（中央固定。position/leftは使わない） */
.kf-card__cta{
  display:flex; flex-wrap:wrap; gap:.5rem .8rem; align-items:center; justify-content:center;
  margin:.8rem 0 0;
}
.kf-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:1.2em 3em; line-height:1; font-size:.92rem; text-decoration:none;
  border:1px solid var(--kf-line,#e8e4dd); border-radius:999px;
  background:#660000; color:#fff;
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
  margin:0 auto;
}
.kf-btn:hover{ background:#7a0a0a;color: #fff; box-shadow:0 4px 14px rgba(102,0,0,.15); transform:translateY(-1px); }
.kf-link{ font-size:.9rem; text-decoration:underline; color:#660000; }

.kf-note{
  margin:16px 0 0; padding:.9rem 1rem; background:#fff; color:#624848; font-size:.9rem; line-height:1.8;
}

/* 既存のボタンに left:50% / transform があれば無効化（保険） */
.kf-card__btn a{
  display:inline-flex; align-items:center; justify-content:center;
  margin:0 auto; left:auto !important; transform:none !important;
}
/* ===== front専用：犬用石けんの選び方（picks-guide） ===== */

/* ベース（モバイル優先） */
#picks-guide .kf-picklist{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  list-style:none;
  margin:0;
  padding:0;
}
#picks-guide .kf-pick{
  border:1px solid var(--kf-line,#e8e4dd);
  background:#fff;
  height:100%;
}
#picks-guide .kf-pick > a{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:12px;
  color:inherit;
  text-decoration:none;
  height:100%;
}
#picks-guide .kf-pick__img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  border-radius:8px;
}
#picks-guide .kf-pick__title{
  margin:0;
  font-size:clamp(14px,3.8vw,16px);
  letter-spacing:.02em;
  text-align:left;
}
#picks-guide .kf-pick__desc{
  margin:0;
  font-size:clamp(12px,3.4vw,14px);
  line-height:1.7;
  color:#444;
  text-align:left;
}

/* フォーカス可視化 */
#picks-guide .kf-pick a:focus-visible{
  outline:3px solid rgba(150,0,0,.35);
  outline-offset:6px;
  border-radius:12px;
}

/* タブレット（768–1023px） */
@media (min-width:768px) and (max-width:1023.98px){
  #picks-guide .kf-picklist{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
  #picks-guide .kf-pick > a{ padding:14px; }
}

/* PC（>=1024px）：横レイアウト */
@media (min-width:1024px){
  #picks-guide .kf-picklist{
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:28px;
  }
  #picks-guide .kf-pick > a{
    flex-direction:row;
    align-items:center;
    gap:16px;
    padding:16px;
  }
  #picks-guide .kf-pick__img{
    width:160px;
    flex:0 0 160px;
    aspect-ratio:1/1;
  }
  #picks-guide .kf-pick__desc{ display:none; }
}

/* ワイド（>=1200px） */
@media (min-width:1200px){
  #picks-guide .kf-picklist{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  #picks-guide .kf-pick__img{ width:160px; }
}
/* ===== front専用：犬用石けんの選び方（画像左・テキスト右） ===== */
#picks-guide .kf-picks__grid{
  display: grid;
  grid-template-columns: 1fr;   /* モバイルは縦積み */
  gap: 16px;
  align-items: center;
}

#picks-guide .kf-picks__img{
  margin: 0;                  /* figure の余白を消す */
}
#picks-guide .kf-picks__img img{
  display: block;
  width: 100%;
  height: auto;
}

#picks-guide .kf-picks__text{
  text-align: left;           /* 明示的に左寄せ */
}
#picks-guide .kf-picks__desc{
  color: #554;
  line-height: 1.9;
  margin: 0 0 .8rem;
}

#picks-guide .kf-link-cta{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  text-decoration: underline dotted;
  color: #660000;
  font-weight: 600;
}
#picks-guide .kf-link-cta:hover{ color:#7a0a0a; }

/* 860px以上で横並び（画像左／テキスト右） */
@media (min-width: 860px){
  #picks-guide .kf-picks__grid{
    grid-template-columns: 48% 1fr;   /* 左：画像 / 右：テキスト */
    gap: 28px;
  }
}
.kf-help{ margin-top: 14px; }
.kf-help__lead{ margin: 0 0 .4rem; color:#554; text-align:center; }
.kf-contactlist{
  display:flex; flex-wrap:wrap; gap:8px 12px;
  justify-content:center; align-items:center;
  list-style:none; margin:0; padding:0;
}
.kf-contactlist a{
  text-decoration: underline dotted;
  color:#660000; font-weight:600;
}
.kf-contactlist a:hover{ color:#7a0a0a; }

/* チップ風にしたい場合（任意） */
/*
.kf-contactlist a{
  text-decoration:none; border:1px solid #e8d8d3; border-radius:999px;
  padding:.35em .9em; background:#faf4f2;
}
.kf-contactlist a:hover{ background:#f6ebe7; }
*/
.wp-block-button__link {
    color: #fff;
    background-color: #660000!important;
    border-radius: 999px!important;
}
.wp-block-button__link:hover {
    color: #660000;
    background-color: #fffafa!important;
    border: 1px solid var(--kf-ink, #600);
}

/* ========== フッターSNS ========== */
.kf-footer-sns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;        /* アイコンの間隔 */
  margin-top: 1.2rem; /* SNSタイトルとの余白 */
}

.kf-footer-sns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  transition: opacity 0.3s ease;
}

.kf-footer-sns a:hover {
  opacity: 0.7;       /* ホバーで少し淡く */
}

.kf-footer-sns img {
  width: 100%;
  height: auto;
  display: block;
}

/* ========== Cocoon微調整 ========== */
.wp-block-buttons>.wp-block-button {
    margin: 0 auto;
}
.logo-header img {
    margin-top: 0.92em;
}
.article h3{
    padding: 12px 10px;
    border-bottom: 3px dashed #660000;
    border-left:none;
    border-top: none;
    border-right: none;
    background: #fff;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}