/* ORANGEBEAR — page-level layout styles.
   静的HTML版の各ページ <head> インライン <style> をそのまま統合したもの。
   デザインシステム（styles.css / tokens）に上乗せするページ固有ルール。
   デザインは変更していない（値はすべて元HTMLと同一）。 */

html { scroll-behavior: smooth; }
body { background: var(--color-bg); }

.wrap { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding: var(--section-y-lg) 0; }

/* TOP */
.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-7); }
.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-6); }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.ob-news-item:last-child { border-bottom: none !important; }

/* scroll reveal */
.reveal { opacity: 1; transform: none; }
.reveal.in { animation: obFadeUp .6s var(--ease-out); }
@keyframes obFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal.in { animation: none; } }

/* safety / local — sub-business nav + service grid */
.svc-nav { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.svc-nav a {
  font-size: var(--text-sm); font-weight: 700; color: var(--text-body);
  border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  padding: 8px 18px; transition: all var(--duration-fast) var(--ease-out);
}
.svc-nav a:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* kikikanri — lecture themes table */
.lab-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.lab-table th { text-align: left; font-family: var(--font-accent); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--text-xs); color: var(--text-muted); font-weight: 600; padding: 0 0 10px; border-bottom: 2px solid var(--border-default); }
.lab-table td { padding: 12px 0; border-bottom: 1px solid var(--border-subtle); vertical-align: top; color: var(--text-body); }
.lab-table td:first-child { font-weight: 700; color: var(--text-strong); padding-right: var(--space-5); }
.lab-table tr:last-child td { border-bottom: none; }

/* outdoor */
.support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-7); }
.runner-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-8); align-items: center; }
.runner-grid h2 { font-size: 26px !important; }
.runner-grid blockquote { font-size: 23px !important; }

/* kikikanri lab-grid */
.lab-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-8); align-items: start; }

/* profile / news direct-edit overrides (from static HTML) */
#profile .ob-profile-card > div:last-child > div:nth-child(2) > span { font-size: 15px !important; }
#profile .ob-profile-card > div:last-child > p { white-space: pre-line; }
#profile .wrap > .reveal > div > div > p:last-child { white-space: pre-line; }
#contact .ob-contact-callout > p { white-space: pre-line; }
#pillars .wrap > .reveal:first-child p { white-space: pre-line; }

/* photo mood (default 自然 = no filter) */
[data-photo="鮮やか"] img:not([alt="ORANGEBEAR"]) { filter: saturate(1.14) contrast(1.05); }
[data-photo="静か"] img:not([alt="ORANGEBEAR"]) { filter: saturate(0.7) brightness(1.03); }
[data-photo] img { transition: filter var(--duration) var(--ease-out); }

/* responsive */
.ob-contact-callout { row-gap: var(--space-5); }
@media (max-width: 760px) {
  .ob-contact-callout { grid-template-columns: 1fr !important; gap: var(--space-5) !important; }
  .ob-contact-callout .ob-contact-arrow { justify-self: start !important; }
}
@media (max-width: 1080px) { .theme-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 860px) {
  .ob-nav { display: none !important; }
  .ob-menu-btn { display: block !important; }
  /* mobile dropdown when toggled open */
  .ob-nav.ob-nav-open {
    display: flex !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-3) !important;
    background: var(--surface-dark);
    padding: var(--space-4) var(--gutter);
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .ob-nav.ob-nav-open a { color: var(--ob-off-white) !important; }
  .pillars-grid, .works-grid { grid-template-columns: 1fr; }
  .support-grid { grid-template-columns: 1fr !important; }
  .runner-grid { grid-template-columns: 1fr !important; gap: var(--space-5) !important; }
  .svc-grid { grid-template-columns: 1fr !important; gap: var(--space-5) !important; }
  .svc-grid > div:nth-child(1) { order: -1; }
  /* ZIPセクションはDOMがテキスト→画像の順のため、スマホでもサムネを先頭に */
  #zero .svc-grid > div:nth-child(2) { order: -2; }
  .lab-grid { grid-template-columns: 1fr !important; gap: var(--space-6) !important; }
  .ob-profile-card { grid-template-columns: 1fr !important; gap: var(--space-5) !important; }
  .ob-profile-card > div:first-child { max-width: none; width: 100%; }
  .ob-profile-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .ob-stats-row { grid-template-columns: repeat(2, 1fr) !important; }
  .ob-footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) { .theme-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 520px) {
  .ob-footer-grid { grid-template-columns: 1fr !important; }
  .theme-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 420px) { .theme-grid { grid-template-columns: 1fr !important; } }

/* local flow-band responsive (svc-grid first child order) */
@media (max-width: 860px) {
  .svc-grid.reverse > div:first-child { order: -1; }
}

/* お知らせ：スマホは2段（1段目=日付＋バッジ＋矢印／2段目=タイトル全幅） */
@media (max-width: 600px) {
  .ob-news-item { flex-wrap: wrap; row-gap: 8px; }
  .ob-news-title { flex: 1 1 100% !important; order: 5; }
  .ob-news-arrow { margin-left: auto; }
}

/* ============ グロナビ ドロップダウン（3階層） ============ */
.ob-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--space-5); }
.ob-menu a { text-decoration: none; }
.ob-menu > .ob-item > a {
  font-size: var(--text-sm); font-weight: 700; color: var(--ob-nav-color, var(--text-strong));
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
}
.ob-item { position: relative; }
.ob-caret { display: inline-flex; align-items: center; opacity: 0.8; transition: transform var(--duration) var(--ease-out); }
.ob-has-children:hover > a .ob-caret { transform: rotate(180deg); }
.ob-ext { display: inline-flex; align-items: center; opacity: 0.75; }

.ob-sub {
  list-style: none; margin: 0; padding: 6px; min-width: 220px; position: absolute;
  background: var(--ob-orange-100); border: 1px solid var(--ob-orange-200);
  border-radius: 0; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
  transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), visibility 0s linear var(--duration);
  z-index: 60;
}
.ob-sub-1 { top: 100%; left: 0; margin-top: 10px; }
.ob-sub-1::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.ob-sub-2 { top: -7px; left: 100%; margin-left: 8px; background: var(--ob-orange-100); }
.ob-sub-2::before { content: ""; position: absolute; top: 0; bottom: 0; left: -8px; width: 8px; }
.ob-has-children:hover > .ob-sub,
.ob-has-children:focus-within > .ob-sub {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}
.ob-sub .ob-item > a {
  display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 0;
  font-size: var(--text-sm); font-weight: 600; color: var(--text-strong); white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.ob-sub .ob-item > a:hover { background: var(--color-primary); color: var(--color-on-primary); }
.ob-sub .ob-has-children > a::after { content: "\203A"; margin-left: auto; padding-left: 14px; opacity: 0.7; font-weight: 700; }

/* モバイル：ドロップダウンは常時展開してインデント表示 */
@media (max-width: 860px) {
  .ob-nav.ob-nav-open .ob-menu { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
  .ob-nav.ob-nav-open .ob-item { width: 100%; }
  .ob-nav.ob-nav-open .ob-sub {
    position: static; opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    background: transparent; border: none; box-shadow: none; padding: 0 0 4px 16px; min-width: 0; margin: 0;
  }
  .ob-nav.ob-nav-open .ob-sub::before, .ob-nav.ob-nav-open .ob-caret { display: none; }
  .ob-nav.ob-nav-open .ob-sub .ob-item > a:hover { background: rgba(255, 255, 255, 0.08); color: var(--ob-off-white); }
  .ob-nav.ob-nav-open .ob-sub .ob-has-children > a::after { content: ""; }
}
