/* ヘッダのメガメニュー（2026-11-11 追加） v1.1.0（同日 会社情報を6枚・3列×2段に）
   中身は inc/mega-menu.php、開閉は assets/js/mega-menu.js。
   PC 幅（1101px 以上）: 項目に乗せると、丸いヘッダそのものが下へ伸びて角の丸みが小さくなり、中身が少し遅れて浮き上がる。
   スマホ幅（1100px 以下）: 全画面メニューの各項目の右の＋で、下層をたたんだり開いたりする。 */

:root {
  --mega-ease: cubic-bezier(.3, 1.25, .45, 1);   /* 少し行き過ぎて戻る＝「ニュッ」 */
  --mega-ink: #272E33;
  --mega-sub: #6B7378;
  --mega-line: rgba(39, 46, 51, .1);
  --mega-tile: rgba(242, 245, 245, .85);
}

/* 既存の「メニュー項目の中のリンク全部」に効く指定（文字色・改行しない・字間）を、中身のリンクでは打ち消す */
.c-gnav .c-mega a { white-space: normal; letter-spacing: normal; font-family: "Zen Kaku Gothic New", sans-serif; }

/* ===== PC ===== */
@media screen and (min-width: 1101px) {
  .l-header {
    --hpad: 50px;
    --mega-h: 0px;
    align-items: flex-start;
    overflow: hidden;
    border-radius: 50px;
    height: calc(100px + var(--mega-h));
    transition: height .55s var(--mega-ease), border-radius .45s ease, box-shadow .4s ease, background-color .3s ease;
  }
  .l-header.is-mega {
    border-radius: 36px;
    background-color: rgba(255, 255, 255, .86);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1), 0 28px 60px -16px rgba(39, 46, 51, .28);
  }
  .l-header__head { height: 100px; display: flex; align-items: center; flex-shrink: 0; }
  .c-gnav { height: 100px; }

  /* 中身の置き場はヘッダ全体の幅にする（項目の下ではなく） */
  .c-gnavLink__item.--mega { position: static; }

  /* 開いている項目の下に黄色の線 */
  .c-gnavLink__item > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(-90deg, #FFFF33 0%, #FFCC33 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s ease;
  }
  .c-gnavLink__item.is-open > a::after { transform: scaleX(1); }

  .c-mega__toggle { display: none; }

  .c-mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100px;
    padding: 0 var(--hpad) 36px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity .2s ease, transform .3s ease, visibility 0s linear .3s;
  }
  .c-mega.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: opacity .35s ease .12s, transform .5s var(--mega-ease) .12s, visibility 0s;
  }
  .c-mega__body {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 48px;
    padding-top: 30px;
    border-top: 1px solid var(--mega-line);
  }

  /* 左側 */
  .c-mega__en {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: .75rem;
    letter-spacing: .12em;
    color: var(--mega-sub);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .c-mega__en::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(-90deg, #FFFF33 0%, #FFCC33 100%);
  }
  .c-mega__ttl {
    font-family: "Midashi Go MB31", "Zen Kaku Gothic New", sans-serif;
    font-weight: bold;
    font-size: 1.625rem;
    line-height: 1.3;
    color: var(--mega-ink);
    margin-top: 6px;
  }
  .c-mega__txt {
    font-size: .875rem;
    line-height: 1.8;
    color: var(--mega-sub);
    margin-top: 14px;
  }
  .c-mega__all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 10px 18px 10px 22px;
    border-radius: 9999px;
    background: var(--mega-ink);
    color: #fff;
    font-weight: 700;
    font-size: .8125rem;
    transition: background .2s, gap .2s;
  }
  .c-mega__all .material-symbols-outlined { font-size: 1.125rem; }
  .c-mega__all:hover { background: #484E52; gap: 12px; }
  .c-gnav .c-mega a:hover { color: var(--mega-ink); }
  .c-gnav .c-mega a.c-mega__all { font-size: .8125rem; }
  .c-gnav .c-mega a.c-mega__all,
  .c-gnav .c-mega a.c-mega__all:hover { color: #fff; }
  .c-gnav .c-mega__cats a { font-size: .8125rem; }

  .c-mega__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
  }
  .c-mega__cats a {
    display: block;
    padding: 6px 14px;
    border-radius: 9999px;
    border: 1px solid var(--mega-line);
    background: #fff;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--mega-ink);
    transition: border-color .2s, background .2s;
  }
  .c-mega__cats a:hover { border-color: #FFCC33; background: #FFFBEA; }

  /* 写真つきのカード（お知らせ・共創ストーリー） */
  .c-mega__news { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .c-mega__stories { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .c-mega__card { display: block; color: var(--mega-ink); }
  .c-mega__cardImg {
    display: block;
    aspect-ratio: 3 / 2;
    border-radius: 12px;
    overflow: hidden;
    background: #E6EBEB;
  }
  .c-mega__cardImg img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
  .c-mega__card:hover .c-mega__cardImg img { transform: scale(1.06); }
  .c-mega__cardMeta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    font-family: "Poppins", sans-serif;
    font-size: .6875rem;
    letter-spacing: .04em;
    color: var(--mega-sub);
  }
  .c-mega__chip {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: .6875rem;
    padding: 1px 8px;
    border-radius: 9999px;
    background: #F2F5F5;
    color: var(--mega-ink);
  }
  .c-mega__cardH {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin-top: 6px;
    font-weight: 700;
    font-size: .8125rem;
    line-height: 1.6;
    transition: color .2s;
  }
  .c-mega__stories .c-mega__cardH { font-size: .9375rem; -webkit-line-clamp: 1; }
  .c-mega__cardSub { display: block; margin-top: 2px; font-size: .75rem; color: var(--mega-sub); }
  .c-mega__card:hover .c-mega__cardH { color: #B08600; }

  /* 札（ビジョン・会社情報・採用情報） */
  .c-mega__tiles { display: grid; gap: 14px; }
  .c-mega__tiles.--4 { grid-template-columns: repeat(4, 1fr); }
  .c-mega__tiles.--2 { grid-template-columns: repeat(2, 1fr); }
  /* 会社情報（6枚）は3列×2段。札を低くして、2段でも高くなりすぎないようにする */
  .c-mega__tiles.--3 { grid-template-columns: repeat(3, 1fr); }
  .c-mega__tiles.--3 .c-mega__tile { min-height: 0; flex-direction: row; align-items: center; gap: 14px; padding: 18px 48px 18px 18px; }
  .c-mega__tiles.--3 .c-mega__tile::after { top: 50%; bottom: auto; transform: translateY(-50%); }
  .c-mega__tiles.--3 .c-mega__tile:hover::after { transform: translate(4px, -50%); }
  .c-mega__tile.--ext::after { content: "open_in_new"; }
  .c-mega__tiles.--3 .c-mega__ico { flex-shrink: 0; }
  .c-mega__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    min-height: 150px;
    padding: 22px 22px 46px;
    border-radius: 18px;
    background: var(--mega-tile);
    color: var(--mega-ink);
    transition: background .25s, transform .35s var(--mega-ease), box-shadow .25s;
  }
  .c-mega__tile::after {
    font-family: "Material Symbols Outlined";
    content: "arrow_forward";
    position: absolute;
    right: 18px;
    bottom: 16px;
    font-size: 1.125rem;
    color: var(--mega-sub);
    transition: transform .25s, color .25s;
  }
  .c-mega__tile:hover {
    background: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -12px rgba(39, 46, 51, .3);
  }
  .c-mega__tile:hover::after { transform: translateX(4px); color: var(--mega-ink); }
  .c-mega__num {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 1.75rem;
    line-height: 1;
    background: linear-gradient(-90deg, #F5C400 0%, #E0A800 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .c-mega .c-mega__ico {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(-90deg, #FFFF33 0%, #FFCC33 100%);
    color: var(--mega-ink);
    font-size: 1.375rem;
  }
  .c-mega__tileH { font-weight: 700; font-size: .9375rem; line-height: 1.5; }
  .c-mega__tileTxt { font-size: .8125rem; line-height: 1.7; color: var(--mega-sub); }

  /* 後ろのページを少し暗くする */
  .c-megaVeil {
    position: fixed;
    inset: 0;
    z-index: 5;
    background: rgba(39, 46, 51, .2);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
  }
  body.is-mega-open .c-megaVeil { opacity: 1; }
}

/* 狭い PC 幅は header-glass.css の詰め方に合わせる */
@media screen and (min-width: 1101px) and (max-width: 1500px) {
  .l-header { --hpad: 32px; }
  .c-mega__body { grid-template-columns: 210px 1fr; gap: 32px; }
  .c-mega__news { gap: 14px; }
  .c-mega__stories { gap: 12px; }
}
@media screen and (min-width: 1101px) and (max-width: 1200px) {
  .l-header { --hpad: 28px; }
  .c-mega__body { grid-template-columns: 180px 1fr; gap: 24px; }
  .c-mega__ttl { font-size: 1.375rem; }
  .c-mega__tile { padding: 18px 16px 42px; }
}

/* ===== スマホ・タブレット（全画面メニューの中） ===== */
@media screen and (max-width: 1100px) {
  .c-megaVeil { display: none; }
  .c-gnavLink__item.--mega { position: relative; }
  .c-gnavLink__item.--mega > a { padding-right: 56px; }
  .c-gnavLink__item.--mega > a::after { display: none; }

  .c-mega__toggle {
    position: absolute;
    right: 0;
    top: 8px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
  }
  .c-mega__toggle::before,
  .c-mega__toggle::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform .3s ease;
  }
  .c-mega__toggle::after { transform: rotate(90deg); }
  .c-mega__toggle[aria-expanded="true"] { background: linear-gradient(-90deg, #FFFF33 0%, #FFCC33 100%); }
  .c-mega__toggle[aria-expanded="true"]::before,
  .c-mega__toggle[aria-expanded="true"]::after { background: #272E33; }
  .c-mega__toggle[aria-expanded="true"]::after { transform: rotate(0deg); }

  .c-mega {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s var(--mega-ease);
  }
  .c-mega.is-open { grid-template-rows: 1fr; }
  .c-mega__in { overflow: hidden; min-height: 0; }
  .c-mega__body { padding: 0 0 20px; }

  .c-mega__en, .c-mega__ttl, .c-mega__txt { display: none; }
  .c-mega__lead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
  .c-mega__cats { display: flex; flex-wrap: wrap; gap: 8px; }
  .c-gnav .c-mega a { font-size: .875rem; }
  .c-gnav .c-mega a::after { display: none; }
  .c-gnav .c-mega__cats a,
  .c-gnav .c-mega__all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, .3);
    font-size: .8125rem;
    color: #fff;
  }
  .c-gnav .c-mega__cats a { font-size: .8125rem; }
  .c-gnav .c-mega__all { background: rgba(255, 255, 255, .1); font-size: .8125rem; }
  .c-mega__all .material-symbols-outlined { font-size: 1rem; }

  .c-mega__main { display: flex; flex-direction: column; }
  .c-mega__main > li + li { border-top: 1px solid rgba(255, 255, 255, .1); }
  .c-gnav .c-mega__card,
  .c-gnav .c-mega__tile {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    align-items: center;
    padding: 12px 0;
    color: #fff;
  }
  .c-mega__news .c-mega__cardImg { display: none; }
  .c-gnav .c-mega__news .c-mega__card { grid-template-columns: 1fr; }
  .c-gnav .c-mega__stories .c-mega__card { grid-template-columns: 72px 1fr; grid-template-rows: auto auto; }
  .c-mega__stories .c-mega__cardImg { grid-row: 1 / span 3; width: 72px; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; }
  .c-mega__stories .c-mega__cardImg img { width: 100%; height: 100%; object-fit: cover; }
  .c-mega__stories .c-mega__cardMeta { display: none; }
  .c-mega__cardMeta { display: flex; align-items: center; gap: 8px; font-size: .75rem; color: rgba(255, 255, 255, .7); }
  .c-mega__chip { padding: 0 8px; border-radius: 9999px; background: rgba(255, 255, 255, .12); color: #fff; font-size: .6875rem; }
  .c-mega__cardH { font-size: .875rem; line-height: 1.6; font-weight: 700; }
  .c-mega__news .c-mega__cardH { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 4px; }
  .c-mega__cardSub { font-size: .75rem; color: rgba(255, 255, 255, .7); }
  .c-mega__num { font-family: "Poppins", sans-serif; font-weight: 600; color: #FFCC33; font-size: .875rem; grid-row: 1 / span 2; }
  .c-mega .c-mega__ico { font-size: 1.25rem; color: #FFCC33; grid-row: 1 / span 2; }
  .c-mega__tileH { font-size: .875rem; font-weight: 700; }
  .c-mega__tileTxt { font-size: .75rem; color: rgba(255, 255, 255, .7); grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .l-header, .c-mega, .c-mega.is-open, .c-mega__tile, .c-mega__cardImg img { transition: none !important; }
}