/* ============================================
   cre8-public.css — クリパチ (cre-8.jp) 公開ページの共通デザイン
   2026-10-24 作り替え (競合: Behance・Dribbble・vision track などを参考)
   ヘッダー・ボタン・ページ見出し・作品の並び・トップの各部品。
   フッターは site-footer.css。色は :root の変数だけで決める。
   body に class="cp-body" を付けたページだけ下地 (書体・余白) を当てる。
   色 (2026-10-24 みんと「昔のクリ8を思い出す色使いに」): 2005〜2021年の旧クリ8 (off design 運営) の
   ロゴのえんじ #b12d3d・題字の赤 #d0111b・上の帯の赤 #e70012・「Off」のオリーブ #4d7a2b・
   文字の #333・フッターの紙の地 #f4f4f2 を、今の並び方のまま当てはめた。
   ============================================ */

:root{
  --cp-ink:#333333;
  --cp-text:#3d3d3d;
  --cp-muted:#6f6f6f;
  --cp-line:#e3e2e2;
  --cp-soft:#f4f4f2;
  --cp-brand:#b12d3d;
  --cp-brand-dark:#93202f;
  --cp-brand-tint:#f9e8ea;
  --cp-red:#e70012;
  --cp-title-red:#d0111b;
  --cp-olive:#4d7a2b;
  --cp-olive-dark:#3d6421;
  --cp-radius:16px;
  --cp-wrap:1200px;
  /* Tabler の本文の書体も Noto Sans JP に */
  --tblr-font-sans-serif:"Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;
}
/* フォームなど Tabler の部品の主な色も えんじ に (公開ページだけ・会員/管理は site-color.css の紫のまま) */
.cp-body{
  --tblr-primary:#b12d3d;
  --tblr-primary-rgb:177,45,61;
  --tblr-primary-darken:#93202f;
  --tblr-primary-lt:#f9e8ea;
  --tblr-link-color:#93202f;
  --tblr-link-color-rgb:147,32,47;
  --tblr-link-hover-color:#b12d3d;
}
.cp-body .btn-primary{
  --tblr-btn-bg:#b12d3d;--tblr-btn-border-color:#b12d3d;
  --tblr-btn-hover-bg:#93202f;--tblr-btn-hover-border-color:#93202f;
  --tblr-btn-active-bg:#93202f;--tblr-btn-active-border-color:#93202f;
}
/* Tabler は幅992px以上で縦スクロールバーぶん全体を右へずらすので打ち消す */
:root{margin-left:0;}
/* site-theme.css の html,body{overflow-x:hidden} だと body の中だけがスクロールする作りになるので、
   はみ出しを切るだけの clip にする (このデザインのページだけ) */
html:has(> body.cp-body),body.cp-body{overflow-x:clip;}

