/* =========================================
   home-redesign.css
   ========================================= */

/* ウィンドウスクロールを完全封止（フッターが浮いてくる問題対策） */
html:has(body.hn-index2-page) {
  overflow: hidden;
}
body.hn-index2-page {
  overflow: hidden;
  max-width: 100vw;
}

/* --- セクション遷移カーテン --- */
#hn-curtain {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: #1d2b4b;
  opacity: 0;
  pointer-events: none;
}
#hn-curtain.is-rising {
  opacity: 0;
  pointer-events: auto;
}
#hn-curtain.is-lifting {
  transition: opacity 0.4s ease;
  opacity: 0;
  pointer-events: none;
}

/* スクロールラッパー */
#hn-scroll-wrap {
  height: 100vh;
  overflow-y: scroll;
  scrollbar-width: none;
}
#hn-scroll-wrap::-webkit-scrollbar { display: none; }
.hn-hero {
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.hn-cv2 {
  height: 120vh;
  box-sizing: border-box;
  overflow: hidden;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.hn-contents {
  height: auto;
  box-sizing: border-box;
  overflow: visible;
  margin-top: 100px !important;
  margin-bottom: 150px !important;
}
/* WORKSはコンテンツに合わせて高さを確保 */
.hn-works {
  height: 125vh;
  box-sizing: border-box;
  overflow: hidden;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-top: 50px solid #1d2b4b;
  border-bottom: 50px solid #1d2b4b;
}

/* ===================== SLIDER ===================== */
#hn-slider {
  height: 400vh; /* zone0(100vh) + zone1(100vh) + zone2(100vh) + 100vh分sticky */
  background: #fff;
  border-top: 200px solid #fff;
  border-bottom: 200px solid #fff;
}
.hn-slider__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.hn-slider__inner {
  display: flex;
  height: 100%;
  align-items: stretch;
}

/* 左：テキストパネル */
.hn-slider__text-wrap {
  width: 42%;
  flex-shrink: 0;
  position: relative;
  background: #fff;
}
.hn-slider__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 44vh 70px 60px 90px;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.hn-slider__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.hn-slider__lead-wrap {
  position: absolute;
  top: 18vh;
  left: 90px;
  overflow: hidden;
  padding-bottom: 0.05em;
  z-index: 2;
  pointer-events: none;
}
.hn-slider__lead {
  font-family: var(--hn-serif);
  font-size: clamp(22px, 2.8vw, 42px);
  font-weight: 600;
  line-height: 1.6;
  color: #1d2b4b;
  white-space: nowrap;
  transform: translateY(102%);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
#hn-slider.is-inview .hn-slider__lead {
  transform: translateY(0);
}

/* ワイプダウン用ラッパー */
.hn-slider__count-wrap,
.hn-slider__title-wrap,
.hn-slider__body-wrap { overflow: hidden; }
.hn-slider__title-wrap { margin-bottom: 24px; }
.hn-slider__count,
.hn-slider__title,
.hn-slider__body { transform: translateY(-110%); }

.hn-slider__count {
  font-family: var(--hn-serif);
  font-size: 24px;
  letter-spacing: 0.2em;
  color: #bbb;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.hn-slider__count-cur { color: #1d2b4b; font-weight: 600; }
.hn-slider__count-sep { color: #1d2b4b; letter-spacing: 0; }
.hn-slider__title {
  font-family: var(--hn-serif);
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 600;
  line-height: 1.3;
  color: #1d2b4b;
  margin-bottom: 0;
  padding-left: 40px;
  padding-bottom: 0.12em;
  will-change: transform;
  position: relative;
}
.hn-slider__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1d2b4b;
}
.hn-slider__body {
  font-size: 22px;
  line-height: 1.75;
  color: #555;
  padding-left: 24px;
}
.hn-slider__dots {
  position: absolute;
  bottom: 60px;
  left: 70px;
  display: flex;
  gap: 10px;
}
.hn-slider__dot {
  width: 36px;
  height: 2px;
  background: #ddd;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease;
}
.hn-slider__dot.is-active { background: #1d2b4b; }

/* 右：メイン画像パネル（上下に余白） */
.hn-slider__img-wrap {
  flex: 0 0 auto;
  width: 38vw;
  position: relative;
  margin: 80px 0 40px auto;
  overflow: hidden;
  border-radius: 28px;
}
.hn-slider__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  background: #fff;
  transform: translateY(0);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
  pointer-events: none;
  will-change: transform;
}
#hn-slider.is-inview .hn-slider__img-wrap::after {
  transform: translateY(-101%);
}
.hn-slider__img {
  position: absolute;
  inset: 0;
}
.hn-slider__img:nth-child(1) { z-index: 1; transform: translateY(0); }
.hn-slider__img:nth-child(2) { z-index: 2; transform: translateY(100%); }
.hn-slider__img:nth-child(3) { z-index: 3; transform: translateY(100%); }

/* 右端：サムネナビ */
.hn-slider__thumb-nav {
  width: 56px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 0;
  margin: 0 80px;
}
.hn-slider__thumb {
  width: 100%;
  aspect-ratio: 3 / 4;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.3s ease, clip-path 1s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  clip-path: inset(100% 0 0 0 round 6px);
  background-size: cover;
  background-position: center;
}
.hn-slider__thumb.is-active { opacity: 1; }
#hn-slider.is-inview .hn-slider__thumb:nth-child(1) { clip-path: inset(0% 0 0 0 round 6px); transition-delay: 0.4s; }
#hn-slider.is-inview .hn-slider__thumb:nth-child(2) { clip-path: inset(0% 0 0 0 round 6px); transition-delay: 0.55s; }
#hn-slider.is-inview .hn-slider__thumb:nth-child(3) { clip-path: inset(0% 0 0 0 round 6px); transition-delay: 0.7s; }

/* BUSINESS: sticky×scroll-linked横スクロール */
#hn-business {
  height: 500vh; /* 100vh待機 + カード4枚ぶん（100vh × 4）*/
  overflow: visible;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.hn-business__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 1;
  background: #fff;
  visibility: hidden;
  display: flex;
  flex-direction: column;
}
.hn-business__bg-panels {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hn-business__bg-panel {
  position: absolute;
  top: 0;
  left: min(70vh, 760px);
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  filter: none;
  transition: opacity 0.8s ease;
}
.hn-business__bg-panel.is-active { opacity: 1; }

/* 初期表示：右からサイドロールイン */
@keyframes hn-biz-side-in {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0 0 0 0%); }
}
.hn-business__bg-panel:first-child {
  clip-path: inset(0 0 0 100%);
}
.hn-business.is-inview .hn-business__bg-panel:first-child {
  animation: hn-biz-side-in 1.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.hn-business__bg-panels::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: min(70vh, 760px);
  height: 100%;
  background: #fff;
  z-index: 1;
}


