/* ===== Mirenetta カスタムCSS ===== */

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
}

/* スクロールバー非表示（カテゴリナビ等） */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* テキスト省略 */
.line-clamp-1,
.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-1 {
  -webkit-line-clamp: 1;
}
.line-clamp-2 {
  -webkit-line-clamp: 2;
}

/* ===== 画像プレースホルダ ===== */
/* 画像読み込み失敗時、親要素に .img-ph を付与してやさしいガーゼ風プレースホルダを表示 */
.img-ph,
.img-ph-dark {
  position: relative;
}
.img-ph > img,
.img-ph-dark > img {
  visibility: hidden;
}
.img-ph::after,
.img-ph-dark::after {
  content: '\f186'; /* moon */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.img-ph::after {
  background: repeating-linear-gradient(
    135deg,
    #eceae4,
    #eceae4 14px,
    #e2ded7 14px,
    #e2ded7 28px
  );
  color: #c9a86a;
}
.img-ph-dark::after {
  background: repeating-linear-gradient(
    135deg,
    #56514a,
    #56514a 14px,
    #4c473f 14px,
    #4c473f 28px
  );
  color: #c9a86a;
}

/* メイン画像単体のフォールバック（src差し替え時） */
img.img-fallback {
  object-fit: contain;
  padding: 1.5rem;
  opacity: 0.6;
}

/* お気に入りアクティブ時の微アニメ */
.fav-active i {
  animation: pop 0.3s ease;
}
@keyframes pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.35);
  }
  100% {
    transform: scale(1);
  }
}

/* ===== ヒーローカルーセル（Tailwind CDN 非依存の堅牢化） =====
   Tailwind Play CDN は実行時JITでCSSを生成するため、
   企業プロキシ・広告ブロッカー・低速回線などで cdn.tailwindcss.com の
   読込が遅延/失敗すると opacity/absolute/z-index 等が適用されず、
   全カテゴリスライドが重なって最後の画像がブランドテキストを覆い隠す
   （＝「横幅を縮めないとテキストが表示されない」不具合）。
   スライドの重ね合わせ・初期表示・フェードを静的CSSで確定させ、
   CDN の読込状態に関わらず必ず1枚目（テキスト）が見えるようにする。 */
/* ヒーローの高さは PC・スマホ共通で 56vh に統一（スマホの高さに合わせる） */
[data-hero-track] {
  position: relative;
  min-height: 56vh;
}
/* 全スライドを重ねる。1枚目のみ in-flow で高さの保険にする */
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  transition: opacity 1s ease-in-out;
}
/* 1枚目は in-flow でトラックの高さを規定（＝下段が少し覗く高さ）。PC・スマホ共通 56vh */
.hero-slide:first-child {
  position: relative;
  min-height: 56vh;
  opacity: 1;
  z-index: 10;
}
/* 初期状態＝1枚目のみ表示（JS前でもCDN未適用でも成立） */
.hero-slide:not(:first-child) {
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
/* JS が付与するアクティブ状態を最優先で確定 */
.hero-slide.is-active {
  opacity: 1;
  z-index: 10;
  pointer-events: auto;
}
.hero-slide.is-inactive {
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}

/* セレクトのデフォルト矢印を控えめに */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E655B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.2rem;
}

/* ===== スマホ表示の崩れ対策（山本様指摘 refs #878）=====
   - 横方向にはみ出た要素でページが横に動く／固定ヘッダーが途中で切れて残るのを防ぐ
     （sticky を壊さない clip を使用）
   - iOS Safari は文字サイズ16px未満の入力欄にフォーカスすると画面を自動拡大したまま戻らず、
     ヘッダーが左に切れて見える。入力欄は16px以上にして拡大を起こさない */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}
@media (max-width: 767px) {
  input:not([type='checkbox']):not([type='radio']),
  select,
  textarea {
    font-size: 16px !important;
  }
}