@charset "utf-8";

/* =========================================================
   Design System Variables & Base Settings
   ========================================================= */
:root {
  --color-bg: #faf8f5;
  /* 上品で極薄のクリームアイボリーに変更 */
  --color-text: #000000;
  /* 純黒 */
  --color-accent: #000000;
  /* ホバー時は黒反転 */
  --color-accent-hover: #ffffff;
  /* ホバー時のテキストは白 */

  --shadow-card: 0 15px 40px rgba(0, 0, 0, 0.04);

  --font-family-base: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-family-title: "Arial Black", "Helvetica Neue", Arial, sans-serif;
}

/* =========================================================
   Global Navigation (Header dynamic scroll styles)
   ========================================================= */
/* 初期状態 (ビデオ上：背景透過、テキスト白) */
.header-container,
#header,
#navi {
  background-color: transparent !important;
  /* 常に背景は透明 */
  border-bottom: none !important;
  box-shadow: none !important;
  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.header-container a,
#header a,
#navi a,
.site-name a,
.menu-header a,
.navi-in a {
  color: #ffffff !important;
  /* 初期は白文字 */
  transition: color 0.35s ease;
}

/* スクロール検知後 (コンテンツ上：背景は透明のまま、テキスト黒) */
body.is-scrolled .header-container,
body.is-scrolled #header,
body.is-scrolled #navi {
  background-color: transparent !important;
  /* スクロール後も背景は透明を維持 */
  border-bottom: none !important;
  box-shadow: none !important;
}

body.is-scrolled .header-container a,
body.is-scrolled #header a,
body.is-scrolled #navi a,
body.is-scrolled .site-name a,
body.is-scrolled .menu-header a,
body.is-scrolled .navi-in a {
  color: #000000 !important;
  /* スクロール後は文字色のみ黒に変化 */
}

body.home {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: var(--font-family-base);
  overflow-x: hidden !important; /* 横スクロールの強制防止 */
  width: 100% !important;
}

body.home #container,
body.home #wrap {
  overflow-x: hidden !important;
  width: 100% !important;
}

/* ヒーローエリアより下の背景を徹底的にクリーム色に強制し、暗いトーンをすべて排除する */
body.home #container,
body.home #wrap,
body.home #content,
body.home #content-in,
body.home #main,
body.home .main,
body.home .wrap,
body.home article,
body.home .post,
body.home .entry-content,
body.home .entry-body {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
}

/* 余計なCocoonのコンテナ枠余白を無効化 */
body.home .main {
  padding: 0 !important;
}

/* フッターエリアも背景色を完全に統一 */
body.home #footer,
body.home .footer,
body.home .footer-in {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* 全体の最大幅を広げ、スカスカ感を解消 */
.l-container {
  max-width: 1400px;
  /* 1200px から 1400px へ拡張 */
  margin: 0 auto;
  padding: 0 48px;
  /* 左右の余白を広げて全体の締まりを持たせる */
}

/* =========================================================
   【黒帯バグ完全修正】
   ヒーローHTMLブロック内の <style> で .nt-reel-home に
   background: var(--deep) = #0F0704（黒）が埋め込まれており、
   Works以降のセクションへ黒色が漏れ出ていた問題を解消する。

   対策：
   - .nt-reel-home（外側ラッパー）の背景を transparent に強制
   - .nt-reel-hero（動画本体エリア）の黒背景のみ維持
   ========================================================= */
body.home .nt-reel-home {
  background: transparent !important;
  min-height: auto !important;
  /* min-height: 100vh による余分な暗い領域の発生を防止 */
}

body.home .nt-reel-hero {
  background: #0F0704 !important;
  /* 動画ヒーロー本体は黒を維持 */
}

/* =========================================================
   c-section (セクション余白・ヘッダー定義)
   ========================================================= */
.c-section,
.c-section>.wp-block-group__inner-container {
  /* セクション間の縦余白を引き締めて、スクロールのリズムを向上 */
  margin-bottom: clamp(70px, 8vw, 110px) !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 48px !important;
  box-sizing: border-box !important;
}

/* セクション内の各ブロック幅を強制統一し、左端アライメントを完全に一致させる */
.c-section__subtitle,
.c-section__grid,
.c-section__footer {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.c-section__header {
  margin-bottom: clamp(28px, 4vw, 40px);
}


/* 新設：見出し下の英語サブテキスト ＆ 極細ブラックライン（視認性を純黒に修正） */
.c-section__subtitle {
  font-family: var(--font-family-title) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.2em !important;
  color: #000000 !important;
  /* 視認性の高い純黒に変更 */
  text-transform: uppercase;
  margin: 8px 0 0 0 !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #000000 !important;
  /* 誌面のような美しい黒仕切り線 */
}

/* 3カラムグリッドレイアウト */
.c-section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  /* カード同士の間隔を詰めて、情報のまとまり感を向上 */
}

.c-section__footer {
  margin-top: 36px;
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

/* =========================================================
   c-card (カードUI - スクエア画像化)
   ========================================================= */
.c-card,
.c-card *,
.c-card__link,
.c-card__body {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: none;
  height: auto;
}

.c-card:hover {
  box-shadow: none !important;
  border-color: transparent !important;
}

.c-card__link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.c-card__media {
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1 / 1;
  /* 正方形（スクエア） */
  background: #f5f5f5;
}

.c-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.c-card:hover .c-card__image {
  transform: scale(1.05);
}

.c-card__body {
  padding: 16px 0 0 0 !important;
  text-align: center;
  display: block;
}

.c-card__title {
  text-align: center;
  margin: 0 !important;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 700;
  line-height: 1.4;
}

.c-card__meta,
.c-card__excerpt {
  display: none !important;
}

.c-card__no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-title);
  font-size: 12px;
  color: #999999;
  background: #eaeaea;
}

