/* -----------------------------------
  style.css
  ————————
  全ページ共通の基本設定
  フォント・背景・基本色・リンク・メニュー・フッター等の共通要素

  背景:#100d0a
  背景２（薄め）:#251c0c
  本文:#C0b8af
  見出し:#bfa46f
  リンク:#bfa46f ホバーで#d4c97f
  
----------------------------------- */

/* Google Fontsの読み込み
   ここに全体で使うフォントをまとめて読み込む */
@import url('https://fonts.googleapis.com/css2?family=GFS+Didot&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');

/* ---------------------------
   ボディ全体の基本設定
   フォント・背景色・文字色・行間・余白などのベースライン設定
--------------------------- */
html, body {
  height: 100%;                 /* 画面全体の高さを確保 */
  min-height: 100vh;            /* 画面最低高さを100vhに */
  font-family: 'GFS Didot', 'Noto Serif JP', serif; 
  background-color: #100d0a;      /* 全体の背景色 */
  color: #c0b8af;                 /* ベースの文字色 */
  line-height: 1.6;               /* 読みやすい行間 */
  margin: 0;                      /* ブラウザ標準の余白を消す */
  text-align: center;    /* ページ全体のテキスト中央揃え */
  display: block;               /* ブロック要素として扱う */
  padding: 0;                    /* ブラウザ標準の余白を消す */
  overflow-x: hidden;        /* 横スクロールバーを出さない */
}

/* ---------------------------
   背景ロゴ画像（全ページ共通）
   背景に薄くロゴ画像を表示（装飾用）
--------------------------- */
.logo-wrapper {
  content: "";
  position: fixed;                /* 画面全体に固定 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  max-height: 100vh;
  background-image: url('/assets/images/logo-bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.1;                  /* 透過率で目立ちすぎないように */
  pointer-events: none;          /* 背景クリックを邪魔しない */
  z-index: 0;
}

main{
  padding: 20px;
  display: block;
  position: relative;
  z-index: 10;
}

/* ---------------------------
   見出しの基本設定
   フォント・文字色・行間・余白などのベースライン設定
--------------------------- */
h1, h2, h3, h4, h5 {
  font-family: 'GFS Didot', serif;
  font-weight: 700;
  color: #c0b8af;
  margin-top: 1.2em;
  margin-bottom: 0.5em;
  letter-spacing: 0.03em;
  text-align: center;
}

/* PC用サイズ */
h1 { font-size: 2em; }       /* 約32px */
h2 { font-size: 1.5em; }     /* 約24px */
h3 { font-size: 1.17em; }    /* 約18.7px */
h4 { font-size: 1em; }       /* 約16px */
h5 { font-size: 0.83em; }    /* 約13.3px */
h6 { font-size: 0.67em; }    /* 約10.7px */

/* スマホ用サイズ */
@media (max-width: 600px) {
  h1 { font-size: 1.5em; }   /* 約24px */
  h2 { font-size: 1.25em; }  /* 約20px */
  h3 { font-size: 1.1em; }   /* 約17.6px */
  h4 { font-size: 0.9em; }   /* 約14.4px */
  h5 { font-size: 0.75em; }  /* 約12px */
  h6 { font-size: 0.65em; }  /* 約10.4px */
}

/* --- レスポンシブ用のスペース制御 --- */
.br-sp {
  display: none;
}
@media (max-width: 600px) {
  .br-sp {
    display: inline; /* スマホのときだけ有効 */
  }
}

/* ---------------------------
   リンクの基本スタイル（全ページ共通）
   色・ホバー時の動作をここで統一
--------------------------- */
a {
  color: #bfa46f;               /* 通常リンク色 */
  text-decoration: none;        /* 下線は付けない */
  transition: color 0.3s ease;  /* 色の変化にアニメーションを */
}
a:hover,
a:focus {
  color: #d4c97f;               /* ホバー・フォーカス時の色 */
  outline: none;
}

/* ---------------------------
   メニューの基本スタイル
   ハンバーガーボタンやスライドメニューの共通設定
--------------------------- */
#menuToggle {
  position: fixed;
  top: 1rem;
  left: 1rem;
  background: #140f0b;
  border: solid 1px #251c0c;
  border-radius: 5px;
  cursor: pointer;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  transition: background-color 0.4s ease;
}
#menuToggle span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #bfa46f;
  border-radius: 2px;
  transition: background-color 0.4s ease;
}
#menuToggle:hover {
  background-color: #bfa46f;
}
#menuToggle:hover span {
  background-color: #251c0c;
}

