*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);overflow-x:clip}img{display:block;width:100%;height:100%;object-fit:cover}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}.demo{position:fixed;z-index:99;left:12px;bottom:12px;display:flex;gap:12px;align-items:center;padding:9px 13px;border:1px solid currentColor;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);font:600 12px/1 var(--body);letter-spacing:.08em;border-radius:999px}.demo a{text-decoration:underline}.skip{position:fixed;left:8px;top:-80px;z-index:120;background:#fff;color:#000;padding:10px}.skip:focus{top:8px}.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase}.arrow::after{content:" ↗"}:focus-visible{outline:3px solid #4f8cff;outline-offset:4px}.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}.reveal.seen{opacity:1;transform:none}@media(max-width:720px){.demo{left:8px;bottom:8px;max-width:calc(100vw - 16px);font-size:12px}.desktop{display:none!important}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none!important}}
:root{--bg:#f8f4e8;--ink:#163c30;--body:"Zen Maru Gothic","Yu Gothic",sans-serif;--serif:"Shippori Mincho",serif}.mio-head{height:72px;position:fixed;z-index:20;inset:0 0 auto;background:#f8f4e8e8;backdrop-filter:blur(10px);display:flex;align-items:center;padding:0 3vw;font-size:12px}.mio-head>a:first-child{font-weight:900;font-size:18px}.mio-head nav{margin:auto;display:flex;gap:28px}.mio-head>a:last-child{border:1px solid;border-radius:999px;padding:10px 20px}.mosaic-hero{padding:120px 4vw 60px;min-height:100svh;display:grid;grid-template-columns:42% 58%;gap:3vw}.anchor{position:sticky;top:120px;align-self:start;padding-top:8vh}.anchor h1{font-size:clamp(54px,7vw,96px);line-height:1.05;letter-spacing:-.04em}.anchor>p:last-of-type{max-width:410px;line-height:2}.anchor>a{display:inline-block;margin-top:30px;border-bottom:1px solid}.tiles{height:760px;display:grid;grid-template:repeat(8,1fr)/repeat(8,1fr);gap:12px}.tiles>*{margin:0;border-radius:28px;overflow:hidden;padding:24px}.t1{grid-area:1/1/5/5}.t2{grid-area:1/5/3/7;background:#ef735c}.t3{grid-area:1/7/4/9;background:#bdd166;border-radius:50%}.t4{grid-area:3/5/6/7;background:#ffcf4c;display:flex;flex-direction:column;justify-content:space-between}.t5{grid-area:4/7/7/9}.t5 img{transform:scale(1.8);filter:hue-rotate(70deg)}.t6{grid-area:5/1/8/5;background:#b9d9d1;font:600 26px/1.5 var(--serif)}.t7{grid-area:7/5/9/9;background:#1c493c}.word{font:900 34px/1 var(--body)}.formula{padding:15vh 5vw;display:grid;grid-template-columns:42% 1fr;gap:5vw;background:#dfefe5}.formula-anchor{position:sticky;top:120px;align-self:start}figure{margin:0}.formula-shot{margin-top:clamp(22px,3vw,38px);aspect-ratio:1;border-radius:24px;overflow:hidden}.ritual-shot{grid-column:1/-1;justify-self:center;width:100%;max-width:900px;margin-top:clamp(26px,4vw,46px);aspect-ratio:3/2;border-radius:24px;overflow:hidden}.formula h2,.ritual h2,.shop h2{font:700 clamp(44px,6vw,84px)/1.15 var(--body)}.formula-list article{padding:50px 0;border-top:1px solid;display:grid;grid-template-columns:70px 1fr 1fr;gap:24px}.formula-list h3{font-size:26px;margin:0}.formula-list p{line-height:1.9;margin:0}.ritual{padding:13vh 5vw;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;gap:5vw}.orb{aspect-ratio:1;border-radius:50%;background:#b7d7cf;display:grid;place-items:center;font-size:50px}.coral{background:#ef735c;text-align:center}.coral small{font-size:12px}.journal{display:grid;grid-template-columns:1fr 1fr}.journal article{min-height:60vh;padding:6vw;display:flex;flex-direction:column;justify-content:flex-end;background:#ffcf4c}.journal article+article{background:#ef735c}.journal h3{font:700 clamp(34px,4vw,56px)/1.3 var(--body)}.shop{min-height:75vh;padding:9vw;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.shop a{border:1px solid;border-radius:999px;padding:18px 28px}footer{background:#173c31;color:#fff;padding:35px 4vw;display:grid;grid-template-columns:1fr 1fr auto;font-size:12px}@media(max-width:720px){.mio-head nav{display:none}.mosaic-hero{grid-template-columns:1fr;padding:100px 16px 50px}.anchor{position:relative;top:0;padding:0}.anchor h1{font-size:54px}.tiles{height:620px}.tiles>*{border-radius:18px;padding:14px}.t6{font-size:18px}.formula{grid-template-columns:1fr;padding:90px 20px}.formula-anchor{position:relative;top:0}.formula-list article{grid-template-columns:45px 1fr}.formula-list p{grid-column:2}.ritual{grid-template-columns:90px 1fr;padding:80px 20px}.ritual .coral{grid-column:2;width:100px}.journal{grid-template-columns:1fr}.journal article{min-height:480px}footer{grid-template-columns:1fr;gap:10px}}
@media(max-width:900px){.formula{grid-template-columns:1fr}.formula-anchor{position:relative;top:0}.formula-list article{grid-template-columns:45px 1fr}.formula-list p{grid-column:2}}

/*HEADFIX-20260811*/.mio-head{justify-content:space-between;gap:16px}.mio-head>*{min-width:0}.mio-head button,.mio-head>a:last-child{flex:0 0 auto;white-space:nowrap}/*/HEADFIX-20260811*/

/*HEADING-LEADING-20260811 ── 見出しの行間の是正(オーナー指示 2026-08-11「標準的な行間に。空けすぎないこと」)。
  対象 = **実測で 2 行以上に折り返し、行間が 1.06 未満、かつ日本語を含む**見出しだけ。
  日本語は文字が全角の枠いっぱいなので 1.00 = 行と行が接する。1.00〜1.05 は実質接している。
  1.06 以上は既に隙間が見えており標準域なので触らない(= 空けすぎない)。
  欧文だけの見出しも触らない(枠いっぱいという理屈が当てはまらず、実測で他の部品と重なった)。
  セレクタは実際に描画された要素から機械で取った全長パス。共有 shared-quality.css が
  site.css の**後**に読まれて `!important` で勝つため、短いセレクタでは当たらない。
  生成 = apply_heading_leading_20260811.py / 確認 = scan_all_headings_20260811.cjs --tag after
  1.05 → 1.25 / 2行 / 肌は、毎日ちがっていい。
*/
html body div#main main section.mosaic-hero div.anchor h1{line-height:1.25!important}
/*/HEADING-LEADING-20260811*/

/* ══ MOTION-20260820 ═══════════════════════════════════════════════════════
   動的演出の追加(オーナー指示 2026-08-20「モーショングラフィックスを仕掛ける
   題材が揃っているので、デザイナーとして自律的にブラッシュアップして」)。

   ★守っている制約 4 つ。緩めないこと。
   (1) スクロール演出で opacity を 0 にしない。
       公開品質ゲート(browser_quality_gate.cjs)の visible() は祖先を遡って
       opacity<=0 の要素を検査から丸ごと外す。ゲートはページをスクロールしないので、
       .reveal{opacity:0} を入れると折り返しから下が**未検査のまま critical 0** になる。
       持ち上げは transform、覆い隠しは clip-path(こちらは visible() が見ていない)で作る。
       → 下の .reveal は opacity:1 に戻している(1 行目の共通定義を後勝ちで打ち消す)。
   (2) 触ったときだけ動く演出は @media(hover:hover) で囲む。
       囲まないとスマホで :hover が居座り、タップした帯が止まったままになる。
   (3) 連続アニメーションは translate / scale / rotate / border-radius だけを使い、
       transform は「入場」専用にする。同じプロパティに animation と transition を
       同時に載せると、触った瞬間に瞬間移動する。
   (4) 同じ塊の中の兄弟をずらして動かさない(見出しと本文の隙間が一瞬詰まって
       spacing 検査が本当に赤くなる)。ずらすのは塊どうしだけ。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 共通: 入場 ───────────────────────────────────────────────────────── */
.reveal{opacity:1;transform:translateY(28px);
  transition:transform .95s cubic-bezier(.22,.68,.24,1) var(--d,0s),clip-path .95s cubic-bezier(.22,.68,.24,1) var(--d,0s)}
.reveal.seen{transform:none}
.reveal-wipe{clip-path:inset(-18px -18px 100% -18px)}
.reveal-wipe.seen{clip-path:inset(-18px)}
.formula-list article:nth-child(2){--d:.10s}
.formula-list article:nth-child(3){--d:.20s}
.journal article+article{--d:.12s}
video{display:block;width:100%;height:100%;object-fit:cover}

/* ── ヘッダー: 読み進み具合の線(擬似要素なので DOM 検査には出てこない)── */
.mio-head::after{content:"";position:absolute;left:0;bottom:0;height:3px;
  width:calc(var(--sp,0) * 100%);background:linear-gradient(90deg,#b9d9d1,#bdd166 45%,#ef735c);
  transition:width .14s linear}

/* ── ヒーロー: 見出しの塊とタイルが順に立ち上がる ─────────────────────── */
.js .anchor>*{transform:translateY(26px);transition:transform 1s cubic-bezier(.22,.68,.24,1)}
.js .mosaic-hero.in .anchor>*{transform:none}
.js .tiles>*{transform:translateY(38px);transition:transform 1s cubic-bezier(.22,.68,.24,1) var(--td,0s)}
.js .tiles.in>*{transform:none}
.tiles>:nth-child(1){--td:.10s}
.tiles>:nth-child(2){--td:.17s}
.tiles>:nth-child(3){--td:.24s}
.tiles>:nth-child(4){--td:.31s}
.tiles>:nth-child(5){--td:.38s}
.tiles>:nth-child(6){--td:.45s}
.tiles>:nth-child(7){--td:.52s}

.t1 img{object-position:92% 50%;animation:kenBurns 26s ease-in-out infinite alternate}
@keyframes kenBurns{from{scale:1}to{scale:1.09}}

.t2.word{animation:tileBreath 7.5s ease-in-out infinite alternate}
@keyframes tileBreath{from{scale:1}to{scale:1.018}}

.t3.blob{animation:blobMorph 17s ease-in-out infinite}
@keyframes blobMorph{
  0%,100%{border-radius:50% 50% 50% 50% / 50% 50% 50% 50%}
  25%{border-radius:63% 37% 45% 55% / 46% 59% 41% 54%}
  50%{border-radius:43% 57% 62% 38% / 59% 43% 57% 41%}
  75%{border-radius:56% 44% 37% 63% / 39% 52% 48% 61%}
}

.t4{position:relative}
.t4::after{content:"";position:absolute;right:-46px;top:-46px;width:152px;height:152px;
  border-radius:50%;border:1px dashed #163c3055;animation:slowSpin 28s linear infinite}
@keyframes slowSpin{to{rotate:360deg}}

.t5 img{animation:texDrift 32s ease-in-out infinite alternate}
@keyframes texDrift{from{rotate:0deg;scale:1}to{rotate:9deg;scale:1.12}}

.t6{background:linear-gradient(135deg,#b9d9d1,#d3e7e1 45%,#b9d9d1);background-size:230% 230%;
  animation:tideShift 19s ease-in-out infinite alternate}
@keyframes tideShift{from{background-position:0% 50%}to{background-position:100% 50%}}

/* 空いていた濃緑タイルに、ブランドの主役(一滴)を落とす */
.t7{position:relative;display:flex;align-items:flex-end;color:#eef4ee}
.t7 small{font-size:12px;line-height:1.7;letter-spacing:.16em}
.t7 .drops{position:absolute;inset:0;--fall:150px;pointer-events:none}
.t7 .drops i{position:absolute;top:-16px;width:11px;height:15px;background:#bdd166;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;animation:dropFall 4.6s cubic-bezier(.45,0,.75,.4) infinite}
.t7 .drops i:nth-child(1){left:26%}
.t7 .drops i:nth-child(2){left:53%;background:#b9d9d1;animation-delay:1.5s}
.t7 .drops i:nth-child(3){left:79%;background:#ffcf4c;animation-delay:3s}
@keyframes dropFall{
  0%{translate:0 0;scale:1 1;opacity:0}
  9%{opacity:1}
  58%{translate:0 var(--fall);scale:1 1;opacity:1}
  72%{translate:0 var(--fall);scale:1.9 .34;opacity:.75}
  88%{translate:0 var(--fall);scale:3 .1;opacity:0}
  100%{translate:0 var(--fall);scale:3 .1;opacity:0}
}

/* ── 処方: 読んでいる行が主役になる ───────────────────────────────────── */
.formula-list article{position:relative}
.formula-list article:nth-child(1){--tone:#3f8f83}
.formula-list article:nth-child(2){--tone:#b8801a}
.formula-list article:nth-child(3){--tone:#d0533a}
.formula-list article::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;
  background:var(--tone,#163c30);transition:width .9s cubic-bezier(.22,.68,.24,1)}
.formula-list article.on::before{width:100%}
.formula-list b{display:flex;align-items:center;gap:9px;transition:color .5s ease}
.formula-list article.on b{color:var(--tone,#163c30)}
.formula-list b::before{content:"";width:9px;height:9px;flex:0 0 auto;border-radius:50%;
  background:currentColor;scale:0;transition:scale .55s cubic-bezier(.3,1.5,.4,1)}
.formula-list article.on b::before{scale:1}
.formula-shot{position:relative;background:#cfe3d7}
.fshot{position:absolute;inset:0;opacity:0;scale:1.05;transition:opacity .85s ease,scale 1.8s ease}
.fshot.on{opacity:1;scale:1}

/* ── 成分の帯(新設)─────────────────────────────────────────────────── */
.field{background:#163c30;color:#f4f1e6;padding:13vh 0 0;overflow:hidden}
.field-head{padding:0 5vw;max-width:1460px;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,5vw,76px);align-items:end}
.field-head h2{font:700 clamp(30px,4.4vw,54px)/1.24 var(--body);margin:22px 0 0;letter-spacing:-.02em}
.field-head>p{max-width:46ch;margin:0;line-height:2;color:#f4f1e6cc}
.ticker{overflow:hidden;margin-top:clamp(44px,6vw,78px);padding-bottom:clamp(44px,6vw,78px)}
.tick-row{display:flex;width:max-content;animation:tickLeft 46s linear infinite}
.tick-row+.tick-row{margin-top:26px;animation:tickRight 62s linear infinite}
.tick-track{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);padding-right:clamp(18px,2.4vw,34px)}
.tick-track span{white-space:nowrap;font:600 clamp(21px,2.7vw,40px)/1.25 var(--serif);letter-spacing:.05em}
.tick-track em{flex:0 0 auto;width:10px;height:14px;background:#bdd166;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%}
.tick-track img{flex:0 0 auto;width:clamp(64px,7vw,106px);height:clamp(64px,7vw,106px);border-radius:50%}
@keyframes tickLeft{from{translate:0}to{translate:-50%}}
@keyframes tickRight{from{translate:-50%}to{translate:0}}

/* ── 使い方: 一滴が落ち、90 秒が数え上がる ──────────────────────────── */
.ritual-shot{position:relative;max-width:1060px;background:#efe6da}
.ritual>.orb:first-child{animation:orbFloat 6.5s ease-in-out infinite alternate}
@keyframes orbFloat{from{translate:0 -11px}to{translate:0 13px}}
.orb.coral{position:relative;overflow:visible}
.orb-ring{position:absolute;left:-13px;top:-13px;width:calc(100% + 26px);height:calc(100% + 26px);rotate:-90deg}
.orb-ring circle{fill:none;stroke:#163c30;stroke-width:1.5;opacity:.4;
  stroke-dasharray:302;stroke-dashoffset:302;transition:stroke-dashoffset 1.8s cubic-bezier(.22,.68,.24,1)}
.orb.coral.on .orb-ring circle{stroke-dashoffset:0}
.orb .cnt{font-variant-numeric:tabular-nums}
.ritual-copy .tri{display:flex;gap:17px;height:28px;margin-top:32px;align-items:flex-start}
.ritual-copy .tri i{width:11px;height:15px;background:#ef735c;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;animation:triDrop 3.8s ease-in infinite}
.ritual-copy .tri i:nth-child(2){background:#ffcf4c;animation-delay:.55s}
.ritual-copy .tri i:nth-child(3){background:#b9d9d1;animation-delay:1.1s}
@keyframes triDrop{
  0%{translate:0 -15px;scale:1 1;opacity:0}
  13%{opacity:1}
  54%{translate:0 7px;scale:1 1;opacity:1}
  70%{translate:0 9px;scale:1.8 .38;opacity:.7}
  86%{translate:0 9px;scale:2.7 .1;opacity:0}
  100%{translate:0 9px;scale:2.7 .1;opacity:0}
}

/* ── 今日の肌を選ぶ(新設)───────────────────────────────────────────── */
.today{padding:14vh 5vw;background:var(--tbg,#e7eee7);transition:background-color 1s ease}
.today-head{max-width:820px}
.today-head h2{font:700 clamp(38px,5.2vw,70px)/1.18 var(--body);margin:22px 0 0;letter-spacing:-.03em}
.today-lead{margin:20px 0 0;max-width:42ch;line-height:2}
.today-pick{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.today-pick button{min-height:48px;padding:13px 24px;border:1px solid #163c30;border-radius:999px;
  background:transparent;font:600 15px/1 var(--body);letter-spacing:.04em;cursor:pointer;
  transition:background-color .4s ease,color .4s ease,translate .35s ease}
.today-pick button[aria-pressed="true"]{background:#163c30;color:#f8f4e8}
.today-panel{margin-top:clamp(42px,6vw,74px);padding:clamp(24px,3.2vw,48px);border-radius:34px;
  max-width:1180px;background:#f8f4e8;display:grid;
  grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(28px,4vw,66px);align-items:center}
.today-art{position:relative;aspect-ratio:1;overflow:hidden;background:#dfe9e0;
  animation:blobMorph 21s ease-in-out infinite}
.tshot{position:absolute;inset:0;opacity:0;scale:1.06;transition:opacity .85s ease,scale 1.8s ease}
.tshot.on{opacity:1;scale:1}
.today-say{display:flex;flex-direction:column;gap:16px}
.today-num{font:700 clamp(56px,7vw,112px)/1 var(--body);color:var(--tone,#3f8f83);
  letter-spacing:-.03em;transition:color .8s ease}
.today-name{font:700 clamp(28px,3.4vw,46px)/1.2 var(--body);margin:0;letter-spacing:.01em}
.today-text{margin:0;max-width:42ch;line-height:2}
.today-note{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#163c3099}

/* ── 読みもの / SHOP ─────────────────────────────────────────────────── */
.journal article{position:relative;transition:background-color .55s ease}
.journal article>*{transition:translate .55s cubic-bezier(.22,.68,.24,1)}
.journal article::after{content:"";position:absolute;left:6vw;right:6vw;bottom:calc(6vw - 16px);
  height:2px;background:currentColor;scale:0 1;transform-origin:left;
  transition:scale .7s cubic-bezier(.22,.68,.24,1)}
.shop{position:relative}
.shop::before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(64vw,620px);aspect-ratio:1;background:#b9d9d1;opacity:.4;
  animation:blobMorph 24s ease-in-out infinite}
.shop>*{position:relative;z-index:1}
.shop-drop{display:block;width:13px;height:18px;margin:0 auto 30px;background:#ef735c;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;animation:triDrop 3.6s ease-in infinite}
.shop a{background:linear-gradient(#163c30,#163c30) no-repeat left center/0% 100%;
  transition:background-size .55s cubic-bezier(.22,.68,.24,1),color .45s ease}

/* ── 触ったときだけの演出(スマホで居座らせない)───────────────────── */
@media(hover:hover){
  .ticker:hover .tick-row{animation-play-state:paused}
  .today-pick button:hover{translate:0 -3px}
  .journal article:hover{background:#ffd868}
  .journal article+article:hover{background:#f2836e}
  .journal article:hover>*{translate:0 -10px}
  .journal article:hover::after{scale:1 1}
  .shop a:hover{background-size:100% 100%;color:#f8f4e8}
  .mio-head nav a{background:linear-gradient(currentColor,currentColor) no-repeat left bottom/0 1px;
    transition:background-size .4s cubic-bezier(.22,.68,.24,1)}
  .mio-head nav a:hover{background-size:100% 1px}
}

@media(max-width:1100px){
  .today-panel{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
}
@media(max-width:900px){
  .field-head{grid-template-columns:1fr;gap:24px;align-items:start}
  .today-panel{grid-template-columns:1fr}
  .today-art{max-width:440px;width:100%}
}
@media(max-width:720px){
  .t7 .drops{--fall:118px}
  .t7 small{letter-spacing:.12em}
  .field{padding-top:90px}
  .field-head{padding-inline:20px}
  .tick-row+.tick-row{margin-top:18px}
  .ritual-copy .tri{margin-top:24px;gap:14px}
  .orb-ring{left:-9px;top:-9px;width:calc(100% + 18px);height:calc(100% + 18px)}
  .today{padding:90px 20px}
  .today-panel{border-radius:26px}
  .journal article::after{left:6vw;right:6vw;bottom:calc(6vw - 10px)}
}
/*/MOTION-20260820*/