/* 試食コム — 全体デザイン。色は :root の変数だけで変えられる */
:root{
  --shk-red:#FF4B3E;--shk-yellow:#FFC93C;--shk-mint:#18B7A5;--shk-grape:#7B2FF7;--shk-pink:#FF7EB6;
  --shk-ink:#2B1B17;--shk-cream:#FFF6E5;--shk-white:#fff;--shk-line:#2B1B17;
  --shk-r:18px;--shk-shadow:5px 5px 0 var(--shk-ink);
}
html{scroll-behavior:smooth}
body{background:var(--shk-cream);color:var(--shk-ink);font-family:"Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",system-ui,sans-serif;line-height:1.85;overflow-x:hidden}
.wp-site-blocks{padding:0!important}
.wp-site-blocks>main,.wp-site-blocks>main.wp-block-group{margin:0!important;padding:0!important;max-width:none!important}
main .wp-block-post-content,.wp-block-post-content.alignfull{margin:0!important;padding:0!important;max-width:none!important}
main .wp-block-post-content>*{max-width:none!important;margin-left:0!important;margin-right:0!important}
main .alignfull{margin-left:0!important;margin-right:0!important}
.wp-site-blocks>*+*{margin-block-start:0!important}
.shk a{color:inherit}
.shk-wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.shk-sec{padding:44px 0}
.shk h1,.shk h2,.shk h3{line-height:1.35;margin:0 0 .6em;letter-spacing:.01em}
.shk h2.shk-h2{font-size:clamp(1.5rem,4.6vw,2.1rem);display:inline-block;background:var(--shk-yellow);border:3px solid var(--shk-ink);border-radius:14px;padding:.15em .7em;box-shadow:4px 4px 0 var(--shk-ink);transform:rotate(-1.2deg);margin-bottom:.9em}
.shk p{margin:0 0 1em}
.shk-small{font-size:.86rem;opacity:.85}
/* ヘッダー・フッター */
.shk-header{background:var(--shk-white);border-bottom:4px solid var(--shk-ink);position:sticky;top:0;z-index:50}
.shk-header .shk-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding-top:8px;padding-bottom:8px}
.shk-brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:900;font-size:1.45rem;color:var(--shk-ink)}
.shk-brand img{width:40px;height:40px;animation:shk-wob 4s ease-in-out infinite}
.shk-brand small{display:block;font-size:.62rem;font-weight:700;letter-spacing:.08em;color:var(--shk-red)}
.shk-nav{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.shk-nav a{text-decoration:none;font-weight:800;font-size:.9rem;padding:.3em .85em;border:2.5px solid var(--shk-ink);border-radius:999px;background:var(--shk-white);transition:transform .15s,background .15s}
.shk-nav a:hover,.shk-nav a:focus-visible{background:var(--shk-yellow);transform:translateY(-2px) rotate(-2deg)}
.shk-footer{background:var(--shk-ink);color:#fff;padding:36px 0 28px;margin-top:0}
.shk-footer a{color:#FFE08A}
.shk-footer .shk-cols{display:flex;flex-wrap:wrap;gap:20px 40px}
.shk-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.shk-footer .shk-copy{font-size:.8rem;opacity:.8;margin-top:18px}
/* ヒーロー */
.shk-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#FF4B3E 0%,#FF8A3D 45%,#FFC93C 100%);border-bottom:4px solid var(--shk-ink);padding:54px 0 70px;color:#fff}
.shk-hero .shk-wrap{position:relative;z-index:2}
.shk-hero h1{font-size:clamp(2.1rem,8vw,4rem);font-weight:900;color:#fff;text-shadow:3px 3px 0 var(--shk-ink);margin:0 0 .3em}
.shk-hero .shk-lead{font-size:clamp(1.05rem,3.4vw,1.35rem);font-weight:800;text-shadow:2px 2px 0 rgba(43,27,23,.55);max-width:34em}
.shk-badge{display:inline-block;background:var(--shk-white);color:var(--shk-ink);border:3px solid var(--shk-ink);border-radius:999px;padding:.1em .9em;font-weight:900;font-size:.9rem;box-shadow:3px 3px 0 var(--shk-ink);transform:rotate(-2deg);margin-bottom:12px}
.shk-float{position:absolute;font-size:clamp(2rem,7vw,3.6rem);z-index:1;animation:shk-float 6s ease-in-out infinite;filter:drop-shadow(3px 3px 0 rgba(43,27,23,.35));user-select:none}
.shk-float:nth-of-type(2n){animation-duration:7.5s;animation-delay:-2s}
.shk-float:nth-of-type(3n){animation-duration:5s;animation-delay:-1s}
.shk-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.shk-btn{display:inline-block;background:var(--shk-white);color:var(--shk-ink)!important;border:3px solid var(--shk-ink);border-radius:999px;padding:.55em 1.5em;font-weight:900;font-size:1.05rem;text-decoration:none!important;box-shadow:4px 4px 0 var(--shk-ink);cursor:pointer;transition:transform .12s,box-shadow .12s;font-family:inherit}
.shk-btn:hover,.shk-btn:focus-visible{transform:translate(-2px,-2px) rotate(-1deg);box-shadow:7px 7px 0 var(--shk-ink)}
.shk-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--shk-ink)}
.shk-btn-red{background:var(--shk-red);color:#fff!important}
.shk-btn-mint{background:var(--shk-mint);color:#fff!important}
.shk-btn-grape{background:var(--shk-grape);color:#fff!important}
/* ティッカー */
.shk-ticker{background:var(--shk-ink);color:var(--shk-yellow);overflow:hidden;white-space:nowrap;font-weight:900;padding:.5em 0;border-bottom:4px solid var(--shk-ink)}
.shk-ticker span{display:inline-block;padding-left:100%;animation:shk-marq 30s linear infinite}
/* ページ見出し帯 */
.shk-pagehead{padding:40px 0 34px;border-bottom:4px solid var(--shk-ink);color:#fff;background:linear-gradient(120deg,var(--shk-grape),var(--shk-pink))}
.shk-pagehead.shk-mint{background:linear-gradient(120deg,#0E9E8E,#6BE3C1)}
.shk-pagehead.shk-yellow{background:linear-gradient(120deg,#FF9A3D,#FFC93C);color:var(--shk-ink)}
.shk-pagehead.shk-red{background:linear-gradient(120deg,#FF4B3E,#FF7EB6)}
.shk-pagehead h1{font-size:clamp(1.8rem,6vw,2.8rem);font-weight:900;margin:0 0 .2em;text-shadow:2px 2px 0 rgba(43,27,23,.45)}
.shk-pagehead.shk-yellow h1{text-shadow:none}
.shk-pagehead p{margin:0;font-weight:700}
/* カード */
.shk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.shk-card{background:var(--shk-white);border:3px solid var(--shk-ink);border-radius:var(--shk-r);box-shadow:var(--shk-shadow);padding:18px 18px 14px;transition:transform .18s;position:relative}
.shk-card:hover{transform:translate(-2px,-4px) rotate(-.6deg)}
.shk-card h3{font-size:1.15rem}
.shk-card .shk-ico{font-size:2.4rem;display:block;line-height:1;margin-bottom:8px}
a.shk-card{display:block;text-decoration:none}
.shk-tag{display:inline-block;font-size:.76rem;font-weight:900;border:2px solid var(--shk-ink);border-radius:999px;padding:0 .7em;background:var(--shk-yellow);margin-bottom:6px}
.shk-tag-news{background:var(--shk-mint);color:#fff}
.shk-tag-edit{background:var(--shk-grape);color:#fff}
.shk-tag-report{background:var(--shk-red);color:#fff}
.shk-tag-prompt{background:var(--shk-pink)}
.shk-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;text-align:center}
.shk-stats div{background:var(--shk-white);border:3px solid var(--shk-ink);border-radius:var(--shk-r);padding:12px 6px;box-shadow:4px 4px 0 var(--shk-ink)}
.shk-stats b{display:block;font-size:2rem;color:var(--shk-red);line-height:1.2}
.shk-band{background:var(--shk-yellow);border-top:4px solid var(--shk-ink);border-bottom:4px solid var(--shk-ink)}
.shk-band-mint{background:#C9F5EC}
.shk-notice{background:#FFF;border:3px dashed var(--shk-ink);border-radius:var(--shk-r);padding:14px 18px;font-size:.92rem}
.shk-steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:14px}
.shk-steps li{counter-increment:s;background:#fff;border:3px solid var(--shk-ink);border-radius:var(--shk-r);padding:12px 16px 12px 62px;position:relative;box-shadow:4px 4px 0 var(--shk-ink)}
.shk-steps li:before{content:counter(s);position:absolute;left:12px;top:50%;transform:translateY(-50%) rotate(-6deg);width:38px;height:38px;border-radius:50%;background:var(--shk-red);color:#fff;font-weight:900;display:grid;place-items:center;border:3px solid var(--shk-ink)}
/* ルーレット */
.shk-rou{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:center}
.shk-wheelbox{position:relative;width:min(340px,86vw);aspect-ratio:1}
.shk-wheel{width:100%;height:100%;border-radius:50%;border:5px solid var(--shk-ink);position:relative;transition:transform 4.2s cubic-bezier(.12,.72,.12,1);box-shadow:var(--shk-shadow);background:conic-gradient(#FF4B3E 0 45deg,#FFC93C 0 90deg,#18B7A5 0 135deg,#FF7EB6 0 180deg,#7B2FF7 0 225deg,#FF9A3D 0 270deg,#6BC5FF 0 315deg,#9BE564 0 360deg)}
.shk-wheel i{position:absolute;left:50%;top:50%;width:0;height:0;font-style:normal;font-size:clamp(1.5rem,6vw,2.1rem);filter:drop-shadow(1px 1px 0 rgba(255,255,255,.7))}
.shk-wheel i span{position:absolute;left:-.6em;top:-3.5em;transform-origin:.6em 3.5em}
.shk-pin{position:absolute;left:50%;top:-14px;transform:translateX(-50%);font-size:2.2rem;z-index:3;filter:drop-shadow(2px 2px 0 var(--shk-ink))}
.shk-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;background:#fff;border:4px solid var(--shk-ink);font-weight:900;cursor:pointer;z-index:2;font-family:inherit;font-size:1rem;color:var(--shk-red)}
.shk-hub:hover{background:var(--shk-yellow)}
.shk-result{min-width:260px;max-width:420px;flex:1}
.shk-result .shk-card{min-height:170px}
.shk-pop{animation:shk-pop .5s cubic-bezier(.2,1.6,.4,1)}
/* 診断 */
.shk-q{display:none}
.shk-q.on{display:block;animation:shk-pop .35s}
.shk-q h3{font-size:1.25rem}
.shk-opt{display:block;width:100%;text-align:left;background:#fff;border:3px solid var(--shk-ink);border-radius:14px;padding:.7em 1em;margin:0 0 10px;font-weight:800;font-size:1rem;cursor:pointer;font-family:inherit;color:var(--shk-ink);box-shadow:3px 3px 0 var(--shk-ink);transition:transform .1s,background .1s}
.shk-opt:hover,.shk-opt:focus-visible{background:var(--shk-yellow);transform:translateX(4px)}
.shk-bar{height:14px;border:3px solid var(--shk-ink);border-radius:999px;background:#fff;overflow:hidden;margin-bottom:16px}
.shk-bar b{display:block;height:100%;width:0;background:var(--shk-red);transition:width .3s}
/* スタンプ */
.shk-stamps{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}
.shk-stamp{background:#fff;border:3px dashed var(--shk-ink);border-radius:var(--shk-r);padding:10px 4px;text-align:center;font-weight:800;font-size:.86rem;cursor:pointer;font-family:inherit;color:var(--shk-ink);transition:transform .15s}
.shk-stamp span{display:block;font-size:2rem;filter:grayscale(1);opacity:.35;transition:all .25s}
.shk-stamp[aria-pressed="true"]{border-style:solid;background:var(--shk-yellow);transform:rotate(-3deg)}
.shk-stamp[aria-pressed="true"] span{filter:none;opacity:1;transform:scale(1.15)}
.shk-confetti{position:fixed;inset:0;pointer-events:none;z-index:99;overflow:hidden}
.shk-confetti b{position:absolute;top:-10%;font-size:1.8rem;animation:shk-fall 2.8s ease-in forwards}
/* フォーム */
.shk-form{background:#fff;border:3px solid var(--shk-ink);border-radius:var(--shk-r);box-shadow:var(--shk-shadow);padding:20px}
.shk-field{border:0;margin:0 0 18px;padding:0}
.shk-field legend,.shk-field>label:first-child{font-weight:900;display:block;margin-bottom:6px}
.shk-field input[type=text],.shk-field input[type=email],.shk-field textarea,.shk-field select{width:100%;box-sizing:border-box;border:3px solid var(--shk-ink);border-radius:12px;padding:.6em .8em;font:inherit;background:#FFFDF7}
.shk-opt2{display:inline-flex;gap:6px;align-items:center;margin:0 14px 6px 0;font-weight:700}
.shk-req{background:var(--shk-red);color:#fff;border-radius:6px;font-size:.7rem;padding:0 .5em;margin-left:4px}
.shk-hint{font-size:.85rem;opacity:.8;margin:0 0 6px}
.shk-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.shk-status{font-weight:800;margin-top:10px}
.shk-star{font-size:1.9rem;cursor:pointer;background:none;border:0;padding:0 2px;filter:grayscale(1);opacity:.5}
.shk-star.on{filter:none;opacity:1}
/* 運営者 */
.shk-op{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.shk-op figure{margin:0;flex:0 0 auto;width:min(300px,100%)}
.shk-op img{width:100%;height:auto;border:3px solid var(--shk-ink);border-radius:var(--shk-r);box-shadow:var(--shk-shadow)}
.shk-op figcaption{font-size:.8rem;margin-top:6px}
.shk-op>div{flex:1;min-width:230px}
.shk-prose{max-width:760px}
.shk-prose h2{font-size:1.4rem;border-left:8px solid var(--shk-red);padding-left:.6em;margin-top:1.8em}
.shk-prose h3{font-size:1.1rem;margin-top:1.4em}
.shk-prose li{margin-bottom:.4em}
.shk-label{display:inline-block;font-weight:900;font-size:.8rem;border:2px solid var(--shk-ink);border-radius:999px;padding:0 .8em;background:var(--shk-mint);color:#fff}
.shk-label-edit{background:var(--shk-grape)}
/* 動き */
@keyframes shk-float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-18px) rotate(8deg)}}
@keyframes shk-wob{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes shk-marq{to{transform:translateX(-100%)}}
@keyframes shk-pop{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes shk-fall{to{transform:translateY(115vh) rotate(540deg)}}
.shk-rv{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .6s}
.shk-rv.in{opacity:1;transform:none}
.no-js .shk-rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .shk-rv{opacity:1;transform:none}
  .shk-ticker span{padding-left:0}
}
@media (max-width:600px){
  .shk-header{position:static}
  .shk-nav{margin-left:0}
  .shk-nav a{font-size:.82rem;padding:.25em .65em}
  .shk-sec{padding:32px 0}
}
/* TT5 の外側グループの余白を消す（ヒーロー・帯を端まで広げるため） */
main .wp-block-group.has-global-padding,main .wp-block-group.alignfull{padding:0!important;margin-top:0!important;margin-bottom:0!important}
main.wp-block-group{gap:0!important}
.wp-block-post-content.has-global-padding{padding:0!important}
.wp-site-blocks>footer,.wp-site-blocks>header{margin:0!important}
.shk-float{pointer-events:none}
