/* =================================================
   H.O.D TOP PAGE – CLEAN (KEEP BEHAVIOR)
   ================================================= */

/* ---------- Base ---------- */
.hod-top-body { margin: 0; }
.hod-top, .hod-top * { box-sizing: border-box; }

.hod-top{
  min-height: 100svh;
  position: relative;
  overflow: visible; /* allow overflow for expanded images */
  color: #fff;
  font-family: ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* ---------- Background ---------- */
.hod-bg{
  position: absolute;
  inset: 0;
  background: #071430;
  z-index: 0;
}

/* ---------- Main ---------- */
.hod-hero{
  position: relative;
  z-index: 10;
  min-height: 100svh;
  display: grid;
  align-items: center;
}
.hod-hero__inner{
  width: min(1100px, calc(100vw - 80px));
  margin: 0 auto;
}

/* =================================================
   Strip (images)
   ================================================= */
.hod-stripwrap{
  position: relative;
  width: min(1200px, 100%);
  overflow: visible;
}

/* horizontal strip */
.hod-strip{
  display: flex;
  align-items: stretch;
  overflow: visible;
  position: relative;
  z-index: 1;
height:130px; /* default “bigger strip” */
}

/* label */
.hod-striplabel{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  font-size: clamp(44px, 6vw, 92px);
  font-weight: 700;
  letter-spacing: .10em;
  line-height: 1;
  color:#071430;
  text-shadow: 0 10px 30px rgba(0,0,0,.28);
  pointer-events: none;
}

/* tile */
.hod-tile{
  position: relative;
  flex: 1 1 0;
  height: 130px;
  overflow: hidden; /* masked by default */
  transition: flex .32s ease;
  z-index: 1;

  /* remove focus outlines etc */
  outline: none;
  border: none;
  box-shadow: none;
}

/* image (centered) */
.hod-tile img{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  /* default bigger look */
  transform: translate(-50%, -50%) scale(1.18);
  transition:
    height .32s cubic-bezier(.2,.7,.2,1),
    transform .32s cubic-bezier(.2,.7,.2,1);
}

/* white shade */
.hod-tile__fade{
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.42);
  transition: opacity .32s ease;
  pointer-events: none;
}

/* ---------- PC hover behavior (final / single source of truth) ---------- */
@media (min-width: 769px){
  .hod-tile:hover{
    flex: 3.2 1 0;     /* ← 横幅の伸びもUP（任意） */
    overflow: visible;
    z-index: 10;
  }

  .hod-tile:hover img{
    height: 300%;       /* ← 220% → 300% に拡大 */
    transform: translate(-50%, -60%); /* 位置を少しだけ上へ */
  }

  .hod-tile:hover .hod-tile__fade{
    opacity: 0;
  }
}

/* support SP tap expansion (JS adds .is-active) */
@media (max-width: 768px){
  .hod-tile.is-active{
    overflow: visible;
    z-index: 10;
    flex: 2.2 1 0;
  }
  .hod-tile.is-active img{
    height: 220%;
    transform: translate(-50%, -56%);
  }
  .hod-tile.is-active .hod-tile__fade{
    opacity: 0;
  }
}

/* ---------- Title ---------- */
.hod-title{
  margin-top: 18px;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.12;
  position: relative;
  z-index: 30; /* keep above expanded images */
  text-shadow: 0 2px 18px rgba(0,0,0,.22);
letter-spacing: 0.03em;
font-weight: 400;
}

