@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=RocknRoll+One&family=Zen+Maru+Gothic:wght@500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap");
/*
  グローバルメニュー（SWELLのヘッダー）のデザイン。
  zoroya-content/_shared/header.css として設置され、プラグインが全ページで読み込む。
  ここは .zoroya-scope の外なので、SWELLのクラスを直接狙う。

  方針：FVのかわいらしさをヘッダーまで延ばす。
  ・書体をサイト本体（Zen Maru Gothic）に揃える
  ・ホバーで、うすい緑の丸い背景がふわっと付く
  ・現在地のメニューには小さな双葉が灯る
  双葉の画像は、このCSSと同じ _shared/ に置いてあるので相対パスで参照できる
  （固定ページでも投稿ページでも同じ場所から解決される）。
*/

/* ---------------- PC のグローバルメニュー ---------------- */
.l-header .c-gnav > li > a,
.l-fixHeader .c-gnav > li > a{
  padding:0 6px;
  color:#23201C;
  font-family:"Zen Maru Gothic","Zen Kaku Gothic New",sans-serif;
  font-weight:700;
}

/* SWELL既定の下線（a::after の2px線）は、丸い背景に置き換えるので出さない */
.l-header .c-gnav > li > a::after,
.l-fixHeader .c-gnav > li > a::after{display:none !important}

.l-header .c-gnav > li > a .ttl,
.l-fixHeader .c-gnav > li > a .ttl{
  display:inline-block;
  padding:9px 14px;
  border-radius:999px;
  font-size:14.5px;
  letter-spacing:.04em;
  line-height:1;
  transition:background-color .25s ease,color .25s ease,transform .25s ease;
}

.l-header .c-gnav > li > a:hover .ttl,
.l-fixHeader .c-gnav > li > a:hover .ttl,
.l-header .c-gnav > li > a:focus-visible .ttl,
.l-fixHeader .c-gnav > li > a:focus-visible .ttl{
  background:rgba(125,200,148,.26);
  color:#2E7D57;
  transform:translateY(-1px);
}

/* 現在地。
   ページ内アンカー（#town など）のカスタムリンクは、TOPを見ているあいだ
   WordPress が全部 current-menu-item にしてしまうので、対象から外す。 */
.l-header .c-gnav > li.current-menu-item:not(.menu-item-object-custom) > a .ttl,
.l-fixHeader .c-gnav > li.current-menu-item:not(.menu-item-object-custom) > a .ttl{
  background:rgba(125,200,148,.34);
  color:#256A49;
}

/* 画面が狭いときは、文字と余白を少し詰めて1行に収める */
@media(max-width:1120px){
  .l-header .c-gnav > li > a,
  .l-fixHeader .c-gnav > li > a{padding:0 2px}
  .l-header .c-gnav > li > a .ttl,
  .l-fixHeader .c-gnav > li > a .ttl{padding:7px 8px;font-size:13px;letter-spacing:.01em}
  #header .swell-block-button__link,
  #fix_header .swell-block-button__link{padding:0 18px;font-size:13.5px}
}

/* ---------------- ヘッダーの横幅 ---------------- */
/* TOPだけ中身が画面いっぱいに広がり、他の固定ページ・投稿では 1296px で止まっていた。
   ページを移動するたびにロゴとメニューの位置が動くので、全ページ TOP に揃える。 */
#header .l-header__inner{max-width:100%}

/* ---------------- 追尾ヘッダーの横幅 ---------------- */
/* SWELLの追尾ヘッダーは中身が max-width:1264px で内側に寄るのに対し、
   通常のヘッダーは画面いっぱいまで広がる。そのままだとスクロールした瞬間に
   ロゴとメニューが内側へ跳ぶので、通常ヘッダーと同じ幅に揃える。 */
#fix_header .l-fixHeader__inner{max-width:100%}

/* ---------------- ヘッダーのお問い合わせボタン ---------------- */
/* 折り返して2行になっていたので、1行に固定して丸ボタンに揃える */
#header .swell-block-button__link,
#fix_header .swell-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 24px;
  border-radius:999px;
  background:#2E7D57;color:#fff;
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-weight:700;font-size:14.5px;letter-spacing:.04em;
  white-space:nowrap;
  box-shadow:0 10px 20px -12px rgba(20,60,40,.6);
  transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
#header .swell-block-button__link:hover,
#fix_header .swell-block-button__link:hover{
  background:#256A49;
  transform:translateY(-2px);
  box-shadow:0 16px 26px -14px rgba(20,60,40,.7);
}

/* ---------------- スマホのメニュー（ハンバーガーの中身） ---------------- */
.p-spMenu .c-listMenu a{
  font-family:"Zen Maru Gothic","Zen Kaku Gothic New",sans-serif;
  font-weight:700;
  color:#23201C;
}
.p-spMenu .c-listMenu a:hover{color:#2E7D57}
/* SWELL既定の矢印（アイコンフォント icomoon の「>」）は出さない */
.p-spMenu .c-listMenu a::before{display:none !important}
/* 現在地は、うすい緑の帯＋行頭の双葉で示す。
   双葉は矢印と同じ ::before を使うので、上の非表示を打ち消して出す。 */
.p-spMenu .current-menu-item:not(.menu-item-object-custom) > a{
  color:#256A49;
  background:rgba(125,200,148,.16);
}
.p-spMenu .current-menu-item:not(.menu-item-object-custom) > a::before{
  display:inline-block !important;
  content:"";
  width:15px;height:11px;
  margin-right:8px;
  vertical-align:-1px;
  background:url(deco-sprout.png) no-repeat center/contain;
}