/* ============================================================
   Patanto トップ（顔）専用スタイル  v4

   このファイルはデザイン原則（site.css の禁止事項）の対象外。
   判定ページは道具、トップは顔。顔は世界として描く。

   世界：台所。食洗機の中で、洗われるものたちが浮かんでいる。
   画づくりの参考：眼鏡市場「まだ老眼じゃないポータル」（空に浮かぶ小物、
   中央の看板、帯ごとに変わる地の色、最初に診断）／Coffee City Fes（顔のある
   マスコット、ステッカーの硬い影）／みずほ「空想金融教室」（世界の中に文字）。

   道具（判定ページ）とは正反対の作法を、意図的に使う：
     角丸・硬い影・ステッカーの輪郭・大きな丸ゴシック・地の色の切り替え。
   ============================================================ */

:root{
  --sky:#FFF3DF;      /* 台所の朝の空 */
  --milk:#FBF5EC;     /* 牛乳 */
  --blue:#D6EBF2;     /* 泡と水 */
  --yellow:#FBE9B3;   /* スポンジの黄 */
  --cream:#FFF9F0;
  --white:#FFFFFF;
  --ink:#3B2314;      /* 焦げ茶。輪郭と文字 */
  --ink-2:#6B4A36;
  --ink-3:#9A8474;
  --brown:#A8431B;    /* Patantoの茶 */
  --brown-d:#7E3113;
  --ok:#1E8A4C;
  --ng:#D64533;
  --unk:#9A8F83;
  --disp:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Rounded Mplus 1c",sans-serif;
  --body:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic Medium",Meiryo,sans-serif;
  --r:22px;
  --line:2.5px solid var(--ink);
  --shadow:5px 5px 0 var(--ink);
}

*{box-sizing:border-box}
html.home{color-scheme:light;background:var(--sky)}
body.home{
  margin:0;background:var(--sky);color:var(--ink);
  font-family:var(--body);font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--brown-d)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:10;background:var(--ink);color:var(--cream);padding:8px 14px}
.art{display:block;width:100%;height:auto}
.pc{display:none}

