/* =========================================================================
   COMPONENTS.CSS (WP4: 3層CSS統合 — tokens / components / pages)
   7ページ分の抽出CSS(assets/css/pages/*.css)から、2ファイル以上で
   同一・準同一だったルールを一元化したもの。
   カノニカル化の詳細・却下理由は assets/css/DEDUPE-LOG.md を参照。
   読み込み順: tokens.css → components.css → pages/xxx.css
   (ページ固有CSSは同じ詳細度でも後着なので、必要な差分は各ページ側で
   引き続き上書きできる)
   ========================================================================= */

/* -------------------------------------------------------------------------
   基本リセット & 共通要素 (7ファイル完全一致)
------------------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background-color: var(--bg-base);
  color: var(--text-dark);
  font-family: var(--font-body);
  line-height: 1.8;
  letter-spacing: 0.06em;
  overflow-x: hidden;
  /* 空間のテクスチャ：極小のオーガニックノイズを背景に合成して無機質さを排除 */
  background-image: radial-gradient(rgba(0,0,0,0.01) 1px, transparent 0);
  background-size: 24px 24px;
}
a { color: inherit; text-decoration: none; transition: all 0.4s ease; }
img { max-width: 100%; height: auto; display: block; }

/* button/select/input/textareaの基本リセット
   (top.css/item.css は button,select のみの狭いセレクタでcursor:pointerを保持、
   cart/auth/mypage/contact/faq は input,textarea も含む広いセレクタでcolor:inheritを保持。
   両方の宣言をここに集約。top/item側の cursor:pointer は各ページ残余CSSに残置。) */
button, select, input, textarea { background: none; border: none; font: inherit; color: inherit; }

/* フォームコントロール基本スタイル (auth.css/mypage.cssが完全一致、他は準同一→カノニカル化) */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select, textarea {
  width: 100%;
  padding: 0.9rem 1.2rem;
  border: 1px solid rgba(138, 106, 74, 0.3);
  background-color: #FFFFFF;
  transition: all 0.3s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-main);
  box-shadow: 0 0 0 3px rgba(85, 107, 77, 0.1);
}

/* フェードインアニメーション用クラス (top.css/item.css完全一致) */
.fade-in-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .fade-in-section {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* -------------------------------------------------------------------------
   グローバルナビゲーション (7ファイル完全一致)
------------------------------------------------------------------------- */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: rgba(248, 245, 240, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(138, 106, 74, 0.1);
}
.header-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
}
.logo-area { display: flex; flex-direction: column; flex-shrink: 0; }
.logo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}
.logo-mark {
  width: auto;
  height: clamp(1.75rem, 4vw, 2.25rem);
  flex-shrink: 0;
}
.logo-text {
  font-family: var(--font-en);
  font-size: clamp(1.05rem, 3.8vw, 1.6rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--text-dark);
  white-space: nowrap;
}

.header-search {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  max-width: 28rem;
  min-width: 0;
  border: 1px solid rgba(138, 106, 74, 0.22);
  background-color: rgba(255, 255, 255, 0.72);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.header-search:focus-within {
  border-color: var(--color-main);
  box-shadow: 0 0 0 3px rgba(85, 107, 77, 0.1);
}
.header-search-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: none;
  background: transparent;
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: var(--text-dark);
  appearance: none;
}
.header-search-input::placeholder {
  color: var(--text-muted);
  opacity: 0.8;
}
.header-search-input:focus {
  outline: none;
  box-shadow: none;
}
.header-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-main);
  cursor: pointer;
}
.header-search-submit:hover { color: var(--color-sub); }
.header-search-icon {
  width: 1.15rem;
  height: 1.15rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.g-nav { display: flex; align-items: center; gap: 1.5rem; flex-shrink: 0; }
.g-nav-list { display: flex; list-style: none; gap: 2rem; }
.g-nav-link {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--text-dark);
  position: relative;
  padding: 0.5rem 0;
  white-space: nowrap;
}
.g-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background-color: var(--color-main);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
.g-nav-link:hover::after { width: 100%; }

