@charset "UTF-8";
/* ==========================================================================
   本番版デザイン プレビュー用スタイル
   参考4サイトの構造を、コンプラットのブランドトークンに翻案したもの。
   暫定版（style.css）には影響しない。確定後に style.css へ統合する。
   ========================================================================== */

/* --- 共通：巨大な透かし英字 ---------------------------------------------- */
.wm {
  position: absolute;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* --- 共通：ハイライトの円（差し色ではなくブランドのハイライト色） -------- */
.dot-accent {
  position: absolute;
  border-radius: 50%;
  background: var(--c-highlight);
  opacity: .85;
  pointer-events: none;
}

/* ==========================================================================
   1. FV（構造は固定・背後だけ入れ替える）
   ・テキストは左に固定。位置も色も一切変えない。
   ・メタルスライドは全面／写真スライドは右半分。
   ・写真に暗くする処理（mix-blend-mode:multiply / saturate）はかけない。
     文字を写真の上に載せないため、暗くする必要がない。
   ========================================================================== */
.fv {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-white);
  min-height: min(76vh, 620px);
  display: flex;
  align-items: center;
}

/* --- 背景レイヤー -------------------------------------------------------- */
.fv__stage { position: absolute; inset: 0; z-index: 0; }
.fv__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.3s var(--ease);
}
.fv__slide.is-active { opacity: 1; }
.fv__slide--half { left: 50%; }

.fv__photo { position: absolute; inset: 0; background-size: cover; }
.fv__photo--kikuchi { background-position: 52% 30%; }
.fv__photo--stage   { background-position: 57% 42%; filter: brightness(1.06) contrast(1.03); }

/* --- メタル（ロゴと同じ光沢グラデーション・画像なし） -------------------- */
.fv__metal { position: absolute; inset: 0; overflow: hidden; background: var(--c-mist); }
.fv__metal > span { position: absolute; display: block; }
.fv__metal-sheet {
  inset: -20%;
  background: var(--grad-metal);
  background-size: 220% 220%;
  filter: blur(2px);
  animation: fv-metal-flow 16s ease-in-out infinite alternate;
}
.fv__metal-gloss {
  inset: 0;
  background: repeating-linear-gradient(112deg,
    rgba(255,255,255,0) 0 34px, rgba(255,255,255,.34) 34px 40px, rgba(255,255,255,0) 40px 74px);
  mix-blend-mode: soft-light; opacity: .9;
}
.fv__metal-spec {
  top: -30%; left: -40%; width: 80%; height: 180%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.85) 48%, transparent 100%);
  filter: blur(26px);
  animation: fv-metal-sweep 9s ease-in-out infinite;
}
.fv__metal-warm {
  right: -14%; bottom: -22%; width: 74%; height: 74%;
  background: radial-gradient(circle, rgba(222,76,35,.40) 0%, rgba(240,120,80,.14) 44%, transparent 72%);
  filter: blur(48px);
}
/* 文字が乗る左側の明るさを固定する「白」のヴェール。
   暗くするのではなく白くするので、明るさは損なわれない。
   メタルは流れ続けるため、これがないと暗い帯が見出しの下へ入る瞬間がある。 */
.fv__metal-veil {
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 26%,
    rgba(255,255,255,.45) 42%, rgba(255,255,255,0) 56%);
}
@keyframes fv-metal-flow  { 0% { background-position: 0% 40%; } 100% { background-position: 100% 60%; } }
@keyframes fv-metal-sweep { 0% { transform: translateX(0); } 55%, 100% { transform: translateX(190%); } }

/* 発光の呼吸（事業の柱セクションでも使用しているため残す） */
@keyframes fv-breath {
  0%   { opacity: .8; transform: translate(-50%,-50%) scale(.96); }
  100% { opacity: 1;  transform: translate(-50%,-50%) scale(1.08); }
}

