/* ================================================================
   MOBILE RESPONSIVE OVERRIDES
   共通モバイル最適化CSS - 全ページで読み込み
   ================================================================ */

/* ---- GLOBAL: 横スクロール防止 ---- */
html, body {
  /* hidden ではなく clip。hidden は html/body をスクロールコンテナ化して
     ページ内の position:sticky を全て無効化する (2026-07-30 修正)。
     横スクロール抑止という目的は clip でも同じく達成できる。 */
  overflow-x: clip !important;
  max-width: 100vw;
}

/* ---- HEADER: モバイル最適化 ---- */
@media (max-width: 768px) {
  .header {
    height: 56px !important;
  }
  .header-inner {
    padding: 0 16px !important;
  }
  .header-logo img {
    height: 20px !important;
    max-width: 160px;
  }
  .header-actions {
    gap: 8px !important;
  }
  .header-actions > a {
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
  }
  .hamburger {
    padding: 2px !important;
  }
  .hamburger span {
    width: 24px !important;
  }
}

@media (max-width: 480px) {
  .header {
    height: 52px !important;
  }
  .header-logo img {
    height: 18px !important;
    max-width: 140px;
  }
}

/* ---- MOBILE MENU: はみ出し防止 ---- */
/* 2026-06-21: 85vw だとメニューが画面の85%幅になり左に背景が残り「開いたまま固まる/操作不能」の原因。全幅に修正。 */
.mobile-menu {
  max-width: 100%;
}
.mobile-menu-overlay {
  overflow: hidden !important;
}

/* ---- FOOTER ---- */
/* 2026-06-21: フッターのスマホCSSは footer-unified.css に一本化。ここのブロックは削除(揺れ防止)。 */

/* ---- PAGE HERO: 縦幅削減 ---- */
@media (max-width: 768px) {
  .page-hero {
    padding: 100px 0 40px !important;
    min-height: auto !important;
  }
  .page-hero-title {
    font-size: 32px !important;
  }
  .page-hero-en {
    font-size: 11px !important;
  }
  .page-hero-jp {
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .page-hero {
    padding: 80px 0 32px !important;
  }
  .page-hero-title {
    font-size: 26px !important;
  }
}

/* ---- PRODUCTS一覧: カテゴリカード最適化 ---- */
@media (max-width: 768px) {
  /* Flagship (SLEEP DOWN) セクション */
  .flagship-section {
    padding: 32px 16px !important;
  }
  .flagship-card {
    flex-direction: column !important;
  }
  .flagship-img {
    height: 220px !important;
    min-height: auto !important;
  }
  .flagship-body {
    padding: 24px 20px !important;
  }
  .flagship-title {
    font-size: 24px !important;
  }
  .flagship-desc {
    font-size: 14px !important;
  }
  .flagship-stats {
    gap: 16px !important;
  }
  .flagship-stat-num {
    font-size: 18px !important;
  }

  /* カテゴリカードグリッド: 2列 */
  .category-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding: 0 16px;
  }
  .category-card--wide {
    grid-column: 1 / -1 !important;
  }
  .category-card-image {
    height: 140px !important;
  }
  .category-card-image img {
    height: 100% !important;
    object-fit: cover;
  }
  .category-card-body {
    padding: 12px !important;
  }
  .category-card-en {
    font-size: 11px !important;
  }
  .category-card-jp {
    font-size: 13px !important;
  }
  .category-card-meta {
    font-size: 11px !important;
  }
  .category-card-count,
  .category-card-price {
    font-size: 11px !important;
  }

  /* アクセサリーセクション */
  .accessories-section {
    padding: 32px 0 !important;
  }
  .accessories-label {
    font-size: 11px !important;
    padding: 0 16px;
  }
  .accessories-title {
    font-size: 24px !important;
    padding: 0 16px;
  }
}

