@charset "UTF-8";

/* ============================================================
   PC Mega Menu
   ・1024px 以上でのみ有効
   ・SP メニューには影響しない
   ・SWELL 親テーマは一切編集しない
============================================================ */


/* ============================================================
   Fix Header — positioning context 確保
   .l-header__inner は SWELL が position: relative を付与済み
   .l-fixHeader__inner には未設定のため子テーマで追加
============================================================ */
.l-fixHeader__inner {
  position: relative;
}


/* ============================================================
   Mega Menu — 1024px 以上
============================================================ */
@media (min-width: 1024px) {

  /* ----------------------------------------------------------
     li の position を static にして
     .l-header__inner / .l-fixHeader__inner を基準に配置
  ---------------------------------------------------------- */
  .c-gnav > .menu-item-has-children {
    position: static;
  }


  /* ----------------------------------------------------------
     メガメニューパネル
     left: 50% + translateX(-50%) でビューポート幅いっぱいに展開
     padding-inline の max() でコンテンツを container 幅内に収める
  ---------------------------------------------------------- */
  .c-gnav > .menu-item-has-children > .sub-menu {
    background: #fff;
    border-top: 0.2rem solid var(--color-blue, #2980b9);
    box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.08);
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    left: 50%;
    list-style: none;
    margin: 0;
    opacity: 0;
    padding: 2.4rem max(2rem, calc((100vw - 112rem) / 2));
    position: absolute;
    top: 100%;
    transform: translateX(-50%) translateY(0.8rem);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s 0.25s;
    visibility: hidden;
    width: 100vw;
    z-index: 200;
  }


  /* ----------------------------------------------------------
     ホバー / フォーカスで表示
  ---------------------------------------------------------- */
  .c-gnav > .menu-item-has-children:hover > .sub-menu,
  .c-gnav > .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
    visibility: visible;
  }


  /* ----------------------------------------------------------
     サブアイテム リンク
  ---------------------------------------------------------- */
  .c-gnav > .menu-item-has-children > .sub-menu > .menu-item > a {
    align-items: center;
    border-radius: 0.6rem;
    color: var(--color-text, #333);
    display: flex;
    font-size: 1.6rem;
    font-weight: 500;
    justify-content: space-between;
    padding: 1.2rem 1.6rem;
    text-align: left;
    text-decoration: none;
    transition: background-color 0.15s ease;
  }

  .c-gnav > .menu-item-has-children > .sub-menu > .menu-item > a:hover {
    background-color: var(--color-bg-gray, #F4F7F9);
  }

  /* SWELL の .ttl span 後に矢印を追加 */
  .c-gnav > .menu-item-has-children > .sub-menu > .menu-item > a .ttl::after {
    color: var(--color-blue, #2980b9);
    content: "\2192";
    display: inline-block;
    font-size: 1.1rem;
    margin-left: 0.4rem;
    opacity: 0.7;
  }


  /* ----------------------------------------------------------
     現在ページ / 親ページのハイライト
  ---------------------------------------------------------- */
  .c-gnav > .menu-item-has-children > .sub-menu > .current-menu-item > a,
  .c-gnav > .menu-item-has-children > .sub-menu > .current-page-ancestor > a,
  .c-gnav > .menu-item-has-children > .sub-menu > .current-menu-ancestor > a {
    background-color: var(--color-bg-gray, #F4F7F9);
    color: var(--color-blue, #2980b9);
    font-weight: 700;
  }
}


/* ============================================================
   最新投稿パネル（works / column）
   .has-mega-latest li のホバー / フォーカスで表示
============================================================ */

/* モバイル：SP メニューに影響させない */
.c-mega-latest {
  display: none;
}


@media (min-width: 1024px) {

  /* ----------------------------------------------------------
     has-mega-latest li は position:static
     （WP menu children の有無にかかわらず l-header__inner 基準で配置）
  ---------------------------------------------------------- */
  .c-gnav > .has-mega-latest {
    position: static;
  }

  /* WP menu に children がある場合は sub-menu を隠して latest パネル優先 */
  .c-gnav > .has-mega-latest > .sub-menu {
    display: none !important;
  }


  /* ----------------------------------------------------------
     パネル本体：.sub-menu と同じ配置 / アニメーション
  ---------------------------------------------------------- */
  .c-mega-latest {
    background: #fff;
    border-top: 0.2rem solid var(--color-blue, #2980b9);
    box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.08);
    display: block;
    left: 50%;
    opacity: 0;
    padding: 2.4rem max(2rem, calc((100vw - 112rem) / 2));
    position: absolute;
    top: 100%;
    transform: translateX(-50%) translateY(0.8rem);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s 0.25s;
    visibility: hidden;
    width: 100vw;
    z-index: 200;
  }

  .c-gnav > .has-mega-latest:hover > .c-mega-latest,
  .c-gnav > .has-mega-latest:focus-within > .c-mega-latest {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
    visibility: visible;
  }


  /* ----------------------------------------------------------
     ラベル
  ---------------------------------------------------------- */
  .c-mega-latest__label {
    color: var(--color-blue, #2980b9);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 1.6rem;
    text-transform: uppercase;
  }


  /* ----------------------------------------------------------
     投稿グリッド（最大5列）
  ---------------------------------------------------------- */
  .c-mega-latest__list {
    display: grid;
    gap: 1.6rem;
    grid-template-columns: repeat(5, 1fr);
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
  }


  /* ----------------------------------------------------------
     投稿カードリンク
  ---------------------------------------------------------- */
  .c-mega-latest__link {
    border-radius: 0.6rem;
    color: var(--color-text, #333);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0.8rem;
    text-decoration: none;
    transition: background-color 0.15s ease;
  }

  .c-mega-latest__link:hover {
    background-color: var(--color-bg-gray, #F4F7F9);
  }


  /* ----------------------------------------------------------
     サムネイル
  ---------------------------------------------------------- */
  .c-mega-latest__thumb {
    aspect-ratio: 16 / 9;
    border-radius: 0.4rem;
    display: block;
    overflow: hidden;
    width: 100%;
  }

  .c-mega-latest__thumb img {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .c-mega-latest__thumb-placeholder {
    background: var(--color-bg-gray, #F4F7F9);
    display: block;
    height: 100%;
    width: 100%;
  }


  /* ----------------------------------------------------------
     ボディ（日付 + タイトル）
  ---------------------------------------------------------- */
  .c-mega-latest__body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  .c-mega-latest__date {
    color: var(--color-text-sub, #888);
    font-size: 1.1rem;
  }

  .c-mega-latest__title {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    font-size: 1.3rem;
    font-weight: 500;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }


  /* ----------------------------------------------------------
     投稿なしメッセージ
  ---------------------------------------------------------- */
  .c-mega-latest__empty {
    color: var(--color-text-sub, #888);
    font-size: 1.3rem;
    margin-bottom: 1.6rem;
  }


  /* ----------------------------------------------------------
     フッター：一覧を見るボタン
  ---------------------------------------------------------- */
  .c-mega-latest__footer {
    display: flex;
    justify-content: flex-end;
  }

  .c-mega-latest__button {
    align-items: center;
    border: 0.1rem solid var(--color-border, #ddd);
    border-radius: 0.4rem;
    color: var(--color-text-sub, #666);
    display: inline-flex;
    font-size: 1.3rem;
    gap: 0.4rem;
    padding: 0.6rem 1.4rem;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
  }

  .c-mega-latest .c-mega-latest__button::after {
    background: none;
    color: var(--color-blue, #2980b9);
    content: "\2192";
    display: inline-block;
    flex-shrink: 0;
    font-size: 1.1rem;
    height: auto;
    line-height: 1;
    position: static;
    transform: none;
    width: auto;
  }

  .c-mega-latest__button:hover {
    border-color: var(--color-blue, #2980b9);
    color: var(--color-blue, #2980b9);
  }
}