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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* 自作ヘッダーのCSS */
.hayama_header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 0px 0px 40px;
  box-sizing: border-box;
	min-width:1000px;
	background: #ffffff80;
}
.hayama_header img {
	width:250px;
}
a img {
  opacity: 1.0;
  transition: opacity 0.3s ease;
}
a img:hover {
  opacity: 0.6;
}
/* メニューの横並び設定 */
.global-nav ul {
  display: flex;               /* メニュー項目も横並びに */
  list-style: none;            /* 先頭の「・」を消す */
  margin: 0;
  padding: 0;
  gap: 30px;                   /* メニュー同士の隙間（好みに合わせて調整） */
  align-items: center;
}

/* メニューのリンク文字設定 */
.global-nav a {
  color: #474747;              /* 文字を白に */
  text-decoration: none;       /* 下線を消す */
  font-weight: bold;           /* 太字に */
  font-size: 16px;
}

.global-nav a:hover {
	color:#7dc522;
}


.hover-underline {
  position: relative;
  color: #333;
  text-decoration: none;
}

.hover-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px; /* 下線の位置 */
  width: 0; /* 通常時は幅0 */
  height: 3px; /* 下線の太さ */
  background-color: #7dc522; /* 下線の色 */
  transition: width 0.4s ease; /* 伸びる時間 */
}

.hover-underline:hover::after {
  width: 100%; /* ホバー時に幅100%になる */
}


/* CONTACTボタンの特別デザイン */
.contact-btn a {
  background-color: #7dc522;   /* ボタンの青色 */
  padding: 15px 30px;          /* ボタンの内側の余白（上下 左右） */
  display: block;              /* 余白を正確に効かせるため */
	color: #fff;
	border-radius: 0px; /* 左上・右上・右下・左下 */
}

.contact-btn a:hover {
  background-color: #fff;   /* ボタンの青色 */
  padding: 15px 30px;          /* ボタンの内側の余白（上下 左右） */
  display: block;              /* 余白を正確に効かせるため */
	color:  #7dc522;
}

/* ▼追加：Cocoonの元々のヘッダーを非表示にする */
#header {
  display: none !important;
}
.global-nav_sp {
  display: none;
}
/* =========================================
   スマホ用アイコンの初期設定（PCでは隠す）
========================================= */
.mobile-nav-icons {
  display: none;
}

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

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

}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* =========================================
   スマホ表示用の設定（画面幅768px以下の場合）
========================================= */
@media screen and (max-width: 768px) {
  
  /* 1. ヘッダーの幅固定を解除し、スマホにフィットさせる */
  .hayama_header {
    min-width: 100%;       /* 1000pxの制限を解除 */
    padding: 0px 20px;    /* スマホ用に余白を少し狭く */
  }

  /* 2. スマホ用にロゴを少し小さくする */
  .hayama_header img {
    width: 200px;
  }

  /* 3. PC用の横並びメニューを隠す */
  .global-nav {
    display: none;
  }

  /* 4. スマホ用のアイコン（メール・ハンバーガー）を表示 */
  .mobile-nav-icons {
    display: flex;         /* 横並びにする */
    align-items: center;   /* 縦の中央揃え */
    gap: 20px;             /* アイコン同士の隙間 */
  }

  /* アイコンのサイズと色調 */
  .mobile-mail, .hamburger-menu {
    font-size: 28px;       /* タップしやすい大きさに */
    color: #474747;
    text-decoration: none;
    cursor: pointer;
  }
/* メニューが開いた時（.is-activeが付いた時）のスマホメニュー設定 */
  .global-nav_sp.is-active {
    display: block; /* 表示させる */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }

  .global-nav_sp.is-active ul {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .global-nav_sp.is-active li {
    border-top: 1px solid #eee; /* メニューの間に薄い線を引く */
  }

  .global-nav_sp.is-active a {
    display: block;
    padding: 15px;
    text-align: center;
    color: #474747;
    text-decoration: none;
    font-weight: bold;
  }
}