/* カスタムスタイル定義 */
:root {
  --brand-color: #0d6efd; 
  --accent-color: #ffc107;
  --text-main: #333;
}

body {
  font-family: "LINE Seed JP", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
}

/* 英語のアクセント文字スタイル */
.en-accent {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: normal;
  color: #adb5bd;
  margin-left: 0.5rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ヒーローセクション */
.hero-section {
  background-color: #f8f9fa;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* インタビューバナー */
.interview-banner {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('../img/interview-bg.jpg') no-repeat top center; 
  background-color: #6c757d;
  background-size: cover;
  color: white;
  padding: 4rem 1rem;
  border-radius: 12px;
  transition: transform 0.3s ease;
  text-decoration: none;
  display: block;
}

.interview-banner:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  color: white;
}

/* プロフィールモーダルの写真 */
.modal-portrait {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  margin-top: -75px;
  background-color: #eee;
}

.placeholder-img {
  background-color: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
  font-weight: bold;
}

/* ▼▼ 修正箇所：縦書き・読書モードのスタイル ▼▼ */
/* 1. 外枠（スクロール機能担当） */
.book-vertical-wrapper {
  width: 100%;
  overflow-x: auto;       /* 横スクロールを許可 */
  overflow-y: hidden;     /* 縦スクロールは禁止 */
  background-color: #fdfbf7;
  border-radius: 8px;
  padding: 2rem;
  box-sizing: border-box;
  
  /* 重要：ここをRTL（右から左）にすることで、スクロールの起点が右端になる */
  direction: rtl; 
  
  /* スクロールバーの装飾 */
  scrollbar-width: thin;
  scrollbar-color: #ccc #f1f1f1;
}

/* 2. 中身（縦書きレイアウト担当） */
.book-vertical-container {
  /* 縦書き指定 */
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  text-orientation: upright;
  
  /* 高さ制限 */
  height: 60vh;
  max-height: 500px;
  
  /* 幅は中身に合わせて自動で広がるようにする */
  width: max-content;
  
  /* フォント設定 */
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  line-height: 2.0; 
  letter-spacing: 0.05em;
  font-size: 1.1rem;
  color: #2c2c2c;
  
  /* 外枠でdirection:rtlにしているため、中身はltrに戻して文字崩れを防ぐ */
  direction: ltr;
  text-align: left;
}

/* 縦書きの中のpタグ */
.book-vertical-container p {
  margin-left: 2rem; 
  margin-bottom: 0;
  text-indent: 1em;
}

/* ▼▼ Coming Soon オーバーレイ装飾 ▼▼ */

/* 1. 対象カードの親要素に指定するクラス（基準点となります） */
.card-coming-soon {
  position: relative; /* これが重要 */
  overflow: hidden;   /* 角丸からはみ出さないように */
}

/* 2. 上に被せるオーバーレイヤー */
.coming-soon-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 背景色：半透明の黒（濃さはお好みで調整してください。0.6 = 60%） */
  background-color: rgba(33, 37, 41, 0.7); 
  /* 文字を中央揃えにする設定 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 最前面に表示 */
  z-index: 10;
  /* 文字のスタイル */
  color: #fff;
  font-family: "Helvetica Neue", Arial, sans-serif; /* 英語なので欧文フォント優先 */
  font-weight: bold;
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase; /* 強制的に大文字にする */
  /* 少しすりガラス風のエフェクト（対応ブラウザのみ有効、非対応でも問題なし） */
  backdrop-filter: blur(3px);
}

/* 補足：Coming Soon の下の日本語テキスト（任意） */
.coming-soon-text-ja {
  font-size: 1rem;
  font-weight: normal;
  margin-top: 0.5rem;
  opacity: 0.9;
  font-family: "LINE Seed JP", sans-serif;
}

/* 3. ボタンを押せなく見えるようにする */
.card-coming-soon .btn {
  pointer-events: none; /* クリック無効化 */
  opacity: 0.5;         /* 半透明にして無効感を出す */
}

footer {
  font-size:0.7rem;
}

/* ▼▼ ヒーローセクション（動画背景用） ▼▼ */
.hero-section {
  position: relative;
  padding-top: 8rem;   /* 動画の景色を広く見せるために余白を増やす */
  padding-bottom: 8rem;
  min-height: 60vh;    /* 画面の高さに対して良い感じの割合を確保 */
  display: flex;
  align-items: center;
}

/* 動画を全画面にフィットさせる設定 */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 縦横比を維持したまま枠いっぱいにトリミング */
  transform: scale(1.35); /* ★追加：アニメ動画の上下黒帯を枠外に押し出す */
  z-index: 0;
}

/* 文字を読みやすくするためのフィルター */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* 動画が綺麗に見える薄さの黒 */
  z-index: 1;
}

