/* /column コラムページ(林 2026-10-11)
   フォントサイズはサイト共通に合わせる:
   本文 = .zz-kotobun-text p(clamp(.88rem→.94rem)/行間2.4)、h1 = 実績詳細(clamp(1.2rem→1.6rem))、
   一覧タイトル = /works 一覧(COLUMN+日本語の小ラベル)。装飾は足さず、余白で区切る。 */
.zz-col {
  position: relative;
  width: 50vw;
  margin: 0 auto;
  padding: clamp(8rem, 14vw, 12rem) 0 clamp(4rem, 8vw, 7rem);
  color: #262627;
}
.zz-col__title {
  margin: 0;
  font-family: var(--ja_sans);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: .03em;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.zz-col__body {
  margin-top: clamp(3rem, 6vw, 5rem);
  font-size: clamp(.88rem, .9722222222vw, .94rem);
  line-height: 2.4;
  letter-spacing: .03em;
  overflow-wrap: anywhere;
  font-weight: 400;
  -webkit-text-stroke: 0.02vw;
}
.zz-col__body p { margin: 0 0 1.6em; }
.zz-col__body h2 {
  margin: clamp(4.5rem, 8vw, 6.5rem) 0 1.8em;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: .03em;
  text-wrap: pretty;
  scroll-margin-top: 7rem;
}
/* 見出しの上に短い罫だけ置く(全幅の線は引かず、区切りは余白にまかせる) */
.zz-col__body h2::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  margin-bottom: clamp(1.4rem, 2.4vw, 1.8rem);
  background: #262627;
}
.zz-col__body ul {
  margin: 0 0 1.8em;
  padding: 0;
  list-style: none;
}
.zz-col__body ol {
  margin: 0 0 1.8em;
  padding-left: 1.5em;
  list-style: decimal;
}
.zz-col__body ol li { display: list-item; list-style: decimal outside; margin-bottom: .35em; }
.zz-col__body ul li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: .35em;
}
.zz-col__body ul li::before {
  content: "";
  position: absolute;
  left: .2em;
  top: 1.02em;
  width: .5em;
  height: 1px;
  background: #262627;
}
.zz-col__body a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
  color: inherit;
}
.zz-col__body p a,
.zz-col__body li a { display: inline; }
.zz-col__body table {
  width: 100%;
  margin: .4em 0 2.2em;
  border-collapse: collapse;
  border-top: 1px solid rgba(38, 38, 39, .28);
  font-size: .92em;
  line-height: 1.9;
}
.zz-col__body th,
.zz-col__body td {
  padding: .95em .2em;
  border-bottom: 1px solid rgba(38, 38, 39, .14);
  text-align: left;
  vertical-align: top;
}
.zz-col__body thead th {
  border-bottom-color: rgba(38, 38, 39, .28);
  font-size: .9em;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(38, 38, 39, .7);
}
.zz-col__body tbody td:first-child {
  width: 32%;
  padding-right: 1.2em;
  font-weight: 700;
}
.zz-col__body table.is-multi { font-size: .86em; }
.zz-col__body table.is-multi th,
.zz-col__body table.is-multi td { padding-right: 1em; }
.zz-col__body table.is-multi tbody td:first-child { width: 19%; }
.zz-col__back {
  margin-top: clamp(4rem, 8vw, 6rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid rgba(38, 38, 39, .14);
  font-size: .875rem;
}
.zz-col__back a { color: inherit; text-decoration: none; }

/* 右側:目次(PCのみ)。読んでいる見出しが濃くなる */
.zz-col__main { position: relative; }
.zz-col__side {
  position: absolute;
  top: clamp(3rem, 6vw, 5rem);
  bottom: 0;
  left: calc(100% + 3.5vw);
  width: 16vw;
}
.zz-col__side-in {
  position: sticky;
  top: 7rem;
}
.zz-col__toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.zz-col__toc li + li { margin-top: 1em; }
.zz-col__toc a {
  display: block;
  font-size: .76rem;
  line-height: 1.8;
  letter-spacing: .03em;
  color: #b5b5b5;
  text-decoration: none;
  transition: color .25s ease;
}
.zz-col__toc a:hover,
.zz-col__toc a.is-active { color: #262627; opacity: 1; }

/* 一覧 */
.zz-col-index__title {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  margin: 0;
  font-family: var(--en_sans);
  font-size: clamp(2rem, 3.333vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
  color: #262627;
}
.zz-col-index__title-ja {
  font-family: var(--ja_sans);
  font-size: clamp(.78rem, .9vw, .875rem);
  letter-spacing: .08em;
  color: #777;
}
.zz-col-list {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(38, 38, 39, .14);
}
.zz-col-list li { border-bottom: 1px solid rgba(38, 38, 39, .14); }
.zz-col-list a {
  display: grid;
  gap: .6rem;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  color: inherit;
  text-decoration: none;
}
.zz-col-list time {
  font-family: var(--en_sans);
  font-size: .82rem;
  color: #777;
}
.zz-col-list__title {
  font-size: clamp(.98rem, 1.4vw, 1.2rem);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: .02em;
  text-wrap: pretty;
}
.zz-col-list a:hover .zz-col-list__title {
  text-decoration: underline;
  text-underline-offset: .35em;
}
.zz-col-list__desc {
  font-size: clamp(.8rem, .9vw, .875rem);
  line-height: 2;
  letter-spacing: .03em;
  color: rgba(38, 38, 39, .66);
}
.zz-col-list__empty {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  font-size: clamp(.88rem, .9722222222vw, .94rem);
  line-height: 2.4;
}

@media (max-width: 1024px) {
  .zz-col { width: 70vw; }
  .zz-col__side { display: none; }
}
@media (max-width: 768px) {
  .zz-col { width: 86vw; padding-top: 8rem; }
  /* 表は1行ごとのカードに組み替える(横スクロールさせない) */
  .zz-col__body thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .zz-col__body table,
  .zz-col__body tbody,
  .zz-col__body tr,
  .zz-col__body td { display: block; }
  .zz-col__body td { border-bottom: 0; padding: 0 .1em .9em; }
  .zz-col__body tbody td:first-child {
    width: auto;
    padding: .9em .1em .2em;
  }
  .zz-col__body tbody tr { border-bottom: 1px solid rgba(38, 38, 39, .14); }
  .zz-col__body table.is-multi { font-size: .92em; }
  .zz-col__body table.is-multi tbody td:first-child { width: auto; }
  .zz-col__body table.is-multi td:not(:first-child) { padding-top: .5em; }
  .zz-col__body table.is-multi td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-size: .82em;
    letter-spacing: .06em;
    color: #8a8a8a;
  }
}

/* ---- 記事メイン画像(林 2026-10-12 吉田さん指定: /service/graphic/pamphlet と同じ置き方) ---- */
.zz-col-hero {
  position: relative;
  width: 100vw;
  height: 90vh;
  min-height: 90svh;
  overflow: hidden;
  background: #f0f0f0;
}
.zz-col-hero-image {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: zz_col_hero_fade 2.15s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}
@keyframes zz_col_hero_fade {
  to { opacity: 1; }
}
.zz-col-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (prefers-reduced-motion: reduce) {
  .zz-col-hero-image {
    opacity: 1;
    animation: none;
  }
}
.zz-col.has-hero {
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
}

/* ---- PCは本文の text-stroke なし(吉田さん指定 2026-10-12・貼付CSSそのまま) ---- */
@media (min-width: 769px) {
  .zz-col__body {
    margin-top: clamp(3rem, 6vw, 5rem);
    font-size: clamp(.88rem, .9722222222vw, .94rem);
    line-height: 2.4;
    letter-spacing: .03em;
    overflow-wrap: anywhere;
    font-weight: 400;
    -webkit-text-stroke: 0.0vw;
  }
}