/* --- 前景：テキスト（左に固定） ------------------------------------------ */
.fv__body {
  position: relative; z-index: 3;
  width: min(100% - 48px, var(--wrap));
  margin-inline: auto;
}
.fv__text { width: 46%; min-width: 300px; padding: 64px 40px 64px 0; }
.fv__eyebrow {
  font-family: var(--font-heading);
  font-size: 11.5px; font-weight: 700; letter-spacing: .24em;
  color: var(--a-orange-ink);
  margin: 0 0 16px;
}
.fv__title {
  font-size: clamp(28px, 4.4vw, 52px);
  font-weight: 700; line-height: 1.36;
  color: var(--text);
  margin: 0 0 20px;
}
.fv__lead {
  font-size: clamp(14.5px, 1.6vw, 17px); line-height: 1.95;
  color: var(--text-muted);
  margin: 0 0 34px;
}
.fv__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.fv__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 34px; border-radius: 999px;
  font-family: var(--font-heading); font-size: 15px; font-weight: 600;
  transition: transform .3s var(--ease), background .3s, box-shadow .3s, border-color .3s;
}
.fv__btn:hover { text-decoration: none; transform: translateY(-2px); }
.fv__btn--primary {
  background: var(--cta-bg); color: #fff;
  box-shadow: 0 10px 24px -8px rgba(210,69,32,.55);
}
.fv__btn--primary:hover { background: var(--a-orange-ink); }
.fv__btn--ghost {
  background: rgba(255,255,255,.62);
  border: 1.5px solid var(--c-forest); color: var(--c-forest);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.fv__btn--ghost:hover { background: #fff; }

/* --- ページャ／SCROLL ---------------------------------------------------- */
.fv__dots { position: absolute; right: 26px; bottom: 24px; z-index: 4; display: flex; gap: 9px; }
.fv__dot {
  width: 9px; height: 9px; border-radius: 999px; padding: 0; border: none;
  background: rgba(37,45,33,.26);
  cursor: pointer; transition: background .3s, width .3s;
}
.fv__dot.is-active { background: var(--a-orange); width: 24px; }
.fv__dot:focus-visible { outline: 2px solid var(--c-forest); outline-offset: 3px; }

.fv__scroll {
  position: absolute; left: 22px; bottom: 26px; z-index: 4;
  writing-mode: vertical-rl;
  font-family: var(--font-heading); font-size: 11px; letter-spacing: .3em;
  color: rgba(37,45,33,.45);
}

@media (max-width: 860px) {
  .fv { display: block; min-height: 0; }
  .fv__stage { position: relative; height: 240px; }
  .fv__slide--half { left: 0; }
  .fv__body { width: 100%; }
  .fv__text { width: 100%; min-width: 0; padding: 36px 24px 46px; }
  .fv__metal-veil { background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 62%); }
  .fv__dots { right: 14px; bottom: auto; top: 212px; }
  .fv__scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fv__metal-sheet, .fv__metal-spec { animation: none; }
  .fv__slide { transition: none; }
}


/* ==========================================================================
   2. 実績（サークル表示）
   ========================================================================== */
.record { position: relative; overflow: hidden; padding: 108px 0 116px; background: var(--c-white); }
.record__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .16; filter: saturate(.5) brightness(1.35);
}
.record__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(245,247,238,.72) 50%, rgba(255,255,255,.92) 100%);
}
.record__inner { position: relative; z-index: 1; text-align: center; }
.record__title {
  font-size: clamp(24px, 3.6vw, 38px); line-height: 1.5;
  margin: 0 0 28px;
}
.record__title em { font-style: normal; color: var(--brand-strong); }
.record__lead {
  max-width: 46em; margin: 0 auto 62px;
  color: var(--text-muted); font-size: 15.5px;
}
.record__circles {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px; max-width: 900px; margin: 0 auto;
}
.circle {
  aspect-ratio: 1; border-radius: 50%;
  background: var(--c-white);
  box-shadow: 0 18px 44px rgba(74,82,56,.16), 0 2px 6px rgba(74,82,56,.06);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px; text-align: center;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.circle:hover { transform: translateY(-6px); }
.circle__label { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.circle__num {
  font-family: var(--font-heading); font-weight: 700; line-height: 1;
  font-size: clamp(38px, 5.4vw, 58px); color: var(--brand-strong);
}
.circle__num small { font-size: .42em; margin-left: 3px; }
.circle__note { font-size: 12px; color: var(--text-muted); margin-top: 8px; }

/* ==========================================================================
   3. 特徴（ずらし配置カード）
   ========================================================================== */
.strengths { position: relative; overflow: hidden; padding: 116px 0 128px; background: #2E4425; }
.strengths__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .30; filter: saturate(.6) brightness(.82);
}
.strengths__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 120% 100% at 50% 30%, rgba(60,82,36,.72) 0%, rgba(28,40,18,.92) 78%);
}
.strengths .wm {
  top: 40px; left: 50%; transform: translateX(-50%);
  font-size: clamp(64px, 13vw, 190px);
  color: rgba(245,247,238,.055);
  white-space: nowrap;
}
.strengths__inner { position: relative; z-index: 1; }
.strengths__title {
  position: relative;
  text-align: center; color: var(--c-mist);
  font-size: clamp(22px, 3vw, 30px); margin: 0 0 72px;
  text-shadow: 0 2px 10px rgba(16,26,10,.85), 0 0 26px rgba(16,26,10,.6);
}
.strengths__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  align-items: start;
}
.scard { position: relative; }
.scard--s1 { margin-top: 96px; }
.scard--s2 { margin-top: 48px; }
.scard--s3 { margin-top: 0; }
.scard__badge {
  position: absolute; top: -18px; left: -10px; z-index: 2;
  width: 62px; height: 62px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-strong); color: var(--c-mist);
  font-family: var(--font-heading); font-size: 22px; font-weight: 700;
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
}
.scard__img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  background: var(--c-deep-sage);
}
.scard__body { background: var(--c-white); padding: 28px 26px 32px; }
.scard__title { font-size: 17px; line-height: 1.65; margin: 0 0 12px; }
.scard__title em { font-style: normal; color: var(--brand-strong); }
.scard__text { font-size: 14.5px; color: var(--text-muted); margin: 0; }

