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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

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

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

/***** === Ramen AJ 今浜本店｜最終統一CSS（ヘッダーメニュー前提） === *****/

/* 1) 土台：こげ茶 */
html, body { background:#443733 !important; }
.article, .entry-content, .widget, .pagination { background:#352621 !important; }

/* 2) ヘッダー帯：落ち着いた赤＋文字は明るい黄 */
#header, .header, .header-in { background:#a33232 !important; }
.site-title, .site-title a, .site-description, #header a { color:#fff176 !important; }
#header a:hover { color:#ffffff !important; }

/* 3) ヘッダーメニュー帯（PC）：濃い金赤＋黄文字 */
.header-container .navi,
.header .navi,
#header .navi,
.header .menu, .header-in .menu, #header .menu,
#header .menu-container, .header .menu-container, #header .menu-header, .header .menu-header {
  background:#8b1a1a !important;  /* 濃い金赤（帯） */
  border:none !important; box-shadow:none !important; background-image:none !important;
}

/* 第1階層リンク（通常） */
.header-container .navi .menu > li > a,
.header .navi .menu > li > a,
#header .navi .menu > li > a,
#header .menu > li > a, .header .menu > li > a {
  color:#e6c200 !important;       /* 濃い黄（通常） */
  background:transparent !important; text-shadow:none !important;
}

/* 4) ホバー／現在地（白化を完全に無効化：li と a 両方を固定） */
.header-container .navi .menu > li:hover,
.header .navi .menu > li:hover,
#header .navi .menu > li:hover,
#header .menu > li:hover, .header .menu > li:hover,
.header-container .navi .menu > li.current-menu-item,
.header .navi .menu > li.current-menu-item,
#header .navi .menu > li.current-menu-item,
#header .menu > li.current-menu-item, .header .menu > li.current-menu-item {
  background:#a94442 !important;
  background-color:#a94442 !important;
  background-image:none !important;
  box-shadow:none !important;
  border-color:transparent !important;
}
.header-container .navi .menu > li:hover > a,
.header-container .navi .menu > li.current-menu-item > a,
.header .navi .menu > li:hover > a,
.header .navi .menu > li.current-menu-item > a,
#header .navi .menu > li:hover > a,
#header .navi .menu > li.current-menu-item > a,
#header .menu > li:hover > a, .header .menu > li:hover > a,
#header .menu > li.current-menu-item > a, .header .menu > li.current-menu-item > a {
  background:#a94442 !important;  /* 明るめ金赤（ホバー/現在） */
  background-color:#a94442 !important;
  color:#fff176 !important;        /* 明るい黄（ホバー/現在） */
  box-shadow:none !important;
}

/* 擬似要素で白やグラデが重なる場合も無効化 */
.header-container .navi .menu > li > a::before,
.header-container .navi .menu > li > a::after,
.header .navi .menu > li > a::before,
.header .navi .menu > li > a::after,
#header .navi .menu > li > a::before,
#header .navi .menu > li > a::after,
#header .menu > li > a::before,
#header .menu > li > a::after {
  content:none !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* 5) ドロップダウン（PC） */
.header-container .navi .sub-menu,
.header .navi .sub-menu,
#header .navi .sub-menu,
#header .sub-menu, .header .sub-menu {
  background:#352621 !important;   /* こげ茶ベース */
  border:none !important; box-shadow:none !important;
}
.header-container .navi .sub-menu a,
.header .navi .sub-menu a,
#header .navi .sub-menu a,
#header .sub-menu a, .header .sub-menu a {
  color:#e6c200 !important;        /* 濃い黄 */
  background:transparent !important;
}
.header-container .navi .sub-menu li:hover > a,
.header .navi .sub-menu li:hover > a,
#header .navi .sub-menu li:hover > a,
#header .sub-menu li:hover > a, .header .sub-menu li:hover > a {
  background:#a94442 !important; color:#fff176 !important;
}

