/* Header geometry, colors and navigation copied from the published Ethos home page. */
.column-site{padding-top:68px}
.column-site .header{--ethos-pink:#E85B81;--ethos-pink-hover:#D14A6F;--white:#fff;--black:#000;--gray:#787878;--border:#E0E0E0;--peach-light:#FFF5F2;--max-w:1200px;font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;line-height:1.6;color:#000}
.column-site .header *{box-sizing:border-box}
.column-site .header ul{padding:0;margin:0;list-style:none}
.column-site .header a{text-decoration:none}
.column-site .header img{max-width:100%;height:auto}
    .header {
      position:fixed; top:0; left:0; right:0;
      height:68px; padding:0 40px; z-index:100;
      display:flex; align-items:center;
      background:var(--white);
      box-shadow:0 1px 6px rgba(0,0,0,0.06);
    }
    .header__layout { display:flex; align-items:center; width:100%; max-width:var(--max-w); margin:0 auto; }
    .header__logo { flex-shrink:0; margin-right:24px; display:flex; align-items:center; gap:8px; }
    .header__logo-img {
      height:36px; width:auto; display:block;
    }

    .header__nav { display:flex; align-items:center; flex:1; height:68px; }
    .header__nav-list { display:flex; align-items:center; white-space:nowrap; }
    .header__nav-link {
      display:flex; align-items:center; height:68px; padding:0 14px;
      font-size:13px; font-weight:600;
      letter-spacing:0.5px; color:var(--black); transition:opacity 0.2s;
    }
    .header__nav-link:hover { opacity:0.5; }

    /* Course dropdown */
    .header__dropdown { position:relative; }
    .header__dropdown-menu {
      position:absolute; top:100%; left:50%; transform:translateX(-50%);
      background:var(--white); box-shadow:0 4px 20px rgba(0,0,0,0.1);
      min-width:180px; padding:8px 0;
      opacity:0; visibility:hidden;
      transition:opacity 0.2s, visibility 0.2s;
    }
    .header__dropdown:hover .header__dropdown-menu {
      opacity:1; visibility:visible;
    }
    .header__dropdown-link {
      display:block; padding:10px 20px;
      font-size:12px; font-weight:600; letter-spacing:0.3px;
      color:var(--black); transition:background 0.15s;
    }
    .header__dropdown-link:hover { background:var(--peach-light); }
    .header__dropdown-link small {
      display:block; font-size:10px; font-weight:400; color:var(--gray);
      margin-top:2px;
    }

    .header__cta {
      flex-shrink:0; margin-left:auto;
      font-size:12px; font-weight:700; color:var(--white);
      background:var(--ethos-pink); padding:8px 20px;
      border:none; transition:background 0.2s;
    }
    .header__cta:hover { background:var(--ethos-pink-hover); }

    .header__hamburger {
      display:none; width:44px; height:44px;
      align-items:center; justify-content:center; margin-left:auto;
      color:var(--ethos-pink);
      background:var(--white);
      border:1.5px solid var(--ethos-pink);
      border-radius:50%;
      padding:0;
      position:relative;
      transition:background 0.25s, border-color 0.25s, color 0.25s, transform 0.35s cubic-bezier(0.09, 0.34, 0.63, 1);
    }
    .header__hamburger:hover,
    .header__hamburger.is-open {
      background:var(--ethos-pink);
      border-color:var(--ethos-pink);
      color:var(--white);
    }
    .header__hamburger.is-open { transform:rotate(90deg); }
    .header__hamburger-lines {
      width:20px; height:14px;
      display:flex; flex-direction:column; justify-content:space-between;
      position:relative;
    }
    .header__hamburger-line {
      width:100%; height:1.8px; border-radius:2px;
      background:currentColor;
      transition:transform 0.35s cubic-bezier(0.09, 0.34, 0.63, 1),
                 opacity 0.25s ease, background 0.2s ease;
      transform-origin:center;
    }
    .header__hamburger.is-open .header__hamburger-line:nth-child(1) {
      transform:translateY(6px) rotate(45deg);
    }
    .header__hamburger.is-open .header__hamburger-line:nth-child(2) {
      opacity:0;
      transform:scaleX(0.2);
    }
    .header__hamburger.is-open .header__hamburger-line:nth-child(3) {
      transform:translateY(-6px) rotate(-45deg);
    }
    .mobile-menu {
      display:none;
      position:fixed; top:68px; left:0; right:0; z-index:99;
      padding:18px 20px 24px;
      background:rgba(255,255,255,0.98);
      border-top:1px solid var(--border);
      box-shadow:0 12px 30px rgba(0,0,0,0.12);
      opacity:0; visibility:hidden; pointer-events:none;
      transform:translateY(-10px);
      transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    }
    .mobile-menu.is-open {
      opacity:1; visibility:visible; pointer-events:auto;
      transform:translateY(0);
    }
    .mobile-menu__list { display:grid; gap:2px; }
    .mobile-menu__link {
      display:flex; align-items:center; justify-content:space-between;
      min-height:46px; padding:0 4px;
      font-size:15px; font-weight:700; border-bottom:1px solid #f0ece9;
    }
    .mobile-menu__link::after {
      content:""; width:7px; height:7px;
      border-top:2px solid currentColor; border-right:2px solid currentColor;
      transform:rotate(45deg); opacity:0.35;
    }
    .mobile-menu__cta {
      display:flex; align-items:center; justify-content:center;
      min-height:48px; margin-top:14px; border-radius:999px;
      background:var(--ethos-pink); color:var(--white);
      font-size:15px; font-weight:800;
    }


.column-site .header .header__logo-img{height:36px;width:auto}
.header__dropdown:focus-within .header__dropdown-menu{opacity:1;visibility:visible}
.column-site .header .header__hamburger:hover{background:var(--ethos-pink)}
.column-site .mobile-menu{max-height:calc(100dvh - 68px);overflow-y:auto;overscroll-behavior:contain}
.column-site .article-toc{top:92px}
.column-site .article-body #body-text>h2{scroll-margin-top:90px}
@media(max-width:1024px){.header__nav{display:none}.header__hamburger{display:flex}.mobile-menu{display:block}.header__cta{display:none}}
@media(max-width:768px){.column-site{padding-top:56px}.header{height:56px;padding:0 16px}.mobile-menu{top:56px}.header__nav{height:56px}.column-site .header .header__logo-img{height:30px}.column-site .mobile-menu{max-height:calc(100dvh - 56px)}.column-site .article-toc{top:76px}.column-site .article-body #body-text>h2{scroll-margin-top:76px}}
@media(prefers-reduced-motion:reduce){.header *{transition:none!important}}