@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のヘッダー・フッターの見た目をこのサイト用に整えています。
 * 色は assets/css/blocks.css の先頭にある --chb-〇〇 の設定を使っています。
 * （配色を変えたいときは、そちらの色の設定を変更してください）
 *
 * 【Cocoon設定のおすすめ】
 *   Cocoon設定 > ヘッダー > ヘッダーレイアウト：「トップメニュー（右寄せ）」
 *   Cocoon設定 > フッター > フッターの表示タイプ：「ロゴ＆メニュー＆クレジット」
 *   外観 > メニュー：「ヘッダー」にメニューを割り当て、
 *                  スマホ用に「ヘッダーモバイル」にも割り当てる
 */

/************************************
** ヘッダー
**   ロゴは左、メニューは右に、枠線付きの四角いボタンで並べる
************************************/
.header-container {
  background-color: #fff;
}

.header-container-in.hlt-top-menu {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 16px; /* 右端のボタンが画面の端にくっつかないように */
}

/* ロゴ */
.header-container-in.hlt-top-menu .logo-header,
.header-container-in.hlt-top-menu .logo-header img {
  max-height: 56px;
}
.header-container-in.hlt-top-menu .logo-header img {
  margin-left: 16px; /* 画像ロゴ。テキストロゴはCocoon側で左右16pxの余白あり */
}
.header-container-in.hlt-top-menu .site-name-text {
  color: #000;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* メニュー（PC：1024px以上） */
@media screen and (min-width: 1024px) {
  .header-container-in.hlt-top-menu .navi {
    background-color: transparent;
  }

  .header-container-in.hlt-top-menu .navi-in > ul {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 0 clamp(12px, 1.6vw, 28px);
  }

  .header-container-in.hlt-top-menu .navi-in > ul > li {
    width: clamp(108px, 11.5vw, 150px);
    height: 42px;
  }

  .header-container-in.hlt-top-menu .navi-in > ul > li > a {
    box-sizing: border-box;
    align-items: center;
    border: 2px solid var(--chb-orange, #f39801);
    background-color: #fff;
    color: var(--chb-text, #333);
    font-size: 14px;
    letter-spacing: 0.1em;
  }

  /* マウスを乗せたとき（ページ内リンクのメニューも「現在のページ」扱いになるため、現在地の強調はしていません） */
  .header-container-in.hlt-top-menu .navi-in > ul > li > a:hover,
  .header-container-in.hlt-top-menu .navi-in > ul > li:hover > a {
    background-color: var(--chb-orange, #f39801);
    color: #fff;
  }

  /* サブメニュー（「新着情報」に「お知らせ」「イベント」を入れる場合など） */
  .header-container-in.hlt-top-menu .navi-in > ul .sub-menu {
    top: 100%;
    left: 0;
    width: 100%;
    min-width: 150px;
    border: 2px solid var(--chb-orange, #f39801);
    border-top: 0;
    background-color: #fff;
    box-sizing: border-box;
  }
  .header-container-in.hlt-top-menu .navi-in > ul .sub-menu li {
    width: 100%;
    height: 42px;
  }
  .header-container-in.hlt-top-menu .navi-in > ul .sub-menu a {
    align-items: center;
    padding: 0 12px;
    background-color: #fff;
    color: var(--chb-text, #333);
    font-size: 14px;
  }
  .header-container-in.hlt-top-menu .navi-in > ul .sub-menu a:hover {
    background-color: var(--chb-beige, #fee5bd);
    color: var(--chb-text, #333);
  }
}

/* メニュー（スマホ・タブレット：1023px以下はCocoonのモバイルメニュー） */
@media screen and (max-width: 1023px) {
  .header-container-in.hlt-top-menu {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  #navi .navi-in > .menu-mobile li a {
    color: var(--chb-text, #333);
  }
  #navi .navi-in > .menu-mobile li a:hover {
    background-color: var(--chb-beige, #fee5bd);
  }
}

/************************************
** フッター
************************************/
.footer {
  margin-top: 0;
  padding: 0;
  border-top: 4px solid var(--chb-yellow, #febe5c);
  background-color: #fff;
}

.footer-bottom {
  margin-top: 0;
  padding: 32px 16px 28px;
  font-size: 14px;
}

/* ロゴ（PC：右側のコピーライトと下端を揃える） */
@media screen and (min-width: 1024px) {
  .footer-bottom-logo {
    bottom: 28px;
  }
}
.footer-bottom-logo .logo-text,
.footer-bottom-logo .site-name-text {
  color: #000;
  font-weight: 700;
}
.footer-bottom-logo img {
  height: 44px;
}

/* フッターメニュー */
.navi-footer-in > .menu-footer li {
  width: auto;
  border-left: 0;
  border-right: 0;
}
.navi-footer-in > .menu-footer li + li {
  border-left: 1px solid var(--chb-yellow, #febe5c);
}
.navi-footer-in > .menu-footer li:last-child {
  border-right: 0;
}
.navi-footer-in a {
  padding: 2px 16px;
  color: var(--chb-text, #333);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.navi-footer-in a:hover {
  background-color: transparent;
  color: var(--chb-orange, #f39801);
}

/* コピーライト */
.copyright {
  margin-top: 10px;
  color: var(--chb-muted, #6e6e6e);
  font-size: 12px;
}

/* トップへ戻るボタン */
.go-to-top-button {
  background-color: var(--chb-orange, #f39801);
  color: #fff;
}
.go-to-top-button:hover {
  color: #fff;
  opacity: 0.85;
}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  .footer-bottom {
    padding: 24px 12px 80px; /* モバイルメニューのボタンと重ならない余白 */
  }
  .navi-footer-in a {
    padding: 2px 10px;
  }
}