/* --- Header overrides --- */
.hn-index2-page .gtranslate_box2 { display: none !important; }
.hn-index2-page header .gtranslate_box1 { display: flex !important; }
.hn-index2-page header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 1000 !important; background: transparent; transition: height 0.35s; transform: translateZ(0); backface-visibility: hidden; }
.hn-index2-page header .flexbox { height: 80px; transition: height 0.35s ease; }
.hn-index2-page header h1 { margin: 0 !important; transition: transform 0.35s ease !important; }
.hn-index2-page header h1 img { height: 70px; filter: brightness(0) invert(1); transition: height 0.35s ease, filter 0.35s ease; }
.hn-index2-page header .header_right.navigation { margin-top: 15px !important; }
.hn-index2-page header .navigation_wrapper { transition: transform 0.35s ease !important; }
/* スクロール後に縮小 */
.hn-index2-page header.hdr-scrolled .flexbox { height: 60px !important; }
.hn-index2-page header.hdr-scrolled h1 img { height: 42px !important; }
.hn-index2-page header.hdr-scrolled h1 { transform: translateY(0px) !important; }
.hn-index2-page header.hdr-scrolled .navigation_wrapper { transform: translateY(-3px) !important; }
/* 白文字（暗背景セクション） */
.hn-index2-page header.hdr-light a,
.hn-index2-page header.hdr-light li,
.hn-index2-page header.hdr-light a.glink { color: #fff !important; }
.hn-index2-page header.hdr-light h1 img { filter: brightness(0) invert(1) !important; }
/* 黒文字（白背景セクション） — hdr-scrolled 時はほぼ不透明で合成コスト削減 */
.hn-index2-page header.hdr-dark a,
.hn-index2-page header.hdr-dark li,
.hn-index2-page header.hdr-dark a.glink { color: #000 !important; }
.hn-index2-page header.hdr-dark h1 img { filter: none !important; }
.hn-index2-page header.hdr-dark.hdr-scrolled { background-color: rgba(255,255,255,0.96) !important; }
/* プルダウンは常に黒文字 */
.hn-index2-page header .nav-child { background: #fff !important; }
.hn-index2-page header .nav-child a,
.hn-index2-page header .nav-child li { color: #333 !important; }

/* --- CSS Variables --- */
:root {
  --hn-blue: #004da0;
  --hn-blue-nav: #1059d3;
  --hn-blue-dark: #224072;
  --hn-text: #505050;
  --hn-white: #ffffff;
  --hn-serif: 'Noto Sans JP', sans-serif;
}

/* --- Utilities --- */
.hn-inner { max-width: 1200px; margin: 0px auto; padding: 0px 40px; }
.hn-section-head { margin-top: 50px; margin-bottom: 10px; }
.hn-business .hn-section-head { margin-top: 150px; margin-bottom: 50px; padding-left: 140px; }

/* --- Section Label --- */
.hn-section-label { font-family: var(--hn-serif); font-size: clamp(48px, 7vw, 80px); font-weight: 300; letter-spacing: 0.1em; color: var(--hn-text); margin-bottom: 6px; margin-left: -0.1em; }
.hn-section-label em { font-style: normal; }
.hn-section-label-ja { font-size: 16px; letter-spacing: 0.15em; color: #999; font-family: var(--hn-serif); font-weight: 600; margin-left: -0.15em; }

/* 見出しアニメーション（OUR PROJECTスタイル）：BUSINESS / WORKS / FEATURE */
.hn-business .hn-section-label,
.hn-works .hn-section-label,
.hn-contents .hn-section-label { overflow: hidden; padding-bottom: 0.05em; }

.hn-business .hn-section-label em,
.hn-works .hn-section-label em,
.hn-contents .hn-section-label em { display: block; transform: translateY(102%); transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0s; }
.hn-business .hn-section-label em { width: fit-content; background: none; color: #000; padding: 0 10px; }

.hn-business.is-inview .hn-section-label em,
.hn-works.is-inview .hn-section-label em,
.hn-contents.is-inview .hn-section-label em { transform: translateY(0); }
.hn-works .hn-section-label em { transition-delay: 1s; }
.hn-works.is-inview .hn-section-label em { transition-delay: 1s; }

.hn-business .hn-section-label-ja { color: rgba(0,0,0,0.45); }
.hn-business .hn-section-label-ja,
.hn-works .hn-section-label-ja,
.hn-contents .hn-section-label-ja { opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease, transform 0.6s ease; }

.hn-business.is-inview .hn-section-label-ja,
.hn-works.is-inview .hn-section-label-ja,
.hn-contents.is-inview .hn-section-label-ja { opacity: 1; transform: translateY(0); }
.hn-works .hn-section-label-ja { transition-delay: 1.3s; }
.hn-works.is-inview .hn-section-label-ja { transition-delay: 1.3s; }

.hn-contents .hn-section-label em { transition-delay: 0.1s; }
.hn-contents.is-inview .hn-section-label em { transition-delay: 0.1s; }
.hn-contents .hn-section-label-ja { transition-delay: 0.25s; }
.hn-contents.is-inview .hn-section-label-ja { transition-delay: 0.25s; }

.hn-contents__card { transition-delay: 0s; }
.hn-contents__card:nth-child(2) { transition-delay: 0.15s; }
.hn-contents__card:nth-child(3) { transition-delay: 0.3s; }
.hn-business .hn-section-label-ja { width: fit-content; background: none; color: rgba(0,0,0,0.45); padding: 2px 10px; margin-top: -20px; }

/* Technological Innovation タイトルアニメーション */
.hn-cv2__title-wrap { overflow: hidden; padding-bottom: 0.05em; }
.hn-cv2__title { transform: translateY(102%); transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0s; }
.hn-cv2.is-inview .hn-cv2__title { transform: translateY(0); }
.hn-cv2 .hn-cv2__sub { opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease 0.65s, transform 0.6s ease 0.65s; }
.hn-cv2.is-inview .hn-cv2__sub { opacity: 1; transform: translateY(0); }
.hn-cv2__body-wrap { overflow: hidden; }
.hn-cv2 .hn-cv2__body { transform: translateY(-102%); transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.0s; }
.hn-cv2.is-inview .hn-cv2__body { transform: translateY(0); }
.hn-cv2 .hn-cv2__btn { opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease 0.9s, transform 0.6s ease 0.9s; }
.hn-cv2.is-inview .hn-cv2__btn { opacity: 1; transform: translateY(0); }

/* --- Fade Up Animation --- */
.hn-fade-up { opacity: 0; transform: translateY(36px); transition: opacity 0.7s, transform 0.7s; }
.hn-fade-up.in-view { opacity: 1; transform: translateY(0px); }
.hn-fade-up:nth-child(2) { transition-delay: 0.1s; }
.hn-fade-up:nth-child(3) { transition-delay: 0.2s; }
.hn-fade-up:nth-child(4) { transition-delay: 0.3s; }

/* --- Page Nav Dots --- */
.hn-page-nav { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 200; display: flex; flex-direction: column; align-items: center; }
.hn-page-nav__item { display: flex; flex-direction: column; align-items: center; }
.hn-page-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(0, 77, 160, 0.25); cursor: pointer; transition: background 0.25s, width 0.25s, height 0.25s; flex-shrink: 0; }
.hn-page-dot.active { background: var(--hn-blue); width: 15px; height: 15px; }
.hn-page-nav__line { width: 1px; height: 20px; background: rgba(0, 77, 160, 0.3); margin: 8px 0; }
.hn-page-nav.on-dark .hn-page-dot { background: rgba(255,255,255,0.35); }
.hn-page-nav.on-dark .hn-page-dot.active { background: #fff; }
.hn-page-nav.on-dark .hn-page-nav__line { background: rgba(255,255,255,0.35); }

/* --- Hero --- */
.hn-hero { position: relative !important; width: 100% !important; height: 100vh !important; min-height: 580px !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; }
#hn-hero .hn-hero__video, .hn-hero .hn-hero__video { position: absolute !important; top: 0px !important; left: 0px !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; opacity: 1 !important; z-index: 0 !important; display: block !important; max-width: none !important; max-height: none !important; filter: brightness(1) contrast(1) !important; transform: none !important; }
.hn-hero__image { inset: 0px; z-index: 0; background: url("../images/home/home_mv_poster.webp") center center / cover no-repeat; position: absolute !important; }
.hn-hero__bg { position: absolute !important; inset: 0px !important; z-index: 1 !important; background: rgba(0, 10, 30, 0.15) !important; opacity: 1 !important; }
.hn-hero__content { position: relative; z-index: 3; text-align: center; color: rgb(255, 255, 255); animation: 1s ease 0.5s 1 normal both running hnFadeIn; }

@keyframes hnFadeIn {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.hn-hero__catch { font-size: clamp(28px, 3.5vw, 52px); font-weight: 400; letter-spacing: 0.15em; line-height: 1.35; margin-bottom: 20px; text-transform: uppercase; font-family: "Noto Sans JP", sans-serif !important; }
.hn-hero__catch em { font-style: normal; font-family: "Noto Sans JP", sans-serif !important; font-weight: 400 !important; }
.hn-hero__line { width: 499px; height: 1px; background: rgba(255, 255, 255, 0.7); margin: 0px auto 22px; }
.hn-hero__sub { font-size: 32px; font-family: var(--hn-serif); font-weight: 100; letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.9); }
.hn-hero__scroll { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 3; color: rgba(255, 255, 255, 0.7); font-size: 10px; letter-spacing: 0.25em; font-family: var(--hn-serif); animation: 1s ease 1.2s 1 normal both running hnFadeIn; }
.hn-hero__scroll-line { width: 1px; height: 56px; background: linear-gradient(rgba(255, 255, 255, 0.7), transparent); animation: 2.2s ease-in-out 0s infinite normal none running hnScrollLine; transform-origin: center top; }

@keyframes hnScrollLine {
  0% { transform: scaleY(0); opacity: 0; }
  50% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0); opacity: 0; }
}

/* --- News Ticker --- */
.hn-news-ticker { position: absolute; bottom: 0px; left: 0px; right: 0px; z-index: 4; background: rgba(0, 40, 120, 0.75); padding: 0px 40px; display: flex; align-items: stretch; height: 52px; }
.hn-news-ticker__label { background: rgba(255, 255, 255, 0.13); color: rgb(255, 255, 255); font-family: var(--hn-serif); font-size: 11px; letter-spacing: 0.2em; padding: 0px 24px; display: flex; align-items: center; white-space: nowrap; flex-shrink: 0; }
.hn-news-ticker__items { flex: 1 1 0%; overflow: hidden; padding: 0px; position: relative; height: 52px; }
.hn-news-ticker__item { display: flex; align-items: center; position: absolute; top: 0px; left: 0px; right: 0px; height: 52px; padding: 0px 24px 0px 32px; opacity: 0; transform: translateY(20%); animation: ticker-cycle 12s infinite; }
.hn-news-ticker__item:nth-child(1) { animation-delay: 0s; }
.hn-news-ticker__item:nth-child(2) { animation-delay: 4s; }
.hn-news-ticker__item:nth-child(3) { animation-delay: 8s; }
@keyframes ticker-cycle {
  0%, 100%    { opacity: 0; transform: translateY(20%); }
  3%, 30%     { opacity: 1; transform: translateY(0); }
  33.33%      { opacity: 0; transform: translateY(-20%); }
}
.hn-news-ticker__date { color: rgba(255, 255, 255, 0.55); font-size: 12px; font-family: var(--hn-serif); white-space: nowrap; flex-shrink: 0; margin-right: 24px; }
.hn-news-ticker__text { color: rgb(255, 255, 255); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; transition: opacity 0.2s; }
.hn-news-ticker__text:hover { opacity: 0.7; }
.hn-news-ticker__more { padding: 0px 28px; display: flex; align-items: center; flex-shrink: 0; }
.hn-news-ticker__more a { color: rgba(255, 255, 255, 0.65); font-size: 11px; font-family: var(--hn-serif); letter-spacing: 0.12em; border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding-bottom: 2px; text-decoration: none; transition: color 0.2s; }
.hn-news-ticker__more a:hover { color: rgb(255, 255, 255); }

/* =================================================================
   ★ BUSINESS（日本映船スタイル・全幅2×2グリッド・左下テキスト）
   ================================================================= */

.hn-business {
  position: relative;
  background: #fff;
  padding-bottom: 0;
  visibility: visible;
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 横スクロール コンテナ */
.hn-business__grid {
  flex: 1;
  min-height: 0;
  width: 100%;
  background: transparent;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.hn-business__grid::-webkit-scrollbar { display: none; }

/* スクロール対象コンテンツ（cards + wave をまとめて動かす） */
.hn-business__cards-wrap {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 48px;
  padding: 80px 60px 0;
  align-items: flex-start;
  width: max-content;
  height: 100%;
  box-sizing: border-box;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* 各カード */
.hn-business__grid-item {
  position: relative;
  z-index: 1;
  display: block;
  flex: 0 0 calc((100vw - 152px) / 2.5);
  height: calc(100% - 80px);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  background: #ccc;
  opacity: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55);
}
.hn-business__grid-item:nth-child(odd) {
  margin-top: 0;
}

.hn-business__grid-spacer { flex: 0 0 60px; }

/* in-view付与時だけアニメーション */
.hn-business__grid-item.in-view {
  animation: hn-card-in 1.4s cubic-bezier(0.76, 0, 0.24, 1) both;
}

/* 各カードの遅延 */
.hn-business__grid-item:nth-child(2).in-view { animation-delay: 0s; }
.hn-business__grid-item:nth-child(3).in-view { animation-delay: 0.25s; }
.hn-business__grid-item:nth-child(4).in-view { animation-delay: 0.18s; }
.hn-business__grid-item:nth-child(5).in-view { animation-delay: 0.45s; }

/* ダミーカード（スクロール余白用） */
.hn-business__grid-item--dummy {
  opacity: 0 !important;
  pointer-events: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* 左列:左から、右列:右からスライドイン */


/* 背景画像 */
.hn-business__grid-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* ホバーでズーム */
.hn-business__grid-item:hover .hn-business__grid-bg {
  transform: scale(1.2);
}

/* ホバー：青いオーバーレイ */
.hn-business__grid-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.9s ease;
  z-index: 2;
}

.hn-business__grid-item:hover .hn-business__grid-overlay {
  opacity: 1;
}

/* ホバー：中央に MORE */
.hn-business__grid-item::after {
  content: 'MORE';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(8px);
  color: #fff;
  font-family: var(--hn-serif);
  font-size: 24px;
  letter-spacing: 0.4em;
  border-bottom: 1px solid rgba(255,255,255,0.7);
  padding-bottom: 6px;
  opacity: 0;
  z-index: 3;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.hn-business__grid-item:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}

/* テキストラベル（左下） */
.hn-business__grid-label {
  position: absolute;
  left: 32px;
  bottom: 28px;
  z-index: 4;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  padding: 8px 14px;
  border-radius: 4px;
  text-shadow: none;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.hn-business__grid-item:hover .hn-business__grid-label {
  transform: scale(1.7);
  transform-origin: left bottom;
}

.hn-business__grid-title {
  font-family: var(--hn-serif);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 300;
  letter-spacing: 0.12em;
  line-height: 1.2;
  margin-bottom: 4px;
  color: #fff;
}

.hn-business__grid-title-ja {
  font-family: var(--hn-serif);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.8);
}

@keyframes hn-card-in {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 波線アニメーション */
@keyframes hn-wave-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -380; }
}
.hn-business__wave-wrap {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 110px;
  height: calc(58vh - 60px);
  z-index: 0;
  pointer-events: none;
}
.hn-business__wave path {
  stroke-dasharray: 320 60;
  stroke-dashoffset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  will-change: transform;
  animation: hn-wave-flow 5s linear infinite;
  animation-play-state: paused;
}
.hn-business__wave.is-animated path {
  opacity: 1;
  animation-play-state: running;
}

.hn-cv2__blueprint--mobile { display: none; }

/* =================================================================
   ★ CONCEPT v2（新世紀海運風・動画背景＋建物図面）
   ================================================================= */

.hn-cv2 {
  position: relative;
  width: 100%;
  height: 120vh;
  display: flex;
  align-items: center;
  margin-top: 200px;
  padding: 100px;
  overflow: hidden;
}

.hn-cv2__video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: 0 !important;
  transform: none !important;
}

.hn-cv2__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(8, 24, 58, 0.93) 0%,
    rgba(8, 24, 58, 0.88) 42%,
    rgba(8, 24, 58, 0.70) 72%,
    rgba(8, 24, 58, 0.50) 100%
  );
  z-index: 1;
}

.hn-cv2__blueprint {
  position: absolute;
  right: -30px;
  top: 0;
  bottom: 0;
  width: 62%;
  display: flex;
  align-items: center;
  z-index: 2;
  opacity: 0.32;
  pointer-events: none;
}

.hn-cv2__blueprint svg {
  width: 100%;
  height: auto;
}

.hn-cv2__content {
  position: relative;
  z-index: 3;
  padding: 0 0 0 80px;
  max-width: 560px;
  color: #fff;
}

.hn-cv2__title {
  font-family: var(--hn-serif);
  font-size: clamp(48px, 7vw, 80px);
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1.25;
  margin-bottom: 12px;
  color: #fff;
  text-transform: uppercase;
}

.hn-cv2__title em {
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.1em;
}

.hn-cv2__sub {
  font-family: var(--hn-serif);
  font-size: 13px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 38px;
  font-weight: 300;
}

.hn-cv2__body {
  font-family: var(--hn-serif);
  font-size: 15px;
  line-height: 2.5;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 44px;
}

.hn-cv2__btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--hn-blue);
  color: #fff;
  font-family: var(--hn-serif);
  font-size: 13px;
  letter-spacing: 0.18em;
  padding: 14px 40px;
  text-decoration: none;
  transition: background 0.25s;
}