/* 6) モバイル（ヘッダーモバイルメニュー／スライドイン） */
.menu-mobile, .menu-drawer, .mobile-menu, .slide-in, .slide-in-menu { background:#8b1a1a !important; }
.menu-mobile a, .menu-drawer a, .slide-in-menu a { color:#e6c200 !important; }
.menu-mobile li:hover > a, .menu-drawer li:hover > a, .slide-in-menu li:hover > a {
  background:#a94442 !important; color:#fff176 !important;
}
/* モバイルのトグルボタン色（必要なら） */
.header .menu-button, .menu-toggle, .drawer-toggle { color:#e6c200 !important; background:transparent !important; }

/***** === メイン周りの白背景を除去（content/wrapを透過 or こげ茶に） === *****/

/* メインコンテナは土台のこげ茶に合わせる */
#content, #content-in,
.content, .content-in,
#container, #container-in {
  background: #443733 !important;       /* こげ茶（サイト土台と同じ） */
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 内側の .wrap が白を塗っているケースを透明化 */
.wrap, .content .wrap, .container .wrap {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* main 本体とその内側は濃いこげ茶（記事面） */
main#main.main, #main, .main, .main-in {
  background: #352621 !important;
}

/* 記事・カード・ウィジェットなどの面も濃いこげ茶で統一 */
.article, .entry-content, .widget, .pagination,
.entry-card, .entry-card-wrap, .index-tab-contents,
.section, .section-in {
  background: #352621 !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 余白に見える白いボーダー/影を念のため消す */
#content, .content, .wrap, .main, .article, .entry-card, .widget {
  border-color: transparent !important;
  box-shadow: none !important;
}

/***** === メイン周りの白背景を除去（content/wrapを透過 or こげ茶に） === *****/

/* メインコンテナは土台のこげ茶に合わせる */
#content, #content-in,
.content, .content-in,
#container, #container-in {
  background: #443733 !important;       /* こげ茶（サイト土台と同じ） */
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 内側の .wrap が白を塗っているケースを透明化 */
.wrap, .content .wrap, .container .wrap {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* main 本体とその内側は濃いこげ茶（記事面） */
main#main.main, #main, .main, .main-in {
  background: #352621 !important;
}

/* 記事・カード・ウィジェットなどの面も濃いこげ茶で統一 */
.article, .entry-content, .widget, .pagination,
.entry-card, .entry-card-wrap, .index-tab-contents,
.section, .section-in {
  background: #352621 !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 余白に見える白いボーダー/影を念のため消す */
#content, .content, .wrap, .main, .article, .entry-card, .widget {
  border-color: transparent !important;
  box-shadow: none !important;
}

/***** サイトタイトル文字（logo-text）通常とホバー *****/

/* 通常時：明るい黄 */
.logo.logo-header.logo-text .site-name-text,
.logo.logo-header.logo-text a,
.logo.logo-header.logo-text a .site-name-text {
  color: #fff176 !important;
  -webkit-text-fill-color: #fff176 !important;
  text-shadow: none !important;
}

/* ホバー時：白に変化 */
.logo.logo-header.logo-text:hover .site-name-text,
.logo.logo-header.logo-text a:hover,
.logo.logo-header.logo-text a:hover .site-name-text {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* サイトタイトル（通常表示）にテキストシャドウを追加 */
.site-name-text {
  color: #fff176 !important; /* 明るい黄 */
  text-shadow: 2px 2px 4px rgba(68, 55, 51, 0.7) !important; /* 焦げ茶 70%透明 */
}

/* ホバー時は白に＋影は残す */
.logo.logo-header.logo-text .site-name-text:hover {
  color: #ffffff !important;
  text-shadow: 2px 2px 4px rgba(68, 55, 51, 0.7) !important;
}

/***** タイトルの影を常時表示（通常/リンク全状態/ホバー全部） *****/
:root { --aj-title-shadow: 2px 2px 4px rgba(68,55,51,0.7); } /* 焦げ茶70% */

.logo.logo-header.logo-text .site-name-text,
.logo.logo-header.logo-text .site-name-text *,
.logo.logo-header.logo-text a,
.logo.logo-header.logo-text a .site-name-text {
  text-shadow: var(--aj-title-shadow) !important;
}

/* リンクの全状態でも影を消させない */
.logo.logo-header.logo-text a:link .site-name-text,
.logo.logo-header.logo-text a:visited .site-name-text,
.logo.logo-header.logo-text a:focus .site-name-text,
.logo.logo-header.logo-text a:active .site-name-text,
.logo.logo-header.logo-text a:hover .site-name-text {
  text-shadow: var(--aj-title-shadow) !important;
}

/* 万一 “影を打ち消す擬似要素” がある場合の保険（透明化） */
.logo.logo-header.logo-text .site-name-text::before,
.logo.logo-header.logo-text .site-name-text::after {
  text-shadow: var(--aj-title-shadow) !important;
  box-shadow: none !important;
  background: transparent !important;
}

/***** グローバルナビの文字に常時影をつける *****/
:root { --aj-menu-shadow: 2px 2px 4px rgba(68,55,51,0.7); } /* 焦げ茶70% */

.header .menu > li > a,
.header .navi .menu > li > a,
#header .menu > li > a,
#header .navi .menu > li > a {
  text-shadow: var(--aj-menu-shadow) !important;
}

/* ホバー・選択中でも影を消させない */
.header .menu > li:hover > a,
.header .menu > li.current-menu-item > a,
.header .navi .menu > li:hover > a,
.header .navi .menu > li.current-menu-item > a,
#header .menu > li:hover > a,
#header .menu > li.current-menu-item > a,
#header .navi .menu > li:hover > a,
#header .navi .menu > li.current-menu-item > a {
  text-shadow: var(--aj-menu-shadow) !important;
}

/***** メニュー文字色と影を PC／モバイル共通に強制 *****/

/***** メニュー文字色＋影＋太字（PC／モバイル共通） *****/

/* 通常 */
.header .menu a,
.header .navi a,
#header .menu a,
#header .navi a,
.caption-wrap .item-label {
  color: #e6c200 !important;  /* 濃い金黄 */
  text-shadow: 2px 2px 4px rgba(68,55,51,0.7) !important; /* 焦げ茶70%の影 */
  font-weight: bold !important; /* ★ 太字化 ★ */
}

/* ホバー／現在地 */
.header .menu a:hover,
.header .navi a:hover,
#header .menu a:hover,
#header .navi a:hover,
.header .menu .current-menu-item > a,
.header .navi .current-menu-item > a,
.caption-wrap:hover .item-label,
.caption-wrap.current-menu-item .item-label {
  color: #fff176 !important; /* 明るい黄（ホバー時） */
  text-shadow: 2px 2px 4px rgba(68,55,51,0.7) !important;
  font-weight: bold !important; /* ★ 太字維持 ★ */
}

/***** === 見やすさUP（フォント・行間・文字装飾） === *****/

/* ヘッダーサイトタイトル（さらに大きく＆ゆったり） */
.logo.logo-header.logo-text .site-name-text {
  font-size: 2.2em !important;      /* 大きく */
  letter-spacing: 0.08em !important;/* 少し文字間を広げる */
  font-weight: 700 !important;      /* 太字 */
  line-height: 1.4 !important;      /* 行間をゆったり */
  text-shadow: 2px 2px 5px rgba(68,55,51,0.7) !important; /* こげ茶影 */
}

/* ナビゲーション（PC＆モバイル共通） */
.header .menu a,
#header .navi a {
  font-size: 1.15em !important;     /* 少し大きめに */
  font-weight: 700 !important;      /* 太字 */
  letter-spacing: 0.05em !important;/* 文字間で見やすく */
  line-height: 1.6 !important;      /* 縦方向の余白もゆったり */
  text-shadow: 2px 2px 5px rgba(68,55,51,0.7) !important; /* 影で視認性UP */
}

/* ドロップダウンの項目も同じように調整 */
#header .sub-menu a,
.header .sub-menu a {
  font-size: 1.05em !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.5 !important;
  text-shadow: 2px 2px 4px rgba(68,55,51,0.7) !important;
}

/***** === フッターメニュー：ホバー白化修正 === *****/

/* 通常時 */
.navi-footer-in a {
  color: #e6c200 !important;         /* 濃い黄（通常） */
  background: transparent !important;
  text-decoration: none !important;  /* 下線は無し */
  font-weight: 700 !important;       /* 見やすく太字 */
  text-shadow: 1px 1px 3px rgba(68,55,51,0.7) !important; /* 読みやすさ影 */
}

/* ホバー／現在地 */
.navi-footer-in a:hover,
.navi-footer-in a:focus,
.navi-footer-in .current-menu-item > a {
  background: #d63900 !important;    /* 明るめ金赤 */
  color: #fff176 !important;         /* 明るい黄 */
  text-decoration: none !important;
}

/***** === フッター全体の背景色を #cb0400 に固定 === *****/
#footer,
#footer .footer,
.footer-bottom,
.footer-in,
#footer-bottom,
.navi-footer-in {
  background: #cb0400 !important;   /* ご指定の赤 */
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/***** === メインコンテンツ文字色をベージュ系に変更 === *****/
#content-in main,
#content-in main p,
#content-in main li,
#content-in main span,
#content-in main div {
  color: #f5e6c8 !important;   /* 明るいベージュ */
}

/* 記事タイトルや見出しもベージュに */
#content-in main h1,
#content-in main h2,
#content-in main h3,
#content-in main h4,
#content-in main h5,
#content-in main h6 {
  color: #f9eac5 !important;   /* 少し明るめのベージュで強調 */
}

