/* Cotocoto Works top-page rich design starter
   Add class="cw-home" to the top page body. Keep all rules scoped. */
.cw-home {
  --cw-ink:#11110f;
  --cw-ivory:#f5f0e6;
  --cw-paper:#faf8f4;
  --cw-bronze:#a77847;
  --cw-bronze-light:#c7aa84;
  --cw-muted:#716c64;
  --cw-line:#d8d0c3;
  --cw-ease-out:cubic-bezier(.23,1,.32,1);
  color:var(--cw-ink);
  background:var(--cw-ivory);
  font-family:"Noto Sans JP",sans-serif;
  font-size:16px;
  line-height:1.8;
}
.cw-home *, .cw-home *::before, .cw-home *::after { box-sizing:border-box; }
.cw-home-container { width:min(100% - 48px,1320px); margin-inline:auto; }
.cw-home-header { min-height:76px; transition:background-color 220ms var(--cw-ease-out),color 220ms var(--cw-ease-out); }
.cw-home-header.is-scrolled { color:var(--cw-ivory); background:rgb(17 17 15 / .92); backdrop-filter:blur(14px); }
.cw-home-hero { position:relative; min-height:min(100svh,920px); background:var(--cw-ink); color:var(--cw-ivory); overflow:hidden; }
.cw-home-hero__media, .cw-home-hero__shade { position:absolute; inset:0; }
.cw-home-hero__media img { width:100%; height:100%; object-fit:cover; object-position:center center; }
.cw-home-hero__shade { background:linear-gradient(90deg,rgba(8,8,7,.92) 0%,rgba(8,8,7,.70) 38%,rgba(8,8,7,.25) 70%,rgba(8,8,7,.10) 100%),linear-gradient(0deg,rgba(8,8,7,.68) 0%,transparent 44%); }
.cw-home-hero__content { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; min-height:min(100svh,920px); padding-block:132px 170px; }
.cw-home-eyebrow { color:var(--cw-bronze-light); font-size:.75rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.cw-home-display { max-width:690px; margin:44px 0 0; font-family:"Noto Serif JP",serif; font-size:clamp(2.4rem,5.3vw,4.65rem); font-weight:400; line-height:1.28; letter-spacing:-.035em; }
.cw-home-display em { color:var(--cw-bronze-light); font-style:normal; }
.cw-home-lead { max-width:620px; margin-top:34px; padding-left:20px; border-left:1px solid var(--cw-bronze); color:rgb(245 240 230 / .82); font-size:clamp(1rem,1.3vw,1.12rem); line-height:1.9; }
.cw-home-actions { display:flex; align-items:center; gap:30px; margin-top:40px; }
.cw-home-btn { min-height:56px; display:inline-flex; align-items:center; justify-content:space-between; gap:28px; padding:14px 24px; border:1px solid var(--cw-bronze); border-radius:2px; text-decoration:none; font-weight:700; transition:transform 160ms var(--cw-ease-out),background-color 180ms var(--cw-ease-out); }
.cw-home-btn:active { transform:scale(.97); }
.cw-home-btn--primary { color:var(--cw-ink); background:var(--cw-bronze); }
.cw-home-btn--text { min-height:48px; color:var(--cw-ivory); border-color:transparent; border-bottom-color:rgb(245 240 230 / .4); }
/* ファネルの中間（資料ダウンロード）。無料相談＝塗り、資料＝枠線、活用事例＝下線 の3段階にする */
.cw-home-btn--outline { color:var(--cw-ivory); background:rgb(245 240 230 / .06); border-color:rgb(245 240 230 / .55); }
.cw-home-usecase-nav { position:absolute; z-index:1; right:0; bottom:0; width:min(68%,900px); display:grid; grid-template-columns:repeat(4,1fr); border:1px solid rgb(245 240 230 / .2); border-bottom:0; background:rgb(17 17 15 / .42); backdrop-filter:blur(8px); }
.cw-home-usecase-nav a { min-height:104px; padding:22px 20px; color:var(--cw-ivory); text-decoration:none; border-right:1px solid rgb(245 240 230 / .18); }
.cw-home-usecase-nav a:last-child { border-right:0; }
.cw-home-usecase-nav small { display:block; color:var(--cw-bronze-light); font-size:.68rem; letter-spacing:.08em; }
.cw-home-usecase-nav strong { display:block; margin-top:8px; font-family:"Noto Serif JP",serif; font-size:1rem; font-weight:400; }
.cw-home-section { padding-block:clamp(72px,9vw,132px); }
.cw-home-section--paper { background:var(--cw-paper); }
.cw-home-section--ink { color:var(--cw-ivory); background:var(--cw-ink); }
.cw-home-workflow { display:grid; grid-template-columns:minmax(360px,.9fr) minmax(0,1.1fr); min-height:620px; }
.cw-home-workflow__media img { width:100%; height:100%; object-fit:cover; }
.cw-home-workflow__copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(40px,7vw,96px); }
.cw-home-rule-list { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--cw-line); border-block:1px solid var(--cw-line); }
.cw-home-rule-list > * { background:var(--cw-ivory); padding:clamp(28px,4vw,52px); }
.cw-home :focus-visible { outline:3px solid var(--cw-bronze-light); outline-offset:4px; }
.cw-home [id] { scroll-margin-top:92px; }
@media (hover:hover) {
  .cw-home-btn:hover { transform:translateY(-2px); }
  .cw-home-btn--primary:hover { background:var(--cw-bronze-light); }
  .cw-home-btn--outline:hover { background:rgb(245 240 230 / .14); border-color:var(--cw-ivory); }
  .cw-home-usecase-nav a:hover { background:rgb(167 120 71 / .22); }
}
@media (max-width:767px) {
  .cw-home-container { width:min(100% - 40px,100%); }
  .cw-home-header { min-height:68px; }
  .cw-home-hero { min-height:820px; }
  .cw-home-hero__media img { object-position:center 48%; }
  .cw-home-hero__shade { background:linear-gradient(180deg,rgba(8,8,7,.60) 0%,rgba(8,8,7,.48) 28%,rgba(8,8,7,.88) 72%,rgba(8,8,7,.97) 100%); }
  .cw-home-hero__content { min-height:720px; justify-content:flex-end; padding-block:110px 170px; }
  .cw-home-display { margin-top:24px; font-size:clamp(2.15rem,10vw,3rem); }
  .cw-home-lead { margin-top:24px; font-size:1rem; }
  .cw-home-actions { align-items:stretch; flex-direction:column; gap:10px; margin-top:28px; }
  .cw-home-btn { width:100%; }
  .cw-home-usecase-nav { left:20px; right:20px; width:auto; grid-template-columns:repeat(2,1fr); }
  .cw-home-usecase-nav a { min-height:74px; padding:13px 14px; }
  .cw-home-workflow { grid-template-columns:1fr; }
  .cw-home-workflow__media { min-height:460px; }
  .cw-home-workflow__copy { padding:50px 20px; }
  .cw-home-rule-list { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .cw-home *, .cw-home *::before, .cw-home *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ---- 活用領域：代表カード（物件評価） ---- */
.cw-home .cw-home-workflow { border:1px solid var(--cw-line); background:var(--cw-paper); }
.cw-home .cw-home-workflow__media { position:relative; }
.cw-home .cw-home-workflow__cap { position:absolute; left:0; right:0; bottom:0; margin:0; padding:12px 16px; background:rgb(17 17 15 / .72); color:rgb(245 240 230 / .9); font-size:.7rem; line-height:1.7; }
.cw-home .cw-home-wf__meta { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; }
.cw-home .cw-home-wf__label { font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--cw-muted); }
.cw-home .cw-home-wf__title { font-family:"Noto Serif JP",serif; font-weight:400; font-size:clamp(1.5rem,2.6vw,2.15rem); line-height:1.45; letter-spacing:-.02em; margin:0 0 10px; color:var(--cw-ink); }
.cw-home .cw-home-wf__sub { font-size:.86rem; letter-spacing:.06em; color:var(--cw-bronze); font-weight:700; margin-bottom:18px; }
.cw-home .cw-home-wf__text { color:var(--cw-muted); font-size:.95rem; line-height:2; margin-bottom:24px; }
.cw-home .cw-home-wf__split { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--cw-line); border:1px solid var(--cw-line); }
.cw-home .cw-home-wf__split > * { background:var(--cw-paper); padding:16px 18px; }
.cw-home .cw-home-wf__role { font-family:"Cormorant Garamond",serif; font-style:italic; font-size:1.5rem; line-height:1; margin-bottom:6px; }
.cw-home .cw-home-wf__role--ai { color:var(--cw-bronze); }
.cw-home .cw-home-wf__role--human { color:var(--cw-ink); }
.cw-home .cw-home-wf__roletext { font-size:.84rem; color:var(--cw-muted); line-height:1.7; }
@media (max-width:767px) {
  .cw-home .cw-home-workflow { display:block; }
  .cw-home .cw-home-workflow__media { min-height:0; width:100%; overflow:hidden; }
  .cw-home .cw-home-workflow__media picture { display:block; width:100%; }
  .cw-home .cw-home-workflow__media img { width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
  .cw-home .cw-home-wf__split { grid-template-columns:repeat(2,1fr); }
}
