/* すべての要素の余白をなくし、サイズ計算を境界線を含める方式（border-box）に統一し、フォントをInterに設定する */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Inter',sans-serif;
}

/* ページ全体の背景色（ベージュ系）と文字色を設定し、スクロールを無効化する */
body{
  background:#f6f3ee;
  color:#2f2b28;
  overflow:hidden;
}

/* BACKGROUND */
/* 背景の奥に2つの円形グラデーション（左上と右下）を配置し、柔らかな雰囲気を作る */
body::before{
  content:"";

  position:fixed;
  inset:0;

  background:
  radial-gradient(circle at top left,
  rgba(180,155,122,0.10),
  transparent 30%),

  radial-gradient(circle at bottom right,
  rgba(140,146,125,0.08),
  transparent 30%);

  z-index:-2;
}

/* HERO */
/* メインコンテンツを囲む領域の高さを画面いっぱいにし、スクロールバーを出さずに余白を設定する */
.hero{
  min-height:100vh;

  position:relative;
  overflow:hidden;

  padding:30px 20px 100px;
}

/* GLOW */
/* 画面上に配置するぼかし効果のある円形要素の共通スタイルを設定する */
.glow{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
}

/* 1つ目のぼかし要素（茶色系）のサイズと配置を画面左上に設定する */
.glow1{
  width:320px;
  height:320px;

  background:#b49b7a;

  top:40px;
  left:-80px;

  opacity:0.16;
}

/* 2つ目のぼかし要素（緑・グレー系）のサイズと配置を画面右下に設定する */
.glow2{
  width:380px;
  height:380px;

  background:#8c927d;

  right:-100px;
  bottom:-120px;

  opacity:0.14;
}

/* PARTICLES */
/* ふわふわ浮遊する粒子のコンテナを画面全体に広げ、クリック判定を無効化する */
.particles{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* 各粒子のサイズ、形状（円形）、色、そして浮遊アニメーションを設定する */
.particles span{
  position:absolute;

  width:4px;
  height:4px;

  border-radius:50%;

  background:rgba(140,122,100,0.28);

  animation:floatParticle 12s linear infinite;
}

/* 1つ目の粒子の初期位置を設定する */
.particles span:nth-child(1){
  top:15%;
  left:12%;
}

/* 2つ目の粒子の初期位置を設定する */
.particles span:nth-child(2){
  top:35%;
  left:78%;
}

/* 3つ目の粒子の初期位置を設定する */
.particles span:nth-child(3){
  top:72%;
  left:18%;
}

/* 4つ目の粒子の初期位置を設定する */
.particles span:nth-child(4){
  top:82%;
  left:68%;
}

/* 5つ目の粒子の初期位置を設定する */
.particles span:nth-child(5){
  top:55%;
  left:48%;
}

/* 粒子が下から上へ移動するアニメーションのキーフレームを定義する */
@keyframes floatParticle{
  from{
    transform:translateY(0);
  }

  to{
    transform:translateY(-180px);
  }
}

/* CONTENT */
/* ログインエリア等を内包するコンテンツ枠の最大幅を制限し、画面中央に配置する */
.hero-content{
  width:100%;
  max-width:1200px;

  margin:auto;

  min-height:calc(100vh - 120px);

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

  position:relative;
  z-index:5;
}

/* LOGIN AREA */
/* ログインフォーム全体の幅を制限し、中央に寄せる */
.left-content{
  width:100%;
  max-width:480px;

  margin:auto;
}

/* LOGO */
/* 画面左上に表示するロゴと会社名を横並びに配置する */
.logo-wrap{
  position:absolute;

  top:0;
  left:0;

  display:flex;
  align-items:center;

  gap:14px;
 
  margin-left: -80px;
}

/* ロゴ画像の幅を設定する */
.logo-wrap img{
  width:58px;
}

/* 「株式会社」などの小さなテキストの色とサイズを設定する */
.small-text{
  font-size:15px;
  color:#7b746d;
  font-weight: 500;
}

/* 会社名のフォントサイズ、太さ、色を設定する */
.logo-text h1{
  font-size:18px;
  font-weight:600;

  color:#585049;
}

/* WELCOME */
/* 歓迎メッセージ（大見出し）を中央揃えにし、余白を設定する */
.welcome-text{
  text-align:center;
  margin-bottom:10px;
}

/* 歓迎メッセージのフォントサイズ、行間、色、上部の余白を設定する */
.welcome-text h2{
  font-size:46px;
  line-height:1.1;

  color:#411f01;
  margin-top: 100px;
}

/* 歓迎メッセージ下のサブテキスト（説明文）のスタイルを設定する */
.welcome-sub{
  text-align:center;
  margin-bottom:32px;

  color:#7c746d;
  font-size:18px;
  font-weight: 600;
}

/* LOGIN CARD */
/* ログイン情報を入力するカードの背景透過（グラスエフェクト）、角丸、影を設定する */
.login-card{
  width:100%;

  background:rgba(255,255,255,0.52);

  border:1px solid rgba(163, 145, 145, 0.339);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  border-radius:28px;

  padding:34px;

  position:relative;
  overflow:hidden;

  box-shadow:
  0 10px 32px rgba(44, 35, 25, 0.321);
}

/* ログインカードの表面に光沢（グラデーション）を追加する */
.login-card::before{
  content:"";

  position:absolute;
  inset:0;

  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,0.35),
    rgba(255,255,255,0.05)
  );

  pointer-events:none;
}

