/* ===== Custom Menu styles (OLTANA-002) ===== */
/* 横スクロールバーを非表示 */
body { overflow-x: hidden !important; }
html { overflow-x: hidden !important; }

.custom-global-nav { display: none; }
.um-hamburger { display: none; }

/* Desktop (>=1024px): show global nav, hide hamburger */
@media (min-width: 1024px) {
  .custom-global-nav { display: block; }
  .custom-global-nav .custom-global-nav-list { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
  .custom-global-nav .custom-global-nav-list > li { position: relative; }
  .custom-global-nav .custom-global-nav-list a { 
    text-decoration: none; 
    color: #000 !important;
  }
  .custom-global-nav .custom-global-nav-list a:hover,
  .custom-global-nav .custom-global-nav-list a:visited,
  .custom-global-nav .custom-global-nav-list a:active {
    color: #000 !important;
  }
  .um-hamburger, .um-mobile-menu { display: none !important; }
}

/* Mobile (<1024px): hide global nav, show hamburger + panel */
@media (max-width: 1023px) {
  .custom-global-nav { display: none; }

  .um-hamburger-wrap { position: relative; z-index: 1001; }
  .um-hamburger {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
    width: 44px; height: 44px; border: none; background: transparent; cursor: pointer;
  }
  .um-hamburger__bar { display: block; width: 28px; height: 2px; margin: 4px 0; background:#111111; }

  .um-mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; width: min(84vw, 360px); background: #fff; 
    box-shadow: -8px 0 24px rgba(0,0,0,.15); z-index: 1000; padding: 24px; overflow-y: auto; }
  .um-mobile-menu[hidden] { display: none; }
  
  /* [hidden] は何があっても非表示（テーマ側の !important 対策） */
  .um-mobile-menu [hidden] { display: none !important; }
  .um-mobile-menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  /* クリック基準を作る */
  .um-mobile-menu__list > li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
  }
  .um-mobile-menu__list > li:last-child {
    border-bottom: none;
  }
  
  /* a がボタンの上に被さらないよう右側にスペース */
  .um-mobile-menu__list > li > a {
    display: flex;
    align-items: center;
    padding: 0px 44px 12px 4px;
    text-decoration: none; 
    color: #000 !important;
    min-height: 32px;
  }
  .um-mobile-menu__list a:hover,
  .um-mobile-menu__list a:visited,
  .um-mobile-menu__list a:active {
    color: #000 !important;
  }

  /* サブメニューのスタイル */
  .um-mobile-menu__list .menu-item-has-children {
    position: relative;
  }

  .um-mobile-menu__list .menu-item-has-children > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 40px;
  }

  .um-mobile-menu__list .menu-item-has-children .sub-menu {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }

  .um-mobile-menu__list .menu-item-has-children .sub-menu li {
    margin: 0;
  }

  .um-mobile-menu__list .menu-item-has-children .sub-menu a {
    padding: 8px 16px;
    font-size: 12px;
    color: #666 !important;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
  }

  .um-mobile-menu__list .menu-item-has-children .sub-menu a:hover {
    color: #000 !important;
    border-left-color: #f99500;
    background-color: rgba(249, 149, 0, 0.1);
  }

  /* ボタンは確実に最前面でクリック可能に */
  .um-mobile-menu__toggle {
    position: absolute !important;
    right: 8px !important;
    top: 0px !important;
    width: 32px !important;
    height: 32px !important;
    border: 0 !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #666 !important;
    font-size: 18px !important;
    z-index: 2 !important;
    pointer-events: auto !important;
  }

  .um-mobile-menu__toggle:hover {
    color: #000;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }

  /* 記号フォールバック：プラスを描く。開時は縦線を消してマイナスにする */
  .um-mobile-menu__toggle::before,
  .um-mobile-menu__toggle::after{
    content: "";
    position: absolute;
    background: currentColor;
  }
  .um-mobile-menu__toggle::before{ /* 横線 */
    width: 14px;
    height: 2px;
  }
  .um-mobile-menu__toggle::after{  /* 縦線 */
    width: 2px;
    height: 14px;
  }
  .um-mobile-menu__toggle.is-open::after{ display: none; } /* マイナス表示 */


  /* サブメニューが開いている状態 */
  .um-mobile-menu__list .menu-item-has-children.is-open .sub-menu {
    display: block;
  }

  /* optional: lock scroll when open */
  .um-menu-open body { overflow: hidden; }
}