/* ==========================================================================
   4. 他ページへのリンク（傾けた写真）
   ========================================================================== */
.plink { position: relative; overflow: hidden; padding: 116px 0; background: var(--c-white); }
.plink__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.plink__text { position: relative; }
.plink .wm {
  top: -46px; left: -6px;
  font-size: clamp(56px, 9vw, 128px);
  color: rgba(144,168,88,.10);
}
.plink__eyebrow { position: relative; font-size: 14px; color: var(--text-muted); margin: 0 0 18px; }
.plink__title {
  position: relative;
  font-size: clamp(24px, 3.4vw, 36px); line-height: 1.55;
  margin: 0 0 28px;
}
.plink__title span {
  display: inline-block; position: relative;
  border-bottom: 2px solid var(--brand);
  padding-bottom: 4px;
}
.plink__title .dot-accent { width: 42px; height: 42px; left: -14px; top: -10px; z-index: 0; }
.plink__title span { z-index: 1; }
.plink__text p { color: var(--text-muted); font-size: 15.5px; }
.plink__btn {
  display: inline-flex; align-items: center; gap: 16px;
  margin-top: 12px; padding: 16px 38px;
  background: var(--brand-strong); color: var(--c-white);
  font-family: var(--font-heading); font-weight: 600; font-size: 15px;
  transition: background .3s, transform .3s;
}
.plink__btn:hover { text-decoration: none; background: var(--c-charcoal); transform: translateX(4px); }
.plink__btn::after { content: "⟶"; font-size: 18px; }
.plink__figure { position: relative; }
.plink__figure img {
  width: 100%; display: block;
  transform: rotate(3deg);
  box-shadow: 0 24px 54px rgba(74,82,56,.24);
  background: var(--c-mist);
}

/* ==========================================================================
   プレビュー用の注記バー
   ========================================================================== */
.pvnote {
  background: var(--c-charcoal); color: var(--c-mist);
  font-size: 13px; padding: 12px 0; text-align: center;
}
.pvnote strong { color: var(--c-highlight); }

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .fv__slide { transition: none; }
  .circle, .plink__btn { transition: none; }
}

@media (max-width: 900px) {
  .record__circles { grid-template-columns: 1fr; max-width: 320px; }
  .strengths__grid { grid-template-columns: 1fr; gap: 44px; }
  .scard--s1, .scard--s2, .scard--s3 { margin-top: 0; }   /* ずらしを解除 */
  .plink__grid { grid-template-columns: 1fr; gap: 44px; }
  .plink__figure img { transform: rotate(2deg); }
}

