/* ============================================
   A-NINE ネイルスクール カスタマイズCSS
   コンセプト: 20代女性向け / 上品 / フェミニン
   ============================================ */

/* --- カラーパレット ---
   メイン:    #E8A0BF (ローズピンク)
   アクセント: #D4789C (ディープローズ)
   サブ:      #FDF2F8 (淡いピンク背景)
   テキスト:  #4A3B47 (ダークブラウン)
   ライト:    #F9F5F7 (オフホワイト)
   ゴールド:  #C9A96E (アクセントゴールド)
   --- */

/* ============================================
   ベース
   ============================================ */
body {
  font-family: "Helvetica Neue", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
  color: #4A3B47;
  background-color: #FEFCFD;
  letter-spacing: 0.03em;
  line-height: 1.8;
}

a {
  color: #D4789C;
  transition: color 0.3s ease, opacity 0.3s ease;
}

a:hover {
  color: #C9A96E;
  text-decoration: none;
  opacity: 0.85;
}

/* ============================================
   ヘッダー
   ============================================ */
.ec-headerRole {
  background-color: #fff;
  border-bottom: 1px solid #F0E4EB;
}

.ec-headerNaviRole {
  background-color: #fff;
  border-bottom: 1px solid #F0E4EB;
}

.ec-headerNaviRole .ec-headerNaviRole__nav a {
  color: #4A3B47;
  font-size: 13px;
  letter-spacing: 0.05em;
}

.ec-headerNaviRole .ec-headerNaviRole__nav a:hover {
  color: #D4789C;
}

.ec-headerNaviRole .ec-headerNaviRole__cart a {
  color: #4A3B47;
}

.ec-headerNaviRole .ec-headerNaviRole__cart a:hover {
  color: #D4789C;
}

/* カート数バッジ */
.ec-cartNavi .ec-cartNavi__badge {
  background-color: #D4789C;
  color: #fff;
}

/* ============================================
   検索バー
   ============================================ */
.ec-headerSearch .ec-headerSearch__keyword input[type="search"],
.ec-headerSearch .ec-headerSearch__keyword input[type="text"] {
  border: 1px solid #E8C8D8;
  border-radius: 25px;
  padding: 8px 16px;
  background-color: #FDF2F8;
}

.ec-headerSearch .ec-headerSearch__keyword input:focus {
  border-color: #D4789C;
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 120, 156, 0.15);
}

.ec-headerSearch .ec-headerSearch__keywordBtn button {
  background-color: #D4789C;
  border: none;
  border-radius: 0 25px 25px 0;
  color: #fff;
}

/* ============================================
   ボタン
   ============================================ */