.cart-icon-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  color: var(--color-main);
}
.cart-svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
/* WP7: カート内数量バッジ (cart-icon-wrapper は position:relative 済み) */
.cart-count-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background-color: var(--color-main);
  color: #FFFFFF;
  font-size: 0.65rem;
  font-family: var(--font-display);
  line-height: 16px;
  text-align: center;
}

/* -------------------------------------------------------------------------
   パンくずリスト (item/mypage/contact/faq 完全一致)
------------------------------------------------------------------------- */
.breadcrumb-area {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 2rem 0 2rem;
}
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-family: var(--font-display);
}
.breadcrumb-item:not(:last-child)::after {
  content: "＞";
  margin: 0 0.8rem;
  font-size: 0.75rem;
  color: var(--color-sub);
}
.breadcrumb-item a:hover { color: var(--color-main); }
.breadcrumb-item.active { color: var(--text-dark); font-weight: 500; }

/* -------------------------------------------------------------------------
   フッター (top/item/cart/auth/contact/faq 完全一致。mypage.cssは欠落していた
   ため統合により新たに継承 — DEDUPE-LOG参照)
------------------------------------------------------------------------- */
footer {
  background-color: #22271E;
  color: rgba(248, 245, 240, 0.6);
  padding: 3.5rem 2rem 2rem;
  font-size: 0.88rem;
  border-top: 1px solid rgba(85, 107, 77, 0.2);
}
.footer-container { max-width: 1400px; margin: 0 auto; }
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2.5rem 3rem;
  margin-bottom: 2.5rem;
}
.footer-brand { display: flex; flex-direction: column; gap: 0.4rem; }
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.footer-logo-mark {
  width: auto;
  height: 1.75rem;
  flex-shrink: 0;
}
.footer-logo-text {
  font-family: var(--font-en);
  font-size: 1.35rem;
  color: #FFFFFF;
  letter-spacing: 0.12em;
}
.footer-company-name {
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: rgba(248, 245, 240, 0.55);
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-end;
}
.footer-nav-groups { display: flex; gap: 5rem; flex-wrap: wrap; }
.footer-nav-block h3 {
  font-family: var(--font-display);
  color: #FFFFFF;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}
.footer-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.5rem;
  justify-content: flex-end;
}
.footer-links-primary a {
  color: rgba(248, 245, 240, 0.85);
  font-family: var(--font-display);
  font-size: 0.9rem;
}
.footer-links-secondary a {
  color: rgba(248, 245, 240, 0.5);
  font-size: 0.8rem;
}
.footer-links a { color: rgba(248, 245, 240, 0.6); }
.footer-links a:hover { color: var(--color-accent); }
.footer-divider { border: 0; height: 1px; background-color: rgba(248, 245, 240, 0.1); margin-bottom: 1.5rem; }
.footer-bottom { display: flex; justify-content: center; align-items: center; }
.copyright {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: rgba(248, 245, 240, 0.4);
}

/* -------------------------------------------------------------------------
   ボタン: アクセントCTA (top/item/faq 完全一致)
------------------------------------------------------------------------- */
.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 4.5rem;
  background-color: var(--color-accent);
  color: var(--text-dark);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  transition: all 0.4s;
}
.btn-accent:hover {
  background-color: #FFFFFF;
  color: var(--text-dark);
  transform: translateY(-2px);
}

/* ボタン: ガイド導線 (item.css/auth.css。item側は align-items/justify-content が
   無い準同一だったため、両立可能なauth側の完全版をカノニカルとして採用) */
.guide-routing-buttons { display: flex; justify-content: center; gap: 2rem; }
.routing-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 3.5rem;
  border: 1px solid var(--text-dark);
  font-family: var(--font-display);
  font-size: 0.95rem;
  transition: all 0.4s;
}
.routing-link-btn:hover {
  background-color: var(--text-dark);
  color: var(--bg-base);
}

/* ボタン: フォーム系アクション（プライマリ/セカンダリ）の hover 配色のみ共通化。
   ベースの寸法(width/height/padding)はcart/auth(全幅CTA)とmypage/contact(インラインCTA)
   で意図的に異なる設計のため、各ページ側に残置（DEDUPE-LOG参照）。 */
