/*
* Application-wide styles manifest.
*
* This project uses Tailwind CSS as the primary styling framework.
* Tailwind classes are applied directly in the views.
*
* Layout primitives (page-wrap / page-with-sidebar / page-sidebar /
* page-main / page-narrow-text) are defined as utility classes below.
* Use them instead of writing max-w-[1240px] or width:280px ad-hoc
* in each view. See "ペトログ レイアウト標準" comment.
*/
/* ============================================================
* ペトログ レイアウト標準（2026-04-25 制定 / B案）
* ------------------------------------------------------------
* 全ページ共通の幅・余白ルール。
* 個別ページのERBでは下記ユーティリティクラスを使うこと。
* 直接 max-w-[1240px] や width:280px を書かない。
*
* 【ブレイクポイント】
* lg = 1024px 以上 = PC（2カラム化、左右padding 24px）
* lg未満 = SP/タブレット（1カラム、左右padding 15px）
*
* 【2カラムページ（PC ≥ 1024px）】
* wrap 1240px (max-width) ← .page-wrap を使用
* PC左右padding 60px (wrap内側)
* sidebar 280px (固定幅、左右どちらも)
* gap 60px (sidebarとmainの間)
* main 約780px (= 1240 - padding60*2 - sidebar280 - gap60 を flex で自動算出)
*
* 【1カラムページ】
* wrap 1000px (max-width) ← .page-wrap-narrow を使用
* PC左右padding 60px
* テキスト本文内側max 800px (利用規約/お知らせ等の可読性確保)
*
* 【使い方】
* 2カラム:
*
*
*
*
* 1カラム:
*
* ...
*
*
* テキスト中身を狭めたい時:
* ...本文...
* ============================================================ */
:root {
--page-w: 1240px;
/* 2カラムページの最大幅 */
--page-w-narrow: 1000px;
/* 1カラムページの最大幅 */
--sidebar-w: 280px;
--gap-pc: 60px;
--page-padding-sp: 15px;
--page-padding-pc: 60px;
--text-narrow-w: 800px;
}
/* ページ全体のラッパ（2カラム用、最大1240px） */
.page-wrap {
width: 100%;
max-width: var(--page-w);
margin-left: auto;
margin-right: auto;
padding-left: var(--page-padding-sp);
padding-right: var(--page-padding-sp);
}
@media (min-width: 1024px) {
.page-wrap {
padding-left: var(--page-padding-pc);
padding-right: var(--page-padding-pc);
}
}
/* ページ全体のラッパ（1カラム用、最大1000px） */
.page-wrap-narrow {
width: 100%;
max-width: var(--page-w-narrow);
margin-left: auto;
margin-right: auto;
padding-left: var(--page-padding-sp);
padding-right: var(--page-padding-sp);
}
@media (min-width: 1024px) {
.page-wrap-narrow {
padding-left: var(--page-padding-pc);
padding-right: var(--page-padding-pc);
}
}
/* 2カラムレイアウト（SP: 縦積み / PC: 横並び） */
.page-with-sidebar {
display: flex;
flex-direction: column;
gap: 24px;
}
@media (min-width: 1024px) {
.page-with-sidebar {
flex-direction: row;
gap: var(--gap-pc);
align-items: flex-start;
}
}
/* サイドバー（SPで隠したい場合は親に hidden lg:block を付与） */
.page-sidebar {
width: 100%;
flex-shrink: 0;
}
@media (min-width: 1024px) {
.page-sidebar {
width: var(--sidebar-w);
}
}
/* メイン（残り幅を全部使う、min-width:0 で flex子要素の溢れ防止） */
.page-main {
flex: 1 1 0%;
min-width: 0;
width: 100%;
}
/* 1カラムページや記事本文など、テキストの読みやすさのため幅を絞りたい時 */
.page-narrow-text {
max-width: var(--text-narrow-w);
margin-left: auto;
margin-right: auto;
}
/* ============================================================
* ページタイトル統一クラス (2026-04-30 制定)
* ------------------------------------------------------------
* ページの種類に応じて 3種類のタイトルクラスを使い分ける。
* フォントサイズは現状すべて SP 20px / PC 24px で揃えているが、
* クラスを別々にすることで将来「1カラムページだけ大きくする」 などが
* 個別ページのHTMLを触らずに、 このCSS1箇所で一括変更できる。
*
* 【3種類の使い分け】
*
* 1. .page-title-mypage ─ マイページ用 (サイドバー付き / 横にアイコンを置きたい)
* .page-title-row でラップして使う:
*
* <%= image_tag "icon.svg", class: "page-title-icon", alt: "" %> <%# アイコンは任意 %>
*
プロフィールを編集
*
* ※ アイコンなしでも .page-title-row でラップする (構造を統一するため)
* ※ h1自身は m-0、 余白は親 .page-title-row の mb-4 が持つ
*
* 2. .page-title ─ 通常2カラムページ用 (コミュニティ / 商品詳細 / カテゴリTOP等)
* スタンドアロンで使う:
* トピック一覧
* ※ mb-6 (24px) を内蔵
*
* 3. .page-title-narrow ─ ワンカラムページ用 (お問い合わせ / 利用規約 / お知らせ等)
* スタンドアロンで使う:
* お問い合わせ
* ※ mb-8 (32px) を内蔵 (余白多め)
*
* 【共通の見た目 (現状)】
* SP : 20px / bold / #222222
* PC : 24px (md = 768px以上で切替)
*
* 【サイズや余白を変えたい時】
* 個別ページのHTMLを触らず、 このCSS内の各クラス (.page-title-mypage,
* .page-title, .page-title-narrow) を編集するだけで該当ページに一括反映。
* ============================================================ */
/* マイページタイトル用ラッパー (アイコン有無問わず使う / mb 16px)
h1単体でもアイコン付きでも同じ構造にすることで、 余白が常に統一される。 */
.page-title-row {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 16px;
}
@media (min-width: 768px) {
.page-title-row {
gap: 10px;
}
}
/* マイページ用h1 (.page-title-row の中に置く前提なので margin 0)
SP 20px / PC 24px / bold / #222222 */
.page-title-mypage {
font-size: 20px;
font-weight: 700;
margin: 0;
color: #222222;
}
@media (min-width: 768px) {
.page-title-mypage {
font-size: 24px;
}
}
/* 通常2カラムページ用h1 (スタンドアロン使用 / mb 24px)
SP 20px / PC 24px / bold / #222222 */
.page-title {
font-size: 20px;
font-weight: 700;
margin: 0 0 24px;
color: #222222;
}
@media (min-width: 768px) {
.page-title {
font-size: 24px;
}
}
/* ワンカラムページ用h1 (スタンドアロン使用 / mb 32px、 余白多め)
SP 20px / PC 24px / bold / #222222 */
.page-title-narrow {
font-size: 20px;
font-weight: 700;
margin: 0 0 32px;
color: #222222;
}
@media (min-width: 768px) {
.page-title-narrow {
font-size: 24px;
}
}
/* ページタイトル横のアイコン (h1とサイズ比例: SP 20px / PC 25px) */
.page-title-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
@media (min-width: 768px) {
.page-title-icon {
width: 30px;
height: 30px;
}
}
/* ページタイトル横の大きいアイコン版 (SP 25px / PC 30px) */
.page-title-icon-lg {
width: 25px;
height: 25px;
flex-shrink: 0;
}
@media (min-width: 768px) {
.page-title-icon-lg {
width: 30px;
height: 30px;
}
}
/* コミュニティ トピック詳細 上部のグリッドレイアウト
SP: [画像 投稿者+SHARE] / [meta全幅] / [タイトル全幅]
PC: [画像 (3行rowspan) | 投稿者+SHARE / meta / タイトル] */
.topic-header-grid {
display: grid;
grid-template-columns: 80px 1fr;
grid-template-areas:
"img info"
"meta meta"
"title title";
column-gap: 20px;
row-gap: 14px;
}
@media (min-width: 768px) {
.topic-header-grid {
grid-template-columns: 120px 1fr;
grid-template-areas:
"img info"
"img meta"
"img title";
}
}
.topic-header-img {
grid-area: img;
}
.topic-header-info {
grid-area: info;
}
.topic-header-meta {
grid-area: meta;
}
.topic-header-title {
grid-area: title;
}
/* SP表示では人気ユーザー/ブランドの横スクロール矢印を非表示 (タッチでスクロールできるため) */
@media (max-width: 767.98px) {
.scroll-arrow-left,
.scroll-arrow-right {
display: none !important;
}
}
/* 犬猫トップ SP の人気ユーザーセクションでは、 home_sp_popular_users 内の
カテゴリpill (総合/犬/猫) を非表示にする。
pet_top_category_id で既に絞り込み済のためpillは不要 (= 旧PC側 hide_selector: true 相当)。
home/sp/popular_users.html.erb の構造に依存: