@charset "UTF-8";
/* ==========================================================
   食と栄養 TOP（/f/top-food）メイン画像モーション
   設置先: https://www.kodawari-net.com/img/css/top-food-motion.css
   接頭辞: kdw-topfood__
   パソコン: 1000×600（5:3）／ スマホ（幅600px以下）: 正方形
   約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;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  container-type: inline-size;
  container-name: kdw-topfood;
}
/* 画面幅に合わせて全体を縮小（横長は1000基準：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__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background: var(--ground);
  color: var(--ink);
  border-radius: 6px;
  font-family: var(--f-body);
  line-height: 1.5;
  text-align: left;
}

.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; padding: 0 calc(30 * var(--u)); }
.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(12 * 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(17 * var(--u)); font-weight: 500; text-align: center; line-height: 1.4; color: var(--ink); }
.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; }

/* ==========================================================
   スマホ（幅600px以下）：正方形・600基準で組み直し
   見出しを上、写真を下に積む。小さな補足文は表示しない
   ========================================================== */
@container kdw-topfood (max-width: 600px) {
  .kdw-topfood__stage { aspect-ratio: 1 / 1; --u: calc(100cqw / 600); }

  /* 表紙：タイトルを上、写真（大1＋小2）を下 */
  .kdw-topfood__covhead { left: calc(40 * var(--u)); right: calc(40 * var(--u)); top: calc(36 * var(--u)); bottom: auto; width: auto; gap: calc(14 * var(--u)); justify-content: flex-start; }
  .kdw-topfood__covtitle { font-size: calc(46 * var(--u)); line-height: 1.35; }
  .kdw-topfood__brw { display: none; }
  .kdw-topfood__covlist { display: none; }
  .kdw-topfood__collage { left: calc(40 * var(--u)); right: calc(40 * var(--u)); top: calc(196 * var(--u)); bottom: calc(40 * var(--u)); width: auto; height: auto; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: calc(10 * var(--u)); }
  .kdw-topfood__tile:nth-child(n+4) { display: none; }

  .kdw-topfood__circlebg--center { left: calc(75 * var(--u)); top: calc(75 * var(--u)); width: calc(450 * var(--u)); height: calc(450 * var(--u)); }
  .kdw-topfood__circlebg--corner { right: calc(-180 * var(--u)); top: calc(-180 * var(--u)); width: calc(520 * var(--u)); height: calc(520 * var(--u)); }

  /* テーマ：見出しを上、丸写真3つを下 */
  .kdw-topfood__head { left: calc(40 * var(--u)); right: calc(40 * var(--u)); top: calc(44 * var(--u)); bottom: auto; width: auto; gap: calc(12 * var(--u)); justify-content: flex-start; }
  .kdw-topfood__num { font-size: calc(20 * var(--u)); }
  .kdw-topfood__lead { display: none; }
  .kdw-topfood__items { left: calc(24 * var(--u)); right: calc(24 * var(--u)); top: calc(262 * var(--u)); bottom: auto; gap: calc(16 * var(--u)); align-items: flex-start; }
  .kdw-topfood__item { width: calc(170 * var(--u)); }
  .kdw-topfood__name { font-size: calc(23 * var(--u)); }
  .kdw-topfood__dots { bottom: calc(28 * var(--u)); gap: calc(12 * var(--u)); }
  .kdw-topfood__dots span { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
  .kdw-topfood__drop { left: calc(288 * var(--u)); top: calc(325 * var(--u)); }
  .kdw-topfood__ripple { left: calc(220 * var(--u)); top: calc(330 * var(--u)); }

  /* 締め */
  .kdw-topfood__chip { font-size: calc(21 * var(--u)); padding: calc(8 * var(--u)) calc(14 * var(--u)); }
  .kdw-topfood__chip i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
  .kdw-topfood__closer { font-size: calc(38 * var(--u)); margin-bottom: 0; }
  .kdw-topfood__since { display: none; }
}

/* ==========================================================
   動き：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; }
}