/* hiro-base.css — サイト全体の土台（Cocoon のヘッダー・フッター・ページ幅を、サンプルサイトの見た目に）
   Cocoon の css のあとに読み込まれます。Cocoon の設定値（色・フォントなど）が出力する css より強く当たるよう、body.hiro から書いています。 */

/* ---------- Cocoon の変数を、サイトの色に置き換える（Cocoon の各ブロックがまとめて同じ配色になる） ---------- */
body.hiro{
  --cocoon-default-font:var(--font-body);
  --cocoon-default-text-size:16px;
  --cocoon-text-color:var(--ink);
  --cocoon-pallid-text-color:var(--ink-soft);
  --cocoon-x-pallid-text-color:var(--moss);
  --cocoon-basic-border-color:var(--sage);
  --cocoon-three-d-border-colors:var(--line) var(--sage) var(--moss) var(--line);
  --cocoon-middle-thickness-color:var(--lamp);
  --cocoon-thin-color:var(--line);
  --cocoon-x-thin-color:var(--sage);
  --cocoon-xx-thin-color:var(--mist);
  --cocoon-xxx-thin-color:var(--paper);
  --cocoon-current-background-color:var(--lamp-soft);
  --cocoon-select-background-color:var(--lamp-soft);
  --cocoon-tab-label-color:var(--mist);
  --cocoon-tab-label-active-color:var(--forest);
  --cocoon-basic-border-radius:var(--r);
  --cocoon-middle-border-radius:var(--r);
  --cocoon-badge-border-radius:10px;
  --cocoon-box-border-color:var(--forest);
  --cocoon-black-color:var(--forest);
  --cocoon-white-color:#fff;
  --cocoon-watery-blue-color:var(--mist);
  --cocoon-watery-yellow-color:var(--lamp-soft);
  --cocoon-watery-red-color:#FBE6D6;
  --cocoon-watery-green-color:var(--green-soft);
  --cocoon-red-color:var(--roof);
  --cocoon-orange-color:var(--lamp);
  --cocoon-amber-color:var(--yamabuki);
  --cocoon-green-color:var(--green);
  --cocoon-light-green-color:var(--green);
  --cocoon-brown-color:var(--forest);
}

body.hiro{
  font-family:var(--font-body);
  font-size:16px;
  color:var(--ink);
  background:var(--paper);
  line-height:1.85;
}
:where(body.hiro) a{color:var(--forest);text-underline-offset:.2em}
:where(body.hiro) a:hover{color:var(--lamp-deep)}
body.hiro :focus-visible{outline:3px solid var(--lamp);outline-offset:3px;border-radius:4px}
.hiro .skip-link{background:var(--lamp);color:var(--night);border-radius:8px}

/* 背景は全体が紙色（Cocoon の白い枠をなくす） */
.hiro #container,.hiro .content,.hiro .main,.hiro .sidebar{background:transparent}
.hiro .content{margin-top:0}
.hiro .main{border-color:transparent}

/* ---------- ページ幅：フルワイド（固定ページ・ものがたり・レシピ・一覧） ---------- */
.hiro.column-full-wide .main,.hiro.hiro-wide .main{width:100%;max-width:none;padding:0;border:0}
.hiro.hiro-wide .content-in{display:block;width:100%}
.hiro.hiro-wide .sidebar{display:none}
.hiro.column-full-wide .article,.hiro.column-full-wide .entry-content{margin:0;padding:0}
.hiro.column-full-wide .article-header{margin:0}
/* ヒーロー・ページ見出しを使っているページは、Cocoon のページタイトルなどを隠す（二重表示を防ぐ） */
.hiro-has-hero .article-header .entry-title,
.hiro-has-hero .article-header .date-tags,
.hiro-has-hero .article-header .eye-catch-wrap,
.hiro-has-hero .article-header .sns-share,
.hiro-has-hero .article-header .read-time{display:none}
.hiro-has-hero .article-header{margin:0}