@media (max-width: 640px) {
  .phead__inner { width: calc(100% - 36px); }
  .fv__actions { flex-direction: column; }
  .fv__btn { width: 100%; }
  .fv__scroll { display: none; }
  .record, .strengths, .plink { padding: 72px 0; }
}

/* ==========================================================================
   5. 下層ページ共通：ページヘッダー（FVの縮小版）
   ========================================================================== */
.phead { position: relative; padding: 0; }
.phead > .wrap { width: 100%; max-width: none; }
.phead__card {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 400px; display: flex; align-items: center;
  border-radius: 0; background: #2E4425;
}
/* 下層ページは文字を写真の上に載せるため、暗くする処理が要る。
   ただし全面ではなく、文字のある左側だけにかける。
   multiply と saturate は使わない（写真本来の明るさを残すため）。 */
.phead__photo {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center 38%;
  filter: brightness(1.03) contrast(1.02);
}
.phead__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(36,54,29,.76) 0%, rgba(36,54,29,.44) 44%,
    rgba(36,54,29,.08) 74%, rgba(36,54,29,0) 100%);
}
.phead .wm {
  top: 50%; right: 3%; transform: translateY(-50%);
  font-size: clamp(60px, 11vw, 150px);
  color: rgba(245,247,238,.09); white-space: nowrap; z-index: 1;
}
.phead__inner {
  position: relative; z-index: 2;
  width: min(100% - 48px, var(--wrap));
  margin-inline: auto;
  padding: 0;
}
.phead__title, .phead__lead { max-width: 30em; }
.phead__title {
  position: relative;
  font-size: clamp(26px, 4.2vw, 44px); font-weight: 700; line-height: 1.4;
  color: var(--c-mist); margin: 0 0 18px;
  text-shadow: 0 2px 8px rgba(12,20,8,.85), 0 10px 30px rgba(12,20,8,.55);
}
.phead__lead span { display: inline-block; }
.phead__title .dot-accent { width: 44px; height: 44px; left: -16px; top: -12px; z-index: -1; opacity: .8; }
.phead__lead {
  font-size: clamp(14.5px, 1.6vw, 17px); line-height: 1.95;
  color: rgba(250,252,244,.94); margin: 0; max-width: 32em;
  text-shadow: 0 1px 5px rgba(12,20,8,.9);
}

/* ==========================================================================
   6. 事業の柱（写真とテキストを左右交互に置く）
   ========================================================================== */
.pillar { position: relative; overflow: hidden; padding: 104px 0; }
.pillar--mist { background: var(--surface); }
.pillar__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.pillar--rev .pillar__grid { direction: rtl; }
.pillar--rev .pillar__grid > * { direction: ltr; }

.pillar__figure { position: relative; }
.pillar__figure img {
  width: 100%; display: block;
  transform: rotate(-2.5deg);
  box-shadow: 0 24px 54px rgba(74,82,56,.24);
  background: var(--c-mist);
}
.pillar--rev .pillar__figure img { transform: rotate(2.5deg); }

/* 柱1用：写真の代わりに発光グラフィックを置く */
.pillar__glow {
  position: relative; overflow: hidden;
  aspect-ratio: 4/3; border-radius: 18px;
  background-color: #2E4425;
  background-image: linear-gradient(158deg, #3B5730 0%, #2E4425 48%, #24361D 100%);
  transform: rotate(-2.5deg);
  box-shadow: 0 24px 54px rgba(74,82,56,.28);
}
.pillar__glow::before {
  content: ""; position: absolute; top: 42%; left: 46%;
  width: 130%; height: 120%; border-radius: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle,
    rgba(236,246,200,.95) 0%, rgba(190,214,124,.72) 26%,
    rgba(150,178,88,.44) 48%, rgba(120,144,66,.18) 68%, transparent 84%);
  filter: blur(36px); mix-blend-mode: screen;
  animation: fv-breath 11s ease-in-out infinite alternate;
}
.pillar__glow::after {
  content: ""; position: absolute; right: -14%; bottom: -18%;
  width: 62%; height: 62%; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,110,74,.52) 0%, rgba(201,110,74,.2) 40%, transparent 74%);
  filter: blur(52px); mix-blend-mode: screen;
}