/* ===== Footer (single-row defaults used earlier) ===== */
.custom-footer-nav { margin: 24px 0; }
.custom-footer-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 20px; }
.custom-footer-nav__list a { text-decoration: none; }

/* ===== Footer (TWO-ROW override for OLTANA footer) ===== */
.ol-footer { background-color: #333 !important; }
.ol-footer__links { display: flex; flex-direction: column; row-gap: 50px; }
.ol-footer__links-row { display: block; width: 100%; margin-bottom: 50px; }
.ol-footer__links-row .ol-footer__links-list {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 20px;
}
.ol-footer__links-row .ol-footer__links-list a {
  text-decoration: none !important;
  color: #fff;
}
.ol-footer__links-row .ol-footer__links-list a:hover {
  text-decoration: underline !important;
  color: #fff;
}
.ol-footer__links-row .ol-footer__links-list a:visited,
.ol-footer__links-row .ol-footer__links-list a:active {
  text-decoration: none !important;
  color: #fff;
}

/* 階層メニュー（サブ）常時表示 */
.ol-footer__links-row .ol-footer__links-list > li { display: flex; flex-direction: column; align-items: flex-start; row-gap: 6px; }
.ol-footer__links .sub-menu {
  display: grid !important; grid-auto-rows: min-content; gap: 4px; list-style: none;
  margin: 0; padding: 0 0 0 16px; position: static !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important;
}
.ol-footer__links .sub-menu > li > a { 
  text-decoration: none !important; 
  display: inline-block; 
  line-height: 1.7; 
  color: #fff;
}
.ol-footer__links .sub-menu > li > a:hover {
  text-decoration: underline !important;
  color: #fff;
}
.ol-footer__links .sub-menu > li > a:visited,
.ol-footer__links .sub-menu > li > a:active {
  text-decoration: none !important;
  color: #fff;
}
.ol-footer__links .sub-menu > li > a::before { content: "— "; opacity: .6; margin-right: .25em; }

@media (max-width: 1023px) {
  .ol-footer__links-row .ol-footer__links-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
  .ol-footer__links-row .ol-footer__links-list > li {
    display: block !important;
    width: 100% !important;
  }
}

@media (max-width: 540px) {
  .ol-footer__links { row-gap: 6px; }
  .ol-footer__links-row .ol-footer__links-list { gap: 8px 16px; }
  .ol-footer__links .sub-menu { padding-left: 14px; gap: 3px; }
}

/* ===== Breadcrumb: overlap & position fix =====
   ヘッダー直後に <nav id="umMobileMenu"> が挟まるため一般兄弟(~)指定にし、
   フォールバックの余白を確保（実寸は menu.js で上書き）
*/
.ol-header ~ .ol-breadcrumb__wrapper { margin-top: 76px; }
@media (max-width: 1023px) { .ol-header ~ .ol-breadcrumb__wrapper { margin-top: 64px; } }

/* パンくずリストの位置を固定（ヘッダーのアニメーションの影響を防ぐ） */
.ol-breadcrumb__wrapper {
  border-bottom: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  will-change: auto !important;
  transition: none !important;
  animation: none !important;
  isolation: isolate;
  margin-top: 80px !important; /* ヘッダーの高さ分だけ下に移動 */
}

/* パンくずリストの内容を安定化 */
.ol-breadcrumb__list {
  transform: translate3d(0, 0, 0) !important;
  will-change: auto !important;
  transition: none !important;
  animation: none !important;
}

/* ヘッダーのアニメーションがパンくずリストに影響しないように */
.ol-header {
  contain: layout style paint;
}

.ol-header__inner {
  contain: layout style paint;
}

/* パンくずリストの親要素も安定化 */
body:not(.home) .ol-breadcrumb__wrapper {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  margin-top: 80px !important; /* ヘッダーの高さ分だけ下に移動 */
}

/* レスポンシブ対応 */
@media (max-width: 1023px) {
  .ol-breadcrumb__wrapper {
    margin-top: 70px !important;
  }
  body:not(.home) .ol-breadcrumb__wrapper {
    margin-top: 70px !important;
  }
}

@media (max-width: 768px) {
  .ol-breadcrumb__wrapper {
    margin-top: 60px !important;
  }
  body:not(.home) .ol-breadcrumb__wrapper {
    margin-top: 60px !important;
  }
}

/* ===== 著者情報のスマホレイアウト修正 ===== */
/* スマホで著者情報を縦積みに変更 */
@media (max-width: 768px) {
  .ol-article__writer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  
  .ol-article__writer-thumb {
    margin-bottom: 16px !important;
    margin-right: 0 !important;
  }
  
  .ol-article__writer-body {
    width: 100% !important;
  }
}

/* ===== Related Posts (関連記事) スタイル復元 ===== */
/* TOPページのCOLUMNセクションと同じスタイルを適用 */

/* セクションタイトルのスタイル（TOPページと同じ） */
.ol-single__post-list-title {
  margin-bottom: clamp(60px, 3.8181818182rem + 3.4090909091vw, 120px);
}

.ol-single__post-list-title .ol-heading__container {
  width: calc(100% - clamp(3.125rem, -1.161rem + 8.93vw, 6.875rem));
  position: relative;
  padding: 24px 0 clamp(1.25rem, 0.899rem + 0.67vw, 1.5rem) clamp(3.125rem, -1.161rem + 8.93vw, 6.875rem);
}

@media (max-width: 1080px) {
  .ol-single__post-list-title .ol-heading__container {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .ol-single__post-list-title .ol-heading__container {
    width: 100%;
    padding-left: clamp(32px, 0.877593361rem + 3.3195020747vw, 48px);
  }
}

.ol-single__post-list-title .ol-heading__container:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #f99500;
  transition: transform 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.3s;
  will-change: transform;
  transform: scaleY(0);
  transform-origin: bottom;
}

@media (max-width: 767px) {
  .ol-single__post-list-title .ol-heading__container:before {
    width: 7px;
  }
}

.ol-single__post-list-title .ol-heading__container.js-visible:before {
  transform: scaleY(100%);
  transform-origin: top;
}

.ol-single__post-list-title .ol-heading__mask {
  position: relative;
  display: inline-block;
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.ol-single__post-list-heading-sub {
  margin-bottom: clamp(3px, 1vw, 6px);
  font-size: clamp(16px, 0.6363636364rem + 0.5681818182vw, 20px);
  font-weight: 500;
  line-height: 2.1;
  letter-spacing: 0.17em;
  color: #333;
}

@media (min-width: 1728px) {
  .ol-single__post-list-heading-sub {
    font-size: clamp(20px, -0.4473167539rem + 1.5706806283vw, 23px);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.22em;
  }
}

@media (max-width: 767px) {
  .ol-single__post-list-heading-sub {
    font-size: clamp(14px, 0.8048495851rem + 0.2074688797vw, 15px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.2em;
  }
}

.ol-single__post-list-heading {
  font-size: clamp(45px, 1.4488636364rem + 2.1306818182vw, 60px);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.12em;
  color: #333;
  margin: 0;
}

@media (max-width: 767px) {
  .ol-single__post-list-heading {
    font-size: clamp(40px, 2.1492479253rem + 1.0373443983vw, 45px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.12em;
  }
}

@media (max-width: 540px) {
  .ol-single__post-list-heading {
    font-size: clamp(30px, 0rem + 8.3333333333vw, 45px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.12em;
  }
}

/* .ol-card-list を .ol-single__post-list-items に適用 */
.ol-single__post-list-items {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

@media (max-width: 540px) {
  .ol-single__post-list-items {
    width: 100%;
    border-bottom: none;
  }
}

/* .ol-card-item を .ol-single__post-list-item に適用 */
.ol-single__post-list-item {
  display: flex;
  width: 33.3333333333%;
  padding: clamp(32px, 0.5454545455rem + 2.2727272727vw, 48px);
}

@media (max-width: 1023px) {
  .ol-single__post-list-item {
    width: 50%;
    padding: clamp(16px, -0.122406639rem + 3.3195020747vw, 32px);
  }
}

@media (max-width: 540px) {
  .ol-single__post-list-item {
    width: 100%;
    padding: clamp(24px, 0.7727272727rem + 1.1363636364vw, 32px);
  }
  .ol-single__post-list-item:not(:nth-child(3n)) {
    border-right: none;
  }
}

/* .ol-card-item-link を .ol-single__post-list-item-anchor に適用 */
.ol-single__post-list-item-anchor {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  flex-grow: 1;
  text-decoration: none !important;
  color: inherit !important;
}

/* .ol-card-item-image, .ol-card-item-info, .ol-card-item-title を適用 */
.ol-single__post-list-item-img,
.ol-single__post-list-item-content,
.ol-single__post-list-item-title {
  width: 100%;
}

.ol-single__post-list-item-title {
  margin-top: clamp(6px, 0.0113636364rem + 0.5681818182vw, 10px);
  line-height: 1.7;
}

.ol-single__post-list-item-content {
  display: flex;
  align-items: center;
  margin-top: clamp(16px, 1rem + 0vw, 16px);
  font-size: clamp(13px, 0.7215909091rem + 0.1420454545vw, 14px);
  font-weight: 400;
  line-height: 2.1;
  letter-spacing: 0.2em;
}

.ol-single__post-list-item-img {
  overflow: hidden;
}

.ol-single__post-list-item-img:not(.ol-thumbnail-original) {
  aspect-ratio: 16/9;
}

.ol-single__post-list-item-img + .ol-single__post-list-item-title {
  margin-top: clamp(16px, 1rem + 0vw, 16px);
}

/* 日付とカテゴリのスタイル（.ol-blog-meta から） */
.ol-single__post-list-item-content {
  display: flex;
  align-items: center;
  column-gap: clamp(16px, 1rem + 0vw, 16px);
}

.ol-single__post-list-item-date {
  font-size: clamp(13px, 0.8125rem + 0vw, 13px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.2em;
}

.ol-single__post-list-item-category {
  font-size: clamp(13px, 0.8125rem + 0vw, 13px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.2em;
  text-decoration: none !important;
}

.ol-separator {
  color: #666;
  margin: 0 8px;
}

@media (max-width: 540px) {
  .ol-single__post-list-item-date,
  .ol-single__post-list-item-category {
    font-size: clamp(11px, 0.5625rem + 0.5555555556vw, 12px);
    font-weight: 400;
    line-height: 1.7;
  }
}

/* ホバーエフェクト（TOPページと同じ） */
@media (any-hover: hover) {
  .ol-single__post-list-item-anchor {
    overflow: hidden;
  }
  
  .ol-single__post-list-item-anchor img {
    transition: transform 0.42s cubic-bezier(0.39, 0.575, 0.565, 1);
    will-change: transform;
  }
  
  .ol-single__post-list-item-anchor .ol-single__post-list-item-title {
    transition: color 0.24s ease-Out;
    will-change: color;
  }
  
  .ol-single__post-list-item-anchor:hover {
    transition: color 0.24s ease-Out;
    will-change: color;
  }
  
  .ol-single__post-list-item-anchor:hover img {
    transform: scale(1.05);
  }
}

/* パンくずの折り返し表示（スマホ対応） */
.ol-breadcrumb__wrapper {
  overflow-x: hidden !important; /* 横スクロールを無効化 */
  width: 100% !important;
}
.ol-breadcrumb__list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 20px !important; /* 横方向の間隔を20pxに拡大 */
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  overflow-x: hidden !important; /* 横スクロールを無効化 */
}
.ol-breadcrumb__item {
  display: inline-block !important;
  white-space: nowrap !important;
}
.ol-breadcrumb__anchor {
  display: inline-block !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}
}