/* ---- 商品詳細ページ: モバイル最適化 ---- */
@media (max-width: 768px) {
  .product-top {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding-top: 56px !important;
  }
  .purchase {
    padding: 20px 16px !important;
    position: relative !important;
  }
  .purchase-series {
    font-size: 11px !important;
  }
  .purchase-name {
    font-size: 22px !important;
  }
  .purchase-catch {
    font-size: 14px !important;
  }
  .purchase-price {
    font-size: 20px !important;
  }

  /* セクション間の余白削減 */
  .product-desc,
  .story-section,
  .features-section,
  .spec-section,
  .price-section,
  .reviews-section,
  .related-mag-section,
  .related-products-section,
  .compare-section {
    padding: 24px 18px !important;
  }

  /* 特徴セクション: 横並びリスト化 */
  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .feature-card {
    display: grid !important;
    grid-template-columns: 100px 1fr !important;
    gap: 16px !important;
    align-items: start !important;
  }
  .feature-card-img {
    height: 100px !important;
    border-radius: 8px !important;
    overflow: hidden;
  }
  .feature-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .feature-card-body {
    padding: 0 !important;
  }
  .feature-card-title {
    font-size: 14px !important;
    margin-bottom: 4px !important;
  }
  .feature-card-desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  /* スペックテーブル */
  .spec-table th {
    width: 100px !important;
    min-width: 80px !important;
    font-size: 12px !important;
  }
  .spec-table td {
    font-size: 13px !important;
  }

  /* 価格テーブル */
  .price-table th,
  .price-table td {
    font-size: 12px !important;
    padding: 8px !important;
  }

  /* 関連商品: 2列 */
  .related-products-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  .related-product-card-img {
    height: 140px !important;
  }
  .related-product-name {
    font-size: 13px !important;
  }
  .related-product-price {
    font-size: 13px !important;
  }

  /* 関連マガジン: 横スクロール */
  .related-mag-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .mag-card-img {
    height: 160px !important;
  }

  /* レビュー */
  .review-card {
    padding: 20px !important;
  }
  .review-text {
    font-size: 14px !important;
  }

  /* 比較テーブル */
  .compare-table {
    font-size: 12px !important;
  }
  .compare-table th,
  .compare-table td {
    padding: 8px 6px !important;
  }

  /* Section共通 */
  .section-title {
    font-size: 22px !important;
  }
  .section-en {
    font-size: 11px !important;
  }
  .section-desc {
    font-size: 14px !important;
  }
}

/* ---- カテゴリ一覧ページ（pillow, bedding等）---- */
@media (max-width: 768px) {
  .cat-hero {
    height: 280px !important;
    min-height: auto !important;
  }
  .cat-hero-title {
    font-size: 28px !important;
  }
  .cat-hero-desc {
    font-size: 14px !important;
  }

  /* 商品リスト: 2列グリッド */
  .product-list-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    padding: 0 16px !important;
  }
  .product-card-image {
    height: 160px !important;
  }
  .product-card-name {
    font-size: 13px !important;
  }
  .product-card-price {
    font-size: 14px !important;
  }
  /* 2026-06-12 ユーザー指示: PC と同じテキストを表示するため商品カード説明を visible に戻す。 */
  .product-card-desc {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* カテゴリ紹介セクション縮小 */
  .cat-intro {
    padding: 40px 16px !important;
  }
  .cat-intro-title {
    font-size: 22px !important;
  }
  .cat-intro-desc {
    font-size: 14px !important;
  }
}

/* ---- MAGAZINE記事ページ ---- */
@media (max-width: 768px) {
  .article-hero {
    height: 280px !important;
    min-height: auto !important;
  }
  .article-hero-title {
    font-size: 22px !important;
  }
  .article-body {
    padding: 32px 16px !important;
  }
  .article-body h2 {
    font-size: 20px !important;
  }
  .article-body h3 {
    font-size: 17px !important;
  }
  .article-body p {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }
  .article-body img {
    border-radius: 8px !important;
  }

  /* 関連記事: 横並びリスト化 */
  .related-articles-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .related-article-card {
    display: grid !important;
    grid-template-columns: 120px 1fr !important;
    gap: 12px !important;
  }
  .related-article-img {
    height: 80px !important;
    border-radius: 6px !important;
    overflow: hidden;
  }
  .related-article-title {
    font-size: 14px !important;
  }
  .related-article-meta {
    font-size: 12px !important;
  }
}