.pillar__text { position: relative; }
.pillar__no {
  font-family: var(--font-heading); font-weight: 700; line-height: 1;
  font-size: clamp(50px, 8vw, 96px);
  color: rgba(144,168,88,.16);
  position: absolute; top: -46px; left: -8px;
}
.pillar--mist .pillar__no { color: rgba(124,145,70,.18); }
.pillar__title {
  position: relative;
  font-size: clamp(21px, 2.8vw, 28px); line-height: 1.6; margin: 0 0 20px;
}
.pillar__title em { font-style: normal; color: var(--brand-strong); }
.pillar__lead { font-size: 16px; color: var(--text); margin-bottom: 28px; }
.pillar__items { display: grid; gap: 18px; margin-bottom: 32px; }
.pillar__item { border-left: 2px solid var(--brand); padding-left: 16px; }
.pillar__item h4 { font-size: 15.5px; margin: 0 0 6px; font-family: var(--font-heading); }
.pillar__item p { font-size: 14.5px; color: var(--text-muted); margin: 0; }
.pillar__issues { background: var(--c-white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.pillar--mist .pillar__issues { background: var(--c-white); }
.pillar__issues h4 {
  font-size: 13px; font-family: var(--font-heading); letter-spacing: .08em;
  color: var(--c-accent); margin: 0 0 12px;
}
.pillar__issues ul { margin: 0; padding-left: 1.2em; font-size: 14.5px; color: var(--text-muted); }
.pillar__issues li { margin-bottom: 6px; }

@media (max-width: 900px) {
  .phead__card { min-height: 300px; }
  .pillar { padding: 72px 0; }
  .pillar__grid, .pillar--rev .pillar__grid { grid-template-columns: 1fr; gap: 36px; direction: ltr; }
  .pillar__figure img, .pillar--rev .pillar__figure img, .pillar__glow { transform: rotate(0deg); }
  .pillar__no { position: static; display: block; margin-bottom: 4px; font-size: 46px; }
}

/* ==========================================================================
   7. 会社概要ページ
   ========================================================================== */

/* --- 社名について（大きめのタイポで見せる） ------------------------------ */
.naming { position: relative; overflow: hidden; padding: 104px 0; background: var(--surface); }
.naming .wm {
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-size: clamp(70px, 15vw, 230px);
  color: rgba(124,145,70,.07); white-space: nowrap;
}
.naming__inner { position: relative; z-index: 1; text-align: center; }
.naming__word {
  position: relative; display: inline-block;
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(34px, 6vw, 68px); line-height: 1.2;
  color: var(--brand-strong); margin-bottom: 10px;
}
.naming__word .dot-accent { width: 46px; height: 46px; left: -20px; top: -12px; z-index: -1; }
.naming__en {
  font-family: var(--font-heading); font-size: 13px; letter-spacing: .22em;
  color: var(--c-accent); margin-bottom: 32px;
}
.naming__text { max-width: 34em; margin: 0 auto; color: var(--text-muted); }

/* --- 沿革（タイムライン） ------------------------------------------------ */
.tl { list-style: none; padding: 0; margin: 0; position: relative; }
.tl::before {
  content: ""; position: absolute; left: 118px; top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(180deg, var(--brand) 0%, var(--c-highlight) 100%);
}
.tl li {
  position: relative;
  display: grid; grid-template-columns: 104px 1fr; gap: 44px;
  padding: 0 0 34px; margin: 0;
}
.tl li:last-child { padding-bottom: 0; }
.tl__year {
  font-family: var(--font-heading); font-weight: 600; font-size: 14px;
  color: var(--brand-strong); text-align: right; padding-top: 2px;
}
.tl li::after {
  content: ""; position: absolute; left: 112px; top: 6px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--c-white); border: 3px solid var(--brand);
}
.tl li.is-now::after { background: var(--c-accent); border-color: var(--c-accent); }
.tl__body { font-size: 15px; color: var(--text-muted); }
.tl__body strong { display: block; color: var(--text); font-size: 15.5px; margin-bottom: 4px; }

/* --- 代表プロフィール ---------------------------------------------------- */
.profile { position: relative; overflow: hidden; padding: 104px 0; }
.profile__grid { display: grid; grid-template-columns: 380px 1fr; gap: 60px; align-items: start; }
.profile__figure { position: relative; }
.profile__figure img {
  width: 100%; display: block;
  transform: rotate(-2.5deg);
  box-shadow: 0 24px 54px rgba(74,82,56,.24);
  background: var(--c-mist);
}
.profile__name { font-size: clamp(22px, 3vw, 30px); margin: 0 0 6px; }
.profile__name small { display: block; font-size: 13px; color: var(--text-muted); font-weight: 400; margin-top: 8px; letter-spacing: .06em; }
.profile__role { font-size: 14px; color: var(--c-accent); font-family: var(--font-heading); letter-spacing: .1em; margin: 0 0 22px; }

/* --- メディア掲載 -------------------------------------------------------- */
.media { padding: 96px 0; background: var(--surface); }
.media__list { list-style: none; padding: 0; margin: 0; }
.media__list li {
  display: grid; grid-template-columns: 130px 1fr; gap: 28px;
  padding: 20px 0; border-bottom: 1px solid var(--line); margin: 0;
}
.media__list li:first-child { border-top: 2px solid var(--brand); }
.media__date { font-family: var(--font-heading); font-size: 13.5px; font-weight: 600; color: var(--brand-strong); }
.media__body { font-size: 15px; color: var(--text-muted); }
.media__body strong { color: var(--text); }
.media__tv {
  display: inline-block; font-size: 11px; font-weight: 600;
  background: var(--c-accent); color: var(--c-white);
  border-radius: 3px; padding: 2px 8px; margin-right: 10px; vertical-align: 2px;
}

@media (max-width: 900px) {
  .profile__grid { grid-template-columns: 1fr; gap: 36px; }
  .profile__figure img { transform: rotate(0deg); max-width: 320px; }
  .tl::before { left: 6px; }
  .tl li { grid-template-columns: 1fr; gap: 4px; padding-left: 34px; }
  .tl__year { text-align: left; }
  .tl li::after { left: 0; }
  .media__list li { grid-template-columns: 1fr; gap: 6px; }
}

/* ==========================================================================
   代表メッセージ
   ========================================================================== */
.message { padding: 104px 0 112px; background: var(--c-white); }
.message__grid {
  display: grid; grid-template-columns: 1.08fr 1fr;
  gap: 56px; align-items: center;
}
.message__figure img {
  width: 100%; display: block; border-radius: 16px;
  box-shadow: 0 24px 54px rgba(59,87,48,.20);
}
.message__eyebrow {
  font-family: var(--font-heading);
  font-size: 11.5px; font-weight: 700; letter-spacing: .24em;
  color: var(--a-orange-ink);
  margin: 0 0 14px;
}
.message__title {
  font-size: clamp(21px, 2.6vw, 30px); line-height: 1.55;
  color: var(--c-forest);
  margin: 0 0 20px;
}
.message__text { font-size: 15.5px; color: var(--text-muted); margin: 0 0 1.2em; }
.message__sign { margin: 26px 0 0; line-height: 1.6; }
.message__sign b {
  display: block; font-family: var(--font-heading);
  font-size: 19px; font-weight: 700; color: var(--text);
}
.message__sign span { font-size: 13px; color: var(--text-muted); }

@media (max-width: 900px) {
  .message { padding: 76px 0 82px; }
  .message__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================================
   制作事例（事業内容 柱3）
   ・ブロック自体に .wrap を付けて、柱の写真・文字と左右の余白を揃えている
   ・パソコン表示のキャプチャに、スマートフォン表示を重ねて置く
   ========================================================================== */
.works { margin-top: 76px; }
.works__title {
  font-family: var(--font-heading); font-size: 18px; font-weight: 700;
  color: var(--c-forest); margin: 0 0 6px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line); position: relative;
}
.works__title::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 52px; height: 2px; background: var(--c-accent);
}
.works__title--sub { margin-top: 60px; }
.works__note { font-size: 12.5px; color: var(--text-muted); margin: 10px 0 22px; }

