/* ============================================================
   _layout.css — 共通レイアウト本体 (テーマ非依存)
   topbar / drawer / footer / page / sidebar / toast
   テーマ差分は themes/{theme}.css の :root + 末尾上書きで吸収
   出典: cms-design A-default _layout.css の共通本体部分
   ============================================================ */

  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);}
  body{
    font-family:var(--font-sans);
    font-weight:400;
    /* テーマ別の本文サイズ・行間・字間に追従（themes/{theme}.css の :root で定義） */
    font-size:var(--font-size-base, 17px);
    line-height:var(--line-height, 1.95);
    letter-spacing:var(--letter-spacing, 0.02em);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  a{color:inherit; text-underline-offset:3px;}
  img{max-width:100%; display:block;}
  ::selection{background:var(--ink); color:#fff;}

  /* ---- top bar ---- */
  .topbar{
    position:sticky; top:0; z-index:30;
    background:var(--c-header-bg, rgba(255,255,255,0.92));
    backdrop-filter:saturate(140%) blur(10px);
    -webkit-backdrop-filter:saturate(140%) blur(10px);
    border-bottom:1px solid var(--line);
  }
  .topbar-inner{
    max-width:1180px; margin:0 auto;
    padding:14px 32px;
    display:flex; flex-direction:row; align-items:center; justify-content:space-between;
    position:relative;
    min-height:60px;
  }
  .topbar-inner .brand{margin:0;}
  .hamburger{
    width:40px; height:40px; border:none; background:transparent;
    cursor:pointer; padding:0;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .hamburger span{
    display:block; width:22px; height:1.6px; background:var(--c-header-text, var(--ink));
    position:relative;
  }
  .hamburger span::before, .hamburger span::after{
    content:""; position:absolute; left:0; width:22px; height:1.6px; background:var(--c-header-text, var(--ink));
  }
  .hamburger span::before{top:-7px;}
  .hamburger span::after{top:7px;}
  @media (max-width:760px){
    /* スマホヘッダーの全体高さを 54px に揃える（border-bottom 1px 込みで約 55px）
       内訳: padding 上下 9px + 中身（ハンバーガー/ロゴ）36px + padding 9px = 54px
       テーマ側 themes/*.css は .brand-text に font-size:!important を当てているが、
       _layout.css の方が後に読み込まれるため、このメディアクエリ内 !important で勝つ */
    .topbar-inner{
      padding:9px 22px;
      min-height:36px;
    }
    .hamburger{
      width:36px; height:36px;
    }
    .hamburger span,
    .hamburger span::before,
    .hamburger span::after{
      width:20px;
    }
    /* ロゴ（アイコン + 文字） — ヘッダー36px枠に収まるように縮小 */
    .brand{gap:8px;}
    .brand-mark{
      width:26px !important; height:26px !important;
      font-size:11px !important;
    }
    .brand-text{
      font-size:16px !important;
      letter-spacing:0.1em !important;
    }
    /* 画像ロゴ（site_logo_path が設定されている場合） */
    .brand .brand-logo-img{
      max-height:22px;
    }
  }
  .brand{
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:inherit;
  }
  .brand-mark{
    width:30px; height:30px; border-radius:50%;
    background:var(--ink); color:#fff;
    font-style:normal; font-weight:700;
    font-family:var(--font-display);
    font-size:13px; letter-spacing:0;
    display:inline-flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .brand-text{
    font-family:var(--font-display);
    font-weight:700;
    font-size:20px;
    letter-spacing:0.16em;
    line-height:1;
  }
  /* logo image (CMS拡張: site_logo_path がある場合) */
  .brand .brand-logo-img{
    max-height:36px; width:auto; display:block;
  }
  nav.cats{
    display:flex; gap:20px; flex-wrap:nowrap;
    font-size:12px; color:var(--c-header-text, var(--muted)); letter-spacing:0.04em;
    margin-left:auto; margin-right:6px;
  }
  nav.cats a{
    text-decoration:none; padding:4px 0;
    border-bottom:1px solid transparent;
    transition:border-color .15s ease, color .15s ease;
    white-space:nowrap;
  }
  nav.cats a:hover{border-bottom-color:var(--c-header-text, var(--ink)); color:var(--c-header-text, var(--ink));}
  @media (max-width:880px){
    nav.cats{display:none;}
  }
  /* 読了プログレスバー: topbar より前面・画面最上端に固定（CMS 独自・cms-design は sticky top:60px だが topbar に隠れるため変更） */
  .progress{
    position:fixed;
    top:0; left:0; right:0;
    height:2px;
    background:transparent;
    z-index:31; /* topbar(30) より上 */
    pointer-events:none;
  }
  .progress > i{
    display:block; height:100%; width:0%;
    background:var(--accent);
    transition:width .12s linear;
  }

  /* ---- mobile drawer ---- */
  .drawer-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,0.45);
    opacity:0; pointer-events:none; transition:opacity .25s ease;
    z-index:40;
  }
  .drawer-overlay.open{opacity:1; pointer-events:auto;}
  .drawer{
    position:fixed; top:0; right:0;
    width:min(360px, 88vw); height:100dvh;
    background:#fff; z-index:50;
    transform:translateX(100%); transition:transform .28s ease;
    display:flex; flex-direction:column;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .drawer-head, .drawer-nav, .drawer-cta{
    flex-shrink:0;
  }
  .drawer.open{transform:translateX(0);}
  .drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 22px;
    border-bottom:1px solid var(--line);
  }
  .drawer-head .brand-text{font-size:18px;}
  .drawer-head .brand-mark{width:26px; height:26px; font-size:12px;}
  .drawer-close{
    width:36px; height:36px; border:none; background:transparent;
    cursor:pointer; position:relative;
  }
  .drawer-close::before, .drawer-close::after{
    content:""; position:absolute; left:50%; top:50%;
    width:18px; height:1.6px; background:var(--ink);
    transform-origin:center;
  }
  .drawer-close::before{transform:translate(-50%,-50%) rotate(45deg);}
  .drawer-close::after{transform:translate(-50%,-50%) rotate(-45deg);}
  .drawer-nav{
    list-style:none; padding:8px 0; margin:0;
  }
  .drawer-nav li a{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 22px;
    font-size:14.5px; font-weight:500; color:var(--ink);
    text-decoration:none;
    border-bottom:1px solid var(--line);
  }
  .drawer-nav li a::after{
    content:""; width:7px; height:7px;
    border-right:1.5px solid var(--muted-2);
    border-top:1.5px solid var(--muted-2);
    transform:rotate(45deg);
  }
  .drawer-cta{
    margin:24px 22px 32px;
    border:1px solid var(--line); border-radius:var(--radius-lg);
    overflow:hidden;
  }


  /* ---- footer (dark) ----
     bg / text は管理画面（color.css の --c-footer-bg / --c-footer-text）で上書き可能。
     空欄時は本ファイルのフォールバック値が効き、さらに各テーマCSSが
     footer.site を !important で上書きしている場合はテーマ既定が優先される。 */
  footer.site{
    margin-top:0;
    background: var(--c-footer-bg, #111111);
    color: var(--c-footer-text, #FAFAF8);
    padding:72px 32px 36px;
  }
  footer.site .inner{
    max-width:1180px; margin:0 auto;
  }
  footer.site .top{
    display:grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap:64px;
    padding-bottom:48px;
    border-bottom:1px solid #2A2A2A;
  }
  @media (max-width:760px){
    footer.site .top{grid-template-columns:1fr; gap:32px;}
    footer.site{padding:48px 22px 28px;}
  }
  footer.site .brand{
    margin-bottom:14px;
  }
  footer.site .brand-text{
    font-size:18px; font-weight:700; letter-spacing:0.04em;
    color:#FFFFFF;
  }
  footer.site .brand-mark{
    background:#FFFFFF; color:#111;
  }
  footer.site .tagline{
    font-size:12px; color:#9A9A95; line-height:1.85;
    max-width:280px;
  }
  footer.site .col-h{
    font-size:11px; letter-spacing:0.16em; color:#7A7A75;
    margin-bottom:14px; text-transform:uppercase;
  }
  footer.site .col ul{list-style:none; padding:0; margin:0;}
  footer.site .col li{margin-bottom:10px;}
  footer.site .col a{
    font-size:13px; color:#D0D0CB; text-decoration:none;
    transition:color .15s ease;
  }
  footer.site .col a:hover{color:#FFFFFF;}
  footer.site .bottom{
    display:flex; justify-content:space-between; align-items:center;
    padding-top:30px; flex-wrap:wrap; gap:12px;
  }
  footer.site .copy{
    font-size:11px; color:#6A6A65; letter-spacing:0.08em;
  }
  footer.site .social{display:flex; gap:8px;}
  footer.site .social a{
    width:34px; height:34px; border-radius:50%;
    border:1px solid #2A2A2A;
    display:inline-flex; align-items:center; justify-content:center;
    color:#D0D0CB; transition:all .15s ease;
  }
  footer.site .social a:hover{border-color:#FFFFFF; color:#FFFFFF;}

  /* ---- toast ---- */
  .toast{
    position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(20px);
    background:var(--ink); color:#fff;
    padding:10px 18px; border-radius:999px;
    font-size:12px; letter-spacing:0.06em;
    opacity:0; transition:all .25s ease;
    pointer-events:none; z-index:50;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  /* ---- page layout (main + sidebar) — 全ページ共通 ---- */
  .page{
    max-width:1180px; margin:0 auto;
    padding:30px 32px 80px;
    display:grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap:72px;
    align-items:flex-start;
  }
  @media (max-width:1100px){
    .page{gap:48px; padding:30px 24px 72px;}
  }
  @media (max-width:980px){
    /* スマホでもサイドバーを <main> の下に積み上げて表示する方針（CMS 独自）。
       cms-design A-default のデフォルト挙動（.sidebar{display:none}）から変更。 */
    .page{
      grid-template-columns:1fr;
      gap:48px;
      max-width:var(--max);
      padding:30px 22px 60px;
    }
  }

  /* ---- sidebar — 全ページ共通 ---- */
  .sidebar{
    position:sticky; top:120px;
    display:flex; flex-direction:column; gap:32px;
    font-size:13.5px;
  }
  @media (max-width:980px){
    /* スマホ: sticky を解除し、natural flow で main の下に積む */
    .sidebar{
      position:static;
      top:auto;
    }
  }
  .side-card{
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    overflow:hidden;
    background:#fff;
  }
  .side-cta{
    padding:0;
  }
  .side-cta .banner{
    aspect-ratio: 4 / 3;
    background:
      linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.05) 100%),
      repeating-linear-gradient(135deg,#F1EFE9 0 12px,#EAE7DE 12px 24px);
    position:relative;
    display:flex; align-items:center; justify-content:center;
    color:#7A7975;
    font-family:var(--font-display);
    font-size:11px; letter-spacing:0.14em;
  }
  /* CMS 拡張: ユーザー設定の CTA 画像があれば banner を画像で置き換え */
  .side-cta .banner.has-image{
    background:#fff;
    padding:0;
  }
  .side-cta .banner.has-image img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .side-cta .banner .badge{
    position:absolute; top:10px; left:10px;
    background:var(--ink); color:#fff;
    font-size:10px; padding:4px 8px; border-radius:var(--radius-sm);
    letter-spacing:0.1em;
    z-index:2;
  }
  .side-cta .body{padding:18px 18px 20px;}
  .side-cta .eyebrow{
    font-size:11px; color:var(--muted); letter-spacing:0.12em;
    margin-bottom:6px;
  }
  .side-cta h4{
    margin:0 0 6px; font-size:15px; font-weight:700; line-height:1.55;
  }
  .side-cta p{
    margin:0 0 14px; font-size:12px; color:var(--muted); line-height:1.8;
  }
  .side-cta .side-btn{
    display:flex; align-items:center; justify-content:center; gap:6px;
    width:100%; height:42px;
    background:var(--ink); color:#fff;
    border:none; border-radius:var(--radius-sm);
    font-size:13px; font-weight:500; letter-spacing:0.06em;
    cursor:pointer;
    text-decoration:none;
  }
  .side-cta .side-btn:hover{background:#000;}

  .side-head{
    display:flex; align-items:center; gap:8px;
    padding:14px 16px;
    border-bottom:1px solid var(--line);
    font-size:13px; font-weight:700; letter-spacing:0.04em;
  }
  .side-head::before{
    content:""; width:3px; height:14px; background:var(--ink);
  }
  .side-list{list-style:none; margin:0; padding:0;}
  .side-list li{
    display:grid;
    grid-template-columns:30px 64px 1fr;
    gap:10px;
    padding:12px 16px;
    border-bottom:1px solid var(--line);
    align-items:center;
  }
  .side-list li:last-child{border-bottom:none;}
  .side-list .rank-num{
    display:inline-block;
    width:24px; height:24px; border-radius:50%;
    background:var(--soft);
    line-height:24px; text-align:center;
    font-size:12px; font-weight:700;
  }
  .side-list li:nth-child(1) .rank-num{background:var(--ink); color:#fff;}
  .side-list li:nth-child(2) .rank-num{background:#5C5C58; color:#fff;}
  .side-list li:nth-child(3) .rank-num{background:#A0825A; color:#fff;}
  .side-list .thumb{
    width:64px; height:48px; border-radius:3px;
    background:repeating-linear-gradient(135deg,#EDEBE5 0 8px,#E5E3DC 8px 16px);
    overflow:hidden;
  }
  .side-list .thumb img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .side-list .ttl{
    font-size:12.5px; line-height:1.55; color:var(--ink);
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
    font-weight:500;
  }
  .side-list a{
    text-decoration:none; color:inherit;
    display:contents;
  }

/* ============================================================
   .mobile-cta-bar — モバイル下部固定CTA（CMS独自・cms-design テーマ風）
   仕様:
     - $ctaEnabled=1 + $ctaBtnUrl が設定されている時のみ layout.php から出力
     - max-width:1023px で表示 / それ以上では display:none
     - .float-cta（右下固定CTA）と表示位置が重なるため、表示中は float-cta を上にずらす
     - body の bottom padding でコンテンツが隠れないようにする
   ============================================================ */
.mobile-cta-bar {
  display: none;
}

@media (max-width: 1023px) {
  .mobile-cta-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 12px -4px rgba(20, 30, 25, 0.08);
  }

  .mobile-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    padding: 0 16px;
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    box-shadow:
      0 6px 16px -6px rgba(var(--accent-rgb), 0.55),
      inset 0 -2px 0 rgba(0, 0, 0, 0.12);
    transition: transform 0.12s ease;
  }
  .mobile-cta-btn:hover,
  .mobile-cta-btn:active {
    color: #fff;
    transform: translateY(-1px);
  }
  .mobile-cta-btn::after {
    content: "›";
    margin-left: 8px;
    font-size: 18px;
    line-height: 1;
  }

  /* mobile-cta-bar 高さ分の余白を本文に確保（safe-area 含めて約 80px） */
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  /* mobile-cta-bar と重ならないよう float-cta / float-reopen を上にずらす
     （nav-launcher は nav-sheet.css 側で同等の calc(82px + ...) 調整を行う） */
  .float-cta {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }
  .float-reopen {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }
}