#navMenu {
  position: fixed;
  top: 0;
  left: 0;
  width: 20%;
  max-width: 300px;
  height: 100%;
  background-color: #140f0b;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 2500;
  padding: 4rem 1rem 2rem;
  box-shadow: 2px 0 10px rgba(0,0,0,0.4);
}
#navMenu.open {
  transform: translateX(0);
}
#navMenu ul {
  list-style: none;
  padding: 0;
}
#navMenu li {
  margin-bottom: 1.5rem;
}
#navMenu li a {
  display: block;
  padding: 0.5em 0.8em;
  color: #c0b8af;
  font-family: 'Merriweather', serif;
  font-size: 1.1rem;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
#navMenu li a:hover,
#navMenu li a:focus {
  background-color: #bfa46f;
  color: #1a130f;
  outline: none;
}
#closeMenuBtn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  background: none;
  border: none;
  color: #c0b8af;
  cursor: pointer;
  z-index: 3001;
}

/*スマホ表示*/
@media screen and (max-width: 600px) {
  #navMenu {
    width: 50%;
  }
}

/* 検索ボックスのスタイル */
#navMenu input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
#navMenu input[type="search"],
#navMenu input[type="text"] {
  width: 100%;
  padding: 0.5em;
  border-radius: 6px;
  border: 1px solid #4a433b;
  background-color: #1f1a15;
  color: #c0b8af;
  font-family: 'Merriweather', serif;
  font-weight: 600;
  box-sizing: border-box;
}
#navMenu input[type="search"]:focus,
#navMenu input[type="text"]:focus {
  outline: none;
  border-color: #bfa46f;
  background-color: #3a2f26;
  color: #e9e4dc;
}

/* ---------------------------
   ロゴ共通スタイル
   indexページだけロゴ小を非表示に
--------------------------- */
body.index .logo-container {
  display: none;
}

/* PC時のロゴ固定位置 */
@media screen and (min-width: 601px) {
  .logo-container {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 82px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #100d0a;
    z-index: 2000;
  }
  .logo-small {
    height: 50px;
    display: block;
    margin: 0 auto;
  }
}

/* スマホ時のロゴ */
@media screen and (max-width: 600px) {
  .logo-large,
  .logo-small {
    position: static;
    margin: 1rem auto 2rem;
    display: block;
    max-width: 200px;
    height: auto;
  }
}

/* ---------------------------
   フッター共通スタイル
--------------------------- */
#footer-container {
  position: relative; /* z-indexを効かせるため */
  z-index: 20;
  width: 100%;
  background-color: #130e0a;
}
footer {
  bottom: 0;
  left: 0;
  color: #c0b8af;
  font-size: 0.65rem;
  text-align: center;
  padding: 0.5rem;
  z-index: 20;
}
footer a {
  color: #bfa46f;
}
footer a:hover {
  text-decoration: underline;
}
footer p {
  line-height: 1;
  opacity: 0.5;
}

/* ---------------------------
   メインコンテンツ周り（padding-topで
   ロゴ高さ分のスペースを空けるのは共通処理）
--------------------------- */
@media screen and (min-width: 601px) {
  main {
    padding-top: 82px !important; /* ロゴの高さ分だけ上余白確保 */
  }
}

/* ---------------------------
 ソーシャルリンク
--------------------------- */
.social-links {
  margin-top: 10rem;
  margin-bottom: 10rem;
  display: flex;
  justify-content: center;
  gap: 3rem;
}
.social-links a {
  display: inline-block;
  width: 30px;
  height: 30px;
}
.social-links img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter 0.3s ease;
}
.social-links a:hover img,
.social-links a:focus img {
  filter: invert(50%) sepia(80%) saturate(600%) hue-rotate(10deg);
  outline: none;
}

@media (max-width: 600px) {
  .social-links {
    margin-top: 5rem;    /* 上マージンを半分 */
    margin-bottom: 5rem; /* 下マージンを半分 */
    gap: 2rem;           /* アイコン間隔も少し狭めたい場合 */
  }

  .social-links a {
    width: 25px;  /* アイコン自体も少し小さく */
    height: 25px;
  }
}

/* --- コンセプトセクション用スタイル --- */
.concept-copy {
  font-size: 1.2rem;
  font-weight: 600;
  color: #bfa46f;
  max-width: 700px;
  margin: 0 auto 3rem auto;
  text-align: center;
  line-height: 1.6;
}

/* ------------------------------
  商品一覧グリッド共通スタイル
  用途：カテゴリ一覧、マイページお気に入りなど
------------------------------ */

/* グリッドレイアウト設定 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 最小200px幅で列作成 */
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

/* 商品カード */
.product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  word-wrap: break-word;
}

/* 商品画像 */
.product-card img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* 商品名 */
.product-card .product-name {
  margin-top: 0.5rem;
  font-size: 1rem;
  color: #c0b8af;
  white-space: normal;
}

