/* /a/ 株式会社カ・カ・カ食品 a.css v1.1
   一言：凛。地 #EDEBE6／主色 #E0A21A（面・線・図形のみ）／副色 #5E2436／文字 #000000
   site.css の後に読む。site.css は変更しない。
   ------------------------------------------------------------ */

/* 上半分（自社サイト） ---------------------------------------- */
.a-top { background: #EDEBE6; color: #000000; }
.a-top p, .a-top ul { max-width: var(--measure); }
.a-top ul { padding-left: 1.4em; }
.a-top li { margin-bottom: 0.6em; }
.a-top h2 {
  font-family: var(--font-serif);
  letter-spacing: 0.12em;
  font-weight: 600;
}
.a-top h2::before {
  content: "";
  display: block;
  width: 32px; height: 3px;
  background: #E0A21A;
  margin-bottom: 14px;
}
.a-top h3 { font-family: var(--font-serif); letter-spacing: 0.08em; }

/* ヒーロー ---------------------------------------------------- */
.a-hero { padding-top: var(--space-3); }
.a-stage {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-3);
}
.a-shelfwrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 620px;
}
.a-shelfwrap svg { width: 100%; height: 100%; }
.a-h1 {
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.4;
  letter-spacing: 0.1em;
  margin: 0;
  flex: 0 0 auto;
}
.a-42 {
  position: absolute;
  right: 3%; bottom: 2%;
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-big);
  font-weight: 700;
  line-height: 1;
  color: #5E2436;
  font-variant-numeric: tabular-nums;
}
.a-id { margin-top: var(--space-4); }
.a-name {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-1);
  word-break: keep-all;
}
.a-nb { white-space: nowrap; } /* 「カ・カ・カ食品」を「・」で折らない（v1.1） */
.a-meta { font-size: var(--fs-note); line-height: 1.7; margin: 0 0 var(--space-2); }
.a-sub { margin: 0; }
.a-heroimg { margin-top: var(--space-6); }
.a-heroimg img { width: 100%; }

/* 署名モーション（読み込み起点。合計2.35秒。タップでスキップ）
   §7：animation の一括指定は使わない。共通側は name 以外の副項目、
   duration と delay は各要素の規則に書く。 */
@keyframes a-drop { from { opacity: 0; transform: translateY(-28px); } }
@keyframes a-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes a-pop  { from { opacity: 0; transform: scale(0.72); } }
@keyframes a-line { from { transform: scaleX(0); } }
.a-hero .an, .a-shelf .sl, .a-shelf .vv {
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
}
.a-h1.an { animation-name: a-drop; animation-duration: 600ms; }
.a-shelf .sl { transform-origin: left center; transform-box: fill-box; animation-name: a-line; }
.a-shelf .sl1 { animation-duration: 400ms; animation-delay: 150ms; }
.a-shelf .sl2 { animation-duration: 400ms; animation-delay: 250ms; }
.a-shelf .sl3 { animation-duration: 400ms; animation-delay: 350ms; }
.a-shelf .vv { animation-name: a-rise; animation-duration: 350ms; }
.a-shelf .v1 { animation-delay: 550ms; }
.a-shelf .v2 { animation-delay: 670ms; }
.a-shelf .v3 { animation-delay: 790ms; }
.a-shelf .v4 { animation-delay: 910ms; }
.a-shelf .v5 { animation-delay: 1030ms; }
.a-shelf .v6 { animation-delay: 1150ms; }
.a-shelf .v7 { animation-delay: 1270ms; }
.a-shelf .v8 { animation-delay: 1390ms; }
.a-42.an { animation-name: a-pop; animation-duration: 500ms; animation-delay: 1850ms; transform-origin: center; }
/* タップでスキップ：最終状態へ */
.a-hero.is-skip .an, .a-hero.is-skip .sl, .a-hero.is-skip .vv { animation: none !important; }
/* reduced-motion：共通部品は duration のみ短縮し delay は残すため、ここで遅延を0にする（v1.1） */
@media (prefers-reduced-motion: reduce) {
  .a-hero .an, .a-shelf .sl, .a-shelf .vv { animation-delay: 0ms !important; }
}

/* 会社の紹介 -------------------------------------------------- */
.a-about-grid { display: grid; gap: var(--space-4); }
@media (min-width: 720px) {
  .a-about-grid { grid-template-columns: 3fr 2fr; align-items: start; }
}
.a-about-grid img { width: 100%; }

/* 42品目グリッド（設計箇所②） -------------------------------- */
.a-grid {
  list-style: none;
  margin: var(--space-4) 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
/* .a-top ul / .a-top p の max-width（詳細度 0,1,1）に負けないよう .a-top を付けて上書き（v1.1） */
.a-top .a-grid, .a-top .a-total { max-width: none; }
.a-grid li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-top: 1px solid #000000;
  padding-top: 12px;
  margin: 0;
}
.a-grid .ic { order: 0; flex: 0 0 48px; }
.a-grid .ic svg { width: 44px; height: 52px; margin-inline: auto; }
.a-grid .c { order: 1; flex: 1 1 auto; margin: 0; font-size: var(--fs-body); line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.a-grid .n {
  order: 2;
  margin: 0;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: #5E2436;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.a-grid .n small { font-size: var(--fs-note); font-weight: 400; color: #000000; margin-left: 2px; }
/* 7列は列幅120px以上を確保できる 1024px 以上のみ。720〜1023px は縦積みのまま（v1.1。720pxでは列幅77pxで語中折れするため） */
@media (min-width: 1024px) {
  .a-grid { grid-template-columns: repeat(7, 1fr); gap: var(--space-2); align-items: stretch; }
  .a-grid li {
    flex-direction: column;
    justify-content: flex-end;
    text-align: center;
    gap: 10px;
    border-top: 0;
    border-bottom: 3px solid #E0A21A;
    padding: 0 4px 14px;
  }
  .a-grid .ic { flex: 0 0 auto; }
  .a-grid .c { order: 2; flex: 0 0 auto; font-size: var(--fs-note); }
  .a-grid .n { order: 1; }
}
.a-total { text-align: right; max-width: none; }
.a-total .num {
  font-family: var(--font-serif);
  font-size: var(--fs-big);
  font-weight: 700;
  color: #5E2436;
  font-variant-numeric: tabular-nums;
  margin-left: 0.2em;
}
.a-total small { font-size: var(--fs-note); margin-left: 0.2em; }

/* 代表のことば ------------------------------------------------ */
.a-voice blockquote {
  margin: var(--space-4) 0 0;
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 2;
  max-width: var(--measure);
}
.a-voice blockquote p { margin: 0; max-width: none; }
.a-lead { font-weight: 700; }

/* 装飾画像の帯 ------------------------------------------------ */
.a-tex {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: var(--space-6);
}
.a-tex img { width: 100%; }

/* 申込ボタン（デザインシステム §3-6。site.css は変更しない） -- */
.btn.btn-primary {
  background: #E0A21A;
  color: #000000;
  border: 1px solid #000000;
}
.btn.btn-primary:hover { background: #5E2436; color: #FFFFFF; }
.a-apply-btn { max-width: 520px; }