/* =========================================================
   c-button / wp-block-button (カプセル型ブロックボタン連携)
   ========================================================= */
/* カスタムHTMLブロック用のボタンプラクティスラッパー */
body.home .c-section__footer {
  margin-top: 20px !important; /* グリッドとの隙間を詰める */
  display: flex !important;
  width: 100% !important;
}

/* ユーザー様が配置するカスタムHTMLまたはボタンに一律適用されるアライメントとカプセル型スタイル */
body.home .c-button,
body.home .c-button--more,
body.home .c-section .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-family-title) !important;
  font-size: 13px !important; /* 11px から 13px へ大きく */
  font-weight: 900 !important;
  text-decoration: none !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  
  /* 形状：文字量に合わせたカプセル型長方形 */
  width: auto !important;
  padding: 14px 40px !important; /* 12px 36px から 14px 40px へ拡大 */
  border-radius: 999px !important;
  /* 完全な角丸カプセル型 */

  /* カラー：枠線黒、背景クリア、テキスト黒 */
  border: 1px solid #000000 !important;
  background-color: transparent !important;
  color: #000000 !important;
  margin-left: 0 !important;
}

/* ホバー時（カラー反転：背景黒、文字白) */
body.home .c-button:hover,
body.home .c-button--more:hover,
body.home .c-section .wp-block-button__link:hover {
  background-color: var(--color-accent) !important;
  /* 背景黒 */
  color: var(--color-accent-hover) !important;
  /* 文字白 */
  border-color: var(--color-accent) !important;
}

/* =========================================================
   About Me セクション (2カラム & 画像アスペクト比固定)
   ========================================================= */
.c-about-section {
  padding: 0 !important;
}

.c-about {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
}

.c-about__media {
  flex: 0 0 40%;
}

.c-about__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  /* ポートレート（縦長）比率を美しく維持 */
  object-fit: cover;
  display: block;
  filter: grayscale(100%) contrast(1.1);
  /* モノクロで少しコントラストを強めて白背景に馴染ませる */
  border: 1px solid #e0e0e0;
}

.c-about__body {
  flex: 1;
}

.c-about__text {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.8;
  margin: 0 0 32px 0;
}

/* =========================================================
   Hero Area (白背景化とくすみ防止)
   ========================================================= */
.nt-reel-home {
  --deep: #0F0704;
  --white: #FFFFFF;
  --orange: #FF7A3D;

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--color-bg);
  /* 白背景化 */
  color: var(--color-text);
  font-family: var(--font-family-title);
  overflow-x: hidden;
}

.nt-reel-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: var(--color-bg);
}

/* ヒーロー上のカーソル制御 */
.nt-reel-home.is-js-ready .nt-reel-hero {
  cursor: none;
}

.nt-reel-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* 白グラデーションで透過させつつ、くすみを防止するオーバーレイ */
.nt-reel-video-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(250, 250, 250, 0.05) 0%,
      rgba(250, 250, 250, 0.2) 60%,
      rgba(250, 250, 250, 0.98) 100%);
}

.nt-reel-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(30%) contrast(1.0) opacity(0.9);
  /* ビデオをあまり暗くしない設定に変更 */
  pointer-events: none;
}

/* WATCH REEL ボタン (視認性の高い白ベース・元デザイン配色へ復元) */
.nt-reel-button {
  position: absolute;
  right: clamp(28px, 4vw, 72px);
  bottom: clamp(96px, 8vw, 132px);
  z-index: 8000;

  width: clamp(100px, 8vw, 140px);
  height: clamp(100px, 8vw, 140px);
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #ffffff;
  /* 白背景 */
  color: #0F0704;
  /* 黒文字 */

  font-family: var(--font-family-title);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-align: center;
  text-transform: uppercase;

  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0) scale(1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.nt-reel-button.is-following {
  position: fixed;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  z-index: 2147483647;
  transform: translate(-50%, -50%) scale(1);
}

/* 再生中はオレンジ（元のブランドカラー）に切り替える */
.nt-reel-hero.is-reel-playing .nt-reel-button {
  background: var(--orange);
  color: var(--deep);
}

/* ビデオシークバー（白ベースへ復元・視認性確保） */
.nt-reel-controls {
  position: absolute;
  left: clamp(22px, 4vw, 64px);
  right: clamp(22px, 4vw, 64px);
  bottom: clamp(30px, 3.4vw, 52px);
  z-index: 7000;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  pointer-events: auto;
}

.nt-reel-home.is-js-ready .nt-reel-controls,
.nt-reel-home.is-js-ready .nt-reel-controls * {
  cursor: none;
}

.nt-reel-seek {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  /* 白半透明 */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.nt-reel-seek::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  bottom: -14px;
}

.nt-reel-seek-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: #ffffff;
  /* 白 */
  transition: width 0.08s linear;
}