/* ---------------------------
 ページサイズセレクター（商品表示件数とかお気に入り表示件数とか）
--------------------------- */
.page-size-selector {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px; /* ラベルとselectの間に隙間 */
  margin-bottom: 16px; /* お好みで余白調整 */
}
.page-size-selector label {
  white-space: nowrap; /* ラベルの文字を折り返さず横並び */
  line-height: 1.5;
}
.page-size-selector select {
  width: 100px;
  height: 2em;
  padding: 4px 8px;  /* 見た目の余裕 */
  font-size: 1rem;   /* 文字サイズも調整可能 */
  line-height: 1.5;
  box-sizing: border-box;
  vertical-align: middle;
}
.no-favorites {
  text-align: center;
  margin: 40px auto;
  font-size: 1.2rem;
  color: #555;
  grid-column: 1 / -1; /* グリッドの全列にまたがって表示 */
}
.pagination-controls button {
  display: none; /* 初期は非表示 */
}

/* ---------------------------
 プルダウン
--------------------------- */
select {
  background-color: #130e0a; /* フッターと近い暗めの背景色 */
  color: #c0b8af;           /* 文字色を本文と同じ色に */
  border: 1px solid #4a433b; /* ボーダーもアクセントカラーで */
  padding: 0.5em;
  border-radius: 6px;
  font-family: 'Merriweather', serif;
  font-weight: 600;
  cursor: pointer;
}
/* ---------------------------
 ホバーやフォーカス時のスタイル
--------------------------- */
select:hover,
select:focus {
  background-color: #1a130f;
  outline: none;
  border-color: #bfa46f;
  color: #e9e4dc;
}

li {
  list-style: none;
  padding-left: 0; /* インデントも消したい場合 */
  margin-left: 0;  /* 必要に応じて */
}

/* ---------------------------
 ボタン
--------------------------- */
button {
  background-color: #bfa46f;
  color: #3b2f2f;
  border: 1px solid #a88f50;
  border-radius: 6px;
  padding: 8px 16px;
  font-family: 'Merriweather', serif;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(59, 47, 47, 0.4);
  transition: background-color 0.3s ease, color 0.3s ease;
}
button:hover, button:focus {
  background-color: #a88f50;
  color: #c0b8af;
  outline: none;
}

/* ---------------------------
 入力フォーム周り
--------------------------- */
/* フォーム全体のコンテナ */
.auth-form-container {
  background-color: #1c1814; /* 少し明るめの背景 */
  padding: 0.2rem 3rem;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.7);
  max-width: 400px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* 入力フォーム */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
select,
textarea {
  width: 100%;
  max-width: 400px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid #4a433b;
  border-radius: 6px;
  background-color: #1f1a15; /* 暗めグレー */
  color: #c0b8af; /* 文字は白系 */
  font-size: 1rem;
  box-sizing: border-box;
  transition: background-color 0.3s ease;
  overflow-x: auto;
  white-space: nowrap;
  text-overflow: clip;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  outline: none;
  background-color: #2a231d;
  border-color: #bfa46f;        /* ゴールドのアクセント */
  color: #e9e4dc;               /* 明るめ文字 */
  outline: none;
}

/* オートフィル時の矯正背景指定 */
input:-webkit-autofill{
  -webkit-box-shadow: 0 0 0px 1000px #2a231d inset;
  -webkit-text-fill-color: #c0b8af;
  transition: background-color 5000s ease-in-out 0s;
}
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0px 1000px #3a2f26 inset;
  -webkit-text-fill-color: #e9e4dc;
  transition: background-color 5000s ease-in-out 0s;
}

/* パスワード入力欄 */
.password-wrapper {
  position: relative;
  width: 100%;
  max-width: 400px;
  display: inline-block;
}
.password-wrapper input {
  width: 100%;
  padding-right: 2.5rem; /* アイコン分のスペース確保 */
}
.password-wrapper i {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-125%);
  cursor: pointer;
  color: #888;
}

/* エラーメッセージ */
.auth-error {
  color: #ff6b6b;
  margin-bottom: 1rem;
  font-weight: 600;
}

/* スマホ対応（狭い画面で幅を少し狭める） */
@media screen and (max-width: 600px) {
  .auth-form-container {
    padding: 1.5rem 2rem;
    max-width: 320px;
  }
}

.hint {
  font-size: 0.8rem;
}

/* エラーメッセージ */
.input-error {
  color: #ff6b6b;
  font-size: 0.8rem;
  margin-top: -1rem;
  margin-bottom: 1rem;
  display: none;
}
.input-error.show {
  display: block;
}