@charset "UTF-8";

@import url("common.css");
@import url("layout.css");
@import url("form.css");

/* --- ボタン色のカスタム設定 --- */

/* 1. ヘッダーボタンの基本色 */
/* 1番目: オレンジ */
.cHeadShiryo a[href="/blog"] {
    background-color: #E87400;
}
/* 2番目: 緑 */
.cHeadContact a[href="/web"] {
    background-color: #499e5e;
}
/* 3番目: 青 */
.cHeadShiryo a[href="/omitumori#naT"] {
    background-color: #007bff;
}
/* 4番目: 赤 */
.cHeadContact a[href="/shiryo"] {
    background-color: #dc3545;
}

/* 2. ヘッダーボタンのホバー効果 */
.cHeadShiryo a[href]:hover,
.cHeadContact a[href]:hover {
    opacity: 0.8; /* ボタンを少し透過させて白みがかったように見せる */
}

/* 3. フッターボタンの基本色 */
/* 1番目: オレンジ */
.footSubBtn a[href="/blog"] {
    background-color: #E87400;
    color: #fff;
}
/* 2番目: 緑 */
.footSubBtn a[href="/web"] {
    background-color: #499e5e;
    color: #fff;
}
/* 3番目: 青 */
.footSubBtn a[href="/omitumori#naT"] {
    background-color: #007bff;
    color: #fff;
}
/* 4番目: 赤 */
.footSubBtn a[href="/shiryo"] {
    background-color: #dc3545;
    color: #fff;
}

/* 4. フッターボタンのホバー効果 */
.footSubBtn a:hover {
    background-color: #ffc107; /* 黄色 */
    color: #212529; /* 文字色を濃いグレーにして読みやすくする */
}

/* ▼▼▼ 多階層メニュー用のCSS（最終完成版） ▼▼▼ */

/* 1階層目のメニュー項目（サブメニュー）の位置を基準にする */
div.navMenu .menuContents .sub > li {
  position: relative;
}

/* 2階層目のメニュー(孫メニュー)の基本設定 */
div.navMenu .menuContents .sub-sub {
  display: none; /* 普段は非表示 */
  position: absolute;
  top: 0;
  left: 100%;
  width: 280px;
  background-color: #f7f7f7;
  padding: 10px 0;
  z-index: 100;
  border: none !important; /* 念のため、枠線を強制的に消す */
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15) !important; /* 影を強制的に適用する */
}

/* 親にマウスが乗ったら、2階層目を見せる */
div.navMenu .menuContents .sub > li:hover > .sub-sub {
  display: block;
}

/* 2階層目のメニュー項目の基本デザイン */
div.navMenu .menuContents .sub-sub li a {
  padding: 8px 15px;
  display: block;
  white-space: normal;
  line-height: 1.4;
  font-size: 1.4rem;
}

/* サブメニューと孫メニューの項目にマウスが乗った時のデザイン */
div.navMenu .menuContents .sub > li > a:hover,
div.navMenu .menuContents .sub-sub li a:hover {
  background-color: #e8e8e8; /* 背景を薄いグレーに */
  color: #499e5e; /* 文字を緑色に */
}