/* 白文字をくっきりさせるドロップシャドウ */
.text-shadow {
  text-shadow: 0 2px 8px rgba(0,0,0,0.7); 
}
.text-shadow-sm {
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

/* 人物写真のトリミング設定（超重要） */
.hero-portrait {
  width: 100%;
  height: 60vh;                /* パソコン表示時の高さをしっかりキープ */
  min-height: 400px;           /* 最低限の高さを保証 */
  max-height: 600px;           /* 大きくなりすぎるのを防ぐ */
  object-fit: cover;           /* 枠に合わせて画像を拡大・トリミング */
  object-position: 50% center; /* ★重要：写真の右側（人物）にフォーカスし、左のボケを枠外に追い出す */
  border-radius: 20px;         /* 角を丸くして柔らかい印象に */
  box-shadow: 0 15px 35px rgba(0,0,0,0.1); /* ふんわりとした影をつけて立体感を出す */
}

/* スマホ表示時の画像高さを調整 */
@media (max-width: 991.98px) {
  .hero-portrait {
    height: 50vh;
    min-height: 300px;
  }
}

/* ▼▼ カードをふわっと浮かせるホバーエフェクト ▼▼ */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-5px); /* 5px上に持ち上げる */
  box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important; /* 影を少し大きくする */
}

/* ▼▼ スクロール連動ヘッダーのスタイル ▼▼ */
/* ヘッダー全体の変化を滑らかにする（transformも追加） */
.transition-navbar {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.4s ease-in-out;
  background-color: transparent; /* トップでは完全に透明 */
  transform: translateY(0);      /* 初期位置 */
}

/* 一旦隠すためのクラス（上へスライドアウト） */
.nav-hidden {
  transform: translateY(-100%); /* 画面上部へ隠す */
  background-color: transparent !important;
  box-shadow: none !important;
}

/* スクロール後、再表示された状態（白背景＋薄い影＋元の位置へ） */
.navbar-scrolled {
  background-color: #ffffff !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transform: translateY(0); /* 画面内に戻ってくる */
}

/* ▼ ロゴのテキスト色の切り替え ▼ */
/* 1. トップ（透明時）は白文字 */
.transition-navbar .logo-text {
  color: #ffffff;
  transition: color 0.3s ease;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.transition-navbar .logo-subtext {
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.3s ease;
}

/* 2. スクロール後（白背景時）は黒・グレー文字 */
.navbar-scrolled .logo-text {
  color: #333333;
  text-shadow: none;
}
.navbar-scrolled .logo-subtext {
  color: #6c757d;
}

/* ▼▼ バナー用背景動画のスタイル ▼▼ */
/* 上のバナーと共通の背景画像を打ち消す */
.video-banner {
  background: none !important;
  background-color: #000 !important;
}

/* 動画をバナーの枠いっぱいに広げる（余白を消す） */
.banner-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* ▼ 動画ファイル自体にある左右の黒帯を枠外に押し出すため、1.35倍にズームする ▼ */
  transform: scale(1.35); 
  z-index: 0;
}

/* 白文字を読みやすくするための黒い半透明フィルター */
.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 黒の半透明（50%） */
  z-index: 1;
}

/* ▼▼ スマホ表示時のレイアウト微調整 ▼▼ */
@media (max-width: 767.98px) {
  /* 1. FV（ファーストビュー）の高さと余白の調整 */
  .hero-section {
    padding-top: 6rem;    /* スマホでは上の余白を少し減らす */
    padding-bottom: 4rem; /* 下の余白も減らす */
    min-height: 80vh;     /* スマホ画面に合わせて少し縦長に領域を確保 */
  }
  
  /* 2. ヘッダーロゴが長すぎてトグルメニューが崩れる（落ちる）のを防ぐ */
  .navbar-brand {
    max-width: 80%;       /* トグルボタンのスペース（右の20%）を確保する */
    white-space: nowrap;  /* テキストが途中で改行されるのを防ぐ */
  }
  .transition-navbar .logo-text {
    font-size: 1.1rem;    /* スマホ時のみ文字サイズを少し小さく */
  }
  .navbar-brand img {
    height: 26px !important; /* はんこアイコンも文字に合わせて少し小さく */
  }

  /* ▼▼ 今回追加する記述：FV動画を左にシフトする ▼▼ */
  .hero-video {
    /* 左端（0%）から25%の位置を画面の中央に持ってくる */
    object-position: 25% center; 
  }

  .interview-banner {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../img/interview-bg.jpg) no-repeat top left;
    background-color: #6c757d;
    background-size: cover;
    color: white;
    padding: 11rem 1rem 3rem 1rem;
    border-radius: 12px;
    transition: transform 0.3s ease;
    text-decoration: none;
    display: block;
  }
}

/* ▼▼ リッチなオフキャンバスメニューのスタイル ▼▼ */
.custom-rich-menu {
  background-color: #2c2c2c; /* 高級感のあるダークグレー */
  color: #ffffff;
  width: 380px; /* デフォルトより少し幅広にしてゆったりと */
  max-width: 100%; /* スマホ画面では100%に */
}

/* リンクの基本スタイルとアニメーション設定 */
.rich-nav-link {
  color: #ffffff !important;
  position: relative;
  display: inline-block;
  padding-left: 0 !important;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* ホバー時のスライドエフェクト */
.rich-nav-link:hover {
  color: #ffc107 !important; /* アクセントカラー（ゴールド系）に変化 */
  transform: translateX(12px); /* 右へスッとスライド */
}

/* 英語のサブタイトル装飾 */
.rich-nav-link .en-sub {
  display: block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.75rem;
  color: #888888;
  letter-spacing: 0.15em;
  margin-top: 4px;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

/* ホバー時のサブタイトル色変化 */
.rich-nav-link:hover .en-sub {
  color: #cccccc;
}