@charset "UTF-8";
/* ==========================================================
   食と栄養 TOP（/f/top-food）メイン画像モーション
   設置先: https://www.kodawari-net.com/img/css/top-food-motion-kdw.css
   接頭辞: kdw-topfood__
   1000×600（5:3）・約41秒ループ・HTML/CSSのみ（JavaScriptなし）
   ========================================================== */

.kdw-topfood {
  --u: 1px;
  --ink: #3A2E26;
  --soft: #6E5F52;
  --ground: #FBF6EE;
  --dot: #E0D2BF;
  --f-display: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --f-body: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  position: relative;
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 5 / 3;
  margin: 0 auto;
  container-type: inline-size;
  overflow: hidden;
  background: var(--ground);
  color: var(--ink);
  border-radius: 6px;
  font-family: var(--f-body);
  line-height: 1.5;
  text-align: left;
}
/* 画面幅に合わせて全体を縮小（1000px のとき 1 単位 = 1px） */
@supports (width: 1cqw) {
  .kdw-topfood { --u: 0.1cqw; }
}
.kdw-topfood * { box-sizing: border-box; margin: 0; padding: 0; }
.kdw-topfood img { max-width: none; border: 0; }

.kdw-topfood__scene { position: absolute; inset: 0; opacity: 0; }
.kdw-topfood__scene--cover { opacity: 1; }
.kdw-topfood__circlebg { position: absolute; border-radius: 50%; background: var(--tint, #F3E6CF); }
.kdw-topfood__circlebg--center { left: calc(250 * var(--u)); top: calc(50 * var(--u)); width: calc(500 * var(--u)); height: calc(500 * var(--u)); }
.kdw-topfood__circlebg--corner { right: calc(-120 * var(--u)); top: calc(-90 * var(--u)); width: calc(640 * var(--u)); height: calc(640 * var(--u)); }

/* ---------- CUT01 表紙 ---------- */
.kdw-topfood__covhead { position: absolute; left: calc(72 * var(--u)); top: 0; bottom: 0; width: calc(330 * var(--u)); display: flex; flex-direction: column; justify-content: center; gap: calc(18 * var(--u)); }
.kdw-topfood__covtitle { font-family: var(--f-display); font-size: calc(50 * var(--u)); font-weight: 600; line-height: 1.4; color: var(--ink); }
.kdw-topfood__covrule { width: calc(120 * var(--u)); height: max(1px, calc(2 * var(--u))); background: #B0442A; }
.kdw-topfood__covlist { font-size: calc(16 * var(--u)); line-height: 1.8; color: var(--soft); }
.kdw-topfood__collage { position: absolute; right: calc(56 * var(--u)); top: calc(48 * var(--u)); width: calc(504 * var(--u)); height: calc(504 * var(--u)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: calc(12 * var(--u)); }
.kdw-topfood__tile { border: 1px solid #E3D3BD; border-radius: calc(6 * var(--u)); overflow: hidden; background: #EFE4D4; }
.kdw-topfood__tile--main { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.kdw-topfood__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- CUT02・CUT08 メッセージ ---------- */
.kdw-topfood__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.kdw-topfood__message { font-family: var(--f-display); font-size: calc(44 * var(--u)); font-weight: 600; line-height: 1.5; color: var(--ink); }
.kdw-topfood__line { display: inline-block; }
.kdw-topfood__mark { background: linear-gradient(transparent 62%, #F2D3B8 62%) no-repeat left bottom / 100% 100%; }
.kdw-topfood__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(10 * var(--u)); margin-bottom: calc(28 * var(--u)); }
.kdw-topfood__chip { display: flex; align-items: center; gap: calc(8 * var(--u)); background: #FFFFFF; border: 1px solid #E6D8C4; border-radius: 999px; padding: calc(8 * var(--u)) calc(16 * var(--u)); font-size: calc(15 * var(--u)); color: var(--ink); }
.kdw-topfood__chip i { display: block; width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: var(--c); }
.kdw-topfood__closer { margin-bottom: calc(28 * var(--u)); font-family: var(--f-display); font-size: calc(44 * var(--u)); font-weight: 600; line-height: 1.4; color: var(--ink); }
.kdw-topfood__since { font-size: calc(17 * var(--u)); color: var(--soft); line-height: 1.8; }

/* ---------- CUT03〜07 テーマ ---------- */
.kdw-topfood__head { position: absolute; left: calc(72 * var(--u)); top: 0; bottom: 0; width: calc(340 * var(--u)); display: flex; flex-direction: column; justify-content: center; gap: calc(16 * var(--u)); }
.kdw-topfood__num { font-family: var(--f-display); font-size: calc(18 * var(--u)); letter-spacing: .2em; color: var(--ac); }
.kdw-topfood__title { font-family: var(--f-display); font-size: calc(46 * var(--u)); font-weight: 600; line-height: 1.35; color: var(--ink); }
.kdw-topfood__rule { width: calc(60 * var(--u)); height: max(1px, calc(2 * var(--u))); background: var(--ac); }
.kdw-topfood__lead { font-size: calc(16 * var(--u)); color: var(--soft); line-height: 1.7; }
.kdw-topfood__items { position: absolute; left: calc(430 * var(--u)); right: calc(40 * var(--u)); top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: calc(24 * var(--u)); }
.kdw-topfood__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--u)); width: calc(154 * var(--u)); }
.kdw-topfood__circle { width: calc(150 * var(--u)); height: calc(150 * var(--u)); border-radius: 50%; overflow: hidden; border: 1px solid var(--line); background: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.kdw-topfood__circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kdw-topfood__circle svg { width: 40%; height: 40%; }
.kdw-topfood__name { font-size: calc(16 * var(--u)); font-weight: 500; text-align: center; line-height: 1.4; color: var(--ink); }
.kdw-topfood__note { font-size: calc(12 * var(--u)); color: var(--soft); text-align: center; line-height: 1.4; }
.kdw-topfood__dots { position: absolute; left: 0; right: 0; bottom: calc(26 * var(--u)); display: flex; justify-content: center; gap: calc(10 * var(--u)); }
.kdw-topfood__dots span { display: block; width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: var(--dot); }
.kdw-topfood__dots .is-on { background: var(--ac); }

/* CUT04 オイルのしずく */
.kdw-topfood__drop { position: absolute; left: calc(683 * var(--u)); top: calc(272 * var(--u)); width: calc(24 * var(--u)); height: calc(24 * var(--u)); opacity: 0; }
.kdw-topfood__drop::before { content: ""; position: absolute; inset: 0; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: #C9A227; }
.kdw-topfood__ripple { position: absolute; left: calc(615 * var(--u)); top: calc(280 * var(--u)); width: calc(160 * var(--u)); height: calc(40 * var(--u)); border: max(1px, calc(1.5 * var(--u))) solid #B9962A; border-radius: 50%; opacity: 0; }

/* スマホなど幅が狭いとき：小さな説明文は省き、見出しと写真を残す */
@container (max-width: 560px) {
  .kdw-topfood__note, .kdw-topfood__lead, .kdw-topfood__covlist, .kdw-topfood__since { display: none; }
  .kdw-topfood__name { font-size: max(10px, calc(18 * var(--u))); }
  .kdw-topfood__chip { font-size: max(10px, calc(15 * var(--u))); }
}

/* ==========================================================
   動き：41秒ループ（表紙6秒＋各カット5秒、切り替え0.8秒）
   各カットの開始時刻は HTML 側の --d で指定
   ========================================================== */
.kdw-topfood__scene { animation: kdw-topfood-scene 41s linear var(--d, 0s) infinite both; }
.kdw-topfood__scene--cover { animation: kdw-topfood-cover 41s linear 0s infinite both; }
.kdw-topfood__tile--main img { animation: kdw-topfood-zoom 41s ease-in-out 0s infinite both; }
.kdw-topfood [data-in] { animation: var(--in) 41s ease-out var(--d, 0s) infinite both; }
.kdw-topfood [data-in="0"] { --in: kdw-topfood-in0; }
.kdw-topfood [data-in="1"] { --in: kdw-topfood-in1; }
.kdw-topfood [data-in="2"] { --in: kdw-topfood-in2; }
.kdw-topfood [data-in="3"] { --in: kdw-topfood-in3; }
.kdw-topfood [data-in="4"] { --in: kdw-topfood-in4; }
.kdw-topfood [data-in="5"] { --in: kdw-topfood-in5; }
.kdw-topfood__mark { animation: kdw-topfood-mark 41s ease-out var(--d, 0s) infinite both; }
.kdw-topfood__drop { animation: kdw-topfood-drop 41s ease-in var(--d, 0s) infinite both; }
.kdw-topfood__ripple { animation: kdw-topfood-ripple 41s ease-out var(--d, 0s) infinite both; }
.kdw-topfood__scene--s05 .kdw-topfood__circle img { animation: kdw-topfood-bloom 41s ease-out var(--d, 0s) infinite both; }

/* カットごとの動きの向き */
.kdw-topfood__head > [data-in] { --tx: calc(-20 * var(--u)); --ty: 0px; }
.kdw-topfood__scene--s06 .kdw-topfood__item { --ty: calc(40 * var(--u)); }
.kdw-topfood__scene--s07 .kdw-topfood__item { --tx: calc(-30 * var(--u)); --ty: 0px; }

@keyframes kdw-topfood-cover { 0%, 12.68% { opacity: 1 } 14.63%, 98.05% { opacity: 0 } 100% { opacity: 1 } }
@keyframes kdw-topfood-scene { 0% { opacity: 0 } 1.95%, 12.2% { opacity: 1 } 14.15%, 100% { opacity: 0 } }
@keyframes kdw-topfood-zoom { 0% { transform: scale(1) } 14.63% { transform: scale(1.05) } 100% { transform: scale(1) } }
@keyframes kdw-topfood-in0 { 0%, 0.73% { opacity: 0; transform: translate(var(--tx, 0px), var(--ty, calc(14 * var(--u)))) } 3.17%, 100% { opacity: 1; transform: none } }
@keyframes kdw-topfood-in1 { 0%, 1.71% { opacity: 0; transform: translate(var(--tx, 0px), var(--ty, calc(14 * var(--u)))) } 4.15%, 100% { opacity: 1; transform: none } }
@keyframes kdw-topfood-in2 { 0%, 2.68% { opacity: 0; transform: translate(var(--tx, 0px), var(--ty, calc(14 * var(--u)))) } 5.12%, 100% { opacity: 1; transform: none } }
@keyframes kdw-topfood-in3 { 0%, 3.66% { opacity: 0; transform: translate(var(--tx, 0px), var(--ty, calc(14 * var(--u)))) } 6.1%, 100% { opacity: 1; transform: none } }
@keyframes kdw-topfood-in4 { 0%, 4.63% { opacity: 0; transform: translate(var(--tx, 0px), var(--ty, calc(14 * var(--u)))) } 7.07%, 100% { opacity: 1; transform: none } }
@keyframes kdw-topfood-in5 { 0%, 5.85% { opacity: 0; transform: translate(var(--tx, 0px), var(--ty, calc(14 * var(--u)))) } 8.29%, 100% { opacity: 1; transform: none } }
@keyframes kdw-topfood-mark { 0%, 4.88% { background-size: 0% 100% } 8.29%, 100% { background-size: 100% 100% } }
@keyframes kdw-topfood-drop { 0% { opacity: 0; transform: translateY(calc(-260 * var(--u))) } 0.73% { opacity: 1 } 2.44% { opacity: 1; transform: translateY(0) } 3.17%, 100% { opacity: 0; transform: translateY(0) } }
@keyframes kdw-topfood-ripple { 0%, 2.44% { opacity: 0; transform: scale(.2) } 2.93% { opacity: .9 } 7.32%, 100% { opacity: 0; transform: scale(1.8) } }
@keyframes kdw-topfood-bloom { 0%, 6.1% { filter: grayscale(1) } 9.76%, 100% { filter: grayscale(0) } }

/* 「視差効果を減らす」設定の閲覧者には表紙だけを静止表示 */
@media (prefers-reduced-motion: reduce) {
  .kdw-topfood, .kdw-topfood * { animation: none !important; }
}