/* ---------- Footer ---------- */
.hod-footer{
  position: fixed;
  right: 18px;
  bottom: 16px;
  z-index: 40;
  display: grid;
  gap: 10px;
  justify-items: end;
}
.hod-social{
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.hod-social__link{
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.92);
  text-decoration: none;
}
.hod-social__link:hover{ color:#fff; }
.hod-copy{
  font-size: 11px;
  opacity: .75;
}

/* =================================================
   Responsive (SP)
   ================================================= */
@media (max-width: 768px){
  .hod-hero__inner{
    width: min(560px, calc(100vw - 32px));
  }

  /* SP keeps horizontal like PC */
  .hod-strip{
    height: 92px;
  }
  .hod-tile{
    height: 92px;
  }

  /* show only 5 tiles */
  .hod-tile:nth-child(n+6){
    display: none;
  }

  .hod-striplabel{
        top: 35px;
        transform: none;
        font-size: 45px;
        font-weight: bold;
    }

  .hod-title{
    font-size: 18px;
  }
}

/* =================================================
   Loader
   ================================================= */
.hod-loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #ffffff;
  display: grid;
  place-items: center;
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease, visibility .45s ease;
}
.hod-loader.is-hide{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.hod-loader__inner{
  display: grid;
  justify-items: center;
  gap: 12px;
}
.hod-loader__logo{
  position: relative;
  width: 84px;
  height: 84px;
}
.hod-loader__circle{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: hodSpin 2.5s linear infinite;
  transform-origin: 50% 50%;
}
.hod-loader__mark{
  position: absolute;
  inset: 0;
  margin: auto;
  width: 44px;
  height: 44px;
}
.hod-loader__text{
  width: 210px;
  height: auto;
  display: block;
}
@keyframes hodSpin{
  from{ transform: rotate(0deg); }
  to{   transform: rotate(360deg); }
}
html.is-hod-loading,
html.is-hod-loading body{
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce){
  .hod-loader__circle{ animation: none; }
}

/* =================================================
   PC layout tweaks (left align)
   ================================================= */
@media (min-width: 769px){
  .hod-hero__inner{
    margin-left: 8vw;
    margin-right: auto;
  }
  .hod-title{
    text-align: left;
  }
}


/* =========================================
   TOP ONLY : Header Visual Override (PC)
========================================= */
@media (min-width: 769px){
  /* TOPだけ：PC横ナビを消す */
  body.hod-top-body .hod-header__nav{ display: none !important; }

  /* TOPだけ：PCでもバーガーを出す */
  body.hod-top-body .hod-burger{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 18px;
    right: 18px;
    width: 56px;
    height: 56px;
    z-index: 201;
    color: #fff;
  }

  /* TOPだけ：ヘッダー帯を消して添付風に */
  body.hod-top-body .hod-header{
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
    height: auto;
    padding: 0;
    z-index: 200;
    pointer-events: none;
  }
  body.hod-top-body .hod-header > *{ pointer-events: auto; }

  /* TOPだけ：ロゴも左上固定＆大きめ */
  body.hod-top-body .hod-header__logo{
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 201;
  }
  body.hod-top-body .hod-header__logo img{
    width: 62px;
    height: 62px;
  }

  /* TOPだけ：ドロワーはPCでも使う（保険） */
  body.hod-top-body .hod-drawer{ display: block !important; }
}
/* =========================================
   TOP (PC): 2-line burger (top longer)
========================================= */
@media (min-width: 769px){

  /* 真ん中の線を消す */
  body.hod-top-body .hod-burger__lines{
    background: transparent;
  }

  /* 2本線のベース（アニメーションも付与） */
  body.hod-top-body .hod-burger__lines::before,
  body.hod-top-body .hod-burger__lines::after{
    transition: opacity .18s ease, width .18s ease;
  }

  /* 上の線（長い） */
  body.hod-top-body .hod-burger__lines::before{
    top: -6px;
    width: 30px;     /* ← 長め */
    left: 0;
  }

  /* 下の線（短い） */
  body.hod-top-body .hod-burger__lines::after{
    top: 6px;
    width: 20px;     /* ← 短め */
    left: 10px;      /* 右寄せでデザイン感 */
  }

  /* ドロワーOPEN時：2本線を消す（×と重ならない） */
  body.hod-top-body .hod-burger[aria-expanded="true"] .hod-burger__lines::before,
  body.hod-top-body .hod-burger[aria-expanded="true"] .hod-burger__lines::after{
    opacity: 0;
  }
}