/***** === メニューのホバー背景色をフッターと同じ赤に統一 === *****/
.header-container .navi .menu > li:hover > a,
.header-container .navi .menu > li.current-menu-item > a,
.header .navi .menu > li:hover > a,
.header .navi .menu > li.current-menu-item > a,
#header .navi .menu > li:hover > a,
#header .navi .menu > li.current-menu-item > a,
#header .menu > li:hover > a,
.header .menu > li:hover > a,
#header .menu > li.current-menu-item > a,
.header .menu > li.current-menu-item > a {
  background: #d63900 !important;   /* フッターと同じ赤 */
  background-color: #d63900 !important;
  color: #fff176 !important;        /* 文字は明るい黄のまま */
}

/***** PCメニュー：ホバー背景を #d63900 に“全部”統一（最強版） *****/
@media (min-width:1025px){
  /* ホバー中の li 本体 */
  #header li:hover,
  .header li:hover,
  .header-container li:hover {
    background:#d63900 !important;
    background-color:#d63900 !important;
    background-image:none !important;
    border-color:transparent !important;
    box-shadow:none !important;
  }

  /* ホバー中 li 配下の全要素を強制（a / caption-wrap / item-label / span / ::before / ::after など） */
  #header li:hover *,
  .header li:hover *,
  .header-container li:hover * {
    background:#d63900 !important;
    background-color:#d63900 !important;
    background-image:none !important;
    box-shadow:none !important;
  }

  /* 文字色は黄で固定（読みやすさ） */
  #header li:hover a,
  .header li:hover a,
  .header-container li:hover a,
  #header li:hover .item-label,
  .header li:hover .item-label,
  .header-container li:hover .item-label {
    color:#fff176 !important;
    -webkit-text-fill-color:#fff176 !important;
    text-shadow:2px 2px 4px rgba(68,55,51,0.7) !important;
  }

  /* 擬似要素の白被せを無効化 */
  #header li > a::before, #header li > a::after,
  .header li > a::before, .header li > a::after,
  .header-container li > a::before, .header-container li > a::after,
  #header li .caption-wrap::before, #header li .caption-wrap::after,
  .header li .caption-wrap::before, .header li .caption-wrap::after {
    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
    opacity:0 !important;
    content:none !important;
  }
}

