/* /home/sunnote/public_html/assets/css/style.css */
/* -------------------------
CSS変数
------------------------- */
:root {
--color-primary: #1558D6;
--color-text: #1a1a1a;
--color-text-sub: #555;
--color-text-muted: #888;
--color-bg: #fff;
--color-surface: #f7f8fa;
--color-border: #e0e0e0;
--hm-glass-bg: rgba(255,255,255,.92); /* ヒーロー上のカード。ライトでは白寄り・低透過で文字を立たせる */
--hm-glass-border: rgba(0,0,0,.08);
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-pill: 999px;
--font-size-sm: 12px;
--font-weight-bold: 600;
--gap-md: 16px;
--gap-lg: 24px;
}
/* -------------------------
リセット・ベース
------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 14px;
color: var(--color-text);
background: var(--color-surface);
min-height: 100vh;
/* 内容が少ないページでフッター下に余白ができないよう、mainを伸ばして footer を最下部に固定 */
display: flex;
flex-direction: column;
}
body > main { flex: 1 0 auto; }
body > .site-footer { flex-shrink: 0; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
/* -------------------------
管理画面レイアウト
------------------------- */
.admin-wrap {
display: flex;
min-height: 100vh;
}
/* サイドバー */
.admin-sidebar {
width: 220px;
background: #0f2a6e;
color: #fff;
flex-shrink: 0;
display: flex;
flex-direction: column;
}
.admin-sidebar__logo {
padding: 20px 20px 16px;
font-size: 13px;
font-weight: var(--font-weight-bold);
border-bottom: 1px solid rgba(255,255,255,.1);
line-height: 1.4;
}
.admin-sidebar__logo span { display: block; font-size: 10px; opacity: .6; margin-top: 2px; }
.admin-nav { flex: 1; padding: 12px 0; }
.admin-nav a {
display: block;
padding: 10px 20px;
color: rgba(255,255,255,.8);
font-size: 13px;
transition: background .15s;
}
.admin-nav a:hover,
.admin-nav a.active {
background: rgba(255,255,255,.1);
color: #fff;
text-decoration: none;
}
.admin-nav__logout {
padding: 12px 20px;
border-top: 1px solid rgba(255,255,255,.1);
}
.admin-nav__logout a {
color: rgba(255,255,255,.6);
font-size: 12px;
}
/* メインコンテンツ */
.admin-main {
flex: 1;
overflow: auto;
padding: var(--gap-lg);
}
.admin-page-title {
font-size: 20px;
font-weight: var(--font-weight-bold);
margin-bottom: var(--gap-lg);
color: var(--color-text);
}
/* -------------------------
カード
------------------------- */
.card {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--gap-lg);
margin-bottom: var(--gap-lg);
}
.card__title {
font-size: 14px;
font-weight: var(--font-weight-bold);
margin-bottom: var(--gap-md);
padding-bottom: 10px;
border-bottom: 1px solid var(--color-border);
}
/* -------------------------
ダッシュボード統計
------------------------- */
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap-md);
margin-bottom: var(--gap-lg);
}
.stat-card {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--gap-md);
}
.stat-card__label {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin-bottom: 8px;
}
.stat-card__value {
font-size: 28px;
font-weight: var(--font-weight-bold);
color: var(--color-primary);
}
.stat-card__unit {
font-size: 13px;
color: var(--color-text-sub);
margin-left: 4px;
}
/* -------------------------
テーブル
------------------------- */
.table-wrap { overflow-x: auto; }
table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
th, td {
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid var(--color-border);
}
th {
background: var(--color-surface);
font-weight: var(--font-weight-bold);
color: var(--color-text-sub);
white-space: nowrap;
}
tr:hover td { background: #fafbff; }
.td-thumb img {
width: 56px;
height: 40px;
object-fit: cover;
border-radius: var(--radius-sm);
}
.td-actions { white-space: nowrap; }
.td-muted { color: var(--color-text-muted); }
.tr-deleted td { color: var(--color-text-muted); background: #f5f5f5; }
/* -------------------------
バッジ・ステータス
------------------------- */
.badge {
display: inline-block;
padding: 2px 10px;
border-radius: var(--radius-pill);
font-size: 11px;
font-weight: var(--font-weight-bold);
}
.badge-published { background: #e6f4ea; color: #1a7f3c; }
.badge-draft { background: #f0f0f0; color: #888; }
.badge-paid { background: #e6f4ea; color: #1a7f3c; }
.badge-pending { background: #fff8e1; color: #a67800; }
.badge-failed { background: #fdecea; color: #c62828; }
.badge-new { background: #e8f0fe; color: #1558D6; }
.badge-wip { background: #fff8e1; color: #a67800; }
.badge-done { background: #f0f0f0; color: #888; }
/* -------------------------
フォーム
------------------------- */
.form-group { margin-bottom: 18px; }
.form-group label {
display: block;
font-size: 12px;
font-weight: var(--font-weight-bold);
color: var(--color-text-sub);
margin-bottom: 6px;
}
.form-group label .req {
color: #e53935;
margin-left: 4px;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 13px;
color: var(--color-text);
background: var(--color-bg);
transition: border-color .15s;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--color-primary);
}
textarea { resize: vertical; min-height: 80px; }
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--gap-md);
}
.form-check-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.form-check-group label {
display: flex;
align-items: center;
gap: 5px;
font-weight: normal;
color: var(--color-text);
cursor: pointer;
}
.form-hint { font-size: 11px; color: var(--color-text-muted); margin-top: 4px; }
/* -------------------------
ボタン
------------------------- */
.btn {
display: inline-block;
padding: 8px 18px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: var(--font-weight-bold);
cursor: pointer;
border: none;
text-align: center;
transition: opacity .15s;
}
.btn:hover { opacity: .85; text-decoration: none; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-secondary { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); }
.btn-danger { background: #e53935; color: #fff; }
.btn-warning { background: #f57c00; color: #fff; }
.btn-success { background: #1a7f3c; color: #fff; }
.btn-sm { padding: 4px 12px; font-size: 12px; }
.btn-xs { padding: 2px 8px; font-size: 11px; }
/* -------------------------
アラート
------------------------- */
.alert {
padding: 12px 16px;
border-radius: var(--radius-sm);
margin-bottom: var(--gap-md);
font-size: 13px;
}
.alert-success { background: #e6f4ea; color: #1a7f3c; border: 1px solid #b7dfbf; }
.alert-error { background: #fdecea; color: #c62828; border: 1px solid #f5c2c2; }
.alert-info { background: #e8f0fe; color: #1558D6; border: 1px solid #bccffa; }
/* -------------------------
タブ（masters.php）
------------------------- */
.tab-nav {
display: flex;
gap: 4px;
border-bottom: 2px solid var(--color-border);
margin-bottom: var(--gap-lg);
}
.tab-nav__item {
padding: 8px 20px;
font-size: 13px;
font-weight: var(--font-weight-bold);
color: var(--color-text-sub);
cursor: pointer;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
border: 1px solid transparent;
border-bottom: none;
background: transparent;
transition: background .15s;
}
.tab-nav__item:hover { background: var(--color-surface); }
.tab-nav__item.active {
background: var(--color-bg);
color: var(--color-primary);
border-color: var(--color-border);
margin-bottom: -2px;
border-bottom: 2px solid var(--color-bg);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }
/* -------------------------
検索バー
------------------------- */
.search-bar {
display: flex;
gap: var(--gap-md);
align-items: flex-end;
margin-bottom: var(--gap-lg);
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--gap-md);
}
.search-bar .form-group { margin-bottom: 0; }
.search-bar select,
.search-bar input { width: auto; }
/* -------------------------
ログインページ
------------------------- */
.login-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: var(--color-surface);
}
.login-box {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 40px;
width: 360px;
}
.login-box__title {
font-size: 18px;
font-weight: var(--font-weight-bold);
text-align: center;
margin-bottom: 6px;
}
.login-box__sub {
font-size: 12px;
text-align: center;
color: var(--color-text-muted);
margin-bottom: 28px;
}
/* -------------------------
ページネーション
------------------------- */
.pagination {
display: flex;
gap: 6px;
margin-top: var(--gap-lg);
justify-content: center;
}
.pagination a,
.pagination span {
display: inline-block;
padding: 6px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 13px;
color: var(--color-text);
}
.pagination a:hover { background: var(--color-surface); text-decoration: none; }
.pagination .current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
/* -------------------------
注文詳細展開
------------------------- */
.order-detail {
display: none;
background: var(--color-surface);
padding: 12px var(--gap-md);
}
.order-detail table { font-size: 12px; }
.order-detail th { background: transparent; }
/* ========================================
フロントエンド
======================================== */
/* --- 変数追加 --- */
:root {
--color-primary-bg: #eef2fd;
--color-construction: #1558D6;
--color-logistics: #c45c00;
--color-logistics-bg: #fdf0e6;
--color-medical: #1a7a4a;
--color-care: #7b3fa0;
--header-h: 68px;
}
/* --- コンテナ --- */
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.section { padding: 56px 0; }
.section-title {
font-size: 22px; font-weight: var(--font-weight-bold);
color: var(--color-text); margin-bottom: 28px; text-align: center;
}
/* --- サイトヘッダー --- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--color-bg);
border-bottom: 1px solid var(--color-border);
}
/* デスクトップ: ロゴ左 | 検索中央 | 右アクション（フレックス） */
.site-header__inner {
display: flex;
align-items: center;
gap: 16px;
height: var(--header-h);
padding: 0 24px;
}
/* 左ナビ */
.site-nav-left {
display: flex;
align-items: center;
gap: 32px;
justify-content: flex-start;
margin-left: 20px;
}
.site-nav-left__link {
font-size: 14px;
color: var(--color-text);
text-decoration: none;
font-weight: 500;
white-space: nowrap;
transition: color .15s;
}
.site-nav-left__link:hover { color: var(--color-primary); text-decoration: none; }
/* ロゴ（左寄せ） */
.site-logo {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
text-decoration: none;
gap: 2px;
flex-shrink: 0;
}
.site-logo img { width: 154px; height: auto; display: block; }
.site-logo__sub {
display: none;
font-size: 10px;
color: var(--color-text-muted);
white-space: nowrap;
letter-spacing: .02em;
}
.site-logo:hover { text-decoration: none; }
/* 右アクション */
.site-header-right {
display: flex;
align-items: center;
gap: 16px;
justify-content: flex-end;
margin-left: auto;
}
.cart-icon-link {
position: relative;
display: flex;
align-items: center;
}
.cart-icon-link svg { width: 22px; height: 22px; stroke: var(--color-text-sub); fill: none; }
.cart-icon-link:hover svg { stroke: var(--color-primary); text-decoration: none; }
.cart-badge {
position: absolute; top: -6px; right: -8px;
background: #e53935; color: #fff;
font-size: 9px; font-weight: 700;
min-width: 16px; height: 16px;
border-radius: var(--radius-pill);
display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.header-account-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 7px 16px;
border: 2px solid var(--color-primary);
border-radius: var(--radius-pill);
background: var(--color-primary);
color: #fff;
font-size: 13px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: opacity .15s;
}
.header-account-btn:hover { opacity: .85; text-decoration: none; color: #fff; }
/* カートボタン（マイページと同形のアウトライン版） */
.cart-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px;
border: 2px solid var(--color-primary);
border-radius: var(--radius-pill);
background: #fff;
color: var(--color-primary);
font-size: 13px; font-weight: 700;
text-decoration: none; white-space: nowrap;
transition: background .15s;
}
.cart-btn:hover { background: var(--color-primary-bg); color: var(--color-primary); text-decoration: none; }
.cart-btn__icon { width: 18px; height: 18px; stroke: currentColor; fill: none; flex-shrink: 0; }
.cart-btn__count { font-weight: 700; }
/* ===== 新ヘッダー：検索フォーム・価格（検索は一覧・詳細のみ表示） ===== */
.header-spacer { flex: 1; }
.header-search {
flex: 1; max-width: 560px;
display: flex; align-items: center;
height: 36px; background: #fff;
border: 1px solid var(--color-border); border-radius: var(--radius-pill);
overflow: hidden;
}
.header-search__cat { position: relative; display: flex; align-items: center; height: 100%; border-right: 1px solid var(--color-border); background: var(--color-surface); }
.header-search__cat-icon { width: 16px; height: 16px; margin: 0 2px 0 14px; opacity: .55; }
.header-search__select { appearance: none; -webkit-appearance: none; border: none; background: transparent; height: 100%; padding: 0 30px 0 4px; font-size: 13px; color: var(--color-text); font-family: inherit; cursor: pointer; max-width: 150px; }
.header-search__cat-arrow { position: absolute; right: 10px; width: 12px; height: 12px; opacity: .5; pointer-events: none; }
input.header-search__input { flex: 1; min-width: 0; width: auto; border: none; box-shadow: none; background: transparent; height: 100%; padding: 0 14px; font-size: 13px; font-family: inherit; outline: none; color: var(--color-text); }
input.header-search__input:focus { border: none; box-shadow: none; outline: none; }
.header-search__btn { border: none; background: transparent; height: 100%; padding: 0 14px; cursor: pointer; color: var(--color-primary); display: flex; align-items: center; }
.header-search__btn svg { width: 18px; height: 18px; }
/* モバイル用検索フォーム（デスクトップ非表示） */
.mobile-search { display: none; }
.header-price { font-size: 14px; color: var(--color-text-sub); white-space: nowrap; line-height: 1.35; text-decoration: none; }
.header-price:hover { color: var(--color-primary); text-decoration: none; }
.header-price strong { color: var(--color-primary); font-weight: 700; }
@media (max-width: 1024px) { .site-nav-left { display: none; } }
@media (max-width: 768px) { .header-search, .header-spacer { display: none; } .hamburger-btn { margin-left: auto; } }
@media (max-width: 768px) {
.mobile-search {
display: flex; align-items: center;
position: sticky; top: var(--header-h); z-index: 95;
/* 左レール（幅52px）と横並びにするため、レール幅ぶん右にずらす */
width: calc(100% - 52px); box-sizing: border-box; height: 56px;
margin: 0 0 0 52px; padding: 0 12px;
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
}
.mobile-search__btn { border: none; background: none; padding: 0 8px; color: var(--color-text-muted); display: flex; align-items: center; cursor: pointer; }
.mobile-search__btn svg { width: 20px; height: 20px; }
input.mobile-search__input {
flex: 1; min-width: 0; border: none; background: none; box-shadow: none;
/* font-size は 16px 以上必須（未満だと iOS がフォーカス時に自動ズームする） */
height: 100%; font-size: 16px; padding: 0 4px; outline: none; color: var(--color-text);
font-family: inherit;
}
input.mobile-search__input:focus { border: none; box-shadow: none; outline: none; }
/* 左レールはヘッダー直下（検索バーと同じ行）から開始。検索バーは上で右にずらして横並びにしている */
body.has-msearch .left-rail { top: var(--header-h); }
/* メニューを開いたときはヘッダー直下から表示し、検索バー・サイドバーごと覆う */
body.has-msearch .site-nav-mobile { top: var(--header-h); }
}
/* モバイル: ドロップダウンナビ（デスクトップでは非表示） */
.site-nav-mobile {
display: none;
}
/* ---- 旧 site-nav との後方互換 ---- */
.site-nav { display: flex; align-items: center; gap: 24px; }
.site-nav a { font-size: 13px; color: var(--color-text-sub); text-decoration: none; }
.site-nav a:hover { color: var(--color-primary); }
/* --- サイトフッター --- */
.site-footer {
background: #1a1a1a; color: #aaa;
padding: 40px 0 24px;
margin-top: 64px;
}
.site-footer .container {
display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.footer-nav { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.footer-nav a { font-size: 12px; color: #aaa; text-decoration: none; }
.footer-nav a:hover { color: #fff; }
.footer-copy { font-size: 11px; color: #666; }
/* --- ヒーロー --- */
.hero {
background: linear-gradient(135deg, #eef2fd 0%, #f7f8fa 100%);
padding: 72px 0; text-align: center;
}
.hero-title {
font-size: 32px; font-weight: 700;
color: var(--color-text); margin-bottom: 12px; line-height: 1.3;
}
.hero-sub { font-size: 15px; color: var(--color-text-sub); margin-bottom: 32px; }
.hero-search {
display: flex; gap: 8px; max-width: 520px; margin: 0 auto 20px;
}
.hero-search input {
flex: 1; padding: 12px 16px; border: 1.5px solid var(--color-border);
border-radius: var(--radius-pill); font-size: 14px;
}
.hero-search input:focus { border-color: var(--color-primary); outline: none; }
.hero-search .btn { border-radius: var(--radius-pill); padding: 12px 24px; }
.hero-tags { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.hero-tag {
padding: 4px 14px; border-radius: var(--radius-pill);
border: 1.5px solid var(--color-primary);
color: var(--color-primary); font-size: 12px; font-weight: 600;
text-decoration: none; transition: all .15s; background: #fff;
}
.hero-tag:hover { background: var(--color-primary); color: #fff; text-decoration: none; }
/* --- 業種グリッド --- */
.genre-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md);
}
.genre-card {
display: flex; flex-direction: column; align-items: center;
padding: 24px 16px;
border-radius: var(--radius-lg); border: 1px solid var(--color-border);
background: var(--color-bg); text-decoration: none;
transition: box-shadow .15s, transform .15s;
}
.genre-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-2px); text-decoration: none; }
.genre-icon {
width: 52px; height: 52px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 22px; margin-bottom: 12px;
}
.genre-card__name { font-size: 14px; font-weight: 600; color: var(--color-text); margin-bottom: 4px; }
.genre-card__count { font-size: 11px; color: var(--color-text-muted); }
/* --- 素材カード --- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap-md); }
/* 既存カード（index.phpの新着など） */
.material-card {
border-radius: var(--radius-lg); overflow: hidden;
background: var(--color-bg); border: 1px solid var(--color-border);
transition: box-shadow .15s;
}
.material-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.card-thumb-wrap {
position: relative; display: block; aspect-ratio: 4/3; overflow: hidden;
}
.card-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.material-card:hover .card-thumb { transform: scale(1.03); }
.card-type-badge {
position: absolute; top: 8px; left: 8px;
background: rgba(0,0,0,.55); color: #fff;
font-size: 10px; padding: 2px 8px; border-radius: var(--radius-pill);
}
.card-update-badge {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
display: inline-flex;
align-items: center;
padding: 4px 8px;
border-radius: var(--radius-pill);
background: rgba(0,0,0,.58);
color: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.14);
font-size: 11px;
line-height: 1;
font-weight: 700;
letter-spacing: 0;
backdrop-filter: blur(6px);
}
.card-body { padding: 12px; }
.card-title { font-size: 13px; font-weight: 600; color: var(--color-text); margin-bottom: 6px; line-height: 1.4; }
.card-meta { margin-bottom: 8px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; }
.card-price { font-size: 15px; font-weight: 700; color: var(--color-primary); }
.card-price small { font-size: 10px; font-weight: normal; color: var(--color-text-muted); }
/* ---- 固定リクエストCTA ---- */
.floating-request-cta {
position: fixed;
left: 50%;
bottom: 12px;
z-index: 900;
width: min(1040px, calc(100% - 32px));
min-height: 58px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 18px;
padding: 10px 138px 10px 150px;
border: 1px solid rgba(78,116,255,.32);
border-radius: 8px;
background:
radial-gradient(circle at 18% 100%, rgba(117,152,255,.20), transparent 34%),
radial-gradient(circle at 76% 0%, rgba(255,255,255,.86), transparent 28%),
linear-gradient(92deg, rgba(244,242,255,.96), rgba(255,255,255,.96) 48%, rgba(244,248,255,.96));
box-shadow: 0 8px 26px rgba(40,70,160,.14);
transform: translate(-50%, calc(100% + 28px));
opacity: 0;
pointer-events: none;
transition: transform .34s ease, opacity .24s ease;
}
.floating-request-cta.is-visible {
transform: translate(-50%, 0);
opacity: 1;
pointer-events: auto;
}
.floating-request-cta__close {
position: absolute;
top: 6px;
right: 8px;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: rgba(21,88,214,.08);
color: var(--color-primary);
font-size: 18px;
line-height: 1;
cursor: pointer;
}
.floating-request-cta__close:hover {
background: rgba(21,88,214,.16);
}
.floating-request-cta__icon {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
}
.floating-request-cta__icon svg {
width: 34px;
height: 34px;
}
.floating-request-cta__body {
min-width: 0;
}
.floating-request-cta__title {
margin: 0 0 4px;
color: var(--color-primary);
font-size: 15px;
font-weight: 700;
line-height: 1.35;
}
.floating-request-cta__text {
margin: 0;
color: #586073;
font-size: 11px;
font-weight: 600;
line-height: 1.45;
}
.floating-request-cta__btn {
min-width: 168px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 8px 22px;
border: 2px solid var(--color-primary);
border-radius: var(--radius-pill);
background: rgba(255,255,255,.78);
color: var(--color-primary);
font-size: 12px;
font-weight: 700;
text-decoration: none;
box-shadow: 0 2px 10px rgba(21,88,214,.10);
}
.floating-request-cta__btn:hover {
background: var(--color-primary);
color: #fff;
text-decoration: none;
}
.floating-request-cta__btn span {
font-size: 18px;
line-height: 1;
}
@media (max-width: 900px) {
.floating-request-cta {
width: calc(100% - 20px);
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 12px;
padding: 10px 12px;
}
.floating-request-cta__title {
font-size: 13px;
}
.floating-request-cta__text {
font-size: 10px;
}
.floating-request-cta__btn {
min-width: 138px;
padding: 7px 14px;
gap: 8px;
font-size: 11px;
}
}
@media (max-width: 640px) {
.floating-request-cta {
display: none;
}
}
/* ===== 写真グリッド（list.php 用） ===== */
.photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
@media (min-width: 1800px) {
.photo-grid { grid-template-columns: repeat(4, 1fr); }
}
.photo-card {
border-radius: 4px;
overflow: hidden;
position: relative;
cursor: pointer;
}
.photo-card__link {
display: block;
position: relative;
overflow: hidden;
aspect-ratio: 3 / 2;
}
.photo-card__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .35s ease;
}
.photo-card:hover .photo-card__img {
transform: scale(1.04);
}
.photo-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.1) 45%, transparent 70%);
opacity: 0;
transition: opacity .25s ease;
display: flex;
align-items: flex-end;
padding: 12px 10px;
}
.photo-card:hover .photo-card__overlay {
opacity: 1;
}
.photo-card__title {
color: #fff;
font-size: 11px;
line-height: 1.45;
font-weight: 500;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 業種バッジ */
.genre-badge {
display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill);
font-size: 10px; font-weight: 600;
}
/* お気に入りハート（カード右上） */
.fav-btn {
position: absolute; top: 8px; right: 8px;
width: 32px; height: 32px; padding: 0;
border: none; border-radius: 50%;
background: rgba(0,0,0,.28);
display: flex; align-items: center; justify-content: center;
cursor: pointer; opacity: 0; transition: opacity .18s, background .15s;
}
.photo-card:hover .fav-btn, .fav-btn.active { opacity: 1; }
.fav-btn:hover { background: rgba(0,0,0,.45); }
.fav-btn.active { background: rgba(255,255,255,.92); }
.fav-btn__icon {
display: block; width: 18px; height: 18px;
background-color: #fff;
-webkit-mask: url(/assets/images/common/icon_favorite.svg) center/contain no-repeat;
mask: url(/assets/images/common/icon_favorite.svg) center/contain no-repeat;
/* ハートは描画上わずかに上寄りになるため光学補正 */
transform: translateY(.5px);
}
.fav-btn.active .fav-btn__icon { background-color: #e0245e; }
/* 詳細ページのお気に入りボタン（「カートを確認」の横） */
.detail-actions__row { display: flex; align-items: center; gap: 10px; }
.fav-btn--detail {
position: static;
opacity: 1;
width: 34px; height: 34px;
flex: 0 0 auto;
background: #fff;
border: 1px solid var(--color-border);
}
.fav-btn--detail .fav-btn__icon { background-color: #9AA3B2; } /* ライト背景で見えるグレーのハート */
.fav-btn--detail:hover { background: var(--color-primary-bg); }
.fav-btn--detail:hover .fav-btn__icon { background-color: #e0245e; }
/* フルダークに戻した場合の従来配色 */
body.theme-dark .fav-btn--detail { background: rgba(255,255,255,.08); }
body.theme-dark .fav-btn--detail .fav-btn__icon { background-color: #fff; }
body.theme-dark .fav-btn--detail:hover { background: rgba(255,255,255,.16); }
/* タッチ端末：ホバー演出（タイトルオーバーレイ・ハート・ズーム）を無効化し、
1タップで詳細ページへ遷移させる。お気に入りページのハート（解除用）だけは残す */
@media (hover: none) {
.photo-card__overlay { display: none; }
.photo-card .fav-btn { display: none; }
.photo-card:hover .photo-card__img { transform: none; }
.photo-grid--keep-fav .photo-card .fav-btn { display: flex; opacity: 1; }
}
/* 職種チップ（一覧の業種ページ） */
.occ-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 20px; }
.occ-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 12px; border: 1px solid var(--color-border);
border-radius: var(--radius-pill); font-size: 12px;
color: var(--color-text); text-decoration: none; background: #fff;
transition: border-color .15s, color .15s, background .15s;
}
.occ-chip:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.occ-chip.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.occ-chip__count { font-size: 10px; color: var(--color-text-muted); }
.occ-chip.active .occ-chip__count { color: rgba(255,255,255,.85); }
/* モバイルでは職種チップを横スクロール1行に（多くても縦に伸びない） */
@media (max-width: 768px) {
.occ-chips {
flex-wrap: nowrap; overflow-x: auto;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
margin: 20px -16px 16px; padding: 0 16px 6px;
}
.occ-chips::-webkit-scrollbar { display: none; }
.occ-chip { flex-shrink: 0; }
}
/* 左アイコン列（閲覧系ページ） */
.left-rail {
position: fixed; left: 0; top: var(--header-h); bottom: 0;
width: 64px; background: #fff; border-right: 1px solid var(--color-border);
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding-top: 18px; z-index: 220;
}
.rail-item {
width: 56px; padding: 7px 2px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
border-radius: 10px; text-decoration: none; transition: background .15s;
}
.rail-item:hover { background: var(--color-surface); }
.rail-item__icon {
display: block; width: 24px; height: 24px;
background-color: #D3D3D3;
-webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
mask-repeat: no-repeat; mask-position: center; mask-size: contain;
}
.rail-item__label {
font-size: 9px; line-height: 1; white-space: nowrap;
color: var(--color-text-muted); letter-spacing: .02em;
}
.rail-item.active .rail-item__icon { background-color: #1558D6; }
.rail-item.active .rail-item__label { color: #1558D6; }
.rail-cat-toggle { border: none; background: transparent; cursor: pointer; }
.rail-cat-toggle.active { background: var(--color-surface); }
main.has-rail { padding-left: 64px; }
/* カテゴリー業種スライドパネル */
.rail-flyout {
position: fixed; left: 64px; top: var(--header-h); bottom: 0;
width: 240px; background: #fff; border-right: 1px solid var(--color-border);
z-index: 219; padding: 18px 0; overflow-y: auto;
box-shadow: 6px 0 18px rgba(0,0,0,.06);
transform: translateX(-14px) scale(.985); opacity: 0; visibility: hidden;
transform-origin: left center;
will-change: transform, opacity;
transition:
transform .42s cubic-bezier(.16, 1, .3, 1),
opacity .34s ease,
visibility 0s linear .42s;
}
.rail-flyout.open {
transform: translateX(0) scale(1);
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.rail-flyout__title { font-size: 12px; color: var(--color-text-muted); padding: 0 20px 12px; margin: 0; }
.rail-flyout__list { display: flex; flex-direction: column; }
.rail-flyout__list a {
display: block; padding: 11px 20px; font-size: 14px;
color: var(--color-text); text-decoration: none; transition: background .12s, color .12s;
}
.rail-flyout__list a:hover { background: var(--color-surface); color: var(--color-primary); text-decoration: none; }
@media (max-width: 1024px) {
.left-rail { width: 52px; }
.rail-item { width: 48px; }
.rail-item__label { font-size: 8px; }
.rail-flyout { left: 52px; }
main.has-rail { padding-left: 52px; }
}
/* カートボタン */
.btn-cart {
padding: 5px 10px; border-radius: var(--radius-sm);
background: var(--color-primary); color: #fff;
border: none; font-size: 11px; font-weight: 600;
cursor: pointer; transition: opacity .15s; white-space: nowrap;
}
.btn-cart:hover { opacity: .85; }
.btn-cart.in-cart { background: #1a7f3c; }
.btn-cart.in-cart::before { content: '✓ '; }
/* --- パックカード --- */
.pack-list { display: flex; flex-direction: column; gap: var(--gap-md); }
.pack-card {
background: var(--color-bg); border-radius: var(--radius-lg);
padding: 20px 20px 20px 0;
display: flex; align-items: flex-end; overflow: visible;
position: relative; min-height: 110px;
border: 1px solid var(--color-border);
transition: box-shadow .15s;
}
.pack-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.pack-illust-wrap {
width: 90px; min-width: 90px; position: relative;
align-self: stretch; display: flex; align-items: flex-end;
justify-content: center; overflow: visible;
}
.pack-illust { width: 74px; position: absolute; bottom: 0; left: 8px; }
.pack-body { flex: 1; padding-top: 16px; }
.pack-title { font-size: 13px; font-weight: 600; color: var(--color-text); margin-bottom: 4px; }
.pack-desc { font-size: 11px; color: var(--color-text-muted); margin-bottom: 10px; line-height: 1.4; }
.pack-foot { display: flex; align-items: center; gap: 10px; }
.pack-price { font-size: 15px; font-weight: 700; color: var(--color-primary); }
.pack-saving { font-size: 11px; color: #1a7f3c; font-weight: 600; }
/* --- チップ（フィルタ） --- */
.chip {
display: inline-block; padding: 5px 12px;
border: 1.5px solid #ddd; border-radius: var(--radius-pill);
font-size: var(--font-size-sm); color: var(--color-text-sub);
cursor: pointer; margin: 2px; transition: all .15s;
background: var(--color-bg); text-decoration: none;
}
.chip:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.chip.active {
background: var(--color-primary-bg); color: var(--color-primary);
border-color: var(--color-primary); font-weight: 600;
}
/* --- リストレイアウト --- */
/* list.php 全幅ラッパー */
.list-fullwidth {
width: 100%;
padding: 24px 16px 64px;
box-sizing: border-box;
}
.layout-sidebar {
display: grid; grid-template-columns: 200px 1fr; gap: 24px;
}
/* 旧サイドバー廃止版：メインを全幅に */
.layout-sidebar.list-nosidebar { display: block; padding-left: 0; }
.sidebar { font-size: 13px;}
.sidebar-section { margin-bottom: 24px; }
.sidebar-section__title {
font-size: 11px; font-weight: 700; color: var(--color-text-muted);
text-transform: uppercase; letter-spacing: .06em;
margin-bottom: 8px; padding-bottom: 6px;
border-bottom: 1px solid var(--color-border);
}
.sidebar-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.id-search-input {
width: 100%; padding: 7px 10px; font-size: 12px;
border: 1.5px solid #ddd; border-radius: var(--radius-sm);
color: var(--color-text);
}
.id-search-input:focus { border-color: var(--color-primary); outline: none; }
/* 一覧ページ見出し */
.list-h1 {
font-size: 22px;
font-weight: 700;
line-height: 1.45;
margin: 0 0 12px;
}
/* カテゴリ説明文（H1下のサブタイトル） */
.list-subtitle {
font-size: 14px; color: var(--color-text-sub); line-height: 1.9;
margin: 12px 0 32px; max-width: 900px;
}
/* 件数・ソート行 */
.list-toolbar {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 16px; font-size: 13px;
}
.list-count { color: var(--color-text-sub); }
.list-sort { display: flex; gap: 8px; }
.sort-link { font-size: 12px; color: var(--color-text-muted); text-decoration: none; }
.sort-link.active { color: var(--color-primary); font-weight: 600; }
/* フロント用ページネーション */
.page-btn {
width: 36px; height: 36px; display: flex;
align-items: center; justify-content: center;
border-radius: var(--radius-sm); font-size: var(--font-size-sm);
color: var(--color-text-sub); border: 1.5px solid #ddd;
cursor: pointer; text-decoration: none; transition: all .15s;
}
.page-btn:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.page-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.front-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 32px; }
/* --- 詳細ページ --- */
.layout-2col { display: grid; grid-template-columns: 1fr 300px; gap: 24px; }
.breadcrumb { font-size: 12px; color: var(--color-text-muted); margin-bottom: 16px; }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb span { margin: 0 6px; }
.detail-thumb-wrap { border-radius: var(--radius-lg); overflow: hidden; }
.detail-thumb { width: 100%; display: block; }
.material-id-label {
display: inline-block; margin-top: 10px;
font-size: 11px; color: var(--color-text-muted);
background: var(--color-surface); padding: 3px 10px;
border-radius: var(--radius-sm);
}
.material-caption {
margin-top: 12px;
font-size: 13px; line-height: 1.7;
color: var(--color-text-muted);
}
.detail-sidebar {}
.detail-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.tag-chip {
padding: 3px 10px; border-radius: var(--radius-pill);
background: #fff; color: var(--color-text-sub);
border: 1px solid var(--color-border);
font-size: 11px; text-decoration: none;
}
.tag-chip:hover { background: var(--color-primary-bg); border-color: #bccffa; color: var(--color-primary); text-decoration: none; }
.detail-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; line-height: 1.4; }
.detail-title-admin-link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.detail-title-admin-link:hover { color: var(--color-primary); text-decoration: none; }
/* 価格表示（2026-07-14 デザイン改修: 金額は濃色・大きめ、「円」は数字よりひと回り小さく） */
.detail-price { font-size: 15px; font-weight: 700; color: var(--color-text); margin-bottom: 14px; }
.detail-price__num { font-size: 24px; letter-spacing: .01em; }
.detail-price__yen { font-size: 16px; }
.detail-price small { font-size: 13px; font-weight: normal; color: var(--color-text-muted); }
.detail-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.btn-buy {
display: block; width: 100%; padding: 12px;
background: var(--color-primary); color: #fff;
border: none; border-radius: var(--radius-md);
font-size: 15px; font-weight: 700; cursor: pointer;
text-align: center; transition: opacity .15s;
-webkit-appearance: none; appearance: none;
font-family: inherit; line-height: 1.4; box-sizing: border-box;
}
.btn-buy:hover { opacity: .85; text-decoration: none; color: #fff; }
.btn-buy.btn-cart { padding: 12px; font-size: 15px; border-radius: var(--radius-md); white-space: normal; }
/* 定額プラン訴求ボックス（detail.php 価格セクション 2026-07-14 デザイン改修） */
.plan-promo__off { margin: 5px 0 -5px; text-align: right; font-size: 12px; font-weight: 700; color: var(--color-primary); }
.plan-promo__off strong { font-size: 19px; }
.plan-promo__box {
position: relative;
padding: 20px 16px 12px;
border: 1.5px solid var(--color-primary);
border-radius: 12px;
background: var(--color-primary-bg, #eef4ff);
}
.plan-promo__badge {
position: absolute; top: -12px; left: 14px;
padding: 3px 12px;
background: var(--color-primary); color: #fff;
font-size: 11px; font-weight: 700; letter-spacing: .06em;
border-radius: 999px;
}
.plan-promo__main { margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--color-text); }
.plan-promo__unit-num { font-size: 24px; }
.plan-promo__unit-yen { font-size: 16px; }
.plan-promo__sub { margin-bottom: 14px; font-size: 12px; color: var(--color-text-sub); line-height: 1.75; }
.plan-promo__btn { display: block; text-align: center; text-decoration: none; }
.plan-promo__note { margin-top: 8px; font-size: 10px; color: var(--color-text-muted); }
/* 単品購入ボタン（プラン訴求時はアウトライン。金額は本文よりひと回り小さく） */
.btn-buy.btn-single--outline { background: transparent; border: 1.5px solid var(--color-primary); color: var(--color-primary); }
.btn-buy.btn-single--outline:hover { opacity: 1; color: var(--color-primary); background: var(--color-primary-bg, #eef4ff); }
.btn-single__price { font-size: 13px; font-weight: normal; }
.btn-buy-now {
display: block; width: 100%; padding: 12px;
background: #fff; color: var(--color-primary);
border: 2px solid var(--color-primary); border-radius: var(--radius-md);
font-size: 14px; font-weight: 700; cursor: pointer;
text-align: center; transition: all .15s;
-webkit-appearance: none; appearance: none;
font-family: inherit; line-height: 1.4; box-sizing: border-box;
}
.btn-buy-now:hover { background: var(--color-primary-bg); text-decoration: none; }
.btn-view-cart {
display: block; width: auto; align-self: flex-start;
padding: 6px 20px;
background: #fff; color: var(--color-primary);
border: 1px solid var(--color-primary); border-radius: var(--radius-md);
font-size: 12px; font-weight: 700;
text-align: center; text-decoration: none; transition: all .15s;
line-height: 1.4; box-sizing: border-box;
}
.btn-view-cart:hover { background: var(--color-primary-bg); text-decoration: none; }
/* --- ブログ・お知らせ --- */
.post-list-header { margin: 16px 0 32px; }
.post-list-title { font-size: 26px; font-weight: 700; line-height: 1.45; margin: 0 0 10px; }
.post-list-lead { max-width: 760px; margin: 0; color: var(--color-text-sub); font-size: 14px; line-height: 1.9; }
.post-cards {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.post-card {
display: flex; flex-direction: column;
background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
overflow: hidden;
text-decoration: none; color: var(--color-text);
transition: box-shadow .15s, transform .15s;
}
.post-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .08); transform: translateY(-1px); text-decoration: none; }
.post-card__thumb {
flex: 0 0 190px;
height: 190px;
background: #f3f4f6;
overflow: hidden;
}
.post-card__thumb img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.post-card__body {
display: flex;
flex: 1;
flex-direction: column;
gap: 8px;
padding: 18px 20px 20px;
}
.post-card__date { font-size: 12px; color: var(--color-text-muted); }
.post-card__title { font-size: 15px; font-weight: 700; line-height: 1.5; margin: 0; }
.post-card__excerpt { font-size: 12px; color: var(--color-text-sub); line-height: 1.7; margin: 0; flex: 1; }
.post-card__more { font-size: 12px; color: var(--color-primary); font-weight: 700; }
@media (max-width: 1024px) {
.post-cards { grid-template-columns: repeat(2, 1fr); }
.post-card__thumb { flex-basis: 240px; height: 240px; }
}
@media (max-width: 600px) {
.post-list-header { margin-bottom: 24px; }
.post-list-title { font-size: 22px; }
.post-list-lead { font-size: 13px; }
.post-cards { grid-template-columns: 1fr; }
.post-card__thumb { flex-basis: auto; height: auto; aspect-ratio: 16 / 9; }
}
.news-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.news-list__item { border-bottom: 1px solid var(--color-border); }
.news-list__link {
display: flex; align-items: baseline; gap: 20px;
padding: 16px 8px; text-decoration: none; color: var(--color-text);
}
.news-list__link:hover { background: var(--color-surface); text-decoration: none; }
.news-list__date { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.news-list__title { font-size: 14px; line-height: 1.6; }
@media (max-width: 600px) {
.news-list__link { flex-direction: column; gap: 4px; }
}
.post-pager { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 36px; font-size: 13px; }
.post-pager__link { color: var(--color-primary); font-weight: 700; text-decoration: none; }
.post-pager__info { color: var(--color-text-muted); }
.post-article__date { font-size: 12px; color: var(--color-text-muted); }
.post-article__title { font-size: 24px; font-weight: 700; line-height: 1.5; margin: 8px 0 28px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.post-body { font-size: 14px; line-height: 1.9; color: var(--color-text); }
.post-body h2 { font-size: 18px; font-weight: 700; margin: 32px 0 12px; padding-left: 10px; border-left: 4px solid var(--color-primary); }
.post-body h3 { font-size: 15px; font-weight: 700; margin: 24px 0 10px; }
.post-body p { margin: 0 0 16px; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.post-body a { color: var(--color-primary); }
.post-body ul, .post-body ol { margin: 0 0 16px; padding-left: 24px; }
.post-body li { margin-bottom: 6px; }
/* スマホ幅で表がはみ出す場合に横スクロールさせる（table自体をスクロールコンテナ化）
thead/tbody/tr の display は上書きしない：行ごとに独立させると列幅がバラバラになるため、
単一の table として列幅を揃えたまま table 自体をスクロールコンテナにする。 */
.post-body table {
display: block;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 0 16px;
border-collapse: collapse;
font-size: 13px;
}
.post-body th, .post-body td { border: 1px solid var(--color-border); padding: 8px 12px; text-align: left; white-space: nowrap; }
@media (max-width: 767px) {
.post-body table::before {
content: "→ 横にスクロールできます";
display: block;
margin: 0 0 6px;
color: #94a3b8;
font-size: 12px;
}
}
.post-detail-page--blog .post-article {
background: #fff;
color: #1f2937;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 34px 36px 38px;
}
.post-detail-page--blog .post-article__date { color: #6b7280; }
.post-detail-page--blog .post-article__title {
color: #111827;
border-bottom-color: #e5e7eb;
}
.post-detail-page--blog .post-body { color: #1f2937; }
.post-detail-page--blog .post-body h2,
.post-detail-page--blog .post-body h3 {
color: #111827;
}
.post-detail-page--blog .post-body h2 {
padding-left: 18px;
}
@media (max-width: 600px) {
.post-detail-page--blog .post-article {
padding: 24px 18px 28px;
}
}
/* --- 写真拡大モーダル（素材詳細ページ、スマホでは拡大なし） --- */
.detail-thumb { cursor: zoom-in; }
@media (max-width: 768px) {
.detail-thumb { cursor: default; }
.photo-modal.is-open { display: none; }
}
.photo-modal {
display: none;
position: fixed; inset: 0; z-index: 500;
background: rgba(0, 0, 0, .8);
align-items: center; justify-content: center;
padding: 32px;
}
.photo-modal.is-open { display: flex; }
.photo-modal__img {
max-width: 100%; max-height: 100%;
border-radius: 4px;
box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
}
.photo-modal__close {
position: absolute; top: 16px; right: 16px;
width: 40px; height: 40px;
border: none; border-radius: 50%;
background: rgba(255, 255, 255, .2); color: #fff;
font-size: 24px; line-height: 1;
cursor: pointer;
transition: background .15s;
}
.photo-modal__close:hover { background: rgba(255, 255, 255, .4); }
.pack-promo {
background: var(--color-primary-bg);
border: 1px solid #bccffa;
border-radius: var(--radius-md);
padding: 12px; margin-bottom: 20px;
font-size: 12px; color: var(--color-primary);
}
.pack-promo a { color: var(--color-primary); font-weight: 700; }
.license-note {
font-size: 11px; color: var(--color-text-muted); line-height: 1.7;
border-top: 1px solid var(--color-border); padding-top: 14px;
}
.material-info-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 16px; }
.material-info-table th {
width: 80px; padding: 6px 0; color: var(--color-text-muted);
font-weight: normal; text-align: left; vertical-align: top;
background: none; border-bottom: none;
}
.material-info-table td {
padding: 6px 0; color: var(--color-text);
border-bottom: none;
}
.related-section { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--color-border); }
.related-section h2 { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
/* --- このサイトの特徴 --- */
.value-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap-lg); }
.value-card { border-radius: var(--radius-lg); overflow: hidden; }
.value-body { padding: 16px; background: var(--color-surface); }
.value-icon { font-size: 28px; margin-bottom: 8px; }
.value-title { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.value-desc { font-size: var(--font-size-sm); color: var(--color-text-sub); line-height: 1.7; }
/* --- FAQ --- */
.faq-list { max-width: 700px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-q {
width: 100%; text-align: left; padding: 16px 0;
font-size: 14px; font-weight: 600; color: var(--color-text);
background: none; border: none; cursor: pointer;
display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq-q::after { content: '+'; font-size: 18px; color: var(--color-primary); flex-shrink: 0; }
.faq-item.open .faq-q::after { content: '−'; }
.faq-a {
display: none; padding: 0 0 16px;
font-size: 13px; color: var(--color-text-sub); line-height: 1.7;
}
.faq-item.open .faq-a { display: block; }
/* --- パック詳細 --- */
.pack-hero {
aspect-ratio: 16/7; background: linear-gradient(135deg,#eef2fd,#f7f8fa);
border-radius: var(--radius-lg); overflow: hidden;
display: flex; align-items: center; justify-content: center;
margin-bottom: 32px; position: relative;
}
.pack-hero__title {
font-size: 28px; font-weight: 700; color: var(--color-text);
text-align: center; z-index: 1;
}
.pack-detail-grid { display: grid; grid-template-columns: 1fr 280px; gap: 32px; }
.pack-mat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.pack-summary {
position: sticky; top: calc(var(--header-h) + 16px);
background: var(--color-bg); border: 1px solid var(--color-border);
border-radius: var(--radius-lg); padding: 20px;
}
.pack-summary__title { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.pack-summary__price { font-size: 26px; font-weight: 700; color: var(--color-primary); }
.pack-summary__saving { font-size: 12px; color: #1a7f3c; font-weight: 600; margin-bottom: 16px; }
/* ローディングスピナー */
.grid-loading {
grid-column: 1/-1; text-align: center;
padding: 40px; color: var(--color-text-muted); font-size: 13px;
}
.spinner {
display: inline-block; width: 24px; height: 24px;
border: 3px solid var(--color-border);
border-top-color: var(--color-primary);
border-radius: 50%; animation: spin .7s linear infinite;
margin-right: 8px; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ========================================
レスポンシブ
======================================== */
/* ---- ハンバーガーボタン ---- */
.hamburger-btn {
display: none;
flex-direction: column; justify-content: center; align-items: center;
width: 40px; height: 40px; gap: 5px;
background: none; border: none; cursor: pointer; padding: 4px;
}
.hamburger-btn span {
display: block; width: 22px; height: 2px;
background: var(--color-text); border-radius: 2px;
transition: transform .25s ease, opacity .12s ease;
}
.hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
/* opacity:0 だけでは iOS 実機 Chrome で丸端がドットとして残るため、幅も潰して確実に消す */
.hamburger-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ---- フィルターアイコンバー（タブレット以下のみ） ---- */
.filter-icon-btn { display: none; } /* デスクトップでは非表示 */
/* フィルタードロワー（デスクトップでは非表示） */
#filter-drawer,
#filter-overlay { display: none; }
/* ============ 写真グリッド 2列（〜1200px） ============ */
@media (max-width: 1200px) {
.photo-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ============ タブレット（〜1024px） ============ */
@media (max-width: 1024px) {
/* グリッド */
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.genre-grid { grid-template-columns: repeat(2, 1fr); }
.value-grid { grid-template-columns: repeat(2, 1fr); }
.pack-mat-grid { grid-template-columns: repeat(3, 1fr); }
.pack-detail-grid { grid-template-columns: 1fr; }
.layout-2col { grid-template-columns: 1fr 260px; }
.pack-summary { position: static; }
.hero-title { font-size: 28px; }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
/* ---- list.php 全幅ラッパー：モバイルの左右余白 ---- */
.list-fullwidth {
padding-left: 16px;
padding-right: 16px;
}
.list-h1 { font-size: 18px; }
.layout-sidebar {
grid-template-columns: 1fr;
gap: 0;
}
/* sidebar を固定アイコン列に */
#sidebar {
position: fixed;
left: 0;
top: var(--header-h);
height: calc(100vh - var(--header-h));
overflow-y: auto;
overflow-x: hidden;
background: var(--color-bg);
border-right: 1px solid var(--color-border);
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 0;
width: 52px;
z-index: 80;
}
/* 通常のサイドバーセクションは非表示 */
#sidebar .sidebar-section { display: none; }
/* アイコンボタン */
.filter-icon-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
width: 52px;
min-height: 54px;
padding: 6px 4px;
background: none;
border: none;
border-radius: 0;
cursor: pointer;
color: var(--color-text-muted);
font-size: 9px;
line-height: 1.2;
transition: background .15s, color .15s;
position: relative;
}
.filter-icon-btn:hover {
background: var(--color-primary-bg);
color: var(--color-primary);
}
.filter-icon-btn.active {
background: var(--color-primary-bg);
color: var(--color-primary);
}
.filter-icon-btn svg {
width: 20px; height: 20px;
stroke: currentColor; fill: none;
stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
flex-shrink: 0;
}
/* アクティブフィルター表示ドット */
.filter-icon-btn.has-filter::after {
content: '';
position: absolute;
top: 6px; right: 8px;
width: 6px; height: 6px;
background: var(--color-primary);
border-radius: 50%;
}
/* ---- フィルタードロワー ---- */
#filter-drawer {
display: flex;
flex-direction: column;
position: fixed;
top: var(--header-h);
left: 0;
width: 240px;
height: calc(100vh - var(--header-h));
background: var(--color-bg);
border-right: 1px solid var(--color-border);
box-shadow: 4px 0 20px rgba(0,0,0,.12);
z-index: 219;
transform: translateX(-100%);
transition: transform .25s ease;
overflow-y: auto;
}
#filter-drawer.open {
transform: translateX(0);
}
.filter-drawer-hd {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px 12px;
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
background: var(--color-bg);
z-index: 1;
}
.filter-drawer-hd strong {
font-size: 13px;
color: var(--color-text);
}
.filter-drawer-close {
background: none; border: none; cursor: pointer;
font-size: 16px; color: var(--color-text-muted);
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
transition: background .15s;
}
.filter-drawer-close:hover { background: var(--color-surface); }
#filter-drawer-body { padding: 16px; }
/* ドロワー内のセクションタイトルは非表示 */
#filter-drawer-body .sidebar-section__title { display: none; }
/* ドロワー内のチップを大きめに */
#filter-drawer-body .chip { font-size: 13px; padding: 6px 14px; margin: 3px; }
#filter-drawer-body label { font-size: 13px; margin-bottom: 10px; }
#filter-drawer-body .id-search-input { font-size: 13px; padding: 10px 12px; }
/* ---- オーバーレイ ---- */
#filter-overlay {
display: block;
position: fixed;
inset: 0;
top: var(--header-h);
background: rgba(0,0,0,.35);
z-index: 218;
opacity: 0;
pointer-events: none;
transition: opacity .25s;
}
#filter-overlay.open {
opacity: 1;
pointer-events: auto;
}
/* list-toolbar はサイドバー分インデント */
.list-toolbar { margin-bottom: 12px; }
}
/* ============ スマホ（〜768px） ============ */
@media (max-width: 768px) {
:root { --header-h: 56px; }
/* ---- ヘッダー ---- */
.hamburger-btn { display: flex; margin-left: 8px; width: 36px; height: 36px; }
.site-header { overflow: visible; }
/* モバイルではロゴ、カート、ハンバーガーを横並び */
.site-header__inner {
gap: 8px;
padding: 0 12px;
position: relative;
}
.site-logo img { width: 128px; }
.site-nav-left { display: none; }
.site-header-right {
display: flex;
gap: 0;
margin-left: auto;
}
.site-header-right .header-price,
.site-header-right .header-account-btn {
display: none;
}
.site-header-right .cart-btn {
display: inline-flex;
gap: 4px;
padding: 6px 10px;
border-width: 1.5px;
font-size: 12px;
}
.site-header-right .cart-btn__icon {
width: 16px;
height: 16px;
}
/* モバイルナビ */
.site-nav-mobile {
position: fixed;
top: var(--header-h);
left: 0;
right: 0;
background: var(--color-bg);
border-bottom: 1px solid var(--color-border);
flex-direction: column;
align-items: stretch;
padding: 8px 0;
gap: 0;
box-shadow: 0 4px 12px rgba(0,0,0,.08);
z-index: 200;
/* 項目が多い場合はメニュー内で縦スクロール（背後は body.nav-open で固定） */
max-height: calc(100vh - var(--header-h));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.site-nav-mobile.open { display: flex; }
.site-nav-mobile a {
padding: 14px 20px;
font-size: 14px;
color: var(--color-text);
text-decoration: none;
border-bottom: 1px solid var(--color-border);
}
.site-nav-mobile a:last-child { border-bottom: none; }
.site-nav-mobile a:hover { background: var(--color-surface); color: var(--color-primary); }
.site-nav-mobile a.site-nav-mobile__sub {
padding: 10px 20px;
font-size: 12px;
color: var(--color-text-muted);
}
/* メニュー展開中に背後のコンテンツを覆う黒オーバーレイ（クリック・スクロールをブロック） */
.site-nav-overlay {
display: none;
position: fixed;
inset: 0;
top: var(--header-h);
background: rgba(0,0,0,.4);
z-index: 199;
opacity: 0;
transition: opacity .2s;
}
.site-nav-overlay.open { display: block; opacity: 1; }
body.nav-open { overflow: hidden; }
/* メニュー(nav)・オーバーレイは .site-header(sticky,z-index:100) の子で、その stacking context に
閉じ込められるため、同じ z-index:100 で後方DOMのフッターや固定CTA(z-index:900)に負けて背面に回る。
メニューを開いている間だけヘッダーの context を最前面へ引き上げ、メニューをフッターより上に出す。 */
body.nav-open .site-header { z-index: 1000; }
/* 検索バーがあるページ（list/detail）でもオーバーレイはヘッダー直下から。
メニューを開いたときは検索バー・サイドバーごと覆う（メニュー本体は上の top:var(--header-h) で
ヘッダーに接地し、max-height は基本ルールの calc(100vh - var(--header-h)) を継承） */
body.has-msearch .site-nav-overlay { top: var(--header-h); }
/* スマホではフッターと開閉メニューをサイドバーより前面に出す */
.left-rail {
z-index: 90;
}
.rail-flyout {
z-index: 99;
}
#filter-drawer {
z-index: 99;
}
#filter-overlay {
z-index: 98;
}
/* ---- コンテナ ---- */
.container { padding: 0 12px; }
.section { padding: 36px 0; }
.section-title { font-size: 18px; margin-bottom: 18px; }
/* ---- ヒーロー ---- */
.hero { padding: 40px 0; }
.hero-title { font-size: 21px; }
.hero-sub { font-size: 13px; margin-bottom: 20px; }
.hero-search { flex-direction: column; gap: 8px; }
.hero-search input { border-radius: var(--radius-md); }
.hero-search .btn { border-radius: var(--radius-md); width: 100%; }
.hero-tags { gap: 6px; }
/* ---- グリッド ---- */
.grid-4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.grid-3 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.photo-grid { gap: 5px; }
.genre-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.value-grid { grid-template-columns: 1fr; gap: 12px; }
.pack-mat-grid { grid-template-columns: repeat(2, 1fr); }
/* ---- 詳細ページ ---- */
.layout-2col { grid-template-columns: 1fr; }
/* ---- リストツールバー ---- */
.list-toolbar {
flex-direction: column; align-items: flex-start; gap: 6px;
margin-bottom: 10px;
}
/* ---- ドロワー幅（小画面） ---- */
#filter-drawer { width: 220px; }
/* ---- パック ---- */
.pack-card { flex-direction: column; align-items: stretch; padding: 0; }
.pack-illust-wrap {
width: 100%; height: 76px;
position: relative;
background: linear-gradient(135deg, #f0f4ff, #f7f8fa);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
overflow: visible;
}
.pack-illust { width: 52px; position: absolute; bottom: 0; left: 14px; }
.pack-body { padding: 10px 14px 14px; }
.pack-foot { flex-wrap: wrap; gap: 8px; }
.pack-detail-grid { grid-template-columns: 1fr; }
.pack-summary { margin-top: 0; }
/* ---- フッター ---- */
.site-footer { margin-top: 32px; }
.footer-nav { gap: 12px; }
/* ---- 管理画面 ---- */
.admin-wrap { flex-direction: column; }
.admin-sidebar {
width: 100%; flex-direction: row; align-items: center;
flex-wrap: wrap; padding: 0;
}
.admin-sidebar__logo {
border-bottom: none;
border-right: 1px solid rgba(255,255,255,.1);
}
.admin-nav { display: flex; flex-wrap: wrap; flex: 1; padding: 0; }
.admin-nav a { padding: 8px 12px; font-size: 12px; }
.admin-nav__logout {
padding: 8px 12px; border-top: none;
border-left: 1px solid rgba(255,255,255,.1);
}
.admin-main { padding: var(--gap-md); }
.admin-page-title { font-size: 17px; }
.stats-grid { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.search-bar { flex-direction: column; align-items: stretch; }
.search-bar select,
.search-bar input,
.search-bar input[type="date"] { width: 100%; }
table { font-size: 12px; }
th, td { padding: 8px; }
}
/* ============ スマホ小（〜480px） ============ */
@media (max-width: 480px) {
.hero-title { font-size: 19px; }
.grid-3 { grid-template-columns: 1fr; }
.photo-grid { grid-template-columns: 1fr; gap: 4px; }
.card-body { padding: 8px; }
.card-title { font-size: 12px; }
.card-price { font-size: 13px; }
.btn-cart { font-size: 10px; padding: 4px 8px; }
.btn-buy.btn-cart { font-size: 15px; padding: 12px; }
.section-title { font-size: 16px; }
.detail-title { font-size: 17px; }
.detail-price__num { font-size: 22px; }
.detail-price__yen { font-size: 15px; }
.front-pagination { gap: 4px; }
.page-btn { width: 32px; height: 32px; font-size: 11px; }
/* ドロワーを画面幅いっぱいに */
#filter-drawer {
width: calc(100vw - 52px);
}
}
/* ============================================================
バッジ
============================================================ */
.badge { display: inline-block; font-size: 10px; font-weight: var(--font-weight-bold); padding: 2px 8px; border-radius: var(--radius-pill); }
.badge-pub { background: #e6f4ee; color: #1a7a4a; }
.badge-draft { background: #f5f5f5; color: #888; }
.badge-new-req { background: var(--color-primary-bg); color: var(--color-primary); }
.badge-wip { background: var(--color-logistics-bg); color: var(--color-logistics); }
.badge-done { background: #e6f4ee; color: #1a7a4a; }
.badge-paid { background: #e6f4ee; color: #1a7a4a; }
/* ============================================================
フォーム共通
============================================================ */
.form-field { margin-bottom: 16px; }
.form-label { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-text); margin-bottom: 5px; }
.form-required { color: #c00; font-size: 10px; margin-left: 4px; }
.form-input,
.form-select,
.form-textarea { width: 100%; font-size: 13px; padding: 9px 12px; border: 1.5px solid #ddd; border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); box-sizing: border-box; transition: border-color 0.15s; }
.form-input:focus,
.form-select:focus,
.form-textarea:focus { border-color: var(--color-primary); outline: none; }
.form-hint { font-size: 10px; color: var(--color-text-muted); margin-top: 4px; line-height: 1.5; }
/* ============================================================
認証ページ共通（auth-card）
============================================================ */
.auth-card { max-width: 440px; margin: 0 auto; background: var(--color-bg); border: 1px solid #eee; border-radius: var(--radius-md); padding: 40px 36px; }
.auth-title { font-size: 20px; font-weight: var(--font-weight-bold); text-align: center; margin-bottom: 28px; }
.auth-sub { text-align: center; font-size: 12px; margin-top: 20px; color: var(--color-text-muted); }
.auth-note { text-align: center; font-size: 11px; margin-top: 8px; color: var(--color-text-muted); }
/* アラート */
.alert { border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 20px; font-size: 13px; line-height: 1.6; }
.alert p { margin: 0; }
.alert p + p { margin-top: 4px; }
.alert-error { background: #fff0f0; border: 1px solid #f5c2c2; color: #c00; }
.alert-success { background: #f0f9f4; border: 1px solid #a8d5b8; color: #1a7a4a; }
.alert-warning { background: #fff8e6; border: 1px solid #f5d87a; color: #7a5a00; }
/* 再送リンクボタン（form内のinlineボタン） */
.btn-link-inline { background: none; border: none; padding: 0; font-size: inherit; color: var(--color-primary); cursor: pointer; text-decoration: underline; }
.btn-link-inline:hover { opacity: .8; }
/* ============================================================
マイページ
============================================================ */
.mypage-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; }
/* サイドバー */
.mypage-sidebar {
background: var(--color-bg);
border: 1px solid #eee;
border-radius: var(--radius-md);
padding: 24px 20px;
display: flex;
flex-direction: column;
gap: 12px;
position: sticky;
top: 80px;
}
.mypage-avatar {
width: 52px; height: 52px;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
font-size: 22px;
font-weight: var(--font-weight-bold);
display: flex; align-items: center; justify-content: center;
align-self: center;
}
.mypage-email { font-size: 12px; color: var(--color-text-muted); text-align: center; word-break: break-all; }
.mypage-nav { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid #eee; padding-top: 12px; }
.mypage-nav__link {
font-size: 13px; padding: 8px 12px; border-radius: var(--radius-sm);
color: var(--color-text); text-decoration: none; transition: background .15s;
}
.mypage-nav__link:hover,
.mypage-nav__link.active { background: var(--color-primary-bg); color: var(--color-primary); }
.mypage-logout-btn {
width: 100%; padding: 8px; font-size: 12px;
color: var(--color-text-muted); background: transparent;
border: 1px solid #ddd; border-radius: var(--radius-sm);
cursor: pointer; transition: border-color .15s;
}
.mypage-logout-btn:hover { border-color: #999; color: var(--color-text); }
/* メインコンテンツ */
.mypage-main { min-width: 0; }
.mypage-section-title { font-size: 17px; font-weight: var(--font-weight-bold); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--color-primary); }
/* 注文カード */
.order-card { border: 1px solid #eee; border-radius: var(--radius-md); margin-bottom: 20px; overflow: hidden; }
.order-card__head { background: #f8f8f8; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 12px; }
.order-card__num { font-weight: var(--font-weight-bold); color: var(--color-text); }
.order-card__date { color: var(--color-text-muted); }
.order-card__total { margin-left: auto; font-weight: var(--font-weight-bold); }
.order-items { list-style: none; margin: 0; padding: 0; }
.order-item { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid #f0f0f0; }
.order-item:first-child { border-top: none; }
.order-item__thumb { max-width: 100px; max-height: 100px; width: auto; height: auto; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--color-surface); }
.order-item__thumb--pack { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--color-text-muted); border: 1px solid var(--color-border); }
.order-item__name { flex: 1; min-width: 0; font-size: 13px; }
.order-item__actions { display: flex; flex-wrap: wrap; gap: 6px; }
/* DLボタン */
.btn-dl { background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-sm); padding: 6px 14px; font-size: 12px; font-weight: var(--font-weight-bold); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn-dl:hover { opacity: .85; }
.btn-outline { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); padding: 6px 14px; font-size: 12px; font-weight: var(--font-weight-bold); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn-outline:hover { background: var(--color-primary-bg, #eef4ff); text-decoration: none; }
.btn-sm { padding: 5px 10px; font-size: 11px; }
/* リクエストリスト */
.request-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.request-item { border: 1px solid #eee; border-radius: var(--radius-md); padding: 14px 16px; }
.request-item__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.request-item__date { font-size: 11px; color: var(--color-text-muted); }
.request-item__body { font-size: 13px; margin: 0; }
.request-item__link { font-size: 12px; color: var(--color-primary); text-decoration: none; display: inline-block; margin-top: 6px; }
.request-item__link:hover { text-decoration: underline; }
/* モーダル */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 200; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s; }
.modal-overlay.show { opacity: 1; pointer-events: auto; }
.modal-box { background: var(--color-bg); border-radius: var(--radius-md); padding: 28px 24px; width: min(92vw, 400px); box-shadow: 0 8px 32px rgba(0,0,0,.18); }
/* ============================================================
マイページ レスポンシブ
============================================================ */
@media (max-width: 768px) {
.mypage-wrap { grid-template-columns: 1fr; }
.mypage-sidebar { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 16px; }
.mypage-avatar { width: 40px; height: 40px; font-size: 17px; }
.mypage-email { text-align: left; flex: 1; min-width: 0; }
.mypage-nav { flex-direction: row; flex-wrap: wrap; border-top: none; padding-top: 0; width: 100%; }
.mypage-logout-btn { width: auto; }
}
/* ============================================================
静的コンテンツページ（terms / license / law）
============================================================ */
.static-content h2 { font-size: 15px; font-weight: var(--font-weight-bold); margin: 28px 0 10px; padding-bottom: 6px; border-bottom: 1px solid #eee; }
.static-content h2:first-child { margin-top: 0; }
.static-content p { font-size: 13px; line-height: 1.8; margin-bottom: 10px; }
.static-content ul { font-size: 13px; line-height: 1.8; padding-left: 20px; margin-bottom: 10px; }
.static-content li { margin-bottom: 4px; }
/* 特商法テーブル */
.law-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.law-table th,
.law-table td { padding: 12px 16px; border-bottom: 1px solid #eee; vertical-align: top; text-align: left; }
.law-table th { width: 200px; background: #f8f8f8; font-weight: var(--font-weight-bold); color: var(--color-text-muted); white-space: nowrap; }
@media (max-width: 600px) {
.law-table th { display: block; width: 100%; border-bottom: none; padding-bottom: 4px; }
.law-table td { display: block; padding-top: 4px; }
}
/* 管理画面 stat boxes */
.admin-stat-box { background: #fff; border: 1px solid #eee; border-radius: var(--radius-sm); padding: 12px 20px; min-width: 140px; }
.admin-stat-label { font-size: 11px; color: var(--color-text-muted); margin-bottom: 4px; }
.admin-stat-value { font-size: 20px; font-weight: var(--font-weight-bold); }
/* ============================================================
ステップバー（カート・決済フロー）
============================================================ */
.step-bar { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 32px; }
.step { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.step.active { color: var(--color-primary); font-weight: var(--font-weight-bold); }
.step-num { width: 24px; height: 24px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.step-arrow { width: 32px; height: 2px; background: var(--color-border, #eee); margin: 0 4px; }
/* ============================================================
カートページ
============================================================ */
.cart-layout { display: flex; flex-direction: column; gap: 20px; }
/* カートアイテム行 */
.cart-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid #f0f0f0; }
.cart-item:last-child { border-bottom: none; }
.cart-item__thumb { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; background: #f0f0f0; }
.cart-item__thumb--pack { width: 72px; height: 72px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: #f0f0f0; flex-shrink: 0; }
.cart-item__info { flex: 1; min-width: 0; }
.cart-item__title { font-size: 13px; font-weight: var(--font-weight-bold); margin: 0 0 4px; }
.cart-item__meta { font-size: 11px; margin: 0; }
.cart-item__right { text-align: right; flex-shrink: 0; }
.cart-item__price { font-size: 14px; font-weight: var(--font-weight-bold); margin: 0 0 4px; }
.cart-remove-btn { background: none; border: none; font-size: 11px; color: var(--color-text-muted); cursor: pointer; padding: 0; text-decoration: underline; }
.cart-remove-btn:hover { color: #c00; }
/* アップセル */
.cart-upsell { background: var(--color-primary-bg, #f0f7ff); border: 1px solid var(--color-primary); border-radius: var(--radius-md); padding: 14px 16px; }
.cart-upsell__label { font-size: 11px; font-weight: var(--font-weight-bold); color: var(--color-primary); margin: 0 0 8px; }
/* サマリー */
.cart-summary { background: var(--color-bg); border: 1px solid #eee; border-radius: var(--radius-md); padding: 20px; }
.cart-summary__row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; }
.cart-summary__total { display: flex; justify-content: space-between; font-size: 16px; font-weight: var(--font-weight-bold); padding-top: 12px; border-top: 2px solid #eee; margin-bottom: 12px; }
.cart-summary__notice { font-size: 11px; color: #c00; margin-bottom: 16px; }
.cart-checkout-btn { width: 100%; padding: 14px; font-size: 15px; font-weight: var(--font-weight-bold); }
/* ============================================================
購入完了ページ
============================================================ */
.complete-hero { text-align: center; margin-bottom: 28px; }
.complete-check { width: 60px; height: 60px; border-radius: 50%; background: #1a7a4a; color: #fff; font-size: 28px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.complete-title { font-size: 20px; font-weight: var(--font-weight-bold); color: #1a7a4a; margin: 0; }
.complete-info { border: 1px solid #eee; border-radius: var(--radius-md); padding: 16px 20px; margin-bottom: 8px; }
.complete-info__row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 1px solid #f5f5f5; }
.complete-info__row:last-child { border-bottom: none; }
/* ============================================================
TOPページ (home)
============================================================ */
/* ---- ヒーロー検索エリア ---- */
.home-hero {
position: relative;
overflow: hidden;
background: linear-gradient(105deg, #9b59d4 0%, #4a6ef5 35%, #1e6fd5 65%, #0f9f8a 100%);
display: flex;
flex-direction: column;
}
.home-hero__bg {
position: absolute;
inset: 0;
pointer-events: none;
}
.home-hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.home-hero__inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 820px;
margin: 0 auto;
padding: 48px 20px 40px;
text-align: center;
}
.home-hero__title {
font-size: 24px;
font-weight: 700;
color: #fff;
line-height: 1.45;
margin-bottom: 10px;
}
.home-hero__sub {
font-size: 13px;
color: rgba(255,255,255,.85);
margin-bottom: 28px;
}
/* 検索ボックス */
.home-search { margin-bottom: 18px; }
.home-search__box {
display: flex;
align-items: center;
background: #fff;
border-radius: 8px;
overflow: hidden;
padding: 0 0 0 14px;
max-width: 680px;
margin: 0 auto;
box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.home-search__icon {
flex-shrink: 0;
display: flex;
align-items: center;
}
.home-search__icon svg {
width: 20px;
height: 20px;
stroke: #999;
}
input.home-search__input {
flex: 1;
border: none;
box-shadow: none;
padding: 15px 12px;
font-size: 14px;
color: var(--color-text);
background: transparent;
outline: none;
min-width: 0;
font-family: inherit;
}
input.home-search__input:focus {
border: none;
box-shadow: none;
outline: none;
}
.home-search__input::placeholder { color: #bbb; }
.home-search__btn {
flex-shrink: 0;
padding: 15px 28px;
background: var(--color-primary);
color: #fff;
border: none;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: opacity .15s;
font-family: inherit;
}
.home-search__btn:hover { opacity: .85; }
/* タグ */
.home-hero__tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.home-hero__tag {
padding: 5px 14px;
border-radius: var(--radius-pill);
border: 1.5px solid rgba(255,255,255,.55);
color: #fff;
font-size: 12px;
text-decoration: none;
transition: all .15s;
background: rgba(255,255,255,0);
}
.home-hero__tag:hover {
background: rgba(255,255,255,.25);
border-color: #fff;
text-decoration: none;
}
/* ---- 情報バー（ヒーロー背景内・底部の白ストリップ） ---- */
.home-info-bar {
position: relative;
z-index: 1;
background: rgba(255, 255, 255, 0.20);
padding: 10px 20px;
/* 上端のみ角丸でヒーロー背景と自然に馴染む */
margin: 0 0 0 0;
}
.home-info-bar__inner {
max-width: 900px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
.home-info-bar__item {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
color: #FFF;
}
.home-info-bar__item strong {
font-size: 18px;
font-weight: 700;
}
.home-info-bar__icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.home-info-bar__unit { font-size: 12px; }
.home-info-bar__label { font-size: 12px;margin-left: 2px; }
.home-info-bar__sep { width: 1px; height: 20px; background: var(--color-border); }
.home-info-bar__arrow-wrap { display: flex; align-items: center; }
.home-info-bar__arrow-wrap img { width: 20px; height: auto; }
/* ---- カテゴリ画像グリッド ---- */
.home-cat-images { background: #111; }
.home-cat-images__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.home-cat-item {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 16/10;
text-decoration: none;
}
.home-cat-item__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s ease;
display: block;
}
.home-cat-item:hover .home-cat-item__img { transform: scale(1.05); }
.home-cat-item__placeholder {
width: 100%;
height: 100%;
background: #2a3a5e;
}
.home-cat-item__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.08) 50%, transparent 70%);
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 16px 18px;
transition: background .3s;
}
.home-cat-item:hover .home-cat-item__overlay {
background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.2) 50%, transparent 70%);
}
.home-cat-item__name {
color: #fff;
font-size: 15px;
font-weight: 700;
text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.home-cat-item__arrow { display: flex; align-items: center; }
.home-cat-item__arrow img { width: 18px; height: auto; }
/* ---- カテゴリテキストリスト ---- */
.home-cat-list {
background: var(--color-surface);
padding: 16px 20px;
}
.home-cat-list__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
max-width: 1100px;
margin: 0 auto;
}
.home-cat-list__item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: #fff;
border-radius: 8px;
border: 1px solid var(--color-border);
text-decoration: none;
color: var(--color-text);
font-size: 13px;
font-weight: 500;
transition: border-color .15s, box-shadow .15s;
}
.home-cat-list__item:hover {
border-color: var(--color-primary);
box-shadow: 0 2px 8px rgba(21,88,214,.1);
text-decoration: none;
}
.home-cat-list__arrow { color: var(--color-text-muted); font-size: 16px; }
/* ---- 新着素材 ---- */
.home-new {
background: #fff;
padding: 56px 0;
}
.home-new__heading {
font-size: 28px;
font-weight: 700;
text-align: center;
margin-bottom: 8px;
}
.home-new__sub {
font-size: 13px;
color: var(--color-text-muted);
text-align: center;
margin-bottom: 28px;
}
.home-new__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
/* ---- イントロ ---- */
.home-intro {
background: #fff;
border-top: 1px solid var(--color-border);
padding: 64px 0;
}
.home-intro__inner {
display: flex;
align-items: center;
gap: 56px;
}
.home-intro__illust { flex-shrink: 0; width: 260px; }
.home-intro__illust img { width: 100%; height: auto; }
.home-intro__body { flex: 1; }
.home-intro__title {
font-size: 30px;
font-weight: 700;
line-height: 1.45;
color: var(--color-text);
margin-bottom: 18px;
}
.home-intro__text {
font-size: 14px;
color: var(--color-text-sub);
line-height: 1.9;
}
/* ---- ホームボタン ---- */
.home-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: all .15s;
cursor: pointer;
border: none;
font-family: inherit;
}
.home-btn--outline {
border: 2px solid var(--color-primary);
color: var(--color-primary);
background: #fff;
}
.home-btn--outline:hover {
background: var(--color-primary);
color: #fff;
text-decoration: none;
}
.home-btn--blue {
background: var(--color-primary);
color: #fff;
border: 2px solid var(--color-primary);
}
.home-btn--blue:hover { opacity: .85; text-decoration: none; color: #fff; }
.home-btn__arrow { width: 16px; height: auto; flex-shrink: 0; }
.home-btn--outline:hover .home-btn__arrow { filter: brightness(0) invert(1); }
/* ---- フッター ---- */
.site-footer {
background: #1a1a1a;
margin-top: 0;
padding: 0;
position: relative;
z-index: 100;
}
.footer-icon-nav {
display: flex;
align-items: stretch;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-icon-link {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 32px 20px;
color: #bbb;
text-decoration: none;
font-size: 13px;
transition: background .15s, color .15s;
border-right: 1px solid rgba(255,255,255,.1);
}
.footer-icon-link:last-of-type { border-right: none; }
.footer-icon-link:hover {
background: rgba(255,255,255,.06);
color: #fff;
text-decoration: none;
}
.footer-icon-sep { display: none; }
.footer-icon-img {
width: 40px;
height: 40px;
object-fit: contain;
filter: brightness(0) invert(1) opacity(.6);
}
.footer-icon-link:hover .footer-icon-img { filter: brightness(0) invert(1); }
.footer-bottom {
padding: 24px 20px;
text-align: center;
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.footer-copy { font-size: 12px; color: #555; }
.footer-policy { font-size: 11px; color: #555; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.footer-policy a { color: #666; text-decoration: none; }
.footer-policy a:hover { color: #999; }
.footer-policy span { color: #444; }
/* ============================================================
TOPページ レスポンシブ
============================================================ */
@media (max-width: 1200px) {
.home-cat-list__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
.home-new__grid { grid-template-columns: repeat(2, 1fr); }
.home-cat-list__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.home-hero__title { font-size: 19px; }
.home-hero__sub { font-size: 12px; margin-bottom: 20px; }
.home-hero__inner { padding: 36px 16px 28px; }
.home-info-bar { border-radius: 8px 8px 0 0; padding: 10px 12px; }
.home-search__btn { padding: 15px 18px; font-size: 13px; }
.home-cat-images__grid { grid-template-columns: repeat(2, 1fr); }
.home-cat-list { padding: 12px 12px; }
.home-cat-list__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.home-cat-list__item { padding: 12px 14px; font-size: 12px; }
.home-new { padding: 40px 0; }
.home-new__heading { font-size: 22px; }
.home-new__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.home-intro { padding: 40px 0; }
.home-intro__inner { flex-direction: column; gap: 24px; }
.home-intro__illust { width: 180px; margin: 0 auto; }
.home-intro__title { font-size: 21px; text-align: center; }
.home-intro__text { text-align: center; }
.home-btn { justify-content: center; width: 100%; max-width: 280px; }
.footer-icon-nav { flex-wrap: wrap; }
.footer-icon-link { flex: 0 0 50%; box-sizing: border-box; }
.footer-icon-link:nth-child(1),
.footer-icon-link:nth-child(3) { border-right: 1px solid rgba(255,255,255,.1); }
.footer-icon-link:nth-child(2),
.footer-icon-link:nth-child(4) { border-right: none; }
.footer-icon-link:nth-child(1),
.footer-icon-link:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.1); }
}
@media (max-width: 480px) {
.home-hero__title { font-size: 17px; }
.home-cat-images__grid { grid-template-columns: 1fr 1fr; }
.home-cat-list__grid { grid-template-columns: 1fr 1fr; }
.home-new__grid { grid-template-columns: repeat(2, 1fr); }
.home-info-bar { padding: 8px 12px; }
.home-info-bar__inner { gap: 8px; font-size: 12px; }
.home-info-bar__item strong { font-size: 15px; }
}
/* ============================================================
ダークテーマ（トップページ: body.theme-dark で適用）
※ 色はすべてCSS変数。トーン変更はこのブロックの変数だけ
書き換えれば全体に反映される。
============================================================ */
body.theme-dark {
--color-primary: #2E6FF2; /* アクセント（ダーク背景用にやや明るめ） */
--color-cta: #2E6FF2; /* 検索・購入などCTAボタン */
--color-primary-bg: rgba(46,111,242,.14);
--color-text: #F2F5FA;
--color-text-sub: #B9C1CE;
--color-text-muted: #8A93A3;
--color-bg: #14181F; /* カード・ヘッダー面 */
--color-surface: #0B0D12; /* ページ背景 */
--color-border: #262C38;
--hm-glass-bg: rgba(10,13,20,.55); /* 暗めのガラス。明るい背景写真でも文字が沈まない */
--hm-glass-border: rgba(255,255,255,.14);
--color-note-bg: rgba(255,255,255,.05); /* 注記ボックスなどの淡い面 */
background: var(--color-surface);
overflow-x: clip; /* 横スクロール防止の保険 */
}
/* ============================================================
部分ダークトーン（ヘッダー＋左レールのみ）
2026-07-11: 本文はライトのまま、ヘッダーと左サイドバーだけダークを維持。
サイト全体をダークに戻す場合は header.php の $_site_theme = 'theme-dark'。
============================================================ */
.site-header,
.left-rail,
.rail-flyout {
--color-primary: #2E6FF2;
--color-cta: #2E6FF2;
--color-primary-bg: rgba(46,111,242,.14);
--color-text: #F2F5FA;
--color-text-sub: #B9C1CE;
--color-text-muted: #8A93A3;
--color-bg: #14181F;
--color-surface: #0B0D12;
--color-border: #262C38;
color: var(--color-text);
}
/* ハードコード色の上書き（body.theme-dark の調整と同内容をスコープ適用） */
.site-header .site-logo img { filter: brightness(0) invert(1); }
.site-header .cart-btn { background: transparent; border-color: transparent; color: var(--color-text); }
.site-header .cart-btn:hover { background: rgba(255,255,255,.08); color: var(--color-text); }
.site-header .header-search { background: rgba(255,255,255,.06); }
.site-header .header-search__input { color: var(--color-text); }
.left-rail,
.rail-flyout { background: var(--color-bg); }
.left-rail .rail-item:hover,
.left-rail .rail-cat-toggle.active { background: rgba(255,255,255,.08); }
.rail-flyout__list a:hover { background: rgba(255,255,255,.08); }
.left-rail .rail-item.active .rail-item__icon { background-color: #2E6FF2; }
.left-rail .rail-item.active .rail-item__label { color: #2E6FF2; }
/* --- 既存コンポーネントのダーク調整（ハードコード色の上書き） --- */
body.theme-dark .site-logo img { filter: brightness(0) invert(1); }
body.theme-dark .cart-btn {
background: transparent;
border-color: transparent;
color: var(--color-text);
}
body.theme-dark .cart-btn:hover { background: rgba(255,255,255,.08); color: var(--color-text); }
body.theme-dark .material-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.45); }
body.theme-dark .home-btn--outline { background: transparent; }
body.theme-dark .site-footer { border-top: 1px solid var(--color-border); }
/* 素材カードのタイトルリンク */
.card-title-link { color: var(--color-text); text-decoration: none; }
.card-title-link:hover { color: var(--color-primary); text-decoration: none; }
/* ============================================================
TOPページ リニューアル（hm-*）
============================================================ */
/* ---- ヒーロー ---- */
.hm-hero {
position: relative;
overflow: hidden;
background: #05070B;
/* 画像とテキストを同じセルに重ね、高さは大きい方（＝画像の実寸）に合わせる */
display: grid;
}
.hm-hero > .hm-hero__media,
.hm-hero > .hm-hero__inner { grid-area: 1 / 1; }
/* コピーと検索は横幅いっぱいの左寄せ・ヒーローの縦中央に置く */
.hm-hero > .hm-hero__inner {
width: 100%;
max-width: none;
margin: 0;
align-self: center;
padding: 40px clamp(12px, 3vw, 48px);
}
.hm-hero__media { position: relative; pointer-events: none; }
.hm-hero__media img {
width: 100%; height: auto;
object-fit: contain;
object-position: center;
}
/* 背景スライド（hero1〜4をフェードで切り替え） */
.hm-hero__media .hm-hero__slide {
position: absolute;
display: block;
inset: 0 0 auto 0;
opacity: 0;
transition: opacity 1.5s ease;
}
/* 1枚目だけ通常フローに置き、この画像の高さがヒーローの高さになる */
.hm-hero__media .hm-hero__slide:first-child { position: relative; }
.hm-hero__media .hm-hero__slide.is-active { opacity: 1; }
.hm-hero__shade {
position: absolute; inset: 0;
}
.hm-hero__inner {
position: relative; z-index: 1;
}
.hm-hero__title {
font-size: clamp(34px, 4.6vw, 56px);
font-weight: 800;
line-height: 1.32;
letter-spacing: .02em;
color: #fff;
margin-bottom: 20px;
text-shadow: 0 2px 16px rgba(0,0,0,.4);
}
.hm-hero__sub {
font-size: 15px;
color: rgba(255,255,255,.85);
margin-bottom: 30px;
text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
/* ヒーロー検索 */
.hm-search {
display: flex; align-items: center;
max-width: 620px;
background: #fff;
border-radius: 10px;
overflow: hidden;
padding-left: 16px;
box-shadow: 0 8px 32px rgba(0,0,0,.45);
margin-bottom: 16px;
}
.hm-search__icon { display: flex; align-items: center; flex-shrink: 0; }
.hm-search__icon svg { width: 20px; height: 20px; stroke: #8a8f98; }
input.hm-search__input {
flex: 1; min-width: 0;
border: none; outline: none; box-shadow: none;
background: transparent;
padding: 18px 12px;
font-size: 15px;
color: #1a1a1a;
font-family: inherit;
}
input.hm-search__input:focus { border: none; outline: none; box-shadow: none; }
input.hm-search__input::placeholder { color: #9aa0aa; }
.hm-search__btn {
flex-shrink: 0;
padding: 18px 32px;
border: none;
background: var(--color-cta, #2E6FF2);
color: #fff;
font-size: 15px; font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: filter .15s;
}
.hm-search__btn:hover { filter: brightness(1.12); }
/* 人気キーワード */
.hm-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.hm-hero__tag {
padding: 7px 18px;
border-radius: var(--radius-pill);
border: 1px solid rgba(255,255,255,.28);
background: rgba(10,13,20,.45);
color: #fff;
font-size: 13px;
text-decoration: none;
transition: background .15s, border-color .15s;
}
.hm-hero__tag:hover {
background: rgba(255,255,255,.16);
border-color: rgba(255,255,255,.6);
text-decoration: none;
}
/* ---- ベネフィット4カード（ガラス風・ヒーローに重ねる） ---- */
/* カード高さ(約113px)の4割をヒーローに重ね、残り6割を下のセクションへはみ出させる。
上下のマイナスマージン合計＝カード高さにして、後続セクションの開始位置はヒーロー下端のまま保つ */
.hm-benefits {
position: relative; z-index: 2;
margin-top: -45px;
margin-bottom: -68px;
}
.hm-benefits__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
background: var(--hm-glass-bg, rgba(255,255,255,.06));
border: 1px solid var(--hm-glass-border, rgba(255,255,255,.12));
border-radius: 16px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.hm-benefit {
display: flex; align-items: center; gap: 14px;
padding: 24px 22px;
}
.hm-benefit + .hm-benefit { border-left: 1px solid var(--hm-glass-border, rgba(255,255,255,.08)); }
.hm-benefit__icon {
flex-shrink: 0;
width: 48px; height: 48px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.16);
background: var(--color-primary-bg, rgba(46,111,242,.14));
display: flex; align-items: center; justify-content: center;
color: var(--color-primary);
}
.hm-benefit__icon svg { width: 24px; height: 24px; }
.hm-benefit__title { font-size: 15px; font-weight: 700; color: var(--color-text); margin-bottom: 4px; }
.hm-benefit__desc { font-size: 12px; color: var(--color-text-sub); line-height: 1.6; }
/* ---- 汎用セクション ---- */
.hm-section { padding: 46px 0 10px; }
.hm-section__head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; margin-bottom: 18px;
}
.hm-section__title { font-size: 22px; font-weight: 700; color: var(--color-text); }
.hm-section__sub { font-size: 13px; color: var(--color-text-muted); margin: -10px 0 18px; }
.hm-more {
font-size: 12px; font-weight: 600;
color: var(--color-primary);
text-decoration: none; white-space: nowrap;
}
.hm-more:hover { text-decoration: underline; }
/* ---- カテゴリーモザイク（画面幅いっぱい・隙間なしの3列フォトグリッド） ---- */
.hm-cat-section { padding: 0; }
/* 6分割のグリッドに2列ぶんずつ置く＝通常は3列。端数の行だけ幅を広げて埋める */
.hm-cat-mosaic {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0;
width: 100%;
}
.hm-cat-tile {
position: relative;
display: block;
grid-column: span 2;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--color-surface);
text-decoration: none;
}
.hm-cat-tile:hover { text-decoration: none; }
/* 3列で割り切れないとき：余り1枚は全幅、余り2枚は1/2幅ずつにして最終行の穴をなくす。
比率は行の高さが通常タイル（4:3）と揃う値にする（全幅=4:1、1/2幅=2:1） */
.hm-cat-mosaic .hm-cat-tile:last-child:nth-child(3n+1) {
grid-column: span 6;
aspect-ratio: 4 / 1;
}
.hm-cat-mosaic .hm-cat-tile:last-child:nth-child(3n+2),
.hm-cat-mosaic .hm-cat-tile:nth-last-child(2):nth-child(3n+1) {
grid-column: span 3;
aspect-ratio: 2 / 1;
}
.hm-cat-tile__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .45s ease;
}
.hm-cat-tile:hover .hm-cat-tile__img { transform: scale(1.05); }
/* カテゴリー名はマウスオーバー時だけ表示する */
.hm-cat-tile__shade {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(6,8,12,.86) 0%, rgba(6,8,12,.42) 38%, rgba(6,8,12,.14) 72%, rgba(6,8,12,.06) 100%);
opacity: 0;
transition: opacity .25s ease;
}
.hm-cat-tile__body {
position: absolute; left: 0; right: 0; bottom: 0;
display: flex; align-items: baseline; flex-wrap: wrap;
gap: 2px 8px;
padding: 14px 16px;
opacity: 0;
transform: translateY(6px);
transition: opacity .25s ease, transform .25s ease;
}
.hm-cat-tile:hover .hm-cat-tile__shade,
.hm-cat-tile:focus-visible .hm-cat-tile__shade,
.hm-cat-tile:hover .hm-cat-tile__body,
.hm-cat-tile:focus-visible .hm-cat-tile__body { opacity: 1; }
.hm-cat-tile:hover .hm-cat-tile__body,
.hm-cat-tile:focus-visible .hm-cat-tile__body { transform: none; }
/* タッチ端末はホバーできないので常時表示 */
@media (hover: none) {
.hm-cat-tile__shade { opacity: 1; }
.hm-cat-tile__body { opacity: 1; transform: none; }
}
.hm-cat-tile__name {
font-size: 15px; font-weight: 700; color: #fff;
text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.hm-cat-tile__count { font-size: 11px; color: rgba(255,255,255,.72); }
/* ---- 特集カード ---- */
.hm-feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.hm-feature-card {
position: relative;
display: block;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--color-border);
text-decoration: none;
aspect-ratio: 16 / 9;
}
.hm-feature-card__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform .3s ease;
}
.hm-feature-card:hover .hm-feature-card__img { transform: scale(1.04); }
.hm-feature-card__overlay {
position: absolute; inset: 0;
display: flex; flex-direction: column; justify-content: center;
gap: 5px;
padding: 16px 45% 16px 18px; /* テキストは左側の帯の中に収める */
background: linear-gradient(90deg, rgba(8,10,14,.82) 0%, rgba(8,10,14,.6) 30%, rgba(8,10,14,.2) 55%, rgba(8,10,14,0) 72%);
}
.hm-feature-card__title { font-size: 16px; font-weight: 700; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.hm-feature-card__desc { font-size: 11px; color: rgba(255,255,255,.88); line-height: 1.6; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.hm-feature-card__more { font-size: 11px; font-weight: 600; color: var(--color-primary); margin-top: 5px; }
.hm-feature-card:hover .hm-feature-card__more { text-decoration: underline; }
/* ============================================================
TOPページ リニューアル レスポンシブ
============================================================ */
@media (max-width: 1024px) {
.hm-cat-tile__name { font-size: 14px; }
.hm-feature-grid { grid-template-columns: repeat(2, 1fr); }
.hm-benefits__grid { grid-template-columns: repeat(2, 1fr); }
/* 2×2になり高さ約195pxなので、同じく4割重ね・6割はみ出しに合わせ直す */
.hm-benefits { margin-top: -78px; margin-bottom: -117px; }
.hm-benefit:nth-child(3) { border-left: none; }
.hm-benefit:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.08); }
}
@media (max-width: 768px) {
/* SPは画像の下側にコピーを重ねるので、縦中央ではなく従来どおり上から押し下げる */
.hm-hero > .hm-hero__inner { align-self: stretch; padding-top: 200px; padding-bottom: 120px; }
.hm-hero__media img { object-position: center top; }
.hm-hero__shade {
background:
linear-gradient(to top, var(--color-surface, #0B0D12) 0%, rgba(5,7,11,0) 30%),
linear-gradient(to top, rgba(5,7,11,.9) 22%, rgba(5,7,11,.45) 55%, rgba(5,7,11,.1) 100%);
}
.hm-hero__title { font-size: 34px; margin-bottom: 14px; }
.hm-hero__sub { font-size: 13px; margin-bottom: 22px; }
input.hm-search__input { padding: 15px 10px; font-size: 16px; } /* 16px未満だと iOS がフォーカス時に自動ズーム */
.hm-search__btn { padding: 15px 20px; font-size: 14px; }
.hm-hero__tags { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -12px 30px; padding: 0 12px 6px; }
.hm-hero__tags::-webkit-scrollbar { display: none; }
.hm-hero__tag { flex-shrink: 0; }
/* ベネフィット: 2×2の独立ガラスカード。SPは元々カードの大半がヒーロー下に出ているので従来どおり */
.hm-benefits { margin-top: -96px; margin-bottom: 0; }
.hm-benefits__grid {
grid-template-columns: 1fr 1fr;
gap: 10px;
background: transparent;
border: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-radius: 0;
}
.hm-benefit {
flex-direction: column; align-items: flex-start; gap: 10px;
padding: 16px 14px;
background: var(--hm-glass-bg, rgba(255,255,255,.06));
border: 1px solid var(--hm-glass-border, rgba(255,255,255,.12));
border-radius: 12px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.hm-benefit + .hm-benefit { border-left: 1px solid var(--hm-glass-border, rgba(255,255,255,.12)); }
.hm-benefit:nth-child(n+3) { border-top: 1px solid var(--hm-glass-border, rgba(255,255,255,.12)); }
.hm-benefit__title { font-size: 14px; }
.hm-benefit__desc { font-size: 11px; }
.hm-section { padding: 36px 0 6px; }
.hm-section__title { font-size: 19px; }
/* カテゴリー: 2列モザイク */
.hm-cat-tile { grid-column: span 3; }
/* 3列用の端数調整は解除し、2列で余った最後の1枚だけ全幅（高さは通常タイルと同じ）にする */
.hm-cat-mosaic .hm-cat-tile:last-child:nth-child(3n+1),
.hm-cat-mosaic .hm-cat-tile:last-child:nth-child(3n+2),
.hm-cat-mosaic .hm-cat-tile:nth-last-child(2):nth-child(3n+1) {
grid-column: span 3;
aspect-ratio: 4 / 3;
}
.hm-cat-mosaic .hm-cat-tile:last-child:nth-child(odd) {
grid-column: span 6;
aspect-ratio: 8 / 3;
}
.hm-cat-tile__body { padding: 10px 12px; }
.hm-cat-tile__name { font-size: 13px; }
.hm-cat-tile__count { display: none; } /* 狭い画面ではカテゴリー名だけにする */
/* 特集: 1カラムの横長カード */
.hm-feature-grid { grid-template-columns: 1fr; gap: 10px; }
.hm-feature-card { aspect-ratio: 10 / 5; }
}
@media (max-width: 480px) {
.hm-hero > .hm-hero__inner { padding-top: 170px; padding-bottom: 110px; }
.hm-hero__title { font-size: 30px; }
}
/* ============================================================
ダークテーマ：下層ページ調整
（ハードコードされたライト色の上書きのみ。管理画面は
body.theme-dark が付かないため影響しない）
============================================================ */
/* --- テーブル・共通 --- */
body.theme-dark tr:hover td { background: rgba(255,255,255,.04); }
body.theme-dark .tr-deleted td { background: rgba(255,255,255,.06); }
body.theme-dark .swiper-pagination-bullet { background: #fff; }
/* --- 一覧ページ（list.php） --- */
body.theme-dark .left-rail,
body.theme-dark .rail-flyout { background: var(--color-bg); }
body.theme-dark .rail-item:hover,
body.theme-dark .rail-cat-toggle.active { background: rgba(255,255,255,.08); }
body.theme-dark .rail-flyout__list a:hover { background: rgba(255,255,255,.08); }
body.theme-dark .occ-chip { background: var(--color-bg); border-color: var(--color-border); }
body.theme-dark .chip { border-color: var(--color-border); }
body.theme-dark .id-search-input { border-color: var(--color-border); background: var(--color-bg); }
body.theme-dark .page-btn { border-color: var(--color-border); }
body.theme-dark .header-search { background: rgba(255,255,255,.06); }
/* --- 詳細ページ（detail.php） --- */
body.theme-dark .tag-chip { background: var(--color-bg); }
body.theme-dark .tag-chip:hover { background: var(--color-primary-bg); border-color: var(--color-primary); }
body.theme-dark .btn-buy-now,
body.theme-dark .btn-view-cart { background: transparent; }
body.theme-dark .btn-buy-now:hover,
body.theme-dark .btn-view-cart:hover { background: var(--color-primary-bg); }
body.theme-dark .pack-promo { border-color: rgba(46,111,242,.45); }
/* --- 旧ヒーロー・業種・パック --- */
body.theme-dark .hero { background: linear-gradient(135deg, #131a29 0%, var(--color-surface) 100%); }
body.theme-dark .hero-tag { background: transparent; }
body.theme-dark .pack-hero { background: linear-gradient(135deg, #151b28, #10141d); }
body.theme-dark .pack-illust-wrap { background: transparent; }
@media (max-width: 768px) {
body.theme-dark .pack-illust-wrap { background: linear-gradient(135deg, #151b28, #10141d); }
}
/* --- ブログ・お知らせ --- */
body.theme-dark.blog-page {
background: #fff;
}
body.theme-dark.blog-page main {
--color-bg: #fff;
--color-surface: #fff;
--color-text: #111827;
--color-text-sub: #374151;
--color-text-muted: #6b7280;
--color-border: #e5e7eb;
background: #fff;
color: #111827;
}
body.theme-dark.cart-page main {
--color-bg: #fff;
--color-surface: #fff;
--color-text: #1f2937;
--color-text-sub: #4b5563;
--color-text-muted: #6b7280;
--color-border: #e5e7eb;
background: #fff;
color: #1f2937;
}
body.theme-dark.account-page main {
--color-bg: #fff;
--color-surface: #fff;
--color-text: #1f2937;
--color-text-sub: #4b5563;
--color-text-muted: #6b7280;
--color-border: #e5e7eb;
--color-primary-bg: #eef2ff;
background: #fff;
color: #1f2937;
}
body.theme-dark.blog-page .breadcrumb,
body.theme-dark.blog-page .breadcrumb a {
color: #6b7280;
}
body.theme-dark.blog-page .post-list-title {
color: #111827;
}
body.theme-dark .post-card { background: var(--color-bg); }
/* --- フォーム・認証 --- */
body.theme-dark .form-input,
body.theme-dark .form-select,
body.theme-dark .form-textarea { border-color: var(--color-border); }
body.theme-dark .auth-card { border-color: var(--color-border); }
/* ============================================================
認証ページ（ログイン・会員登録系）
全面写真背景＋ダークオーバーレイ＋白カード
============================================================ */
body.auth-page main {
display: flex; /* 内側の .container を margin:auto で縦横センターに */
min-height: calc(100vh - var(--header-h));
background:
linear-gradient(rgba(8, 10, 16, .62), rgba(8, 10, 16, .8)),
url(/assets/images/login/bg1.webp) center / cover no-repeat;
}
body.auth-page main > .container {
margin: auto; /* flexコンテナ内でのセンタリング。コンテンツが高い場合も切れずにスクロール可 */
width: 100%;
/* 各ページのインラインpadding（上56/下80）が非対称でカードが上寄りになるため上下均等に上書き */
padding-top: 40px !important;
padding-bottom: 40px !important;
}
.auth-lead {
text-align: center;
font-size: 13px;
color: var(--color-text-sub);
margin: -16px 0 26px;
}
body.auth-page .auth-card {
/* カード内だけライトテーマの変数に戻す（フォーム・リンク・注記が自動で追従） */
--color-primary: #1558D6;
--color-cta: #1558D6;
--color-primary-bg: #eef2fd;
--color-text: #1a1a1a;
--color-text-sub: #555;
--color-text-muted: #777;
--color-bg: #fff;
--color-surface: #f7f8fa;
--color-border: #ddd;
--color-note-bg: #f7f8fa;
background: #fff;
color: var(--color-text);
border: none;
box-shadow: 0 20px 50px rgba(0, 0, 0, .38);
}
/* --- マイページ・カート・注文 --- */
body.theme-dark .mypage-sidebar { border-color: var(--color-border); }
body.theme-dark .mypage-nav { border-top-color: var(--color-border); }
body.theme-dark .mypage-logout-btn { border-color: var(--color-border); }
body.theme-dark .mypage-logout-btn:hover { border-color: var(--color-text-muted); }
body.theme-dark .order-card { border-color: var(--color-border); }
body.theme-dark .order-card__head { background: var(--color-note-bg); }
body.theme-dark .order-item { border-top-color: var(--color-border); }
body.theme-dark .request-item { border-color: var(--color-border); }
body.theme-dark .cart-summary { border-color: var(--color-border); }
body.theme-dark .cart-summary__total { border-top-color: var(--color-border); }
body.theme-dark .complete-info { border-color: var(--color-border); }
body.theme-dark .cart-item__thumb,
body.theme-dark .cart-item__thumb--pack { background: rgba(255,255,255,.06); }
body.theme-dark .admin-stat-box { background: var(--color-bg); border-color: var(--color-border); }
/* --- 静的ページ（terms / license / law） --- */
body.theme-dark .static-content h2 { border-bottom-color: var(--color-border); }
body.theme-dark .law-table th { background: var(--color-note-bg); }
body.theme-dark .law-table td { border-bottom-color: var(--color-border); }
/* ============================================================
トップページ下部（料金プラン / 特徴 / フッター）
配色は pn-home-page の変数だけで調整できる。
============================================================ */
.pn-home-page {
--pn-home-lower-bg: #101116;
--pn-home-lower-surface: #1b1e26;
--pn-home-lower-surface-hover: #222631;
--pn-home-lower-accent: #3148c6;
--pn-home-lower-accent-strong: #4058e8;
--pn-home-lower-text: #f7f8fb;
--pn-home-lower-muted: #a5acba;
--pn-home-lower-line: rgba(255, 255, 255, .14);
--pn-home-light-bg: #f5f5f2;
--pn-home-light-text: #15171c;
--pn-home-light-muted: #686d78;
}
.pn-home-premium {
background: var(--pn-home-lower-bg);
color: var(--pn-home-lower-text);
padding: clamp(118px, 14vw, 154px) clamp(24px, 7vw, 110px) clamp(92px, 10vw, 118px);
}
.pn-home-premium__inner {
width: min(1600px, 100%);
margin: 0 auto;
}
.pn-home-premium__header {
display: grid;
grid-template-columns: minmax(0, 1.22fr) minmax(300px, 1fr);
gap: clamp(52px, 8vw, 128px);
align-items: start;
margin-bottom: clamp(42px, 5vw, 66px);
}
.pn-home-premium__eyebrow {
color: var(--pn-home-lower-accent-strong);
font-size: clamp(9px, .86vw, 13px);
font-weight: 800;
letter-spacing: .14em;
margin-bottom: clamp(20px, 2.2vw, 30px);
}
.pn-home-premium__title {
color: var(--pn-home-lower-text);
font-family: Georgia, 'Times New Roman', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
font-size: clamp(44px, 4.16vw, 80px);
font-weight: 400;
letter-spacing: -.035em;
line-height: 1.14;
}
.pn-home-premium__summary { padding-top: clamp(4px, 1vw, 18px); }
.pn-home-premium__lead {
max-width: 610px;
color: var(--pn-home-lower-muted);
font-size: clamp(12px, 1.05vw, 16px);
line-height: 2;
margin-bottom: clamp(30px, 4vw, 56px);
}
.pn-home-premium__button {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 32px;
min-width: min(100%, 250px);
padding: 11px 0 13px;
border-bottom: 1px solid rgba(255, 255, 255, .32);
color: var(--pn-home-lower-text);
font-size: clamp(11px, .9vw, 14px);
font-weight: 700;
text-decoration: none;
transition: border-color .2s ease, color .2s ease;
}
.pn-home-premium__button:hover {
border-color: var(--pn-home-lower-accent-strong);
color: var(--pn-home-lower-accent-strong);
text-decoration: none;
}
.pn-home-premium__cards {
display: grid;
grid-template-columns: minmax(0, 1.86fr) minmax(0, 1fr);
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 10px;
height: clamp(530px, 50vw, 790px);
}
.pn-home-premium-card {
position: relative;
display: block;
min-height: 0;
overflow: hidden;
background: var(--pn-home-lower-surface);
color: #fff;
text-decoration: none;
}
.pn-home-premium-card--main { grid-row: 1 / 3; }
.pn-home-premium-card__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .45s ease;
}
.pn-home-premium-card:hover .pn-home-premium-card__image { transform: scale(1.035); }
.pn-home-premium-card__shade {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(6, 8, 12, .84) 0%, rgba(6, 8, 12, .2) 42%, transparent 68%);
}
.pn-home-premium-card__content {
position: absolute;
left: clamp(24px, 2.5vw, 42px);
right: clamp(70px, 6vw, 96px);
bottom: clamp(24px, 2.5vw, 42px);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(8px, 1vw, 14px);
}
.pn-home-premium-card__badge {
position: absolute;
top: clamp(24px, 2.5vw, 42px);
left: clamp(24px, 2.5vw, 42px);
padding: 12px 16px;
border: 1px solid rgba(255, 255, 255, .7);
background: rgba(8, 10, 14, .08);
color: #fff;
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(9px, .85vw, 13px);
font-weight: 600;
letter-spacing: .12em;
}
.pn-home-premium-card__category {
color: #8fa5ff;
font-size: clamp(9px, .8vw, 12px);
font-weight: 700;
letter-spacing: .1em;
}
.pn-home-premium-card__copy {
color: #fff;
font-family: Georgia, 'Times New Roman', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
font-size: clamp(20px, 1.75vw, 31px);
font-weight: 400;
line-height: 1.45;
}
.pn-home-premium-card__arrow {
position: absolute;
right: clamp(22px, 2.3vw, 38px);
bottom: clamp(22px, 2.3vw, 38px);
display: grid;
place-items: center;
width: clamp(38px, 3.5vw, 56px);
height: clamp(38px, 3.5vw, 56px);
border: 1px solid rgba(255, 255, 255, .48);
border-radius: 50%;
color: #fff;
font-size: 16px;
transition: background .2s ease, border-color .2s ease;
}
.pn-home-premium-card:hover .pn-home-premium-card__arrow {
border-color: #fff;
background: #fff;
color: var(--pn-home-lower-bg);
}
.pn-home-new {
background: var(--pn-home-light-bg);
color: var(--pn-home-light-text);
padding: clamp(72px, 8vw, 112px) 24px clamp(78px, 9vw, 128px);
}
.pn-home-new__inner {
width: min(1240px, 100%);
margin: 0 auto;
}
.pn-home-new__head { margin-bottom: 42px; }
.pn-home-new__eyebrow {
display: flex;
align-items: center;
gap: 12px;
color: var(--pn-home-light-muted);
font-size: 10px;
font-weight: 600;
letter-spacing: .08em;
margin-bottom: 18px;
}
.pn-home-new__eyebrow > span:first-child {
color: var(--pn-home-lower-accent-strong);
letter-spacing: .14em;
}
.pn-home-new__eyebrow-separator { color: rgba(21, 23, 28, .22); }
.pn-home-new__title-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
}
.pn-home-new__title {
color: var(--pn-home-light-text);
font-size: clamp(32px, 3.5vw, 48px);
font-weight: 500;
letter-spacing: -.04em;
line-height: 1.25;
}
.pn-home-new__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 30px 18px;
}
.pn-home-new-card {
min-width: 0;
display: flex;
flex-direction: column;
color: var(--pn-home-light-text);
text-decoration: none;
}
.pn-home-new-card:hover {
color: var(--pn-home-light-text);
text-decoration: none;
}
.pn-home-new-card:focus-visible {
outline: 3px solid var(--pn-home-lower-accent-strong);
outline-offset: 5px;
}
.pn-home-new-card__media {
position: relative;
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #e7e7e2;
}
.pn-home-new-card__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .35s ease;
}
.pn-home-new-card:hover .pn-home-new-card__image { transform: scale(1.035); }
.pn-home-new-card__date,
.pn-home-new-card__occupation {
position: absolute;
z-index: 1;
display: inline-flex;
align-items: center;
min-height: 26px;
padding: 5px 8px;
font-size: 9px;
font-weight: 700;
line-height: 1.2;
}
.pn-home-new-card__date {
top: 10px;
right: 10px;
background: rgba(16, 17, 22, .88);
color: #fff;
}
.pn-home-new-card__occupation {
left: 10px;
bottom: 10px;
max-width: calc(100% - 20px);
overflow: hidden;
background: rgba(255, 255, 255, .94);
color: #15171c;
text-overflow: ellipsis;
white-space: nowrap;
}
.pn-home-new-card__body {
flex: 1;
display: flex;
flex-direction: column;
padding: 18px 0 30px;
border-bottom: 1px solid rgba(21, 23, 28, .14);
}
.pn-home-new-card__genre {
overflow: hidden;
color: var(--pn-home-lower-accent);
font-size: 10px;
font-weight: 600;
line-height: 1.5;
margin-bottom: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
.pn-home-new-card__title {
min-height: 3.4em;
color: var(--pn-home-light-text);
font-size: 13px;
font-weight: 500;
line-height: 1.7;
text-decoration: underline;
text-underline-offset: 3px;
}
.pn-home-new__empty {
padding: 48px 0;
border-top: 1px solid rgba(21, 23, 28, .14);
border-bottom: 1px solid rgba(21, 23, 28, .14);
color: var(--pn-home-light-muted);
text-align: center;
}
.pn-home-new__more {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
width: fit-content;
flex-shrink: 0;
margin: 0 0 6px auto;
padding: 8px 4px;
border-bottom: 1px solid rgba(21, 23, 28, .3);
color: var(--pn-home-light-text);
font-size: 12px;
font-weight: 700;
text-decoration: none;
transition: border-color .2s ease, color .2s ease;
}
.pn-home-new__more:hover {
border-color: var(--pn-home-lower-accent);
color: var(--pn-home-lower-accent);
text-decoration: none;
}
.pn-home-pricing {
background: var(--pn-home-lower-bg);
color: var(--pn-home-lower-text);
padding: clamp(72px, 8vw, 128px) 24px clamp(64px, 7vw, 112px);
}
.pn-home-pricing__inner {
width: min(1180px, 100%);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(360px, .9fr) minmax(560px, 1.45fr);
gap: clamp(48px, 5vw, 80px);
align-items: center;
}
.pn-home-eyebrow {
color: var(--pn-home-lower-accent-strong);
font-size: 11px;
font-weight: 700;
letter-spacing: .18em;
margin-bottom: 24px;
}
.pn-home-pricing__title {
color: var(--pn-home-lower-text);
font-size: clamp(34px, 3.5vw, 50px);
font-weight: 500;
letter-spacing: -.045em;
line-height: 1.22;
margin-bottom: 28px;
}
.pn-home-pricing__lead {
color: var(--pn-home-lower-muted);
font-size: 13px;
line-height: 2;
margin-bottom: 28px;
}
.pn-home-text-link {
display: inline-flex;
align-items: center;
gap: 14px;
padding-bottom: 8px;
border-bottom: 1px solid var(--pn-home-lower-line);
color: var(--pn-home-lower-text);
font-size: 12px;
font-weight: 600;
text-decoration: none;
transition: border-color .2s ease, color .2s ease;
}
.pn-home-text-link:hover {
border-color: var(--pn-home-lower-accent-strong);
color: var(--pn-home-lower-accent-strong);
text-decoration: none;
}
.pn-home-plan-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.pn-home-plan-card {
position: relative;
min-height: 354px;
padding: 48px 30px 30px;
overflow: visible;
border: 1px solid var(--pn-home-lower-line);
border-radius: 0;
background: var(--pn-home-lower-surface);
color: var(--pn-home-lower-text);
text-decoration: none;
font: inherit;
text-align: left;
cursor: pointer;
display: flex;
flex-direction: column;
transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pn-home-plan-card:hover {
background: var(--pn-home-lower-surface-hover);
border-color: rgba(255, 255, 255, .36);
transform: translateY(-2px);
text-decoration: none;
}
.pn-home-plan-card:focus-visible {
outline: 3px solid var(--pn-home-lower-text);
outline-offset: 4px;
}
.pn-home-plan-card--recommended,
.pn-home-plan-card--recommended:hover {
background: var(--pn-home-lower-accent);
}
.pn-home-plan-card.is-selected {
border-color: var(--pn-home-lower-text);
box-shadow: 0 0 0 2px var(--pn-home-lower-accent-strong), 0 18px 40px rgba(0, 0, 0, .25);
transform: translateY(-4px);
}
.pn-home-plan-card__badge {
position: absolute;
left: 18px;
top: -14px;
padding: 8px 13px;
background: var(--pn-home-lower-text);
color: var(--pn-home-lower-accent);
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
}
.pn-home-plan-card__selector {
position: absolute;
top: 18px;
right: 18px;
width: 18px;
height: 18px;
border: 1px solid rgba(255, 255, 255, .48);
border-radius: 50%;
}
.pn-home-plan-card.is-selected .pn-home-plan-card__selector::after {
content: '';
position: absolute;
inset: 4px;
border-radius: 50%;
background: var(--pn-home-lower-text);
}
.pn-home-plan-card__code {
color: rgba(255, 255, 255, .55);
font-size: 10px;
letter-spacing: .14em;
margin-bottom: 12px;
}
.pn-home-plan-card__name {
font-size: 18px;
font-weight: 600;
margin-bottom: 42px;
}
.pn-home-plan-card__price {
display: flex;
align-items: flex-end;
gap: 8px;
margin-bottom: 18px;
}
.pn-home-plan-card__price strong {
font-size: clamp(40px, 4vw, 54px);
font-weight: 600;
letter-spacing: -.05em;
line-height: .9;
}
.pn-home-plan-card__price > span {
color: rgba(255, 255, 255, .75);
font-size: 11px;
line-height: 1.25;
}
.pn-home-plan-card__price small { font-size: 9px; }
.pn-home-plan-card__desc {
color: rgba(255, 255, 255, .66);
font-size: 11px;
line-height: 1.7;
margin-bottom: 28px;
}
.pn-home-plan-card__prompt {
width: 100%;
margin-top: auto;
padding-top: 18px;
border-top: 1px solid rgba(255, 255, 255, .18);
font-size: 12px;
font-weight: 700;
}
.pn-home-plan-action {
display: flex;
align-items: center;
justify-content: center;
width: min(360px, 100%);
min-height: 50px;
margin: 26px auto 0;
border: 1px solid var(--pn-home-lower-text);
color: var(--pn-home-lower-text);
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: background .2s ease, color .2s ease;
}
.pn-home-plan-action:hover {
background: var(--pn-home-lower-text);
color: var(--pn-home-lower-bg);
text-decoration: none;
}
.pn-home-highlights {
background: var(--pn-home-light-bg);
color: var(--pn-home-light-text);
}
.pn-home-highlights__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: min(1440px, 100%);
margin: 0 auto;
}
.pn-home-highlight {
position: relative;
min-height: 180px;
padding: 62px clamp(28px, 4vw, 64px) 40px;
border-right: 1px solid rgba(21, 23, 28, .12);
}
.pn-home-highlight:last-child { border-right: 0; }
.pn-home-highlight__number {
position: absolute;
top: 18px;
right: 24px;
color: rgba(21, 23, 28, .14);
font-size: 32px;
font-weight: 500;
letter-spacing: -.04em;
}
.pn-home-highlight__title {
color: var(--pn-home-light-text);
font-size: 16px;
font-weight: 700;
margin-bottom: 12px;
}
.pn-home-highlight__text {
color: var(--pn-home-light-muted);
font-size: 11px;
line-height: 1.8;
}
/* 全ページ共通フッター。配色変数は .pn-home-page（トップのbodyクラス）にしか無いため、
フッター自身にも同じ値を持たせて他ページでも成立させる（値はトップと同一なので見た目は変わらない）。 */
.site-footer.pn-home-footer {
--pn-home-lower-bg: #101116;
--pn-home-lower-text: #f7f8fb;
--pn-home-lower-muted: #a5acba;
--pn-home-lower-line: rgba(255, 255, 255, .14);
background: var(--pn-home-lower-bg);
color: var(--pn-home-lower-text);
border-top: 0;
padding: 0 24px;
}
.pn-home-footer__inner {
display: grid;
grid-template-columns: minmax(240px, 1.2fr) minmax(560px, 2fr);
gap: clamp(48px, 8vw, 128px);
width: min(1240px, 100%);
margin: 0 auto;
padding: 70px 0 54px;
}
.pn-home-footer__logo {
display: inline-block;
width: min(210px, 100%);
}
.pn-home-footer__logo img {
width: 100%;
filter: brightness(0) invert(1);
}
.pn-home-footer__tagline {
color: var(--pn-home-lower-muted);
font-size: 10px;
line-height: 1.7;
margin-top: 18px;
}
.pn-home-footer__nav {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(28px, 5vw, 72px);
}
.pn-home-footer__group {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 13px;
}
.pn-home-footer__heading {
color: rgba(255, 255, 255, .42);
font-size: 10px;
font-weight: 600;
letter-spacing: .08em;
margin-bottom: 8px;
}
.pn-home-footer__group a {
color: var(--pn-home-lower-muted);
font-size: 12px;
line-height: 1.5;
text-decoration: none;
transition: color .2s ease;
}
.pn-home-footer__group a:hover {
color: var(--pn-home-lower-text);
text-decoration: none;
}
.pn-home-footer__bottom {
width: min(1240px, 100%);
margin: 0 auto;
padding: 22px 0 30px;
border-top: 1px solid var(--pn-home-lower-line);
}
.pn-home-footer__copy {
color: rgba(255, 255, 255, .34);
font-size: 10px;
letter-spacing: .03em;
}
@media (max-width: 1024px) {
.pn-home-premium__header {
grid-template-columns: 1fr;
gap: 36px;
}
.pn-home-premium__heading { max-width: 760px; }
.pn-home-premium__summary { max-width: 620px; padding-top: 0; }
.pn-home-new__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pn-home-pricing__inner {
grid-template-columns: 1fr;
gap: 54px;
}
.pn-home-pricing__intro { max-width: 620px; }
.pn-home-footer__inner {
grid-template-columns: 1fr;
gap: 48px;
}
}
@media (max-width: 720px) {
.pn-home-premium { padding: 72px 16px; }
.pn-home-premium__title { font-size: clamp(42px, 12vw, 56px); }
.pn-home-premium__lead { font-size: 12px; }
.pn-home-premium__button { min-width: min(100%, 250px); }
.pn-home-premium__cards {
grid-template-columns: 1fr;
grid-template-rows: auto;
height: auto;
gap: 12px;
}
.pn-home-premium-card,
.pn-home-premium-card--main {
grid-row: auto;
aspect-ratio: 16 / 10;
}
.pn-home-premium-card--main { aspect-ratio: 4 / 5; }
.pn-home-premium-card__content { left: 20px; right: 58px; bottom: 20px; }
.pn-home-premium-card__badge { top: 20px; left: 20px; padding: 9px 12px; }
.pn-home-premium-card__copy { font-size: clamp(20px, 6vw, 27px); }
.pn-home-premium-card__arrow { right: 18px; bottom: 18px; }
.pn-home-new { padding: 64px 16px 76px; }
.pn-home-new__head { margin-bottom: 30px; }
.pn-home-new__title-row { flex-wrap: wrap; gap: 12px; }
.pn-home-new__title { font-size: clamp(30px, 8.5vw, 40px); }
.pn-home-new__more { margin-left: auto; }
.pn-home-new__grid { gap: 24px 10px; }
.pn-home-new-card__body { padding: 14px 0 24px; }
.pn-home-new-card__title { min-height: 4.8em; font-size: 12px; line-height: 1.6; }
.pn-home-pricing { padding: 64px 18px 56px; }
.pn-home-pricing__title { font-size: clamp(32px, 10vw, 44px); }
.pn-home-pricing__lead br { display: none; }
.pn-home-plan-grid { grid-template-columns: 1fr; gap: 28px; }
.pn-home-plan-card { min-height: 310px; padding: 42px 24px 24px; }
.pn-home-plan-card__name { margin-bottom: 34px; }
.pn-home-plan-card.is-selected { transform: none; }
.pn-home-highlights__grid { grid-template-columns: 1fr; }
.pn-home-highlight {
min-height: 154px;
padding: 54px 24px 32px;
border-right: 0;
border-bottom: 1px solid rgba(21, 23, 28, .12);
}
.pn-home-highlight:last-child { border-bottom: 0; }
.pn-home-footer__inner { padding: 56px 0 44px; }
.pn-home-footer__nav { grid-template-columns: 1fr; gap: 38px; }
.pn-home-footer__group { gap: 11px; }
}
@media (max-width: 360px) {
.pn-home-new__grid { grid-template-columns: 1fr; gap: 32px; }
.pn-home-new-card__title { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
.pn-home-plan-card,
.pn-home-plan-action,
.pn-home-text-link,
.pn-home-premium__button,
.pn-home-premium-card__image,
.pn-home-premium-card__arrow,
.pn-home-new-card__image,
.pn-home-new__more,
.pn-home-footer__group a { transition: none; }
}