.hn-cv2__btn::before {
  content: "›";
  font-size: 18px;
  line-height: 1;
}

.hn-cv2__btn:hover {
  background: var(--hn-blue-nav);
  color: #fff;
}

/* =================================================================
   ★ CONTENTS（新世紀海運風・全幅3カラム・写真＋下テキスト）
   ================================================================= */

.hn-contents {
  background: #fff;
  padding: 70px 0 0;
  margin-top:100px;
  margin-bottom:150px;
}

/* セクションヘッド：中央寄せ・内側パディング */
.hn-contents__head {
  text-align: center;
  padding: 0 40px;
  margin-bottom: 40px;
}
.hn-contents__head .hn-section-label {
  display: block;
  text-align: center;
}
/* タイトル下ライン */
.hn-contents-line {
  width: 56px;
  height: 1px;
  background: var(--hn-blue);
  margin: 10px auto 8px;
}

/* 全幅3カラムグリッド（gap なし） */
.hn-contents__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  width: 100%;
}

/* カード全体 */
.hn-contents__card {
  display: block;
  text-decoration: none;
  color: inherit;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.hn-contents__card.in-view {
  opacity: 1;
  transform: translateY(0);
}
.hn-contents__card:nth-child(2) { transition-delay: 0.15s; }
.hn-contents__card:nth-child(3) { transition-delay: 0.30s; }

/* 写真ラッパー（overflow:hidden でホバーズームを切り取る） */
.hn-contents__card-img-wrap {
  overflow: hidden;
  width: 100%;
  height: min(32vw, 620px);
  position: relative;
}
.hn-contents__card-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  background: #fff;
  transform: translateY(0);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  will-change: transform;
}
#hn-contents.is-inview .hn-contents__card:nth-child(1) .hn-contents__card-img-wrap::after { transform: translateY(-101%); transition-delay: 0s; }
#hn-contents.is-inview .hn-contents__card:nth-child(2) .hn-contents__card-img-wrap::after { transform: translateY(-101%); transition-delay: 0.15s; }
#hn-contents.is-inview .hn-contents__card:nth-child(3) .hn-contents__card-img-wrap::after { transform: translateY(-101%); transition-delay: 0.3s; }