/* ---- MAGAZINE一覧ページ ---- */
@media (max-width: 768px) {
  .magazine-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    padding: 0 16px !important;
  }
  .magazine-card-img {
    height: 120px !important;
  }
  .magazine-card-title {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  .magazine-card-meta {
    font-size: 11px !important;
  }
  /* 2026-06-12 ユーザー指示: PC と同じテキストを表示するためマガジンカード説明を visible に戻す。 */
  .magazine-card-desc {
    font-size: 11px !important;
    line-height: 1.5 !important;
    margin-top: 4px !important;
  }
}

/* ---- GIFTページ ---- */
@media (max-width: 768px) {
  .gift-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  .gift-card-img {
    aspect-ratio: 1 !important;
  }
  .gift-card-body {
    padding: 12px !important;
  }
  .gift-card-body h3 {
    font-size: 14px !important;
  }
  .gift-card-body p {
    font-size: 13px !important;
  }
  .gift-card-price {
    font-size: 14px !important;
  }

  .wrapping {
    padding: 40px 16px !important;
  }
  .wrapping-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .wrapping-img {
    height: 200px !important;
  }

  .occasions-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  .occasion-card-icon {
    font-size: 32px !important;
  }
  .occasion-card h4 {
    font-size: 14px !important;
  }

  .gift-cta {
    padding: 48px 16px !important;
  }
  .gift-cta-title {
    font-size: 22px !important;
  }
}

