/* ============================================================
   CVO Inc. — Sub page (WORKS detail) styles
   Loaded in addition to style.css
   ============================================================ */ :root {
 --bg: #dfdfdf;
 --ink: #111111;
 --ink-2: #525252;
 --gray: #737373;
 --gray-2: #9CA3AF;
 --line: #E5E5E5;
 --line-gray: #E5E5E5;
 --line-soft: #D9D9D9;
 --white: #FFFFFF;
 --dark: #111111;
 --req: #EF4444;
 --ink-gray: #D9D9D9;
 --surface-soft: #F5F5F5;
 --play-bg: rgba(255, 255, 255, .92);
 --shadow-soft: rgba(0, 0, 0, .15);
 /* font sizes */
 --fs-10: 10px;
 --fs-11: 11px;
 --fs-12: 12px;
 --fs-13: 13px;
 --fs-14: 14px;
 --fs-15: 15px;
 --fs-16: 16px;
 --fs-17: 17px;
 --fs-18: 18px;
 --fs-19: 19px;
 --fs-20: 20px;
 --fs-22: 22px;
 --fs-24: 24px;
 --fs-26: 26px;
 --fs-28: 28px;
 --fs-29: 29px;
 --fs-30: 30px;
 --fs-34: 34px;
 --fs-36: 36px;
 --fs-40: 40px;
 --fs-48: 48px;
 --fs-52: 52px;
 --fs-54: 54px;
 --fs-60: 60px;
}
/* ---------- Detail hero ---------- */
.dhero {
 padding: 48px 0 80px;
 position: relative;
}
.dhero-eyebrow {
 font-family: "Manrope", sans-serif;
 font-weight: 700;
 font-size: var(--fs-12);
 letter-spacing: .14em;
 color: var(--gray);
 margin: 0 0 16px;
}
.dhero-title {
 font-weight: 700;
 font-size: var(--fs-40);
 line-height: 1.3;
 margin: 0 0 80px;
 letter-spacing: .01em;
}
.dhero-video {
 position: relative;
 width: 100%;
 max-width: 760px;
 aspect-ratio: 16/9;
 border-radius: 2px;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
 margin: 0 auto;
}
.dhero-video video {
 width: 100%;
 height: 100%;
}
.dhero-video img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 position: absolute;
 inset: 0;
}
.play-btn {
 position: relative;
 width: 64px;
 height: 64px;
 border-radius: 50%;
 background: var(--play-bg);
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 6px 20px var(--shadow-soft);
 transition: transform .2s;
}
.dhero-video:hover .play-btn {
 transform: scale(1.06);
}
.play-btn::after {
 content: "";
 display: block;
 width: 0;
 height: 0;
 margin-left: 4px;
 border-left: 18px solid var(--ink);
 border-top: 11px solid transparent;
 border-bottom: 11px solid transparent;
}
/* ---------- WORKS detail PROCESS heading (no tabs) ---------- */
.process--plain .pr-heading {
 margin-top: 5px;
}
/* ---------- STOCK vs FLOW comparison ---------- */
.stock-flow {}
.pr-heading-en {
 font-weight: bold;
 color: var(--gray-2);
 font-size: var(--fs-13);
 font-family: "Manrope", sans-serif;
}
.stock-flow__lead {
 max-width: 850px;
 margin: 0;
 color: var(--ink-2);
 font-size: var(--fs-18);
 line-height: 2;
 strong {
  font-size: var(--fs-20);
 }
}
.stock-flow__table {
 width: 100%;
 border-collapse: collapse;
 table-layout: fixed;
}
.stock-flow__table th, .stock-flow__table td {
 padding: 26px 28px;
 text-align: left;
 vertical-align: middle;
}
.stock-flow__table thead th {
 font-family: "Manrope", "Noto Sans JP", sans-serif;
 font-size: var(--fs-14);
 font-weight: 700;
 letter-spacing: .08em;
}
.stock-flow__table thead tr {
 border-bottom: 1px solid var(--ink);
}
.stock-flow__table thead th:first-child {
 width: 28%;
 padding-top: 0;
}
.stock-flow__table thead th:nth-child(2) {
 color: var(--ink);
 padding-top: 0;
}
.stock-flow__table thead th:nth-child(3) {
 color: var(--gray);
 padding-top: 0;
}
.stock-flow__table thead span {
 font-family: "Noto Sans JP", sans-serif;
 letter-spacing: 0;
}
.stock-flow__table tbody th, .stock-flow__table tbody td {
 border-bottom: 1px solid var(--line-gray);
 font-size: var(--fs-16);
}
.stock-flow__table tbody tr:last-child th, .stock-flow__table tbody tr:last-child td {
 border-bottom: 0;
}
.stock-flow__table tbody th {
 color: var(--gray);
 font-weight: 500;
}
.stock-flow__table tbody td {
 color: var(--ink);
 font-weight: 700;
}
.stock-flow__table tbody td:last-child {
 font-weight: 500;
}
.stock-flow__table strong {
 font-weight: 700;
 text-decoration: underline;
 text-decoration-thickness: 1px;
 text-underline-offset: 5px;
}
.stock-flow__note {
 margin: 30px 0 0;
 font-size: var(--fs-14);
 line-height: 1.8;
 text-decoration: underline;
}
.stock-flow-flow_flex {
 display: flex;
 gap: 50px;
 margin-top: 70px;
 flex-direction: row-reverse;
 .stock-flow__table-wrap {
  width: 50%;
 }
 .stock-flow-chart {
  width: 50%;
 }
}
.stock-flow-chart__title {
 margin: 0 0 28px;
 font-size: var(--fs-18);
 font-weight: 700;
 line-height: 1.6;
 text-align: center;
}
.stock-flow-chart__title span {
 font-size: var(--fs-14);
 font-weight: 500;
}
.stock-flow-chart__scroll {
 width: 100%;
}
.stock-flow-chart__svg {
 display: block;
 width: 100%;
 max-width: 700px;
 height: auto;
 margin-inline: auto;
 color: var(--ink);
}
.stock-flow-chart__grid line {
 stroke: var(--line-soft);
 stroke-width: 1;
 vector-effect: non-scaling-stroke;
}
.stock-flow-chart__axis line {
 stroke: var(--gray);
 stroke-width: 1.25;
 vector-effect: non-scaling-stroke;
}
.stock-flow-chart__axis text, .stock-flow-chart__legend text {
 fill: var(--gray);
 font-family: "Noto Sans JP", "Manrope", sans-serif;
 font-size: var(--fs-13);
}
.stock-flow-chart__axis text {
 text-anchor: middle;
}
.stock-flow-chart__axis text[x="60"] {
 text-anchor: end;
}
.stock-flow-chart__axis .stock-flow-chart__x-label {
 fill: var(--ink-2);
 font-size: var(--fs-14);
 font-weight: 500;
}
.stock-flow-chart__legend-line {
 stroke-width: 3;
 vector-effect: non-scaling-stroke;
}
.stock-flow-chart__legend-line--youtube {
 stroke: var(--ink);
}
.stock-flow-chart__legend-line--tiktok {
 stroke: var(--gray-2);
}
.stock-flow-chart__line {
 fill: none;
 stroke-linecap: round;
 stroke-linejoin: round;
 stroke-width: 3;
}
.stock-flow-chart__line--youtube {
 stroke: var(--ink);
 stroke-dasharray: 553;
 stroke-dashoffset: 553;
}
.stock-flow-chart__line--tiktok {
 stroke: var(--gray-2);
 stroke-dasharray: 589;
 stroke-dashoffset: 589;
}
.stock-flow-chart__points circle {
 opacity: 0;
 transform: scale(0);
 transform-box: fill-box;
 transform-origin: center;
 vector-effect: non-scaling-stroke;
}
.stock-flow-chart__points--youtube circle {
 fill: var(--ink);
}
.stock-flow-chart__points--tiktok circle {
 fill: var(--white);
 stroke: var(--gray-2);
 stroke-width: 3;
}
.stock-flow-chart.is-animated .stock-flow-chart__line {
 animation: stock-flow-line-draw 1.5s linear forwards;
}
.stock-flow-chart.is-animated .stock-flow-chart__points circle {
 animation: stock-flow-point-in .35s cubic-bezier(.2, .8, .2, 1.4) forwards;
}
.stock-flow-chart.is-animated .stock-flow-chart__points circle:nth-child(1) {
 animation-delay: 0s;
}
.stock-flow-chart.is-animated .stock-flow-chart__points circle:nth-child(2) {
 animation-delay: .3s;
}
.stock-flow-chart.is-animated .stock-flow-chart__points circle:nth-child(3) {
 animation-delay: .6s;
}
.stock-flow-chart.is-animated .stock-flow-chart__points circle:nth-child(4) {
 animation-delay: .9s;
}
.stock-flow-chart.is-animated .stock-flow-chart__points circle:nth-child(5) {
 animation-delay: 1.2s;
}
.stock-flow-chart.is-animated .stock-flow-chart__points circle:nth-child(6) {
 animation-delay: 1.5s;
}
@keyframes stock-flow-line-draw {
 to {
  stroke-dashoffset: 0;
 }
}
@keyframes stock-flow-point-in {
 to {
  opacity: 1;
  transform: scale(1);
 }
}
@media (prefers-reduced-motion:reduce) {
 .stock-flow-chart__line, .stock-flow-chart__points circle {
  animation: none !important;
 }
 .stock-flow-chart__line {
  stroke-dashoffset: 0;
 }
 .stock-flow-chart__points circle {
  opacity: 1;
  transform: scale(1);
 }
}
/* ---------- WHY IT CONVERTS comparison ---------- */
.long-video-reason {
 padding: 90px 0 120px;
}
.long-video-reason__head {
 margin-bottom: 68px;
}
.long-video-reason__title {
 margin: 8px 0 0;
 font-size: var(--fs-40);
 font-weight: 700;
 line-height: 1.4;
 letter-spacing: .01em;
}
.long-video-reason__lead {
 max-width: 900px;
 margin: 30px 0 0;
 color: var(--ink-2);
 font-size: var(--fs-18);
 line-height: 2;
 margin-bottom: 50px;
 strong {
  font-size: var(--fs-20);
 }
}
.long-video-reason__table {
 width: 100%;
 border-collapse: collapse;
 table-layout: fixed;
}
.long-video-reason__table thead tr, .long-video-reason__table tbody tr:nth-child(even) {
 background-color: var(--surface-soft);
}
.long-video-reason__table th, .long-video-reason__table td {
 padding: 24px 28px;
 text-align: left;
 vertical-align: middle;
}
.long-video-reason__table thead th {
 font-family: "Manrope", "Noto Sans JP", sans-serif;
 font-size: var(--fs-14);
 font-weight: 900;
 letter-spacing: .06em;
 border-bottom: 1px solid var(--ink);
}
.long-video-reason__table thead th:nth-child(2) {
 color: var(--ink);
}
.long-video-reason__table thead th:first-child {
 width: 28%;
}
.long-video-reason__table thead th:last-child {
 color: var(--gray);
}
.long-video-reason__table thead span {
 font-family: "Noto Sans JP", sans-serif;
 letter-spacing: 0;
}
.long-video-reason__table tbody th, .long-video-reason__table tbody td {
 border-bottom: 1px solid var(--line-gray);
 font-size: var(--fs-16);
 line-height: 1.7;
}
.long-video-reason__table tbody tr:last-child th, .long-video-reason__table tbody tr:last-child td {
 border-bottom: 0;
}
.long-video-reason__table tbody th {
 font-weight: 500;
}
.long-video-reason__table tbody td:nth-child(2) {
 color: var(--ink);
 font-weight: 500;
}
.long-video-reason__table tbody td:last-child {
 color: var(--gray);
 font-weight: 700;
}
.long-video-reason__table td::before {
 display: none;
}
.long-video-reason__table strong {
 font-weight: 700;
 text-decoration: underline;
 text-decoration-thickness: 1px;
 text-underline-offset: 5px;
}
/* ---------- CASE blocks (influencer) ---------- */
.cases {
 padding-top: 8px;
}
.case-block {
 padding: 96px 0;
 border-top: 1px solid var(--line-gray);
}
.case-block:first-child {
 border-top: none;
 padding-top: 0;
}
.case-right {
 display: grid;
 gap: 48px;
 width: calc(100% - 350px - 48px);
}
.case-grid {
 /*display: grid;
 grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 1fr);*/
 gap: 48px;
 display: flex;
}
.case-head {
 /*grid-column: 1;
 grid-row: 1;*/
 width: 350px;
}
.case-issue {
 grid-column: 1;
 grid-row: 1;
}
.case-solution {
 grid-column: 2;
 grid-row: 1;
}
.case-head .case-num-title {
 font-weight: 700;
 font-size: var(--fs-30);
 line-height: 1.45;
 margin: 0 0 28px;
}
.sp1 {
 padding-left: 1em;
}
.case-meta {
 margin-bottom: 22px;
}
.case-meta-label {
 font-family: "Manrope", sans-serif;
 font-weight: 700;
 font-size: var(--fs-10);
 letter-spacing: .16em;
 color: var(--gray-2);
 margin: 0 0 6px;
}
.case-meta-val {
 font-weight: 500;
 font-size: var(--fs-14);
 margin: 0;
}
.case-chips {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}
.case-chip {
 display: inline-block;
 border-radius: 5px;
 font-size: var(--fs-12);
 padding: 5px 10px;
 background-color: var(--surface-soft);
 color: var(--ink);
}
.case-col-label {
 font-family: "Manrope", sans-serif;
 font-weight: 700;
 font-size: var(--fs-12);
 letter-spacing: .1em;
 color: var(--ink);
 margin: 0 0 18px;
 padding-bottom: 5px;
 border-bottom: 1px solid var(--ink);
}
.case-col-text {
 font-size: var(--fs-14);
 line-height: 1.95;
 color: var(--ink-2);
 margin: 0;
}
.key-results {
 grid-column: 1 / 3;
 grid-row: 2;
 background: var(--surface-soft);
 border-radius: 4px;
 padding: 36px 40px;
}
.key-results-label {
 font-family: "Manrope", sans-serif;
 font-weight: 700;
 font-size: var(--fs-12);
 letter-spacing: .14em;
 color: var(--gray);
 margin: 0 0 15px;
}
.kr-stats {
 display: flex;
 flex-wrap: wrap;
}
.kr-stats .kr-stat {
 width: 33.3333%;
 box-sizing: border-box;
}
.kr-stat-label {
 font-size: var(--fs-12);
 color: var(--gray);
 margin: 0 0 8px;
}
.kr-pre {
 font-size: var(--fs-12);
 margin-bottom: 2px;
}
.kr-stat-num {
 font-family: "Manrope", sans-serif;
 font-weight: 700;
 font-size: var(--fs-36);
 line-height: 1;
 margin: 0;
}
.kr-stat-num span {
 font-family: "Noto Sans JP", sans-serif;
 font-size: var(--fs-18);
 font-weight: 500;
 margin-left: 3px;
}
/* ---------- Q&A accordion ---------- */
.qa {
 padding: 96px 0;
}
.qa-list {
 border-top: 1px solid var(--line-gray);
}
.qa-item {
 border-bottom: 1px solid var(--line-gray);
}
.qa-q {
 width: 100%;
 background: none;
 border: none;
 text-align: left;
 display: flex;
 align-items: center;
 gap: 18px;
 padding: 26px 20px 26px 40px;
 font-family: inherit;
 font-size: var(--fs-16);
 font-weight: 500;
 color: var(--ink);
}
.qa-q .qa-mark {
 font-family: "Manrope", sans-serif;
 font-weight: 700;
 font-size: var(--fs-18);
 flex: 0 0 auto;
}
.qa-q .qa-text {
 flex: 1;
 padding-right: 20px;
}
.qa-q .qa-chevron {
 flex: 0 0 auto;
 width: 10px;
 height: 10px;
 border-right: 1.6px solid var(--ink);
 border-bottom: 1.6px solid var(--ink);
 transform: rotate(45deg);
 transition: transform .3s;
 position: relative;
 right: 20px;
}
.qa-item.is-open .qa-q {}
.qa-item.is-open .qa-q .qa-chevron {
 transform: rotate(-135deg);
}
.qa-a {
 display: grid;
 grid-template-rows: 0fr;
 transition: grid-template-rows .3s ease;
 background: var(--surface-soft);
}
.qa-item.is-open .qa-a {
 grid-template-rows: 1fr;
}
.qa-a-inner {
 overflow: hidden;
}
.qa-a-inner p {
 margin: 0;
 padding: 14px 20px 14px 40px;
 font-size: var(--fs-15);
 line-height: 1.9;
 color: var(--ink-2);
 display: flex;
 align-items: center;
 gap: 16px;
}
.qa-a-inner .qa-mark {
 font-family: "Manrope", sans-serif;
 font-weight: 700;
 font-size: var(--fs-18);
 color: var(--ink);
}
/* ============================================================
   Responsive — Sub pages
   ============================================================ */
