/* mobile.css — TAMSIC 共通スマホ最適化 (v4.2.2.5) * * 役割: * 1. 全ページ共通の横スクロール抑止 (overflow-x:hidden) * 2. 共通要素の文字サイズ調整 (キャンペーン CTA、見出し、ボタンなど) * 3. レター便箋のスマホ調整 * * 個別ページの style 内 @media と組み合わせて使う。 * 読込: 各 HTML の 内 * * 注意: * - 既存 @media (max-width: 768px) のルールを破壊しない設計 * - ハンバーガーメニュー自体は mobile-nav.js が style 注入する (CSS 分離) */ @media (max-width: 768px) { /* 1. 横スクロール抑止 (root) */ html, body { overflow-x: hidden; max-width: 100vw; } /* 2. キャンペーンセクション (index.html の「100 coin プレゼント」) を縮める */ #signup-campaign-section { padding: 28px 18px !important; } #signup-campaign-section > div { flex-direction: column !important; gap: 16px !important; } #signup-campaign-section [data-ja*="100 coin"], #signup-campaign-section [data-ja*="プレゼント"] { font-size: 1.05rem !important; line-height: 1.45 !important; } #signup-campaign-section a[href*="signup"], #signup-campaign-section button { width: 100%; text-align: center; padding: 14px 18px !important; font-size: 14px !important; } /* 3. nav ロゴをハンバーガー用に左寄せ + コンパクト化 */ nav { padding: 14px 18px !important; } .nav-logo { font-size: 18px !important; letter-spacing: 0.18em !important; } /* 4. hero 領域の余白を圧縮 (index.html / about.html などの大見出しエリア) */ .hero { padding: 80px 20px 40px !important; min-height: auto !important; } .hero-title, .hero h1 { font-size: clamp(28px, 7vw, 38px) !important; line-height: 1.25 !important; word-break: break-word; } /* 4b. index.html hero 専用調整 (PC のカプセル装飾は変更しない、配置のみ調整) * * 前提: * PC では .hero-audio は flex row でカプセル 3 つ横並び、 * 各 .hero-audio-row は flex column で「▶上 / 縦書きトラック名 / seek / 時刻」の縦組。 * この構造はスマホでも一切上書きしない (上書きするとカプセルが壊れる)。 * * スマホ調整するのは hero 全体のレイアウト枠 + 印鑑ロゴ位置 + SCROLL ラベル位置 のみ。 * v4.2.2.10: 要素の重なりを解消するため margin と order で縦に整列。 */ /* hero 全体を縦並びに、各要素を順に積む (重なり解消) */ .hero { flex-direction: column !important; align-items: stretch !important; padding: 80px 18px 40px !important; min-height: auto !important; gap: 32px !important; /* セクション間に十分な余白 */ } /* 印鑑ロゴ: 中央背景に置く。キャッチコピーとカプセルに重ならないよう絶対位置で中央固定 */ .hero-bg-logo { left: 50% !important; top: 50% !important; width: min(80vw, 380px) !important; opacity: 0.07 !important; /* テキストとカプセルが上に来るので薄めに */ } /* キャッチコピー: 上部に左寄せで配置、印鑑より手前 */ .hero-content { max-width: 100% !important; padding-top: 0 !important; padding-left: 8px !important; text-align: left !important; z-index: 3 !important; margin-bottom: 24px !important; } /* hero-scroll: SCROLL ラベル + カプセル 3 つの親要素。 position:static で通常フロー、margin で十分な空間を確保 */ .hero-scroll { position: static !important; right: auto !important; bottom: auto !important; margin: 48px auto 0 !important; /* 上の印鑑/キャッチから 48px 離す */ align-self: center !important; z-index: 3 !important; opacity: 1 !important; animation: none !important; /* writing-mode は PC のまま (vertical-rl) で SCROLL ラベルは縦書きを維持 */ /* PC の縦書き + ::after の縦線は、スマホでも見えるが SCROLL ラベル単独で表示される */ } /* hero-scroll の中の SCROLL テキスト自体を、カプセルの上にきれいに出す */ .hero-scroll::before { /* 何もしない: PC の SCROLL テキストは hero-scroll 自身の text node */ } /* hero-scroll::after は縦線。スマホでは hero-audio の下に出るので margin で調整 */ .hero-scroll::after { height: 32px !important; margin-top: 16px !important; } /* hero-audio: PC の flex 設定そのまま継承。位置だけ縦線とぶつからないよう調整 */ .hero-audio { margin: 24px 0 0 !important; /* SCROLL ラベルから 24px 下に */ } /* hero-audio 以下のカプセル群は PC スタイルを完全に継承 (上書きしない) */ /* 5. artists セクション (3カード) を 1 列に */ .artists, .artists-grid { padding-left: 18px !important; padding-right: 18px !important; } .artists { padding: 64px 20px !important; position: relative; } /* "03" の巨大数字を画面内に収める */ .artists-count { font-size: clamp(80px, 28vw, 180px) !important; right: 12px !important; opacity: 0.12 !important; } .artists-grid { grid-template-columns: 1fr !important; gap: 20px !important; } /* 5b. News セクションの行レイアウトを縦並びに (PC は横並び、スマホは狭くて読めない) */ .news { padding: 56px 20px !important; } .news-item { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; position: relative; padding: 20px 0 !important; } .news-date { min-width: 0 !important; font-size: 11px !important; } .news-body { flex: 1 1 auto !important; width: 100%; } .news-headline { font-size: 15px !important; line-height: 1.5 !important; word-break: auto-phrase; } .news-sub { font-size: 11px !important; } /* RELEASE タグは右上に絶対配置 (PC の baseline 位置を維持) */ .news-tag { position: absolute !important; top: 20px; right: 0; font-size: 9px !important; padding: 4px 10px !important; } .news .sec-title { margin-bottom: 32px !important; } /* 6. 大きすぎる Artists/Latest 等の英語見出し */ .section-title, h2.section-title, .sec-title { font-size: clamp(28px, 8vw, 40px) !important; } /* 7. ボタン共通 (Logo 風 CTA、新規登録など) */ .member-btn, .primary-btn, button.full-buy, .full-buy { font-size: 13px !important; padding: 12px 18px !important; } /* 8. レター便箋: スマホでは padding と font-size を縮める */ .tamsic-letter { padding: 32px 18px !important; } .tamsic-letter .inner { max-width: 100% !important; } .tamsic-letter .header { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; } .tamsic-letter .body { font-size: 14px !important; column-count: 1 !important; /* スマホは 1 列に強制 (狭いと 2 列が読みにくい) */ column-gap: 0 !important; } .tamsic-letter .cover-strip img { max-width: 100% !important; height: auto !important; } /* 9. tamsic-letter-actions ボタンも全幅に */ .tamsic-letter-actions { flex-direction: column; gap: 10px; } .tamsic-letter-actions .receive-btn { width: 100%; padding: 14px !important; } .tamsic-letter-actions .sent-mark { text-align: center; width: 100%; font-size: 11px !important; } /* 10. 曲一覧 (.track-block 系) は既存ページの @media にもあるが、フォールバックで一応 */ .track-block { grid-template-columns: 96px 1fr !important; gap: 12px !important; } .track-title { font-size: 16px !important; } /* 11. テーブル / フォームの幅を画面内に収める */ table, form { max-width: 100%; } input[type="text"], input[type="email"], input[type="password"], input[type="tel"], textarea, select { max-width: 100%; box-sizing: border-box; font-size: 16px !important; /* iOS Safari のズーム抑止には 16px 必須 */ } /* 12. footer */ footer { padding: 24px 18px !important; font-size: 11px !important; } } /* iPhone のノッチ周辺 (safe-area) を考慮: 横向き時もハンバーガーが切れないように */ @supports (padding: env(safe-area-inset-right)) { @media (max-width: 768px) { .tm-hamburger { right: calc(16px + env(safe-area-inset-right)) !important; } } }