/* 背景画像 */
.hn-contents__card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.hn-contents__card:hover .hn-contents__card-bg {
  transform: scale(1.15);
}

/* テキスト（写真の下・白背景） */
.hn-contents__card-text {
  padding: 18px 24px 28px;
  background: #fff;
  text-align: center;
}
.hn-contents__card-title {
  font-family: var(--hn-serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--hn-text);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.hn-contents__card-title-ja {
  font-size: 16px;
  color: #999;
  letter-spacing: 0.12em;
  font-family: var(--hn-serif);
  font-weight: 300;
}

/* =================================================================
   ★ CONSULT（新世紀海運風・左ネイビー＋右写真）
   ================================================================= */

/* セクション全体：横並び2分割 */
.hn-consult {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 70vh;
  min-height: unset;
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* 左：ネイビー背景＋テキスト */
.hn-consult__left {
  background: #1a3566;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 70px 60px;
}

.hn-consult__eyebrow {
  font-family: var(--hn-serif);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.8;
  margin-bottom: 16px;
}

.hn-consult__title {
  font-family: var(--hn-serif);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 400;
  color: #fff;
  line-height: 1.8;
  margin-bottom: 24px;
  letter-spacing: 0.05em;
}

.hn-consult__body {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 2.1;
  margin-bottom: 40px;
  font-family: var(--hn-serif);
}

/* ボタン：青背景・白文字（新世紀海運スタイル） */
.hn-btn-consult {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--hn-blue);
  color: #fff;
  font-family: var(--hn-serif);
  font-size: 13px;
  letter-spacing: 0.15em;
  padding: 13px 36px;
  text-decoration: none;
  transition: background 0.25s;
  align-self: flex-start;
}
.hn-btn-consult:hover {
  background: var(--hn-blue-nav);
  color: #fff;
  opacity: 1;
}

/* 右：写真 */
.hn-consult__right {
  position: relative;
  overflow: hidden;
}

/* 写真: fixed を疑似要素に移しペイント負荷を除去 */
.hn-consult__photo {
  position: absolute;
  inset: 0;
  background-image: none !important;
  overflow: hidden;
}
.hn-consult__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--consult-bg);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.hn-consult__right:hover .hn-consult__photo {
  /* ホバーズームはパララックスと競合するため無効化 */
}