.nt-reel-seek-knob {
  position: absolute;
  left: 0%;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  /* 白 */
  transform: translate(-50%, -50%) scale(0.86);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.36);
  transition: left 0.08s linear, transform 0.16s ease;
}

.nt-reel-time {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 96px;
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
  /* 白に戻して視認性を確保 */
  white-space: nowrap;
}

/* =========================================================
   Hero Scroll Hint (2倍巨大化 & 【完全左右対称】で浅いワイド矢印)
   ========================================================= */
.nt-reel-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 3vw, 36px);
  transform: translateX(-50%);
  z-index: 7500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  /* 隙間をさらに広げて巨大サイズと調和させる */
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.nt-reel-hero.is-reel-playing .nt-reel-scroll-hint {
  opacity: 0;
  visibility: hidden;
}

.nt-reel-scroll-hint__text {
  font-family: var(--font-family-title);
  font-size: 18px !important;
  /* しっかり【2倍サイズ】に拡大 */
  font-weight: 900;
  letter-spacing: 0.35em !important;
  /* 文字間隔をワイドに */
  color: rgba(255, 255, 255, 0.9) !important;
  /* ビデオの上で目立つよう白に変更 */
  text-transform: uppercase;
}

.nt-reel-scroll-hint__arrows {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
}

/* 浅くて横に広いワイドな矢印マーク */
.nt-arrow-v {
  display: block;
  width: 50px;
  /* 横幅を【2倍】にワイド化 */
  height: 14px;
  /* 高さを抑えて浅いV字にする */
  position: relative;
  animation: nt-arrow-wave 2.4s infinite;
}

.nt-arrow-v::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 22px;
  /* 矢印の線を大きく */
  height: 22px;
  border-bottom: 4px solid rgba(255, 255, 255, 0.9) !important;
  /* 太い白線に戻す */
  border-right: 4px solid rgba(255, 255, 255, 0.9) !important;
  /* 【超重要：トランスフォーム順序】 rotateを先に行い、その後に水平scaleXをかけることで、歪み(剪断)を発生させず、完全に左右対称なひし形・矢印を作ります */
  transform: translateX(-50%) scaleX(1.8) rotate(45deg);
}

.nt-arrow-v:nth-child(1) {
  animation-delay: 0s;
}

.nt-arrow-v:nth-child(2) {
  animation-delay: 0.3s;
}

.nt-arrow-v:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes nt-arrow-wave {

  0%,
  100% {
    opacity: 0.2;
  }

  30% {
    opacity: 1;
  }

  60% {
    opacity: 0.2;
  }
}

/* =========================================================
   Responsive Breakpoints
   ========================================================= */
/* Tablet (768px ~ 1023px) */
@media (max-width: 1023px) {
  html,
  body.home,
  body.home #container,
  body.home #wrap,
  body.home #content {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ヘッダー構成要素のはみ出しを強制リセット（ハンバーガーメニュー画面内収容用） */
  #header,
  #navi,
  .header-container,
  .navi-in,
  .site-name,
  .menu-header {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .l-container {
    padding: 0 24px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .c-section,
  .c-section > .wp-block-group__inner-container {
    padding: 0 24px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ヒーローエリアのネガティブマージンを完全に無効化（横揺れ・はみ出しの主因を解決） */
  body.home .nt-reel-home {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .c-section__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .c-about {
    gap: 32px;
  }

  .c-about__media {
    flex: 0 0 35%;
  }
}

/* Mobile (~ 767px) */
@media (max-width: 767px) {
  html,
  body.home,
  body.home #container,
  body.home #wrap,
  body.home #content {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ヘッダー構成要素のはみ出しを強制リセット */
  #header,
  #navi,
  .header-container,
  .navi-in,
  .site-name,
  .menu-header {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .l-container {
    padding: 0 16px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .c-section,
  .c-section > .wp-block-group__inner-container {
    padding: 0 16px !important;
    margin-bottom: clamp(50px, 8vw, 70px) !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ヒーローエリアのネガティブマージン無効化 */
  body.home .nt-reel-home {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .c-section__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .c-about {
    flex-direction: column;
    text-align: center;
    gap: 24px;
  }

  .c-about__media {
    width: 60%;
    max-width: 240px;
    margin: 0 auto;
  }

  .c-about__body {
    width: 100%;
  }
}