/* メインアクションボタン（カートに入れる、確認する等） */
.ec-blockBtn--action {
  background-color: #D4789C;
  border: none;
  border-radius: 30px;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 12px 24px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(212, 120, 156, 0.3);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ec-blockBtn--action:hover,
.ec-blockBtn--action:focus {
  background-color: #C46A8E;
  color: #fff;
  box-shadow: 0 4px 12px rgba(212, 120, 156, 0.4);
  transform: translateY(-1px);
}

/* キャンセル・戻るボタン */
.ec-blockBtn--cancel {
  background-color: #fff !important;
  border: 1px solid #E8C8D8;
  border-radius: 30px;
  color: #4A3B47 !important;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 12px 24px;
  transition: all 0.3s ease;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.ec-blockBtn--cancel:hover,
.ec-blockBtn--cancel:focus {
  background-color: #FDF2F8;
  border-color: #D4789C;
  color: #D4789C;
}

/* インラインボタン */
.ec-inlineBtn {
  background-color: #F9F5F7;
  border: 1px solid #E8C8D8;
  border-radius: 20px;
  color: #4A3B47;
  font-size: 13px;
  transition: all 0.3s ease;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.ec-inlineBtn:hover {
  background-color: #FDF2F8;
  border-color: #D4789C;
  color: #D4789C;
}

.ec-inlineBtn--action {
  background-color: #D4789C;
  border-color: #D4789C;
  border-radius: 20px;
  color: #fff;
}

.ec-inlineBtn--action:hover {
  background-color: #C46A8E;
  color: #fff;
}

/* ============================================
   ページヘッダー
   ============================================ */
.ec-pageHeader h1 {
  font-size: 22px;
  font-weight: 400;
  color: #4A3B47;
  letter-spacing: 0.1em;
  border-bottom: 2px solid #E8A0BF;
  padding-bottom: 12px;
}

/* セクション見出し */
.ec-rectHeading h2 {
  background-color: #FDF2F8;
  color: #4A3B47;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  border-left: 3px solid #D4789C;
  padding: 10px 16px;
}

/* ============================================
   商品一覧
   ============================================ */
.ec-shelfGrid .ec-shelfGrid__item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ec-shelfGrid .ec-shelfGrid__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.ec-shelfGrid .ec-shelfGrid__item-image img {
  border-radius: 8px;
}

.ec-shelfGrid .ec-shelfGrid__item .ec-shelfGrid__title {
  font-size: 14px;
  color: #4A3B47;
  line-height: 1.6;
}

.ec-shelfGrid .ec-shelfGrid__item .ec-shelfGrid__price {
  color: #D4789C;
  font-weight: 600;
}

/* ============================================
   商品詳細
   ============================================ */
.ec-productRole .ec-productRole__price {
  color: #D4789C;
  font-weight: 600;
}

.ec-productRole .ec-productRole__description {
  line-height: 2;
  color: #5A4B57;
}

.ec-productRole .ec-productRole__btn .ec-blockBtn--action {
  max-width: 360px;
  margin: 0 auto;
  font-size: 16px;
  padding: 14px 24px;
}

/* 数量セレクト */
.ec-numberInput select,
.ec-numberInput input {
  border: 1px solid #E8C8D8;
  border-radius: 8px;
}

/* ============================================
   カート
   ============================================ */
.ec-cartRole .ec-cartRole__totalAmount {
  color: #D4789C;
  font-weight: 700;
}

/* カートステップ */
.ec-progress .ec-progress__number {
  background-color: #E8C8D8;
  color: #fff;
  border-radius: 50%;
}

.ec-progress .is-complete .ec-progress__number {
  background-color: #D4789C;
}

.ec-progress .ec-progress__label {
  color: #4A3B47;
  font-size: 12px;
}

/* ============================================
   合計ボックス
   ============================================ */
.ec-totalBox {
  background-color: #FDF2F8;
  border: 1px solid #F0E4EB;
  border-radius: 12px;
  padding: 20px;
}

.ec-totalBox .ec-totalBox__price {
  color: #D4789C;
  font-weight: 700;
}

/* ============================================
   フォーム
   ============================================ */
.ec-input input,
.ec-halfInput input,
.ec-telInput input,
.ec-zipInput input,
.ec-input textarea,
.ec-select select {
  border: 1px solid #E0D3DB;
  border-radius: 8px;
  padding: 10px 14px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.ec-input input:focus,
.ec-halfInput input:focus,
.ec-telInput input:focus,
.ec-zipInput input:focus,
.ec-input textarea:focus,
.ec-select select:focus {
  border-color: #D4789C;
  box-shadow: 0 0 0 3px rgba(212, 120, 156, 0.12);
  outline: none;
}

/* ラベル */
.ec-label {
  color: #4A3B47;
  font-weight: 500;
}

/* 必須マーク */
.ec-required {
  background-color: #D4789C;
  color: #fff;
  border-radius: 3px;
  font-size: 11px;
  padding: 2px 6px;
}

/* エラー */
.ec-errorMessage {
  color: #D4546A;
}

/* チェックボックス */
.ec-checkbox label {
  color: #4A3B47;
}

/* リンク */
.ec-link {
  color: #D4789C;
}

.ec-link:hover {
  color: #C9A96E;
}

/* ============================================
   マイページ
   ============================================ */
.ec-navlistRole__navlist {
  border: none;
}

.ec-navlistRole__item {
  border: none;
  border-bottom: 1px solid #F0E4EB;
}

.ec-navlistRole__item a {
  color: #4A3B47;
  padding: 14px 20px;
  font-size: 14px;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
}

.ec-navlistRole__item a:hover {
  background-color: #FDF2F8;
  color: #D4789C;
}

.ec-navlistRole__item.active a {
  background-color: #FDF2F8;
  color: #D4789C;
  border-left: 3px solid #D4789C;
  font-weight: 500;
}

/* ウェルカムメッセージ */
.ec-welcomeMsg {
  background-color: #FDF2F8;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

/* ============================================
   フッター
   ============================================ */
.ec-footerRole {
  background-color: #4A3B47;
  color: #E8D8E0;
}

.ec-footerRole a {
  color: #E8D8E0;
}

.ec-footerRole a:hover {
  color: #E8A0BF;
}

.ec-footerTitle {
  color: #fff;
  letter-spacing: 0.1em;
}

/* ============================================
   ドロワー（SPメニュー）
   ============================================ */
.ec-drawerRole {
  background-color: #fff;
}

.ec-drawerRoleClose {
  color: #4A3B47;
}

/* ============================================
   ページトップボタン
   ============================================ */
.ec-blockTopBtn {
  background-color: #D4789C;
  color: #fff;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(212, 120, 156, 0.3);
  transition: all 0.3s ease;
}

.ec-blockTopBtn:hover {
  background-color: #C46A8E;
  box-shadow: 0 4px 12px rgba(212, 120, 156, 0.4);
}

/* ============================================
   アラート・警告
   ============================================ */
.ec-alert-warning {
  background-color: #FFF5F5;
  border: 1px solid #F5C6CB;
  border-radius: 8px;
}

.ec-alert-warning__text {
  color: #854D55;
}

/* ============================================
   ログインページ
   ============================================ */
.ec-login {
  border: 1px solid #F0E4EB;
  border-radius: 16px;
  padding: 32px;
  background-color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.ec-login__icon .ec-icon img {
  opacity: 0.6;
}

.ec-login__actions .ec-blockBtn--cancel {
  background-color: #D4789C !important;
  border-color: #D4789C;
  border-radius: 30px;
  color: #fff !important;
}

.ec-login__actions .ec-blockBtn--cancel:hover {
  background-color: #C46A8E !important;
  color: #fff !important;
}

.ec-login__link a {
  color: #D4789C;
  font-size: 13px;
}

.ec-login__link a:hover {
  color: #C9A96E;
}

/* ============================================
   会員登録
   ============================================ */
.ec-registerRole {
  max-width: 720px;
  margin: 0 auto;
}

.ec-borderedDefs {
  border: none;
}

.ec-borderedDefs dl {
  border-bottom: 1px solid #F0E4EB;
  padding: 16px 0;
}

/* ============================================
   お気に入り
   ============================================ */
.ec-favoriteRole .ec-favoriteRole__item img {
  border-radius: 8px;
}

/* ============================================
   ユーティリティ
   ============================================ */

/* エラーカラー */
.ec-color-red {
  color: #D4546A;
}

/* 価格カラー統一 */
.ec-price .ec-price__price {
  color: #D4789C;
}

/* セレクトボックス */
.ec-select select {
  border-radius: 8px;
  border: 1px solid #E0D3DB;
  appearance: none;
}

/* ============================================
   レスポンシブ調整
   ============================================ */
@media only screen and (max-width: 767px) {
  .ec-pageHeader h1 {
    font-size: 18px;
  }

  .ec-blockBtn--action,
  .ec-blockBtn--cancel {
    font-size: 14px;
    padding: 12px 20px;
  }

  .ec-login {
    padding: 24px 16px;
    border-radius: 12px;
  }

  .ec-totalBox {
    border-radius: 8px;
    padding: 16px;
  }
}