.works__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 26px;
}
.work { margin: 0; }

/* パソコン表示＋スマートフォン表示の重ね置き */
.work__shot { position: relative; padding-bottom: 26px; }
.work__pc {
  width: 100%; display: block; border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: 0 14px 32px rgba(59,87,48,.16);
  background: var(--c-white);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.work__sp {
  position: absolute; right: 12px; bottom: 0;
  width: 21%; height: auto; display: block;
  border-radius: 9px;
  border: 3px solid var(--c-white);
  box-shadow: 0 10px 24px rgba(37,45,33,.28);
  object-fit: cover; object-position: top center;
  aspect-ratio: 390 / 620;      /* 縦長すぎるとカードを圧迫するため上部だけ見せる */
  transition: transform .35s var(--ease);
}
.work:hover .work__pc { transform: translateY(-4px); box-shadow: 0 20px 42px rgba(59,87,48,.22); }
.work:hover .work__sp { transform: translateY(-4px); }

.work__meta { padding: 14px 2px 0; }
.work__meta b {
  display: block; font-family: var(--font-heading);
  font-size: 15px; color: var(--text); margin-bottom: 3px;
}
.work__meta span { font-size: 13px; color: var(--text-muted); }

/* Kindle の書影：小さめにして中央に寄せる */
.works__books {
  list-style: none; padding: 0; margin: 0 auto;
  max-width: 720px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.works__books li { margin: 0; text-align: center; }
.works__books img {
  width: 100%; display: block; border-radius: 5px;
  box-shadow: 0 10px 24px rgba(59,87,48,.20);
  transition: transform .35s var(--ease);
}
.works__books li:hover img { transform: translateY(-4px); }
.works__books span {
  display: block; margin-top: 10px;
  font-size: 12px; line-height: 1.6; color: var(--text-muted);
}

@media (max-width: 860px) {
  .works { margin-top: 52px; }
  .works__grid { grid-template-columns: 1fr; gap: 26px; }
  .work__sp { width: 24%; }
  .works__books { grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 380px; }
}

/* ==========================================================================
   著書（会社概要）
   2冊を左右に並べ、書影は小さめに抑える
   ========================================================================== */
.books { padding: 96px 0; background: var(--c-white); }
.books__list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 34px;
}
.book {
  margin: 0; display: grid; grid-template-columns: 104px 1fr;
  gap: 18px; align-items: center;
}
.book__cover {
  width: 100%; display: block; border-radius: 3px;
  box-shadow: 0 10px 24px rgba(59,87,48,.22);
}
.book__meta b {
  display: block; font-family: var(--font-heading);
  font-size: 15px; color: var(--text); margin-bottom: 6px; line-height: 1.55;
}
.book__meta span { display: block; font-size: 12.5px; color: var(--text-muted); line-height: 1.75; }
.book__meta a {
  display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 600;
  color: var(--a-orange-ink);
}

@media (max-width: 700px) {
  .books { padding: 72px 0; }
  .books__list { grid-template-columns: 1fr; gap: 26px; }
  .book { grid-template-columns: 96px 1fr; gap: 16px; }
}

/* 過去のメディア掲載（折りたたみ） */
.media__more { margin-top: 26px; }
.media__more > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-heading); font-size: 13.5px; font-weight: 600;
  color: var(--c-forest); padding: 10px 20px;
  border: 1.5px solid var(--line); border-radius: 999px;
  transition: border-color .25s, background .25s;
}
.media__more > summary::-webkit-details-marker { display: none; }
.media__more > summary::after {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px,-2px); transition: transform .25s;
}
.media__more[open] > summary::after { transform: rotate(-135deg) translate(-2px,-2px); }
.media__more > summary:hover { border-color: var(--c-forest); background: var(--surface); }
.media__list--old { margin-top: 18px; }
.media__list--old li:first-child { border-top: 1px solid var(--line); }

/* 実績ブロックから受講者の声への導線（円の下・中央） */
.record__link { margin: 48px 0 0; text-align: center; }
.record__link a {
  display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;                       /* 折り返して不自然に割れないようにする */
  font-family: var(--font-heading); font-size: 14.5px; font-weight: 600;
  color: var(--c-forest); padding: 14px 30px;
  border: 1.5px solid var(--c-forest); border-radius: 999px;
  transition: background .25s, color .25s;
}
.record__link em {
  font-style: normal; font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  background: var(--c-forest); color: #fff;
}
.record__link a::after {
  content: ""; width: 7px; height: 7px; flex: none;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.record__link a:hover { background: var(--c-forest); color: #fff; text-decoration: none; }
.record__link a:hover em { background: #fff; color: var(--c-forest); }

@media (max-width: 480px) {
  .record__link a { white-space: normal; font-size: 13.5px; padding: 13px 22px; }
}