@media (max-width:1100px) {
 .case-grid {
  grid-template-columns: 1fr 1fr;
  gap: 32px 40px;
 }
 .case-head {
  grid-column: 1 / -1;
  grid-row: 1;
 }
 .case-issue {
  grid-column: 1;
  grid-row: 2;
 }
 .case-solution {
  grid-column: 2;
  grid-row: 2;
 }
 .key-results {
  grid-column: 1 / 3;
  grid-row: 3;
 }
 .stock-flow-flow_flex {
  flex-wrap: wrap;
  .stock-flow__table-wrap, .stock-flow-chart {
   width: 100%;
  }
 }
}
@media (max-width:900px) {
 .case-grid {
  flex-wrap: wrap;
 }
 .case-right {
  width: auto;
 }
}
@media (max-width:768px) {
 .long-video-reason {
  padding: 64px 0 80px;
 }
 .long-video-reason__head {
  margin-bottom: 40px;
 }
 .long-video-reason__title {
  font-size: var(--fs-30);
  line-height: 1.5;
 }
 .long-video-reason__lead {
  margin-top: 20px;
  font-size: var(--fs-14);
  line-height: 1.9;
 }
 .long-video-reason__table, .long-video-reason__table tbody, .long-video-reason__table tr {
  display: block;
  width: 100%;
 }
 .long-video-reason__table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
 }
 .long-video-reason__table tbody tr {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-gray);
 }
 .long-video-reason__table tbody tr:last-child {
  border-bottom: 0;
 }
 .long-video-reason__table tbody th {
  grid-column: 1 / -1;
  padding: 0 0 14px;
  border: 0;
  color: var(--ink);
  font-size: var(--fs-13);
  font-weight: 700;
 }
 .long-video-reason__table tbody td {
  padding: 0;
  border: 0;
  font-size: var(--fs-12);
  line-height: 1.7;
 }
 .long-video-reason__table td::before {
  display: block;
  margin-bottom: 6px;
  color: var(--gray-2);
  font-family: "Manrope", "Noto Sans JP", sans-serif;
  font-size: var(--fs-10);
  font-weight: 700;
  letter-spacing: .08em;
  content: attr(data-label);
 }
 .long-video-reason__table tbody td:last-child::before {
  color: var(--ink);
 }
 .stock-flow {
  margin-top: -8px;
 }
 .stock-flow__lead {
  font-size: var(--fs-14);
  line-height: 1.9;
 }
 .stock-flow__table-wrap {
  margin-top: 40px;
 }
 .stock-flow__table th, .stock-flow__table td {
  padding: 18px 8px;
 }
 .stock-flow__table thead th {
  font-size: var(--fs-11);
  letter-spacing: .04em;
 }
 .stock-flow__table thead th:first-child {
  width: 27%;
 }
 .stock-flow__table thead span {
  display: block;
  margin-top: 2px;
 }
 .stock-flow__table tbody th, .stock-flow__table tbody td {
  font-size: var(--fs-12);
  line-height: 1.6;
 }
 .stock-flow__note {
  margin-top: 22px;
  font-size: var(--fs-12);
 }
 .stock-flow-chart {
  margin-top: 52px;
  padding-top: 32px;
 }
 .stock-flow-chart__title {
  margin-bottom: 20px;
  font-size: var(--fs-16);
 }
 .stock-flow-chart__title span {
  display: block;
  font-size: var(--fs-12);
 }
 .stock-flow-chart__axis text, .stock-flow-chart__legend text {
  font-size: var(--fs-20);
 }
 .stock-flow-chart__axis .stock-flow-chart__x-label {
  font-size: var(--fs-20);
 }
 p.case-col-label {
  border: none;
  padding-bottom: 0;
 }
 .kr-stats .kr-stat {
  width: auto;
  display: grid;
  grid-template-rows: 1fr;
 }
 .dhero {
  padding: 24px 0 48px;
 }
 .dhero-title {
  font-size: var(--fs-36);
  margin-bottom: 60px;
  overflow-wrap: anywhere;
 }
 .dhero-video {
  aspect-ratio: 16/10;
 }
 .play-btn {
  width: 52px;
  height: 52px;
 }
 .play-btn::after {
  border-left-width: 15px;
  border-top-width: 9px;
  border-bottom-width: 9px;
 }
 .cases {
  padding-top: 0;
 }
 .case-block {
  padding: 80px 0;
 }
 .case-grid {
  grid-template-columns: 1fr;
  gap: 28px;
  display: grid;
 }
 .case-head, .case-issue, .case-solution, .key-results {
  grid-column: 1;
  grid-row: auto;
  width: auto;
 }
 .case-head .case-num-title {
  font-size: var(--fs-30);
 }
 .key-results {
  padding: 28px 20px;
 }
 .kr-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 20px;
 }
 .qa {
  padding: 64px 0;
 }
 .qa-q {
  padding: 20px 4px 20px 15px;
  font-size: var(--fs-15);
  gap: 12px;
 }
 .qa-a-inner p {
  padding-left: 15px;
  padding-right: 2em;
  font-size: var(--fs-14);
 }
}