/* ムジカレイド共有ナビ（トップページと同一デザイン） 自己完結・色/フォントはハードコード */
nav.mkl-nav{
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 48px;
  background: #ffffff;
  border-bottom: 0.5px solid rgba(0,0,0,0.1);
  box-sizing: border-box;
}
.mkl-nav *{ box-sizing: border-box; }
.mkl-nav .logo{ line-height: 1; }
.mkl-nav #nav-logo{ filter: brightness(0.92) saturate(1.18) contrast(1.05); }
.mkl-nav .nav-links{ display: flex; gap: 28px; list-style: none; align-items: center; margin:0; padding:0; }
.mkl-nav .nav-links a{
  font-family: 'Noto Serif JP', sans-serif;
  font-size: 15px; letter-spacing: 0.04em; color: #222222; text-decoration: none; font-weight: 400;
  transition: color 0.2s;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
  height: 120px;
}
.mkl-nav .nav-links a span{ text-align: center; display: flex; flex-direction: column; align-items: center; }
.mkl-nav .nav-links a span em{ font-style: italic; font-family: 'Cormorant Garamond', serif; color: #2AABAC; font-size: 13px; letter-spacing: 0.08em; }
.mkl-nav .nav-links a:hover{ color: #2AABAC; }
.mkl-nav .nav-links a:hover .nav-kaleido{ transform: scale(1.4); }
.mkl-nav .nav-kaleido{ width: 72px; height: 72px; object-fit: contain; opacity: 1; transition: transform 0.4s ease; display: block; mix-blend-mode: multiply; }
.mkl-nav .nav-kaleido-sm{ width: 58px; height: 58px; }
.mkl-nav .nav-kaleido-blend{ mix-blend-mode: multiply; filter: contrast(1.05); background: transparent; }
.mkl-nav .nav-kaleido-lg{ width: 71px; height: 71px; }
.mkl-nav .nav-cta{
  font-family: 'Noto Serif JP', sans-serif; font-weight: 400;
  font-size: 15px; letter-spacing: 0.04em;
  padding: 10px 24px; border-radius: 2px;
  background: #2AABAC; color: #fff;
  border: 0.5px solid #2AABAC; cursor: pointer;
  transition: all 0.2s; white-space: nowrap;
}
.mkl-nav .nav-cta:hover{ background: #1d8e8f; color: #fff; }

/* ハンバーガー */
.mkl-nav .hamburger{ display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 6px; }
.mkl-nav .hamburger span{ display: block; width: 100%; height: 2px; background: #2AABAC; transition: transform 0.3s ease, opacity 0.3s ease; border-radius: 2px; }
.mkl-nav .hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.mkl-nav .hamburger.open span:nth-child(2){ opacity: 0; }
.mkl-nav .hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* モバイルオーバーレイメニュー */
.mkl-mobile-menu{ display: none; position: fixed; inset: 0; z-index: 200; background: rgba(255,255,255,0.98); backdrop-filter: blur(12px); flex-direction: column; align-items: center; justify-content: center; opacity: 0; transform: translateY(-8px); transition: opacity 0.3s ease, transform 0.3s ease; overflow-y: auto; padding: 40px 24px; box-sizing: border-box; }
.mkl-mobile-menu.open{ opacity: 1; transform: translateY(0); }
.mkl-mobile-menu .mobile-menu-close{ position: absolute; top: 20px; right: 24px; font-size: 22px; color: #2AABAC; background: none; border: none; cursor: pointer; font-family: 'Cormorant Garamond', serif; line-height: 1; }
.mkl-mobile-menu .mobile-menu-logo{ margin-bottom: 32px; }
.mkl-mobile-menu .mobile-menu-links{ list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; width: 100%; max-width: 360px; margin: 0 0 32px; padding:0; }
.mkl-mobile-menu .mobile-menu-link{ display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #222; padding: 16px 8px; border-radius: 4px; transition: background 0.2s; text-align: center; }
.mkl-mobile-menu .mobile-menu-link:hover{ background: rgba(46,171,172,0.06); }
.mkl-mobile-menu .mobile-menu-icon{ width: 56px; height: 56px; object-fit: contain; mix-blend-mode: multiply; margin-bottom: 8px; }
.mkl-mobile-menu .mobile-menu-link span{ font-family: 'Noto Serif JP', serif; font-size: 13px; letter-spacing: 0.04em; line-height: 1.5; display: flex; flex-direction: column; align-items: center; color:#222; }
.mkl-mobile-menu .mobile-menu-link span em{ font-size: 10px; font-style: italic; color: #2AABAC; font-family: 'Cormorant Garamond', serif; letter-spacing: 0.14em; margin-top: 2px; }
.mkl-mobile-menu .mobile-menu-cta{ background: #2AABAC; color: #fff; border: none; cursor: pointer; font-size: 15px; letter-spacing: 0.08em; padding: 14px 40px; border-radius: 2px; font-family: 'Noto Serif JP', sans-serif; font-weight: 400; transition: opacity 0.2s; }
.mkl-mobile-menu .mobile-menu-cta:hover{ opacity: 0.85; }

/* 中間幅（769〜1180px）：消さず縮小 */
@media (max-width: 1180px) and (min-width: 769px){
  nav.mkl-nav{ padding: 14px 22px; }
  .mkl-nav .logo img{ height: 96px !important; }
  .mkl-nav .nav-links{ gap: 14px; }
  .mkl-nav .nav-links a{ font-size: 12px; height: 100px; }
  .mkl-nav .nav-kaleido{ width: 50px; height: 50px; }
  .mkl-nav .nav-kaleido-sm{ width: 44px; height: 44px; }
  .mkl-nav .nav-kaleido-lg{ width: 50px; height: 50px; }
  .mkl-nav .nav-cta{ padding: 9px 16px; font-size: 13px; }
}
/* モバイル（768px以下）：ハンバーガーへ */
@media (max-width: 768px){
  nav.mkl-nav{ padding: 12px 20px; }
  .mkl-nav .logo img{ height: 72px !important; }
  .mkl-nav .nav-links{ display: none; }
  .mkl-nav .nav-cta{ display: none; }
  .mkl-nav .hamburger{ display: flex; }
  .mkl-mobile-menu{ display: flex; }
}
@media (max-width: 480px){
  .mkl-nav .nav-links li{ flex: 0 0 33.33%; }
  .mkl-nav .nav-kaleido, .mkl-nav .nav-kaleido-sm, .mkl-nav .nav-kaleido-lg{ width: 36px !important; height: 36px !important; }
}