.btn-primary-action:hover {
  background-color: var(--color-sub);
  color: #FFFFFF;
}
.btn-secondary-action:hover {
  background-color: var(--text-dark);
  color: var(--bg-base);
}

/* -------------------------------------------------------------------------
   フォーム: 基本パーツ (cart/auth/mypage/contact 完全一致・準同一の集約)
------------------------------------------------------------------------- */
.form-group { margin-bottom: 1.8rem; position: relative; }
.form-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}
.form-label span.req {
  color: var(--color-error);
  font-size: 0.75rem;
  margin-left: 0.5rem;
}
.field-error-message {
  color: var(--color-error);
  font-size: 0.8rem;
  margin-top: 0.4rem;
  display: none;
}

/* フォーム: フィールドセット/凡例/2カラムグリッド (cart/auth/contact 完全一致)
 *
 * <legend> はブラウザ標準で fieldset 上辺ボーダー上に載る。
 * float:left + width:100% で白背景内に収めるが、直後の兄弟が横に回り込むため
 * legend 以外の子すべてに clear:both が必須（display:none のエラー文があっても次要素が潰れる）。
 */
.form-block-fieldset {
  background-color: #FFFFFF;
  border: 1px solid rgba(138, 106, 74, 0.12);
  padding: 3rem;
  margin-bottom: 2.5rem;
}
.form-block-legend {
  float: left;
  width: 100%;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 2rem;
  padding: 0 0 0.6rem;
  border-bottom: 2px solid var(--color-main);
}
.form-block-fieldset > *:not(.form-block-legend) {
  clear: both;
}
.form-block-fieldset::after {
  content: "";
  display: table;
  clear: both;
}
.form-row-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  min-width: 0;
}
.form-row-grid-2 > * {
  min-width: 0;
}

/* フォーム: 利用規約同意チェックボックス (auth/contact 完全一致) */
.terms-agreement-checkbox-wrapper {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background-color: rgba(138, 106, 74, 0.04);
  border: 1px solid rgba(138, 106, 74, 0.1);
}
.terms-inline-link { color: var(--color-sub); text-decoration: underline; }
.terms-inline-link:hover { color: var(--color-main); }

/* フォーム: パスワード表示トグル (auth/mypage 完全一致) */
.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.password-toggle-btn {
  position: absolute;
  right: 1.2rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-family: var(--font-display);
  cursor: pointer;
  user-select: none;
}

/* -------------------------------------------------------------------------
   疑似画面遷移: フロー見出し (cart/auth 完全一致。contactは幅/余白が異なる
   独自デザインのため flow-content-container と flow-title 本体は
   contact.css 側に残置。装飾下線(::after)のみ3ファイル完全一致で共通化)
------------------------------------------------------------------------- */
.flow-content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem 8rem 2rem;
}
.flow-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  color: var(--text-dark);
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
}
.flow-title::after {
  content: "";
  position: absolute;
  bottom: -15px; left: 50%;
  width: 40px; height: 1px;
  background-color: var(--color-sub);
  transform: translateX(-50%);
}

/* -------------------------------------------------------------------------
   完了画面の共通装飾 (cart/auth/contact 完全一致)
------------------------------------------------------------------------- */
.completion-wrapper {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
  background-color: #FFFFFF;
  border: 1px solid rgba(138, 106, 74, 0.12);
  padding: 5rem 3.5rem;
}
.completion-icon { color: var(--color-main); margin-bottom: 2rem; }
.completion-icon svg { width: 72px; height: 72px; stroke-width: 1.2; }
.completion-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--text-dark);
  margin-bottom: 1.5rem;
}
.completion-text {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 2;
  margin-bottom: 3.5rem;
  text-align: left;
}