@media (max-width: 480px) {
  .gift-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---- FAQページ ---- */
@media (max-width: 768px) {
  .faq-section {
    padding: 32px 16px !important;
  }
  .faq-category-title {
    font-size: 18px !important;
  }
  .faq-question {
    font-size: 14px !important;
    padding: 16px 0 !important;
  }
  .faq-answer-inner {
    font-size: 14px !important;
    padding: 0 0 16px !important;
  }
}

/* ---- TOPページ: セクション縦幅削減 ---- */
@media (max-width: 768px) {
  /* ヒーロー (TOP ページ専用: .hero-catch を含むものだけ。
     /concept/* 配下の .hero (.hero-title を持つ) は短いヒーロー設定のままにする) */
  .hero:has(.hero-catch) {
    min-height: 85vh !important;
    /* 2026-06-21: スマホで動画(ヒーロー背景)を SCROLL の罫線が終わった少し下まで伸ばす */
    padding-bottom: 72px !important;
  }
  .hero-catch {
    font-size: 22px !important;
  }
  .hero-sub {
    font-size: 14px !important;
  }
  .hero-en {
    font-size: 14px !important;
  }

  /* ブランドストーリー */
  .brand-story {
    padding: 48px 0 !important;
  }
  .brand-story-quote {
    font-size: 18px !important;
  }
  .brand-story-desc {
    font-size: 14px !important;
  }

  /* コレクション */
  .collection {
    padding: 48px 0 !important;
  }
  .collection-card {
    min-height: 300px !important;
  }

  /* コンセプト */
  .concept-section {
    padding: 48px 0 !important;
  }

  /* ニュース */
  .news-section {
    padding: 48px 0 !important;
  }

  /* TRY */
  .trial-section {
    padding: 48px 0 !important;
  }
  .trial-inner {
    gap: 24px !important;
  }

  /* セクション共通 */
  .section-heading {
    font-size: 36px !important;
  }
  .section-watermark {
    font-size: 48px !important;
  }
}

@media (max-width: 480px) {
  /* TOP ページ専用 (concept 系の .hero に波及させない) */
  .hero:has(.hero-catch) {
    min-height: 75vh !important;
  }
  .hero-catch {
    font-size: 20px !important;
  }
  .section-heading {
    font-size: 28px !important;
  }
}

/* ---- CONCEPTページ ---- */
@media (max-width: 768px) {
  .concept-hero {
    height: 300px !important;
    min-height: auto !important;
  }
  .concept-hero-title {
    font-size: 26px !important;
  }
  .concept-content {
    padding: 40px 16px !important;
  }
  .concept-content h2 {
    font-size: 20px !important;
  }
  .concept-content p {
    font-size: 14px !important;
  }
  .concept-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* ---- ABOUTページ ---- */
@media (max-width: 768px) {
  .about-hero {
    height: 280px !important;
    min-height: auto !important;
  }
  .company-grid {
    grid-template-columns: 1fr !important;
  }
  .company-table th,
  .company-table td {
    display: block !important;
    padding: 4px 0 !important;
  }
  .company-table th {
    font-weight: 700 !important;
    color: var(--color-accent, #1A1A1A) !important;
    font-size: 12px !important;
    padding-top: 12px !important;
  }
}

/* ---- 共通: ボタン/CTA最適化 ---- */
@media (max-width: 768px) {
  .btn-primary,
  .cta-btn,
  .cart-btn {
    font-size: 14px !important;
    padding: 14px 24px !important;
  }
}

/* ---- 共通: コンテナ幅 ---- */
/* 2026-06-20: TOP等の本文左右余白を INFORMATION 記事エリアと同じ 20px に統一(端ギリギリで本文が切れる対策) */
@media (max-width: 768px) {
  .container {
    padding: 0 20px !important;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 20px !important;
  }
}

/* ================================================================
   追加: スマホ全般の表示改善
   テーブル・リスト・テキスト折り返し・マージン
   ================================================================ */

/* ---- テーブル: 横スクロール可能 + セル最小幅 ---- */
@media (max-width: 768px) {
  table:not(.items-table):not(.dyn-table) {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
    font-size: 13px !important;
  }
  table th, table td {
    white-space: nowrap;
    min-width: 60px;
  }
  /* インライン style のテーブルも制御 */
  [style*="border-collapse"] {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
  }
}

/* ---- テキスト: マージン確保 + 折り返し最適化 ---- */
@media (max-width: 768px) {
  /* 本文テキストに左右パディング確保 */
  p, li, dd, blockquote, figcaption {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* セクション内コンテンツの左右余白(INFORMATION 記事エリアと同じ 20px に統一) */
  section, .section, [class*="section"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* padding が既に設定されているものは除外しない (カスケード) */

  /* 長い英単語・URL が溢れるのを防止 */
  a, code, pre {
    word-break: break-all;
    overflow-wrap: break-word;
  }

  /* h1-h4: 行間を詰めすぎない */
  h1 { font-size: 24px !important; line-height: 1.4 !important; }
  h2 { font-size: 20px !important; line-height: 1.4 !important; }
  h3 { font-size: 17px !important; line-height: 1.4 !important; }
  h4 { font-size: 15px !important; line-height: 1.4 !important; }
}

/* ---- リスト: インデント削減 ---- */
@media (max-width: 768px) {
  ul, ol {
    padding-left: 20px !important;
  }
  li {
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-bottom: 4px !important;
  }
}

/* ---- 画像: フル幅で余白内に収める ---- */
@media (max-width: 768px) {
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  figure {
    margin: 16px 0 !important;
  }
  figcaption {
    font-size: 12px !important;
    padding: 4px 0 !important;
  }
}

/* ---- インラインスタイルの固定幅を上書き ---- */
@media (max-width: 768px) {
  [style*="width:1100px"],
  [style*="width:1200px"],
  [style*="width:1320px"],
  [style*="max-width:1100px"],
  [style*="max-width:1200px"],
  [style*="max-width:1320px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* display:grid の固定カラムを強制1列に */
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr 1fr !important;
  }

  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(2"] {
    gap: 12px !important;
  }
}

@media (max-width: 480px) {
  /* 2026-06-22: インライン repeat(3)/repeat(4) のグリッド(=画像ギャラリー類)は、スマホ最小幅でも
     ≤768 と同じ「2列」を維持する(以前はここで1列化していたため iPhone 等で1列になっていた)。
     クラス指定の値グリッド/ナビは別途自前ルールを持ち、インライン repeat には該当しないため無影響。
     インライン repeat(2) のみ1列に落とす。 */
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(2"] {
    grid-template-columns: 1fr !important;
  }
}

/* ---- フォーム要素: タッチフレンドリー ---- */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important; /* iOS のズーム防止 */
    padding: 12px !important;
    border-radius: 8px !important;
  }
  button, .btn, [type="submit"] {
    min-height: 44px; /* タッチターゲット */
    font-size: 14px !important;
  }
}

/* 2026-06-21: フッターのタッチターゲットCSSも footer-unified.css へ集約(揺れ防止)。 */

/* ---- ナビ: ハンバーガーメニュー内のテキスト改善 ---- */
@media (max-width: 768px) {
  .mm-link {
    font-size: 15px !important;
    padding: 14px 24px !important;
  }
  .mm-sub a {
    font-size: 14px !important;
    padding: 10px 24px 10px 40px !important;
  }
}

/* ============================================================
   2026-06-12 ユーザー指示: /concept 系 4 ページ (concept / brand-story /
   clean-cycle-down / material) のスマホ縦長さを 1/2 以下に圧縮し、
   ヒーロー高さも PC・モバイルそれぞれ統一する。
   ============================================================ */

/* PC ヒーロー: 4 ページ全て揃える */
.hero {
  max-height: 460px !important;
}

@media (max-width: 768px) {
  /* ヒーロー: 4 ページ共通の小さい高さ */
  .hero {
    height: 24vh !important;
    min-height: 160px !important;
    max-height: 220px !important;
    margin-top: 56px !important;
    padding: 12px !important;
  }
  .hero-title { font-size: 22px !important; }
  .hero-subtitle { font-size: 12px !important; margin-top: 4px !important; }
  /* 2026-06-21: 旧 .hero-bg{max-width:140px}/.hero-bg img{max-height:10vh} は material(中央イラスト)向けだったが
     brand-story/clean-cycle-down/concept の「全面カバー型ヒーロー」まで左上の小箱に潰していたため除去。
     各ページ自前の .hero-bg{position:absolute;inset:0;object-fit:cover} が活き全面化。material は自前 max-width:300px を使用。 */

  /* 本文セクション (philosophy / process / story / values 等) を半分以下に */
  .concept-section,
  .philosophy,
  .process,
  .story,
  .values,
  .visual-story,
  .material-section,
  .material-content,
  .brand-story-section,
  .ccd-section {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  /* visual-story-row のグリッドを縦並びに + 最小高さ撤去 */
  .visual-story-row {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .visual-story-img {
    aspect-ratio: 16/10 !important;
    max-height: 200px !important;
    /* 2026-06-21: max-height で幅がカラムより縮み左寄せになるためセンター配置 */
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
  }
  /* 大見出し縮小 */
  .section-heading,
  .section-title {
    font-size: 24px !important;
    margin-bottom: 12px !important;
  }
  /* 段落のリーディング詰め */
  .concept-section p,
  .philosophy p,
  .process p,
  .story p,
  .values p,
  .material-content p {
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin-bottom: 10px !important;
  }
  /* カード/グリッドの gap も詰める */
  .concept-grid,
  .material-grid,
  .process-grid,
  .values-grid {
    gap: 16px !important;
  }
  /* ナビカード (concept 下層へのジャンプ) も小さく */
  .nav-card {
    aspect-ratio: 16/10 !important;
  }
}