/* ---------------- ボタン・バッジ・チップ（ステッカー） ---------------- */
.btn{
  display:inline-block;font:700 15px/1 var(--disp);letter-spacing:.04em;
  background:var(--brown);color:var(--cream);text-decoration:none;cursor:pointer;
  border:var(--line);border-radius:999px;padding:13px 22px;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s ease,box-shadow .12s ease,background-color .15s ease;
}
.btn:hover{background:var(--brown-d)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn:focus-visible{outline:3px solid var(--brown);outline-offset:3px}
.btn.wide{padding-left:34px;padding-right:34px}
.btn.ghost{background:var(--white);color:var(--ink-3);box-shadow:none;cursor:default}
.link{font-weight:700;color:var(--brown-d);text-decoration:underline;text-underline-offset:3px}

.badge{
  display:inline-flex;align-items:center;gap:4px;font:700 12.5px/1 var(--disp);letter-spacing:.04em;
  color:var(--white);border:2px solid var(--ink);border-radius:999px;padding:6px 12px;
}
.badge i{font-style:normal;font-size:14px}
.badge.ok{background:var(--ok)}
.badge.ng{background:var(--ng)}
.badge.cond{background:#C98A1F}
.badge.unk{background:var(--unk)}

.chip{
  font:700 13px/1 var(--disp);color:var(--ink);background:var(--white);cursor:pointer;
  border:2px solid var(--ink);border-radius:999px;padding:8px 13px;
  transition:background-color .15s ease,color .15s ease;
}
.chip.on,.chip[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.chip:focus-visible{outline:3px solid var(--brown);outline-offset:2px}

/* ---------------- ヘッダー ---------------- */
.hd{
  position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px 0;max-width:1120px;margin:0 auto;flex-wrap:wrap;
}
.hd-logo{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink)}
.hd-logo b{font:900 26px/1 var(--disp);letter-spacing:.01em}
.hd-logo span{font:700 12px/1 var(--disp);color:var(--ink-2)}
.hd-nav{display:flex;gap:6px;flex-wrap:wrap}
.hd-nav a{
  font:700 12.5px/1 var(--disp);color:var(--ink);text-decoration:none;
  background:var(--white);border:2px solid var(--ink);border-radius:999px;padding:7px 12px;
}
.hd-nav a:hover{background:var(--ink);color:var(--cream)}

/* ---------------- ヒーロー：空 ---------------- */
.sky{position:relative;overflow:hidden;padding:118px 16px 0;text-align:center}
.sky-items{position:absolute;inset:0;pointer-events:none;z-index:0}
.fl{position:absolute;display:block}
.fl .art{width:100%}

/* 小物の配置（スマホ）。看板の上の空と、看板の脇の隙間に置く */
.fl-cloud1{left:-6%;top:6px;width:104px}
.fl-cloud2{right:-8%;top:44px;width:120px}
.fl-bottle1{left:14%;top:14px;width:52px}
.fl-mug{right:22%;top:30px;width:64px}
.fl-plate{left:-8%;top:52%;width:70px}
.fl-lid{right:-4%;top:60%;width:60px}
.fl-bottle2{left:44%;top:0;width:30px;transform:rotate(14deg)}
.fl-ok{left:33%;top:70px;width:36px;transform:rotate(-12deg)}
.fl-ng{right:6%;top:24px;width:32px;transform:rotate(10deg)}
.fl-bub1{left:60%;top:84px;width:18px}
.fl-bub2{right:44%;top:8px;width:14px}
.fl-bub3{left:8%;top:44%;width:12px}
.fl-steam{left:74%;top:0;width:18px}

.board{
  position:relative;z-index:1;display:inline-block;text-align:center;
  background:var(--white);border:var(--line);border-radius:28px;box-shadow:6px 6px 0 var(--ink);
  padding:20px 22px 22px;margin:0 auto;max-width:560px;
}
.board-kicker{
  display:inline-block;margin:0 0 10px;font:700 12px/1 var(--disp);letter-spacing:.08em;
  background:var(--brown);color:var(--cream);border-radius:999px;padding:6px 12px;
}
.board-h{
  margin:0;padding:0;border:0;font:900 clamp(38px,10.5vw,74px)/1.12 var(--disp);letter-spacing:-.01em;color:var(--ink);
}
.board-sub{margin:14px 0 0;font-size:13.5px;line-height:1.85;color:var(--ink-2)}

.sky-search{position:relative;z-index:1;max-width:480px;margin:22px auto 0;text-align:left}
.sky-search label{display:block;font:700 13px/1 var(--disp);margin:0 0 8px 12px;color:var(--ink)}
.sky-search-row{
  display:flex;background:var(--white);border:var(--line);border-radius:999px;
  box-shadow:4px 4px 0 var(--ink);overflow:hidden;
}
.sky-search input{
  flex:1 1 auto;min-width:0;border:0;background:transparent;color:var(--ink);
  font:700 17px var(--disp);padding:14px 18px;
}
.sky-search input::placeholder{color:var(--ink-3);font-weight:700}
.sky-search input:focus{outline:none}
.sky-search-row:focus-within{outline:3px solid var(--brown);outline-offset:3px}
.sky-search button{
  flex:none;font:700 15px var(--disp);letter-spacing:.06em;cursor:pointer;
  background:var(--brown);color:var(--cream);border:0;border-left:var(--line);padding:0 20px;
}
.sky-search button:hover{background:var(--brown-d)}
.sky-hint{margin:10px 0 0 12px;font-size:12px;color:var(--ink-2)}
.sky-hint a{color:var(--brown-d)}

/* 棚：画面の下に、洗われたものが並ぶ（眼鏡市場の並木の引用） */
.shelf{
  position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:2%;
  height:96px;margin:30px -16px 0;padding:0 6%;border-bottom:4px solid var(--ink);overflow:hidden;
}
.sh{display:block;flex:0 0 auto}
.sh .art{width:auto;height:70px}
.sh:nth-child(2n) .art{height:52px}
.sh:nth-child(4) .art,.sh:nth-child(8) .art{height:58px}
.sh:nth-child(n+7){display:none}

/* ---------------- ティッカー ---------------- */
.ticker{background:var(--brown);color:var(--cream);overflow:hidden;border-bottom:var(--line)}
.ticker-run{display:flex;white-space:nowrap;width:max-content;padding:9px 0;font:700 13px/1 var(--disp);letter-spacing:.12em}
.ticker-run span{padding:0 6px}
.ticker-run i{font-style:normal;padding:0 12px;opacity:.85}

/* ---------------- 帯 ---------------- */
.band{padding:40px 16px 48px}
.band-mat{background:var(--blue)}
/* ---------------- 帯1：素材でわかること ---------------- */
.band-lede{max-width:640px;margin:0 auto 22px;text-align:center;font-size:14px;line-height:1.9;color:var(--ink-2)}
.mats{list-style:none;display:grid;gap:12px;max-width:1040px;margin:0 auto;padding:0}
.mat{
  background:var(--white);border:var(--line);border-radius:var(--r);
  padding:16px 18px 14px;box-shadow:var(--shadow);
}
.mat-v{margin:0 0 8px}
.mat-h{margin:0;font:900 clamp(20px,4.6vw,24px)/1.3 var(--disp);letter-spacing:.02em}
.mat-ex{margin:2px 0 8px;font-size:12.5px;color:var(--ink-3)}
.mat-note{margin:0 0 10px;font-size:13.5px;line-height:1.85;color:var(--ink-2)}
.mat-src{margin:0;font-size:11.5px;line-height:1.7;color:var(--ink-3)}
.mat-src a{color:var(--ink-3)}
.mat-ok{border-color:var(--ok);box-shadow:5px 5px 0 var(--ok)}
.mat-ng{border-color:var(--ng);box-shadow:5px 5px 0 var(--ng)}
.mat-after{
  max-width:640px;margin:22px auto 0;background:var(--cream);
  border:var(--line);border-radius:var(--r);padding:18px 20px 20px;box-shadow:var(--shadow);
}
.mat-after-h{margin:0 0 10px;font:900 18px/1.4 var(--disp)}
.mat-after p{margin:0 0 10px;font-size:13.5px;line-height:1.9;color:var(--ink-2)}
.mat-cta{margin:14px 0 0 !important;text-align:center}

.band-db{background:var(--yellow);border-top:var(--line);border-bottom:var(--line)}
.band-story{background:var(--milk)}
.band-h{
  margin:0 0 22px;text-align:center;font:900 clamp(22px,6vw,34px)/1.3 var(--disp);letter-spacing:.01em;
  position:relative;padding-bottom:12px;
}
.band-h::after{
  content:"";display:block;width:56px;height:6px;border-radius:999px;background:var(--brown);margin:10px auto 0;
}

/* ---------------- カード（ステッカー） ---------------- */
.cards{display:grid;gap:14px;max-width:1040px;margin:0 auto}
.cards.grid{grid-template-columns:1fr 1fr;gap:12px}
.card{
  position:relative;background:var(--white);border:var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:18px 12px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:transform .15s ease,box-shadow .15s ease;
}
.card-kicker{margin:0;font:700 11.5px/1.5 var(--disp);color:var(--ink-2)}
.card-kicker .cap{margin-left:6px;background:var(--milk);border-radius:6px;padding:1px 6px;color:var(--ink)}
.card-title{margin:0;font:900 clamp(19px,5.4vw,28px)/1.25 var(--disp);color:var(--ink);letter-spacing:.01em}
.card-title.big{font-size:clamp(21px,6vw,32px)}
.card-title.mono{font-variant-numeric:tabular-nums;letter-spacing:.03em;font-size:clamp(20px,5.6vw,26px)}
.card-sub{margin:0;font-size:12px;color:var(--ink-2)}
.card-art{display:flex;align-items:flex-end;justify-content:center;gap:8px;height:104px;margin:6px 0 8px}
.card-art .art{width:auto;height:100%}
.card-art.two .art{height:86px}
.card-art.two b{font:900 34px/1 var(--disp);color:var(--brown);align-self:center}
.card .btn{width:100%;padding-left:8px;padding-right:8px;font-size:14px;margin-top:auto}
.card .badge{margin:2px 0 8px}

/* ---------------- 品番の帯 ---------------- */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 18px;max-width:720px}
.card-item{padding-top:16px}
.card-item .card-art{height:92px;margin:2px 0 6px}
.card-item.is-unk .card-art{opacity:.55}
.card-item.is-unk .card-title{color:var(--ink-3)}
.card-item[hidden]{display:none}
.empty{text-align:center;font:700 14px var(--disp);color:var(--ink-2);margin:8px 0 0}
.more{text-align:center;margin:22px 0 0}

.card-howto{
  max-width:760px;margin:30px auto 0;text-align:left;flex-direction:row;align-items:flex-start;gap:16px;padding:18px 16px;
  background:var(--cream);
}
.howto-art{flex:none;width:64px;position:relative;padding-top:6px}
.howto-art .tag{
  position:absolute;left:38px;bottom:2px;white-space:nowrap;font:700 10.5px/1.25 var(--disp);
  background:var(--brown);color:var(--cream);border-radius:8px;padding:4px 7px;border:2px solid var(--ink);
}
.card-howto .card-title{font-size:18px;margin:0 0 6px}
.howto-steps{margin:0;padding-left:1.4em;font-size:13px;line-height:1.8;color:var(--ink-2)}
.howto-steps li{margin-bottom:4px}
.howto-steps li::marker{color:var(--brown);font-weight:900;font-family:var(--disp)}
.howto-note{margin:8px 0 0;font-size:12.5px;line-height:1.7;background:var(--yellow);border-radius:12px;padding:8px 12px;color:var(--ink)}

/* ---------------- 物語の帯 ---------------- */
.story{max-width:900px;margin:0 auto;display:grid;gap:18px}
.story-art{position:relative;max-width:300px;margin:0 auto}
.story-art .patan{position:absolute;right:-14px;top:-10px;width:96px;transform:rotate(8deg)}
.story-text{display:grid;gap:12px}
.bubble{
  position:relative;margin:0;background:var(--white);border:var(--line);border-radius:18px;padding:13px 16px;
  font-size:14px;line-height:1.85;color:var(--ink-2);
}
.bubble b{color:var(--ink)}
.bubble::before{
  content:"";position:absolute;left:26px;top:-11px;width:16px;height:16px;background:var(--white);
  border-left:var(--line);border-top:var(--line);transform:rotate(45deg);
}
.bubble:first-child::before{display:none}
.story-more{margin:2px 0 0 6px;font-size:14px}
.origin{
  max-width:520px;margin:32px auto 0;text-align:center;background:var(--yellow);border:var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:18px 18px 20px;
}
.origin-h{margin:0 0 8px;font:900 22px/1.3 var(--disp)}
.origin p{margin:0;font-size:14px;line-height:1.85}

/* ---------------- フッター ---------------- */
.ft{background:var(--ink);color:var(--cream);padding:34px 16px 56px;text-align:center}
.ft-logo{margin:0 0 14px;display:flex;flex-direction:column;align-items:center;gap:4px}
.ft-logo b{font:900 28px/1 var(--disp)}
.ft-logo span{font:700 12px/1 var(--disp);opacity:.8}
.ft-links{margin:0 0 16px;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 16px;font-size:13px}
.ft-links a{color:var(--cream)}
.ft-note{margin:0 auto 12px;max-width:640px;font-size:11.5px;line-height:1.8;opacity:.8}
.ft-copy{margin:0;font-size:12px;opacity:.7}

/* ---------------- 動き ---------------- */
.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.js [data-reveal].in{opacity:1;transform:none}

@media (prefers-reduced-motion:no-preference){
  .fl{animation:bob 5.5s ease-in-out infinite}
  .fl-cloud1{animation-duration:9s}
  .fl-cloud2{animation-duration:11s;animation-delay:-3s}
  .fl-bottle1{animation-delay:-1.2s}
  .fl-mug{animation-delay:-2.6s;animation-duration:6.5s}
  .fl-plate{animation-delay:-.8s;animation-duration:7s}
  .fl-lid{animation-delay:-3.4s}
  .fl-ok{animation-delay:-2s;animation-duration:4.8s}
  .fl-ng{animation-delay:-1s;animation-duration:5.2s}
  .fl-bub1,.fl-bub2,.fl-bub3{animation:rise 7s linear infinite}
  .fl-bub2{animation-delay:-2.5s}
  .fl-bub3{animation-delay:-5s}
  .fl-steam{animation:sway 4s ease-in-out infinite}
  .ticker-run{animation:marquee 26s linear infinite}
  .board{animation:drop .7s cubic-bezier(.3,1.3,.5,1) both}
  .sky-search{animation:drop .7s cubic-bezier(.3,1.3,.5,1) .12s both}
  .js [data-reveal].in .card{animation:pop .55s cubic-bezier(.3,1.3,.5,1) both}
  .js [data-reveal].in .card:nth-child(2){animation-delay:.08s}
  .js [data-reveal].in .card:nth-child(3){animation-delay:.16s}
  .js [data-reveal].in .card:nth-child(4){animation-delay:.24s}
  .js [data-reveal].in .card:nth-child(n+5){animation-delay:.3s}
  .js [data-reveal].in .story-art .patan{animation:stamp .5s cubic-bezier(.3,1.6,.5,1) .5s both}
  .fl .face,.card-art .face{animation:blink 5s steps(1) infinite}
}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes rise{0%{translate:0 10px;opacity:0}15%{opacity:1}85%{opacity:1}100%{translate:0 -60px;opacity:0}}
@keyframes sway{0%,100%{translate:0 0;rotate:-4deg}50%{translate:0 -6px;rotate:4deg}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}
@keyframes drop{from{opacity:0;transform:translateY(-14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes stamp{from{opacity:0;transform:rotate(8deg) scale(.4)}to{opacity:1;transform:rotate(8deg) scale(1)}}
@keyframes blink{0%,92%,100%{opacity:1}94%,98%{opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------------- 広い画面 ---------------- */
@media (min-width:640px){
  .cards.grid{grid-template-columns:repeat(3,1fr);gap:16px}
    .card{padding:22px 18px 20px}
  .sh:nth-child(n+7){display:block}
  .shelf{height:120px}
  .sh .art{height:92px}
  .sh:nth-child(2n) .art{height:68px}
  .sh:nth-child(4) .art,.sh:nth-child(8) .art{height:76px}
  .story{grid-template-columns:300px 1fr;align-items:start}
  .story-art{margin:0}
  .card-howto{gap:24px}
  .howto-art{width:80px}
  .howto-art .tag{left:48px}
}
@media (min-width:900px){
  .pc{display:inline}
  .hd{padding-top:18px}
  .sky{padding-top:60px}
  .board{padding:26px 40px 28px;max-width:620px}
  .fl-cloud1{left:3%;top:6%;width:130px;transform:none}
  .fl-cloud2{right:4%;top:12%;width:150px}
  .fl-bottle1{left:12%;top:30%;width:86px}
  .fl-mug{right:10%;top:34%;width:110px}
  .fl-plate{left:4%;top:60%;width:120px}
  .fl-lid{right:6%;top:64%;width:96px}
  .fl-bottle2{left:auto;right:26%;top:4%;width:50px}
  .fl-ok{left:22%;top:10%;width:56px}
  .fl-ng{right:20%;top:78%;width:50px}
  .fl-bub1{left:28%;top:66%;width:30px}
  .fl-bub2{right:22%;top:26%;width:22px}
  .fl-bub3{left:16%;top:48%;width:18px}
  .fl-steam{left:47%;top:2%;width:26px}
  .cards.grid{grid-template-columns:repeat(4,1fr)}
  .band{padding:56px 24px 64px}
  .quiz{padding:26px 28px}
  .quiz-point{margin:18px -28px -26px}
  .quiz-cards{grid-template-columns:1fr 1fr}
}