/*
Theme Name: Envo Online Store Child
Template: envo-online-store
*/
/* 本文全体 */
body {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
}

/* 見出し */
h1, h2, h3, h4, h5, h6 {
  font-family: "Noto Sans JP", sans-serif;
}

/* ナビゲーションやメニュー */
nav, .menu, .site-title {
  font-family: "Noto Sans JP", sans-serif;
}


/* ヘッダー画像のオーバーレイを消す */
.site-header .overlay {
  background: none !important;
  opacity: 0 !important;
}
/* メニューの文字を白にする */
.main-menu .nav > li > a,
.main-menu .nav-link {
  color: #ffffff !important;
}


/* 選択中のメニュー項目の背景色と文字色を変更 */
.main-menu .nav > li.current-menu-item > a,
.main-menu .nav > li.current_page_item > a {
  background-color: #333333 !important; /* 好きな背景色 */
  color: #ffffff !important;            /* 好きな文字色 */
}


.page-header-title h1::after {
  content: "自然で着やすい服、着心地のいい服";
  display: block;
  color: #ffffff;       /* 白文字 */
  font-size: 28px;      /* 好きなサイズに調整 */
  font-weight: bold;
  margin-top: 10px;
}

.page-header-title h1 {
  text-shadow: 2px 2px 6px rgba(0,0,0,0.8); /* 濃い影でくっきり */
}




/* ヘッダー下の 日付・投稿者・コメント を消す */
.head-image-heading .posted-date,
.head-image-heading .author-meta,
.head-image-heading .comments-meta {
  display: none !important;
}

/* 3分割フッター */
.site-footer {
  background-color: #0B2545; /* 濃い藍色 */
  color: #fff;
  padding: 40px 20px;
}

.site-footer a {
  color: #fff;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.footer-widgets {
  display: flex;
  flex-wrap: wrap;
}

.footer-column {
  flex: 0 0 33.333%;  /* 横幅を常に3分の1に固定 */
  max-width: 33.333%; /* はみ出し防止 */
  box-sizing: border-box;
  padding: 0 10px;    /* カラム間の余白 */
}

.footer-bottom {
  text-align: center;
  margin-top: 20px;
  border-top: 1px solid #555;
  padding-top: 10px;
}

.footer-mail {
  margin-left: -10px;  /* 左に10px寄せる */
}

.footer-contact {
  margin-right: -10px;  /* 左に10px寄せる */
}

.footer-map iframe {
  /* width:100% !important;  親カラムに合わせる */
  height: 250px;           /* 高さは固定で安定 */
  display: block;
  border: 0;
}
/* スマホ表示ではフッターを縦並びに */
@media (max-width: 768px) {
  .footer-column {
    flex: 1 1 100% !important;  /* 横並び解除して縦並び */
    max-width: 100% !important;
    margin-bottom: 20px;
  }
}

/* スマホメニューの背景と文字色 */
@media (max-width: 767px) {
  #my-menu {
    background-color: color: rgba(255, 255, 255, 0.3)
!important; /* 背景色を濃くする */
  }

  #my-menu .navbar-nav > li > a {
    color: #000 !important; /* 白文字に変更 */
  }

  #my-menu .navbar-nav > li > a:hover,
  #my-menu .navbar-nav > li > a:focus {
    background-color: #444 !important; /* ホバー時の背景色 */
    color: #fff !important;
  }
}
@media (max-width: 767px) {
  #my-menu .navbar-nav > li > a {
    padding: 8px 12px !important;  /* 高さを抑える */
    max-height: none !important;   /* 高さ制限を解除 */
    line-height: 1.4;              /* 行間を調整 */
    font-size: 14px;               /* 文字サイズを少し小さく */
  }
}

@media (max-width: 767px) {
  #my-menu {
    width: 25% !important;   /* 画面幅の80%に縮小 */
    max-width: 320px;        /* 最大幅を制限（好みで調整） */
    margin-left: auto;       /* 右寄せ */
    margin-right: auto;      /* 中央寄せにしたい場合 */
  }
}

#my-menu .navbar-nav > li > a {
  max-height: none !important; /* 高さ制限を解除 */
  padding: 10px 20px;          /* 適度な余白に調整 */
}



/*@media (max-width: 767px) {
  #my-menu .navbar-nav > li > a {
    padding: 6px 12px !important; /* 高さをさらに抑える 
    font-size: 13px;              /* 文字サイズを少し小さく 
    line-height: 1.3;
  }
}*/