/* INPUT */
/* 入力項目ごとの下余白を設定する */
.input-group{
  margin-bottom:22px;
}

/* 入力欄上のラベル（項目名）のスタイルを設定する */
.input-group label{
  display:block;

  margin-bottom:8px;

  font-size:14px;

  color:#5b534b;
}

/* テキスト入力欄のサイズ、背景、角丸、枠線を設定する */
.input-group input{
  width:100%;

  padding:14px 16px;

  border:none;
  outline: 1px;;

  border-radius:14px;

  background:rgba(255,255,255,0.75);

  border:1px solid rgba(16, 16, 15, 0.43);

  color:#2f2b28;

  font-size:15px;
}

/* 入力前の薄い文字（プレースホルダー）の色を設定する */
.input-group input::placeholder{
  color:#a29a91;
}

/* BUTTON */
/* ログインボタンのサイズ、グラデーション背景色、文字色、角丸を設定する */
.login-btn{
  width:100%;

  border:none;
  cursor:pointer;

  padding:15px;

  border-radius:14px;

  background:
  linear-gradient(135deg,#604b31,#4d4431);

  color:white;

  font-size:15px;
  font-weight:600;

  transition:0.25s ease;
}

/* ログインボタンにマウスを乗せた際、上に浮き上がるアニメーションと影を設定する */
.login-btn:hover{
  transform:translateY(-2px);

  box-shadow:
  0 10px 30px rgba(120,100,80,0.20);
}

/* FOOTER */
/* 画面下部のコピーライト等を表示するフッターを固定配置する */
footer{
  position:fixed;

  bottom:24px;
  left:0;

  width:100%;

  text-align:center;

  z-index:10;
}

/* フッターの文字サイズと色を設定する */
footer p{
  font-size:13px;

  color:rgba(60,50,45,0.45);
}

/* MOBILE */
/* 画面幅が768px以下（スマートフォン等）の場合のレイアウト調整を行う */
@media(max-width:768px){

  /* スマホでは画面のスクロールを許可する */
  body{
    overflow:auto;
  }

  /* コンテンツ領域の上下余白を調整する */
  .hero{
    padding:60px 20px 120px;
  }

  /* 歓迎メッセージのフォントサイズを縮小する */
  .welcome-text h2{
    font-size:36px;
  }

  /* ログインカード内の余白を少し狭くする */
  .login-card{
    padding:28px;
  }

}