/* 通常状態 */
.btn, .button, .wp-block-button__link {
  box-shadow: 3px 3px 6px rgba(0,0,0,0.4);
  transition: all 0.2s ease; /* 動きをなめらかに */
}

/* ホバー時：浮き上がり＋文字色変更 */
.btn:hover, .button:hover, .wp-block-button__link:hover {
  box-shadow: 6px 6px 12px rgba(0,0,0,0.6); /* 影を強調 */
  transform: translateY(-3px);              /* 少し上に移動 */
  color: #ffd86d !important;                /* 文字色を黄色に固定 */
}

/* ここまでが今までのカスタマイズ */

/***** === メニューカード文字色調整 === *****/
.aj-card-title{
  color:#ffe27a;
  font-size:1.15rem;
  margin:10px 0 4px;
  font-weight:700;
  text-shadow:1px 1px 3px rgba(0,0,0,.6);
}
.aj-card-price{
  color:#fff9c4;
  font-weight:700;
  margin:0 0 6px;
  text-shadow:1px 1px 3px rgba(0,0,0,.6);
}
.aj-card-desc{
  color:#fef7e7;
  opacity:1;
  margin:8px 0 12px;
  line-height:1.6;
  text-shadow:1px 1px 3px rgba(0,0,0,.5);
}

/* 店舗カード：ダーク基調に揃える */
.aj-stores-wrap { margin-block: 48px; }
.aj-stores-title{
  color:#fff176; text-align:center; margin:0 0 20px; font-weight:700;
  text-shadow:2px 2px 4px rgba(0,0,0,.5);
}
.aj-stores{
  display:grid; gap:18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px){ .aj-stores{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 680px){ .aj-stores{ grid-template-columns: 1fr; } }

.aj-store{
  background:#352621; border-radius:12px; padding:14px;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
}
.aj-store-img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; display:block; margin-bottom:10px;
}
.aj-store-name{ color:#ffd86d; margin:6px 0 6px; font-size:1.1rem; font-weight:700; }
.aj-store-addr, .aj-store-hours{ color:#fef7e7; margin:.25em 0; line-height:1.6; }
.aj-store-tel a{ color:#ffd86d; text-decoration:none; font-weight:700; }
.aj-store-tel a:hover{ text-decoration:underline; }

.aj-store-links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.aj-btn{
  display:inline-block; padding:.55em .9em; border-radius:6px;
  background: rgba(214,57,0,.9); color:#ffd86d !important; text-decoration:none;
  box-shadow: 3px 3px 6px rgba(0,0,0,.4); transition:.2s ease;
}
.aj-btn:hover{ transform:translateY(-2px); box-shadow:6px 6px 12px rgba(0,0,0,.6); }
.aj-btn--ghost{
  background:transparent; border:1px solid #d63900; color:#ffd86d !important;
}
.aj-btn--ghost:hover{ background:#cb0400; color:#ffd86d !important; }


/* 固定ページや記事タイトルの見出し */
#content-in main h1,
.article h1,
.entry-title,
.archive-title {
  margin: 0 0 20px;
  padding: 0 0 10px;
  font-size: 2rem;
  font-weight: 800;
  color: #ffd86d; /* 黄色で統一 */
  text-shadow: 2px 2px 4px rgba(0,0,0,.6);
  border-bottom: 3px solid #d63900; /* 下線だけ赤で強調 */
}