/* --- Responsive 1400px以下：スライダー縦レイアウト --- */
@media (max-width: 1499px) {
  .hn-works { height: auto; overflow: visible; }
  /* 縦積み・リード上/画像下 */
  .hn-slider__inner {
    flex-direction: column;
    justify-content: space-between;
  }

  /* テキストパネル：全幅・残り高さを占有、内部もflex列・下寄せ */
  .hn-slider__text-wrap {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  /* リードテキスト：margin-bottom: autoで上に押し付け */
  .hn-slider__lead-wrap {
    position: relative;
    top: auto;
    left: auto;
    padding: 150px 24px 24px;
    overflow: visible;
    margin-bottom: auto;
  }
  .hn-slider__lead {
    font-size: clamp(36px, 5vw, 54px);
    line-height: 1.4;
    white-space: normal;
    transform: none !important;
    transition: none !important;
  }
  .hn-slider__lead br { display: none; }

  /* スライド：縦積み（01—03→CONVERTIBLE→本文）、非アクティブは非表示 */
  .hn-slider__slide {
    position: relative;
    inset: auto;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 12px 24px;
    opacity: 1;
    pointer-events: auto;
  }
  .hn-slider__slide.is-active {
    display: flex;
    margin-top: 0;
    margin-bottom: 32px;
  }

  /* ワイプアニメーション無効化 */
  .hn-slider__count-wrap,
  .hn-slider__title-wrap,
  .hn-slider__body-wrap {
    overflow: visible;
  }
  .hn-slider__count,
  .hn-slider__title,
  .hn-slider__body {
    transform: none !important;
    transition: none !important;
  }
  .hn-slider__title-wrap { margin-bottom: 8px; }
  .hn-slider__count { font-size: 20px; margin-bottom: 8px; }
  .hn-slider__title { font-size: clamp(32px, 4.5vw, 52px); }
  .hn-slider__body { font-size: clamp(14px, 1.8vw, 18px); line-height: 1.7; padding-left: 0; min-height: calc(1.7em * 2); }

  /* ドット：相対配置 */
  .hn-slider__dots {
    position: relative;
    bottom: auto;
    left: auto;
    padding: 8px 24px;
  }

  /* メイン画像：高さ50vh */
  .hn-slider__text-wrap { order: 1; }
  .hn-slider__img-wrap {
    order: 2;
    flex: none;
    height: 50vh !important;
    width: calc(100% - 32px);
    margin: 8px auto 0;
  }

  /* サムネナビ：非表示 */
  .hn-slider__thumb-nav {
    display: none;
  }
  /* BUSINESSブロック：背景パネル非表示 */
  .hn-business__bg-panel,
  .hn-business__bg-panels::after {
    display: none;
  }

  /* BUSINESSブロック：2行2カラム通常表示 */
  #hn-business { height: auto; }
  .hn-business__sticky {
    position: relative;
    height: auto;
    display: block;
    overflow: visible;
    visibility: visible !important;
  }
  .hn-business .hn-section-head {
    margin-top: -80px;
  }
  .hn-business__grid {
    overflow: visible;
    height: auto;
  }
  .hn-business__cards-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    padding: 24px 24px 200px;
    gap: 24px;
    transform: none !important;
    transition: none !important;
  }
  .hn-business__grid-item {
    flex: none;
    width: auto;
    height: 420px;
    opacity: 1 !important;
    transform: none !important;
  }
  .hn-business__grid-item--dummy { display: none; }
  .hn-business__wave-wrap { display: none; }

  /* background-attachment:fixed はscrollコンテナ内で正しく動作しないためscrollに切替 */
  .hn-consult__photo::before { background-attachment: scroll; }
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .hn-inner { padding: 0px 24px; }

  /* スライダー：スマホサイズ調整（下揃えは1499pxから継承） */
  #hn-slider { border-top: 0; border-bottom: 0; }
  .hn-slider__lead-wrap {
    padding-top: 70px;
  }
  .hn-slider__lead { font-size: 24px; }
  .hn-slider__lead br { display: inline; }
  .hn-slider__slide.is-active {
    margin-bottom: 16px;
  }
  .hn-slider__body { min-height: calc(1.7em * 3); }
  .hn-slider__img-wrap {
    height: 40vh;
    margin-bottom: 0;
  }

  /* BUSINESS: タイトル左揃え・1カラム4行 */
  .hn-business { height: auto; }
  .hn-business .hn-section-head { padding-left: 20px; margin-top: 20px; }
  .hn-business__grid { overflow: visible; height: auto; }
  .hn-business__cards-wrap { grid-template-columns: 1fr; width: 100%; padding: 20px 20px 40px; gap: 20px; transform: none !important; }
  .hn-business__grid-item { flex: none; width: 100%; height: 60vw; margin-top: 0 !important; transform: translateY(40px) !important; opacity: 1 !important; }
  .hn-business__grid-item.in-view { transform: translateY(0) !important; }
  .hn-business__grid-item--dummy { display: none; }

  .hn-business__wave-wrap { display: none; }
  #hn-contents .hn-section-head { padding: 40px 24px 20px !important; text-align: left; }
  #hn-contents .hn-section-head .hn-section-label,
  #hn-contents .hn-section-head .hn-section-label-ja { text-align: left; }
  .hn-contents__cards { grid-template-columns: 1fr; gap: 0; }
  .hn-contents__card { opacity: 1 !important; transform: none !important; }
  .hn-contents__card-img-wrap { height: 60vw; clip-path: none !important; transition: none !important; }
  .hn-news-ticker { padding: 0px 16px; }
  .hn-consult { grid-template-columns: 1fr; }
  .hn-consult__left { padding: 50px 30px; }
  .hn-consult__right { min-height: 260px; position: relative; }
  .hn-contents { height: auto; overflow: visible; padding: 0; margin-top: 60px !important; margin-bottom: 60px !important; }
  .hn-cv2 { height: auto; overflow: visible; }
  .hn-page-nav { display: none; }
  .hn-cv2__blueprint--mobile { display: block; }
  .hn-cv2 { height: auto; min-height: unset; margin-top: 0; padding: 100px 24px 40px; display: flex; align-items: flex-start; }
  .hn-cv2__content { padding: 0; max-width: 100%; }
  .hn-cv2__blueprint { width: 100%; right: 0; opacity: 0.12; }
  .hn-cv2__title { font-size: clamp(36px, 10vw, 48px); }
  .hn-cv2__body { font-size: 14px; line-height: 2; word-break: break-all; }
}

@media (max-width: 600px) {
  .hn-hero__catch { font-size: 36px; }
  .hn-hero__sub { font-size: 14px; letter-spacing: 0.15em; }
  .hn-business__grid-item { padding-top: 75%; }
  .hn-business__grid-label { left: 20px; bottom: 18px; }
  .hn-cv2__title { font-size: clamp(36px, 10vw, 48px); }
}