body.cp-body{
  margin:0;
  font-family:"Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--cp-text);
  background:#fff;
  line-height:1.8;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
.cp-body *,.cp-body *::before,.cp-body *::after{box-sizing:border-box;}
.cp-body img{max-width:100%;height:auto;vertical-align:bottom;border:0;}
.cp-body button,.cp-body input,.cp-body select,.cp-body textarea{font-family:inherit;}
.cp-wrap{width:100%;max-width:var(--cp-wrap);margin:0 auto;padding:0 24px;}
.cp-link{color:var(--cp-brand-dark);font-weight:700;text-decoration:none;}
.cp-link:hover{color:var(--cp-brand);text-decoration:underline;}
/* 「もっと見る」の頭の赤い三角 (旧クリ8の「▶ 他のクリエイターを見る」) */
.cp-sechead .cp-link::before{content:"";display:inline-block;margin-right:8px;border:5px solid transparent;border-left:7px solid var(--cp-red);border-right:0;vertical-align:1px;}

/* ---------- クリエイター向けの細い帯 (依頼する人向けのページの一番上・旧クリ8の赤い線はここに) ---------- */
.cp-topbar{border-top:4px solid var(--cp-red);background:var(--cp-soft);font-size:13px;line-height:1.4;}
.cp-topbar__inner{display:flex;align-items:center;justify-content:flex-end;gap:16px;height:38px;}
.cp-topbar__text{overflow:hidden;color:var(--cp-muted);text-decoration:none;white-space:nowrap;text-overflow:ellipsis;}
.cp-topbar__text:hover{color:var(--cp-olive);text-decoration:underline;}
.cp-topbar__sp{display:none;}
.cp-topbar__links{display:flex;align-items:center;gap:4px;flex:none;}
.cp-topbar__links a{font-weight:700;text-decoration:none;white-space:nowrap;border-radius:999px;}
.cp-topbar__reg{padding:4px 14px;background:var(--cp-olive);color:#fff;}
.cp-topbar__reg:hover{background:var(--cp-olive-dark);color:#fff;text-decoration:none;}
.cp-topbar__login{padding:4px 10px;color:var(--cp-ink);}
.cp-topbar__login:hover{color:var(--cp-olive);text-decoration:none;}
.cp-topbar + .cp-header{border-top:0;}

/* ---------- ヘッダー ---------- */
.cp-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-top:4px solid var(--cp-red);border-bottom:1px solid var(--cp-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.cp-header__inner{display:flex;align-items:center;gap:28px;height:68px;}
.cp-logo{display:inline-flex;align-items:center;gap:10px;color:var(--cp-ink);text-decoration:none;flex:none;}
.cp-logo:hover{color:var(--cp-ink);text-decoration:none;}
.cp-logo__mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--cp-brand);color:#fff;font-size:20px;font-weight:900;line-height:1;}
.cp-logo__name{font-size:21px;font-weight:900;letter-spacing:.04em;line-height:1;}
.cp-nav{display:flex;align-items:center;gap:26px;margin-left:auto;}
.cp-nav a{color:var(--cp-text);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;}
.cp-nav a:hover{color:var(--cp-brand);text-decoration:none;}
.cp-header__actions{display:flex;align-items:center;gap:10px;flex:none;}

/* ---------- ボタン (平ら・1色・押せる物だけ色が少し変わる) ---------- */
.cp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 22px;border-radius:999px;border:1.5px solid transparent;
  font-size:14px;font-weight:700;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .15s,color .15s,border-color .15s;
}
.cp-btn:hover{text-decoration:none;}
.cp-btn--primary{background:var(--cp-brand);color:#fff;}
.cp-btn--primary:hover{background:var(--cp-brand-dark);color:#fff;}
.cp-btn--ghost{background:#fff;color:var(--cp-ink);border-color:#d6d4d4;}
.cp-btn--ghost:hover{border-color:var(--cp-brand);color:var(--cp-brand-dark);}
.cp-btn--ink{background:var(--cp-ink);color:#fff;}
.cp-btn--ink:hover{background:#4a4a4a;color:#fff;}
.cp-btn--white{background:#fff;color:var(--cp-ink);}
.cp-btn--white:hover{background:#f4f4f2;color:var(--cp-ink);}
.cp-btn--line-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);}
.cp-btn--line-white:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff;}
.cp-btn--lg{min-height:56px;padding:0 32px;font-size:16px;}

/* ---------- トップ: 大きな題字と作品の札 ---------- */
.cp-hero{position:relative;overflow:hidden;padding:104px 0 112px;background:#fff;}
.cp-hero__body{position:relative;z-index:2;max-width:820px;margin:0 auto;padding:0 24px;text-align:center;}
.cp-eyebrow{display:inline-block;margin:0 0 22px;padding:6px 16px;border-radius:999px;background:var(--cp-brand-tint);color:var(--cp-brand-dark);font-size:13px;font-weight:700;letter-spacing:.06em;}
.cp-hero__title{margin:0;color:var(--cp-ink);font-size:clamp(38px,6vw,76px);font-weight:900;line-height:1.2;letter-spacing:.01em;word-break:auto-phrase;}
.cp-hero__title em{font-style:normal;color:var(--cp-title-red);}
.cp-hero__lead{max-width:640px;margin:28px auto 0;color:var(--cp-muted);font-size:16px;word-break:auto-phrase;}
.cp-hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px;}
.cp-hero__creator{margin:22px 0 0;color:var(--cp-muted);font-size:14px;}
.cp-hero__creator a{margin-left:6px;color:var(--cp-olive);font-weight:700;text-decoration:none;}
.cp-hero__creator a:hover{color:var(--cp-olive-dark);text-decoration:underline;}
.cp-hero__creator span{margin:0 0 0 6px;color:#c4c4c4;}
.cp-hero__tiles{position:absolute;inset:0;z-index:1;}
.cp-tile{position:absolute;display:block;margin:0;border-radius:18px;overflow:hidden;background:var(--cp-soft);outline:1px solid rgba(23,20,31,.06);outline-offset:-1px;}
.cp-tile img{display:block;width:100%;height:100%;object-fit:cover;}
.cp-tile:nth-child(1){left:-36px;top:52px;width:180px;height:224px;}
.cp-tile:nth-child(2){left:104px;top:304px;width:196px;height:150px;}
.cp-tile:nth-child(3){left:-24px;top:478px;width:168px;height:180px;}
.cp-tile:nth-child(4){right:-30px;top:88px;width:204px;height:160px;}
.cp-tile:nth-child(5){right:108px;top:286px;width:172px;height:214px;}
.cp-tile:nth-child(6){right:-14px;top:528px;width:192px;height:140px;}

/* ---------- 数字の帯 ---------- */
.cp-stats{padding:0 0 88px;}
.cp-stats__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:920px;margin:0 auto;padding:0;list-style:none;}
/* 旧クリ8の右の箱 (白・薄い灰の縁・上に赤い線) */
.cp-stats__item{padding:24px 12px;border:1px solid var(--cp-line);border-top:3px solid var(--cp-red);background:#fff;text-align:center;}
.cp-stats__num{display:block;color:var(--cp-ink);font-size:40px;font-weight:900;line-height:1.1;}
.cp-stats__num small{margin-left:4px;font-size:16px;font-weight:700;}
.cp-stats__label{display:block;margin-top:8px;color:var(--cp-muted);font-size:13px;font-weight:500;}

/* ---------- セクション ---------- */
.cp-section{padding:88px 0;}
.cp-section--soft{background:var(--cp-soft);}
.cp-section--tight{padding-top:0;}
.cp-sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px;}
.cp-sechead__title{margin:0;color:var(--cp-ink);font-size:clamp(26px,3.2vw,38px);font-weight:900;line-height:1.3;word-break:auto-phrase;}
.cp-sechead__lead{margin:10px 0 0;color:var(--cp-muted);word-break:auto-phrase;}
.cp-center{margin-top:40px;text-align:center;}

/* ---------- カテゴリの札 ---------- */
.cp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 36px;padding:0;list-style:none;}
.cp-chip{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;border-radius:999px;background:var(--cp-soft);color:var(--cp-ink);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;}
.cp-chip small{color:var(--cp-muted);font-size:12px;}
.cp-chip:hover{background:var(--cp-brand-tint);color:var(--cp-brand-dark);text-decoration:none;}
.cp-chip.is-current{background:var(--cp-brand);color:#fff;}
.cp-chip.is-current small{color:rgba(255,255,255,.7);}

/* ---------- 作品の並び (高さそろえない石垣) ---------- */
.cp-works{columns:5 200px;column-gap:20px;}
.cp-work{display:block;margin:0 0 28px;break-inside:avoid;}
.cp-work__img{display:block;border-radius:12px;overflow:hidden;background:var(--cp-soft);outline:1px solid rgba(23,20,31,.06);outline-offset:-1px;}
.cp-work__img img{display:block;width:100%;height:auto;transition:opacity .15s;}
.cp-work__img:hover img{opacity:.9;}
.cp-work__title{display:block;margin-top:10px;overflow:hidden;color:var(--cp-ink);font-size:14px;font-weight:700;line-height:1.5;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;}
.cp-work__meta{display:block;overflow:hidden;color:var(--cp-muted);font-size:12px;line-height:1.6;text-overflow:ellipsis;white-space:nowrap;}
.cp-work__meta a{color:var(--cp-muted);text-decoration:none;}
.cp-work__title:hover,.cp-work__meta a:hover{color:var(--cp-brand-dark);text-decoration:none;}
.cp-empty{padding:64px 16px;border-radius:var(--cp-radius);background:var(--cp-soft);text-align:center;}
.cp-empty p{margin:0 0 20px;color:var(--cp-muted);}

/* ---------- 依頼の流れ ---------- */
.cp-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none;}
.cp-flow--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.cp-flow__item{padding:28px 26px;border:1px solid var(--cp-line);border-top:3px solid var(--cp-red);background:#fff;}
.cp-flow__num{display:block;color:var(--cp-brand);font-size:44px;font-weight:900;line-height:1;}
.cp-flow__title{margin:18px 0 8px;color:var(--cp-ink);font-size:18px;font-weight:700;}
.cp-flow__text{margin:0;color:var(--cp-muted);font-size:14px;}

/* ---------- 2つの入口 ---------- */
.cp-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.cp-panel{padding:52px 48px;border-radius:24px;color:#fff;}
.cp-panel--brand{background:var(--cp-brand);}
.cp-panel--ink{background:var(--cp-ink);}
.cp-panel--olive{background:var(--cp-olive);}
.cp-panel__label{margin:0 0 12px;color:rgba(255,255,255,.75);font-size:13px;font-weight:700;letter-spacing:.06em;}
.cp-panel__title{margin:0;color:#fff;font-size:clamp(24px,2.6vw,32px);font-weight:900;line-height:1.4;word-break:auto-phrase;}
.cp-panel__text{margin:14px 0 30px;color:rgba(255,255,255,.82);}

/* ---------- トップ: クリエイター募集の段 (オリーブの帯) ---------- */
.cp-creators{background:var(--cp-olive);color:#fff;}
.cp-creators__main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;}
.cp-creators__label{margin:0 0 12px;color:rgba(255,255,255,.75);font-size:13px;font-weight:700;letter-spacing:.06em;}
.cp-creators__title{margin:0;color:#fff;font-size:clamp(26px,3.2vw,38px);font-weight:900;line-height:1.35;word-break:auto-phrase;}
.cp-creators__lead{margin:18px 0 30px;color:rgba(255,255,255,.85);word-break:auto-phrase;}
.cp-creators__btns{display:flex;flex-wrap:wrap;gap:12px;}
.cp-creators__btns .cp-btn--white{color:var(--cp-olive-dark);}
.cp-creators__note{margin:16px 0 0;color:rgba(255,255,255,.75);font-size:13px;}
.cp-creators__note a{display:inline-block;margin-left:8px;color:#fff;font-weight:700;}
.cp-creators__steps{display:grid;gap:12px;margin:0;padding:0;list-style:none;}
.cp-creators__steps li{display:flex;gap:22px;padding:24px 28px;background:var(--cp-olive-dark);}
.cp-creators__num{flex:none;color:#fff;font-size:28px;font-weight:900;line-height:1.15;opacity:.55;}
.cp-creators__steps h3{margin:0 0 6px;color:#fff;font-size:17px;font-weight:700;line-height:1.5;}
.cp-creators__steps p{margin:0;color:rgba(255,255,255,.82);font-size:14px;line-height:1.85;}

/* ---------- トップ: 最後のお誘い (依頼する人向け) ---------- */
.cp-closing{text-align:center;}
.cp-closing__title{margin:0 0 14px;color:var(--cp-ink);font-size:clamp(28px,3.6vw,42px);font-weight:900;line-height:1.4;}
.cp-closing__text{max-width:760px;margin:0 auto 32px;color:var(--cp-muted);word-break:auto-phrase;}
.cp-sp{display:none;}

/* ---------- 下の誘い (暗い帯) ---------- */
.cp-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:64px;padding:40px 44px;border-radius:24px;background:var(--cp-ink);color:#fff;}
.cp-cta__title{margin:0;color:#fff;font-size:clamp(20px,2.4vw,28px);font-weight:900;line-height:1.45;}
.cp-cta__text{margin:8px 0 0;color:rgba(255,255,255,.75);font-size:14px;}

/* ---------- 下層ページ ---------- */
.cp-main{padding:0 0 88px;}
.cp-pagehead{padding:52px 0 32px;}
.cp-crumb{margin:0 0 12px;color:var(--cp-muted);font-size:13px;}
.cp-crumb a{color:var(--cp-muted);text-decoration:none;}
.cp-crumb a:hover{color:var(--cp-brand-dark);}
.cp-pagehead__title{margin:0;color:var(--cp-ink);font-size:clamp(26px,3.4vw,40px);font-weight:900;line-height:1.35;word-break:auto-phrase;overflow-wrap:anywhere;}
.cp-pagehead__meta{margin:10px 0 0;color:var(--cp-muted);}
.cp-prose{max-width:780px;color:var(--cp-text);}
.cp-artwork{display:flex;align-items:center;justify-content:center;padding:40px;border-radius:24px;background:var(--cp-soft);}
.cp-artwork img{max-height:72vh;width:auto;border-radius:6px;}
.cp-subhead{margin:72px 0 24px;color:var(--cp-ink);font-size:24px;font-weight:900;line-height:1.4;}

/* 見出しを自分で持つページ (見積もりフォームなど) も同じ見た目に */
.cp-main > .cp-wrap > :first-child:not(.cp-pagehead){margin-top:52px;}
.cp-main h1.h2{margin-bottom:12px !important;padding-bottom:0 !important;border-bottom:0 !important;color:var(--cp-ink);font-size:clamp(26px,3.4vw,40px);font-weight:900;line-height:1.35;word-break:auto-phrase;}
.cp-body .site-footer{margin-top:0;}

/* Tabler の部品も平らに (このデザインのページだけ) */
.cp-body .card{border-color:var(--cp-line);border-radius:var(--cp-radius);box-shadow:none;}
.cp-body .btn{border-radius:999px;font-weight:700;box-shadow:none;}
.cp-body .form-control,.cp-body .form-select{border-radius:10px;}
.cp-body .pagination{gap:6px;}
.cp-body .page-link{border-radius:999px !important;border:0;min-width:40px;text-align:center;}

/* ---------- 画面の幅ごと ---------- */
@media (max-width:1180px){
  .cp-hero{padding-bottom:56px;}
  .cp-hero__tiles{position:static;display:flex;gap:12px;margin-top:48px;padding:0 24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:24px;scrollbar-width:none;}
  .cp-hero__tiles::-webkit-scrollbar{display:none;}
  .cp-tile,.cp-tile:nth-child(n){position:relative;inset:auto;flex:none;width:150px;height:180px;scroll-snap-align:start;}
  .cp-tile:nth-child(even){height:140px;align-self:center;}
}
@media (max-width:960px){
  .cp-nav{display:none;}
  .cp-header__inner .cp-header__actions{margin-left:auto;}
  .cp-flow{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cp-flow--3{grid-template-columns:1fr;}
  .cp-split{grid-template-columns:1fr;}
  .cp-creators__main{grid-template-columns:1fr;gap:40px;}
  .cp-cta{display:block;}
  .cp-cta .cp-btn{margin-top:24px;}
}
@media (max-width:640px){
  .cp-wrap,.cp-hero__body{padding:0 16px;}
  .cp-header__inner{height:60px;gap:12px;}
  .cp-logo__mark{width:30px;height:30px;font-size:18px;border-radius:9px;}
  .cp-logo__name{font-size:19px;}
  .cp-header__actions .cp-btn{min-height:38px;padding:0 14px;font-size:13px;}
  .cp-header__actions .cp-btn--ghost{display:none;}
  .cp-topbar{font-size:12px;}
  .cp-topbar__inner{justify-content:space-between;gap:8px;height:40px;}
  .cp-topbar__pc{display:none;}
  .cp-topbar__sp{display:inline;}
  .cp-topbar__reg{padding:4px 12px;}
  .cp-topbar__login{padding:4px 6px;}
  .cp-hero__creator a{display:inline-block;}
  .cp-creators__steps li{gap:16px;padding:20px;}
  .cp-creators__num{font-size:24px;}
  .cp-creators__btns .cp-btn{flex:1 1 auto;}
  .cp-creators__note a{display:block;margin:4px 0 0;}
  .cp-sp{display:inline;}
  .cp-hero{padding:56px 0 40px;}
  .cp-hero__lead{font-size:15px;text-align:left;}
  .cp-hero__actions .cp-btn{width:100%;}
  .cp-hero__tiles{padding:0 16px;scroll-padding-inline:16px;}
  .cp-stats{padding-bottom:56px;}
  .cp-stats__list{gap:8px;}
  .cp-stats__item{padding:18px 6px;}
  .cp-stats__num{font-size:26px;}
  .cp-stats__num small{font-size:13px;}
  .cp-stats__label{font-size:12px;}
  .cp-section{padding:56px 0;}
  .cp-sechead{display:block;}
  .cp-sechead .cp-link{display:inline-block;margin-top:12px;}
  .cp-chips{flex-wrap:nowrap;overflow-x:auto;margin-right:-16px;padding-right:16px;scrollbar-width:none;}
  .cp-chips::-webkit-scrollbar{display:none;}
  .cp-works{columns:2;column-gap:12px;}
  .cp-work{margin-bottom:20px;}
  .cp-flow{grid-template-columns:1fr;}
  .cp-panel{padding:36px 24px;}
  .cp-cta{padding:32px 24px;margin-top:48px;}
  .cp-cta .cp-btn{width:100%;}
  .cp-pagehead{padding:36px 0 24px;}
  .cp-artwork{padding:16px;}
  .cp-subhead{margin-top:48px;}
}
@media (max-width:360px){
  .cp-topbar__text{display:none;}
  .cp-topbar__inner{justify-content:flex-end;}
}