/* -------------------------------------------------------------------------
   マイページ: サイドバー & カード共通パーツ (auth/mypage 完全一致・準同一)
   ※ .mypage-nav-item の子要素タグが auth.css(<a>) / mypage.css(<button>) で
     異なる(クラス名は同一)ため、グループセレクタでエイリアス化。
------------------------------------------------------------------------- */
.mypage-sidebar {
  background-color: #FFFFFF;
  border: 1px solid rgba(138, 106, 74, 0.12);
  padding: 2.5rem 2rem;
  height: fit-content;
}
.mypage-welcome-box {
  border-bottom: 1px solid rgba(138, 106, 74, 0.15);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}
.mypage-welcome-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text-dark);
  font-weight: 600;
}
.mypage-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mypage-nav-item a, .mypage-nav-item button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.8rem 1rem;
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--text-muted);
  border-left: 2px solid transparent;
  transition: all 0.3s;
}
.mypage-nav-item.is-active a, .mypage-nav-item a:hover,
.mypage-nav-item.is-active button, .mypage-nav-item button:hover {
  color: var(--color-main);
  background-color: rgba(85, 107, 77, 0.04);
  border-left-color: var(--color-main);
}
.mypage-card {
  background-color: #FFFFFF;
  border: 1px solid rgba(138, 106, 74, 0.1);
  padding: 2.5rem;
}
.mypage-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(138, 106, 74, 0.15);
  padding-bottom: 0.8rem;
  margin-bottom: 1.5rem;
}
.mypage-card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-dark);
}

/* 購入履歴リスト: 一覧全体レイアウトのみ共通 (auth/mypage 完全一致)。
   個々のカード装飾(order-history-item/header)は背景色等が異なる意図的な
   差異のため各ページ側に残置(DEDUPE-LOG参照)。 */
.order-history-list { display: flex; flex-direction: column; gap: 1.5rem; }
.order-history-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* -------------------------------------------------------------------------
   トップ/商品詳細: セクション見出し共通パーツ (top/item 完全一致)
------------------------------------------------------------------------- */
.section-padding { padding: 8rem 2rem; max-width: 1400px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 5rem; position: relative; }
.section-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--text-dark);
}
.section-subtitle {
  font-family: var(--font-en);
  font-size: 0.85rem;
  color: var(--color-sub);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  margin-top: 0.5rem;
  display: block;
}

/* -------------------------------------------------------------------------
   データ確認テーブル: 外枠 & ヘッダーセルのみ共通 (mypage/contact 完全一致)。
   行セルの padding/vertical-align はcontactの複数行本文(pre-wrap)表示に
   合わせた意図的な差異のため、各ページ側に残置(DEDUPE-LOG参照)。
------------------------------------------------------------------------- */
.data-confirm-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}
.data-confirm-table th {
  background-color: rgba(138, 106, 74, 0.03);
  width: 30%;
  color: var(--text-muted);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   ローディングスピナー (cart/auth/mypage/contact 完全一致。
   .loading-overlay の背景不透明度のみ 0.8(cart/auth) と 0.85(mypage/contact) の
   準同一差異があったため、より早い原本(03 cart.css)の値 0.8 に統一)
------------------------------------------------------------------------- */
.loading-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(248, 245, 240, 0.8);
  z-index: 5000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.loading-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}
.spinner {
  width: 50px;
  height: 50px;
  border: 3px solid rgba(138, 106, 74, 0.15);
  border-top-color: var(--color-main);
  border-radius: 50%;
  animation: spin 1s infinite linear;
  margin-bottom: 1.5rem;
}
.loading-text {
  font-family: var(--font-display);
  color: var(--text-dark);
  font-size: 0.95rem;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------
   RESPONSIVE: 上記共通パーツのブレークポイント (7ファイルで完全一致していた
   宣言のみ集約。ページ固有のグリッド列変更等は各pages/*.cssに残置)
------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .footer-nav { align-items: flex-start; }
  .footer-links { justify-content: flex-start; }
}
@media (max-width: 768px) {
  .footer-top { flex-direction: column; gap: 2rem; }
  .footer-nav { width: 100%; }
  .header-container {
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    gap: 0.75rem 1rem;
  }
  .header-search {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
  }
  .g-nav { margin-left: auto; gap: 1rem; }
}