/* ---------- ヘッダー（Cocoon設定：ヘッダーレイアウト＝「トップメニュー」） ---------- */
.hiro .header-container{position:sticky;top:0;z-index:50;background:rgba(254,246,234,.94)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.admin-bar.hiro .header-container{top:32px}
@media (max-width:782px){.admin-bar.hiro .header-container{top:46px}}
.hiro .header,.hiro .navi{background:transparent!important;background-image:none}
.hiro .header-container-in.hlt-top-menu{min-height:68px;width:min(100% - var(--gutter)*2,var(--wrap));margin-inline:auto;gap:16px}
.hiro .header-container-in.hlt-top-menu .wrap{width:auto}
.hiro .header-container-in .header-in{min-height:0}
.hiro .logo-text .site-name-text-link{margin:0;display:inline-flex;align-items:center;gap:.6em;text-decoration:none}
.hiro .site-name-text{font-family:var(--font-head);font-weight:700;font-size:1.2rem;letter-spacing:.04em;color:var(--night)}
.hiro .logo-text .site-name-text-link::before{content:"";width:14px;height:20px;flex:none;background:var(--lamp);border-radius:8px 8px 3px 3px;box-shadow:0 0 14px 3px rgba(240,163,94,.6)}
.hiro .tagline{display:none}

.hiro .navi-in>ul{justify-content:flex-end;align-items:center;gap:clamp(8px,1.6vw,22px)}
.hiro .navi-in>ul>li{width:auto;height:auto}
.hiro .navi-in>ul>li>a{display:block;width:auto;height:auto;padding:6px 2px;font-size:.95rem;font-weight:500;color:var(--ink);background:transparent;border-bottom:2px solid transparent;transition:border-color .2s,color .2s}
.hiro .navi-in>ul>li>a:hover,.hiro .navi-in>ul>li.current-menu-item>a,.hiro .navi-in>ul>li.current-menu-ancestor>a{background:transparent;border-bottom-color:var(--lamp);color:var(--night)}
.hiro .navi-in>ul>li>a .item-label{display:inline}
.hiro .navi-in .caption-wrap{display:block}
/* メニュー項目の「CSSクラス」に nav-cta と入れると、お問い合わせボタンの見た目になります */
.hiro .navi-in>ul>li.nav-cta>a{background:var(--night);color:#fff;padding:8px 18px;border-radius:999px;border:0}
.hiro .navi-in>ul>li.nav-cta>a,.hiro .navi-in>ul>li.nav-cta>a *{color:#fff!important}
.hiro .navi-in>ul>li.nav-cta>a:hover{background:var(--forest)}
.hiro .navi-in>ul>li.nav-cta>a:hover,.hiro .navi-in>ul>li.nav-cta>a:hover *{color:var(--lamp-soft)!important}
.hiro .navi-in .sub-menu{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:6px 0}
.hiro .navi-in .sub-menu a{padding:.6em 1em;color:var(--ink)}
.hiro .navi-in .sub-menu a:hover{background:var(--lamp-soft)}
/* スマホのメニュー */
.hiro .menu-mobile a,.hiro .mobile-menu-buttons a{color:var(--night)}
.hiro .mobile-menu-buttons,.hiro .mobile-header-menu-buttons{background:var(--paper)!important;border-top:1px solid var(--line)}
@media (max-width:860px){
  .hiro .header-container-in.hlt-top-menu{flex-direction:column;align-items:flex-start;padding-block:10px}
}

/* パンくず（Cocoon設定のものを使う場合の色合わせ） */
.hiro .breadcrumb{font-size:.85rem;color:var(--ink-soft);background:transparent}
.hiro .breadcrumb a{color:var(--ink-soft);text-decoration:none}
.hiro .breadcrumb a:hover{text-decoration:underline}
/* 自作パンくず */
.hiro-breadcrumb{font-size:.85rem;color:var(--ink-soft);padding-block:14px}
.hiro-breadcrumb ol{display:flex;flex-wrap:wrap;gap:.2em .6em;list-style:none;padding:0;margin:0}
.hiro-breadcrumb li+li::before{content:"/";margin-right:.6em;color:var(--moss)}
.hiro-breadcrumb a{text-decoration:none;color:var(--ink-soft)}
.hiro-breadcrumb a:hover{text-decoration:underline}

/* ---------- フッター（Cocoon：フッターウィジェット 左・中央・右 を使う） ---------- */
.hiro .footer{background:var(--night);color:var(--sage);margin-top:0;padding-block:56px 32px;font-size:.92rem}
.hiro .footer a{color:var(--sage);text-decoration:none}
.hiro .footer a:hover{color:var(--lamp-soft);text-decoration:underline}
.hiro .footer-in{width:min(100% - var(--gutter)*2,var(--wrap))}
.hiro .footer-widgets{display:grid;gap:32px;grid-template-columns:1.4fr 1fr 1fr;margin:0}
.hiro .footer-widgets>div{width:auto;float:none;padding:0}
.hiro .footer .widget{margin:0;padding:0;background:transparent;border:0;color:var(--sage)}
.hiro .footer .widget-title,.hiro .footer .footer-title{background:none;border:0;padding:0;margin:0 0 .8em;color:#fff;font-family:var(--font-head);font-size:1rem;font-weight:700}
.hiro .footer .widget ul{list-style:none;padding:0;margin:0;display:grid;gap:.4em}
.hiro .footer .widget li{border:0;padding:0}
.hiro .footer-logo{font-family:var(--font-head);font-size:1.3rem;color:#fff;font-weight:700;margin:0}
.hiro .footer-line{margin:.8em 0 0;color:var(--lamp-soft);font-family:var(--font-head)}
.hiro .footer-bottom{background:transparent;color:var(--sage);padding:0}
.hiro .footer .site-name-text,.hiro .footer .logo-footer a{color:#fff}
.hiro .footer-bottom .copyright,.hiro .footer-bottom .credit{color:var(--sage);font-size:.82rem}
.hiro .navi-footer{background:transparent;border:0}
.hiro .navi-footer a{color:var(--sage)}
.hiro-footer-note{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font-size:.82rem;line-height:1.8}
.hiro-footer-note p{margin:0}
.hiro-footer-note p+p{margin-top:.6em}
@media (max-width:760px){.hiro .footer-widgets{grid-template-columns:1fr}}
.hiro .go-to-top-button{background:var(--lamp);color:var(--night)}

/* ---------- 通常の投稿（ヒロのノート）まわり ---------- */
.hiro .article-header .entry-title,.hiro .archive-title{font-family:var(--font-head);color:var(--night);letter-spacing:.02em}
.hiro .entry-card-wrap,.hiro .related-entry-card-wrap{border-radius:var(--r);border-color:var(--line)}
.hiro .entry-card-title,.hiro .related-entry-card-title{font-family:var(--font-head);color:var(--night)}
.hiro .widget{background:var(--white);border:1px solid var(--line);border-radius:var(--r)}
.hiro .sidebar h2,.hiro .sidebar h3{font-family:var(--font-head);color:var(--night);background:none;border:0;border-bottom:2px solid var(--lamp);border-radius:0;padding:0 0 .5em;margin-bottom:.8em;font-size:1rem}
.hiro .pagination a,.hiro .pagination span{border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink)}
.hiro .pagination .current{background:var(--forest);border-color:var(--forest);color:#fff}

/* お問い合わせフォーム（Contact Form 7 などのプラグインを入れたとき） */
.hiro .wpcf7 form,.hiro .hiro-form{display:grid;gap:22px}
.hiro .wpcf7 label{display:block;font-weight:700;margin-bottom:.4em;font-size:.95rem}
.hiro .wpcf7 input[type=text],.hiro .wpcf7 input[type=email],.hiro .wpcf7 input[type=tel],.hiro .wpcf7 select,.hiro .wpcf7 textarea{width:100%;min-height:48px;padding:.6em .9em;background:#fff;border:1.5px solid var(--sage);border-radius:10px}
.hiro .wpcf7 textarea{min-height:180px}
.hiro .wpcf7 input:focus,.hiro .wpcf7 select:focus,.hiro .wpcf7 textarea:focus{outline:3px solid var(--lamp);border-color:var(--lamp-deep)}
.hiro .wpcf7 input[type=submit],.hiro .wpcf7-submit{min-height:48px;padding:.7em 2em;border:0;border-radius:999px;background:var(--lamp);color:var(--night);font-weight:700;font-family:var(--font-head);cursor:pointer}
.hiro .wpcf7 input[type=submit]:hover{background:var(--lamp-deep)}
.hiro .wpcf7-list-item{margin:0 1.4em 0 0}
.hiro .wpcf7-list-item label{display:inline-flex;gap:.5em;align-items:center;font-weight:400;margin:0}