@charset "utf-8";




/* ===========================================================
   FIRST VIEW (FV)
=========================================================== */

.first-view.js-bg-mono {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  /* 左側：黒（#000000）、右側：白（#FFFFFF）の左右分割グラデーション */
  background: linear-gradient(90deg, #000000 50%, #ffffff 50%);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 赤黄粒子が描画される Canvas (最背面) */
#fv-canvas {
  position: absolute;/* 浮かす */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;/* クリックしても反応しなくさせる */
}

/* メディアコンテナ (最前面) */
.first-media {
  position: relative;
  z-index: 2;
  text-align: center;

  /* 反転演出：背景が白なら文字は黒、背景が黒なら文字は白に変化 */
  /* |(元の色)-(重ねる色)|=|出力される色|のロジック */
  mix-blend-mode: difference;
  /* |255-255|=|0|=0(黒),|0-255|=|-255|=255(白) */
  color: var(--color-white);
  /* 重ねる色を白くしとくと計算上うまく反転する */

  /* 青い選択範囲ついてダサくなるの防止 */
  user-select: none;
  

  /* 初期状態は小さく透明に */
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 集束完了時に発火する表示用クラス */
.first-media.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* タイポグラフィサイズ（ご提示のサイズ感を clamp でレスポンシブ適用） */
.fv-title {
  font-size: clamp(1.375rem, 5.5vw, 6rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;

}

/* ===========================================================
   【修正】タイポグラフィサイズ ＋ 外に出したh1用の演出を追加
=========================================================== */
.fv-title {
  /* 外に出したため、演出・位置調整のプロパティを追加 */
  position: relative;
  z-index: 2;
  text-align: center;
  mix-blend-mode: difference;
  color: #ffffff;
  user-select: none;

  /* first-media と同じアニメーション用の初期状態 */
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* タイポグラフィサイズ */
  /* 最小: 2rem (370px時) 〜 最大: 6rem (1800px時) */
  font-size: clamp(2rem, 0.965rem + 4.476vw, 6rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  /* h1の”Lomni"と"Design"の間の枠確保 */
  display: flex;
}

/* h1も一緒にフェードインさせるための指定 */
.fv-title.is-visible {
  opacity: 1;
  transform: scale(1);
}


/* Lomniの文字間だけを少し広げて、DESIGNとの視覚的なバランス（横幅）を揃える */
.fv-title .lomni {
  width: 50%;
  text-align: right;
  letter-spacing: 0.15em; /* lomniの方が文字の横幅エリアが狭いため */
  padding-right: 0.2em; /* 中央線から左へ少し引く */
}
.fv-title .design {
  width: 50%;
  text-align: left;
  padding-left: 0.2em; /* 中央線から左へ少し引く */
}

.fv-sub {
  margin-top: 1.5rem;
  font-size: clamp(1rem, 2vw, 1.5rem);
  letter-spacing: 0.2em;
}





/* ===========================================================
   4. 各セクションの個別スタイリング
=========================================================== */


/* Philosophy セクション */
.philosophy-box {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 50px;
}

.philosophy-box h3 img {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.philosophy-box p {
  font-size: 1rem;
  line-height: 1.8;
}

/* PCレイアウト (768px〜) */
@media (min-width: 768px) {
  .philosophy-box {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .philosophy-box h3,
  .philosophy-box p {
    flex: 1;
  }

  .philosophy-box h3 img {
    max-width: 100%;
  }
}



/* ==========================================
   Portfolio セクション（スマホ・共通ベース）
   ========================================== */


/* 全体囲み（横幅と中央寄せ） */
.content-container {
  width: 100%;           /* 大外のpadding(40px)で制御するため100%に */
  margin: 0 auto;
  padding: 40px 80px;       
}

/* カード（ボタン）を囲む親ボックス */
.content-airbox {
  width: 100%;
  margin-bottom: 32px;   /* スマホ時のカード同士の縦間隔 */
}

/* カード（ボタン）枠 */
.portfolio .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;   /* スマホ時も比率固定でスッキリ整える */
  padding: 16px;
  border: 1px solid #ffffff;
  background-color: transparent;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

/* 中の画像（縦横比を崩さず枠内に収める） */
.portfolio .btn img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ホバー（タップ）時：枠線と一体化して背景が白になる */
.portfolio .btn:hover {
  background-color: #ffffff;
}

/* カード下の注釈テキスト */
.content-airbox p {
  margin-top: 12px;
  color: var(--color-white);
  font-size: 1rem;
  text-align: center;
}


/* ==========================================
   PC版の設定（768px以上）
   ========================================== */
@media (min-width: 768px), (orientation: landscape) {
  /* 横並び化 */
  .content-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 80px;
  }

  /* 3つのカードを均等幅にし、下の余白をリセット */
  .content-airbox {
    flex: 1;
    margin-bottom: 0;
  }
}

/* ==========================================
=============================================
Profile セクション（基本：スマホ）
=============================================
   ========================================== */
/* section profileの横余白確保 */
.logo-text-area{
  padding: 0 40px;
}


   /* ロゴの親容器：中央寄せと縦の余白を管理 */
.logo-box {
  display: flex;
  justify-content: center; /* 左右中央揃え */
  align-items: center;     /* 上下中央揃え */
  
}

/* ロゴ画像自体：見え方のサイズをコントロール */
.logo-box img {
  width: 200px; /* お好みのサイズ（例: 120px〜180pxなど）に調整 */
  height: auto;  /* アスペクト比（縦横比）を崩さない */
  display: block;
}


/* スマホ用 + view more ボタン */
/* スマホ・PC共通の基本スタイル */
.view-box {
  display: block;
  margin: 0 auto 20px;
  padding: 10px 20px;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #ccc; /* うっすらとしたグレーの下線 */
  cursor: pointer;
  font-size: 1rem;
  color: #333;
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  -webkit-tap-highlight-color: transparent; /* タップ時のグレーの枠を消す */
}

/* スマホ（タップした瞬間）の反応 */
.view-box:active {
  color: #0056b3;
  border-bottom-color: #0056b3;
  transform: translateY(1px); /* 押した感が出るように少し沈む */
}


  .view-box:hover {
    color: #0056b3;
    border-bottom-color: #0056b3;
    transform: translateY(-2px);
  }


/* テキスト領域（初期状態は非表示） */
.profile-text {
  display: none; /* スマホでは最初隠す */
  padding: 20px;
  background: #f9f9f9;
}

/* JSでボタンが押された時に付与されるクラス */
.profile-text.is-open {
  display: block; /* クリックされたら出現 */
}



/* ==========================================
   PC版（ブレークポイント例：768px〜）
   ========================================== */
@media (min-width: 768px), (orientation: landscape) {
  /* ロゴとテキストを横並びにする */
  .logo-text-area {
    display: flex;
    align-items: center;
    gap: 40px;
    width: 80%;
    margin: 0 auto;
  }

  /* PCでは view more ボタンを消す */
  .view-box {
    display: none;
  }

  /* PCではテキストを常時表示（is-openクラスに関係なく表示） */
  .profile-text {
    display: block ;
    flex: 1; /* 残りの横幅をいっぱいに使う */
    background: transparent;
    padding: 0;
  }
}

/* 最後の最後。PhilosophyとPortfolioの上部余白が欲しかった。Portfolioだけ何故かいける。 */
section h2{
  margin-top: 40px;
}