/* GOOD CYCLE FES イベントページ v1（2026-10-06）：フードドライブ 専用 */
/* フードドライブ */
.art{--pt:112px;position:relative;justify-self:center;width:min(100%,440px);padding-top:var(--pt)}
.items{position:absolute;left:6%;right:6%;top:0;height:calc(var(--pt) + 16px);display:flex;justify-content:center;align-items:flex-end;gap:8px;z-index:1}
.it{display:grid;place-items:start center;flex:none;width:76px;height:104px;padding:12px 6px 8px;border:var(--bd);border-radius:12px;font-weight:900;font-size:14px;line-height:1.3;text-align:center;box-shadow:3px 4px 0 var(--ink)}
.it:nth-child(1){background:var(--white);rotate:-12deg;translate:4px 22px}
.it:nth-child(2){background:var(--mint);rotate:-4deg;translate:0 6px;height:118px}
.it:nth-child(3){background:var(--paper-2);rotate:3deg}
.it:nth-child(4){background:var(--white);rotate:9deg;translate:0 10px;height:112px}
.it:nth-child(5){background:var(--mint);rotate:15deg;translate:-4px 26px}
.boxb{position:relative;z-index:2;background:var(--green-deep);color:var(--white);border:var(--bd);border-radius:6px 6px 22px 22px;box-shadow:var(--sh);padding:30px 24px 30px;text-align:center;display:grid;gap:6px;justify-items:center}
.boxb::before{content:"";position:absolute;left:-2.5px;right:-2.5px;top:-20px;height:22px;background:var(--green);border:var(--bd);border-bottom:0;border-radius:8px 8px 0 0}
.boxb .en{font-family:var(--f-en);font-weight:900;font-size:12px;letter-spacing:.3em}
.boxb b{font-weight:900;font-size:clamp(24px,2.6vw,30px);line-height:1.3}
.boxb small{font-size:13px;font-weight:700}
.boxb .heart{width:46px;height:46px;border-radius:50%;background:var(--paper);color:var(--green-deep);display:grid;place-items:center;font-size:24px;margin-bottom:4px}
.seal{position:absolute;right:-6%;top:58px;z-index:3;width:132px;aspect-ratio:1;border-radius:50%;background:var(--yellow);border:var(--bd);box-shadow:3px 4px 0 var(--ink);rotate:10deg;display:grid;place-content:center;text-align:center;font-weight:900;line-height:1.15;animation:wob 4s ease-in-out infinite}
.seal small{font-size:13px}
.seal b{font-size:24px}
.seal span{font-family:var(--f-en);font-size:30px;letter-spacing:-.02em}
@keyframes wob{0%,100%{rotate:10deg}50%{rotate:3deg}}
.c-ichika{position:absolute;left:-11%;bottom:-24px;z-index:4;width:146px;rotate:-4deg}

.r3{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.r3 li{position:relative;background:var(--white);border:var(--bd);border-radius:18px;box-shadow:var(--sh);padding:26px 24px 22px;display:grid;gap:8px;align-content:start}
.r3-n{font-family:var(--f-en);font-weight:900;font-size:44px;line-height:.9;color:var(--green);letter-spacing:-.03em}
.r3 b{font-weight:900;font-size:clamp(22px,2.3vw,28px);line-height:1.35}
.r3 small{font-size:14px;color:var(--gray);line-height:1.6}
.r3 .okm{position:absolute;right:18px;top:18px;width:44px;height:44px;border-radius:50%;background:var(--green-deep);color:var(--white);display:grid;place-items:center;font-size:22px}

.exp{margin-top:34px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);border:var(--bd);border-radius:20px;background:var(--white);box-shadow:var(--sh);overflow:hidden}
.exp-l{padding:clamp(20px,3vw,32px);background:var(--ink);color:var(--paper);display:grid;gap:14px;align-content:start}
.exp-l .lb{font-family:var(--f-en);font-weight:800;font-size:12px;letter-spacing:.3em;color:var(--mint-txt)}
.exp-l b{font-size:22px;font-weight:900;line-height:1.45}
.exp-l p{font-size:14px;color:#D6D9D2}
.days{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.day{min-height:48px;padding:0 18px;border:2px solid var(--paper);border-radius:999px;background:transparent;color:var(--paper);font-family:var(--f-ja);font-weight:900;font-size:15px;cursor:pointer}
.day.on{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.exp-r{padding:clamp(20px,3vw,32px);display:grid;gap:16px;align-content:center}
.ans{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-weight:900;font-size:17px}
.ans b{font-family:var(--f-en);font-size:clamp(28px,3.4vw,42px);color:var(--green-deep);line-height:1.1;letter-spacing:-.01em}
.tlb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:40px;border:2px solid var(--ink);border-radius:999px;overflow:hidden;font-size:13px;font-weight:900}
.tlb span{display:flex;align-items:center;justify-content:center;gap:6px}
.tlb .ng{background:repeating-linear-gradient(-45deg,#E9E8E1 0 8px,#F6F5F0 8px 16px);color:var(--gray)}
.tlb .ok{background:var(--green-pale);color:var(--green-deep);border-left:2px solid var(--ink)}
.tll{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);font-size:12.5px;font-weight:700;color:var(--gray);margin-top:-8px}
.tll span:nth-child(2){color:var(--green-deep);font-weight:900}
.tll span:nth-child(3){text-align:right}

.steps{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.steps li{position:relative;background:var(--white);border:var(--bd);border-radius:18px;padding:22px;box-shadow:var(--sh);display:grid;gap:10px;align-content:start}
.steps li:not(:last-child)::after{content:"";position:absolute;right:-24px;top:50%;width:13px;height:13px;border-top:3px solid var(--ink);border-right:3px solid var(--ink);rotate:45deg;translate:0 -50%}
.st-n{display:flex;align-items:center;gap:12px;font-family:var(--f-en);font-weight:800;font-size:12px;letter-spacing:.24em;color:var(--green-deep)}
.st-n b{width:46px;height:46px;border-radius:50%;background:var(--green-deep);color:var(--white);display:grid;place-items:center;font-size:20px;letter-spacing:0;font-weight:900}
.st-ic{position:absolute;right:20px;top:20px;width:52px;height:52px;border-radius:14px;background:var(--green-pale);color:var(--green-deep);display:grid;place-items:center;font-size:28px}
.steps h3{font-size:20px;font-weight:900;line-height:1.45}
.steps p{font-size:14px;color:var(--gray);line-height:1.7}
.bonus{margin-top:34px;background:var(--green-deep);color:var(--paper);border:var(--bd);border-radius:20px;box-shadow:var(--sh);padding:clamp(20px,3vw,32px);display:grid;gap:20px}
.bonus-h{display:flex;align-items:center;gap:16px;font-weight:900;font-size:clamp(18px,2vw,23px);line-height:1.5}
.plus1{flex:none;width:66px;height:66px;border-radius:50%;background:var(--yellow);color:var(--ink);border:var(--bd);display:grid;place-items:center;font-family:var(--f-en);font-weight:900;font-size:23px;rotate:-8deg}
.fx{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:center}
.fx-c{background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:14px;padding:14px 12px;text-align:center;display:grid;gap:2px}
.fx-c small{font-size:12.5px;font-weight:700;color:var(--gray)}
.fx-c b{font-size:17px;font-weight:900;line-height:1.45}
.fx-c.max{background:var(--yellow)}
.fx-c.max small{color:var(--ink)}
.fx-op{font-family:var(--f-en);font-weight:900;font-size:28px;line-height:1;text-align:center}
.bonus ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px;font-weight:700}
.bonus li{display:flex;align-items:center;gap:6px}
.bonus li .ic{color:var(--yellow)}
.hand{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:22px;font-weight:700;font-size:15px}
.hand b{background:var(--white);border:2px solid var(--ink);border-radius:999px;padding:4px 14px;font-size:14px}

.upd{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;border:1.5px solid var(--green-deep);color:var(--green-deep);border-radius:999px;padding:3px 12px;background:var(--white)}
.quiz-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:14px;margin:clamp(36px,5vw,52px) 0 20px}
.quiz-head h3{font-weight:900;font-size:clamp(22px,2.6vw,30px);line-height:1.4}
.quiz-head p{font-size:14px;color:var(--gray)}
.qh-l{display:flex;align-items:flex-end;gap:14px}
.c-moguta{flex:none;width:78px;margin-bottom:-4px}
.qbtns{display:flex;gap:10px}
.qbtns button{min-height:44px;background:var(--white);border:2px solid var(--ink);border-radius:999px;padding:0 18px;font-weight:900;font-size:14px;cursor:pointer;font-family:var(--f-ja);color:var(--ink)}
.fcs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 22px;padding:6px 6px 10px}
.fc{position:relative;display:block;border:0;background:none;padding:0;cursor:pointer;aspect-ratio:5/6;perspective:1000px;font-family:var(--f-ja);color:var(--ink);rotate:-1.4deg;transition:rotate .25s,translate .25s}
.fc:nth-child(even){rotate:1.3deg}
.fc:nth-child(3n){rotate:-.5deg}
.fc:hover{rotate:0deg;translate:0 -5px}
.fc-in{position:relative;display:block;width:100%;height:100%;transition:transform .6s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
.fc.open .fc-in{transform:rotateY(180deg)}
.fc-f,.fc-b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:var(--bd);border-radius:14px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:8px;padding:14px 14px 12px;text-align:center;line-height:1.4;overflow:hidden;box-shadow:4px 5px 0 var(--ink)}
.fc-f{background:var(--white)}
.fc-top{display:flex;justify-content:space-between;align-items:center;width:100%;font-family:var(--f-en);font-weight:800;font-size:11px;letter-spacing:.14em}
.fc-q{background:var(--green-deep);color:var(--white);padding:2px 9px;border-radius:999px}
.fc-mid{display:grid;gap:6px;justify-items:center}
.fc-name{font-weight:900;font-size:clamp(18px,1.9vw,23px);line-height:1.35}
.fc-ask{font-size:13px;font-weight:700;color:var(--green-deep);background:var(--green-pale);border-radius:999px;padding:2px 10px}
.fc-tap{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--gray)}
.fc-b{transform:rotateY(180deg)}
.fc-b.ok{background:var(--green-deep);color:var(--white)}
.fc-b.ng{background:var(--ink);color:var(--paper)}
.fc-b .fc-q{background:var(--paper);color:var(--ink)}
.mark{display:grid;place-items:center;width:clamp(60px,6vw,74px);aspect-ratio:1;border:4px solid currentColor;border-radius:50%;font-family:var(--f-en);font-weight:900;font-size:clamp(19px,2vw,23px);letter-spacing:.06em;rotate:-12deg}
.fc-b.ng .mark{color:var(--yellow)}
.fc-b b{font-weight:900;font-size:17px}
.fc-b small{font-size:12.5px;line-height:1.6;padding-inline:2px}
.lists{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;margin-top:48px;align-items:start}
.lst{background:var(--white);border:var(--bd);border-radius:18px;overflow:hidden;box-shadow:var(--sh)}
.lst-h{display:flex;align-items:center;gap:12px;padding:14px 20px;font-weight:900;font-size:19px}
.lst.ok .lst-h{background:var(--green-deep);color:var(--white)}
.lst.ng .lst-h{background:var(--ink);color:var(--paper)}
.lst-h .mk{width:34px;height:34px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-size:18px}
.lst.ok .mk{color:var(--green-deep)}
.lst.ng .mk{color:var(--shu)}
.lst-b{padding:18px 20px 22px}
.cond{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;font-weight:900;margin-bottom:14px}
.cond span{display:inline-flex;align-items:center;gap:6px}
.cond i{font-style:normal;font-family:var(--f-en);width:22px;height:22px;border-radius:50%;background:var(--green-deep);color:var(--white);display:grid;place-items:center;font-size:11px}
.ngl{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
.ngl li{display:flex;gap:8px;align-items:flex-start;font-size:14px;font-weight:700;line-height:1.55}
.ngl .ic{color:var(--shu);margin-top:3px}
.tips-h{font-weight:900;font-size:20px;margin:44px 0 14px}
.tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tip{background:var(--paper-2);border:2px solid var(--ink);border-radius:14px;padding:16px 18px;display:grid;gap:4px;align-content:start}
.tip small{font-size:12px;font-weight:900;color:var(--green-deep);letter-spacing:.04em}
.tip b{font-size:16px;font-weight:900;line-height:1.5}
.tip p{font-size:14px;color:var(--gray);line-height:1.65}
.sale{display:flex;gap:12px;align-items:center;margin-top:22px;background:var(--white);border:2px dashed var(--green-deep);border-radius:14px;padding:14px 18px;font-weight:700;font-size:15px}
.sale .ic{font-size:24px;color:var(--green-deep)}

.ck-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,48px);align-items:start;margin-top:36px}
.memo{position:relative;background:var(--white);border:var(--bd);border-radius:6px;box-shadow:var(--sh);padding:36px clamp(18px,3vw,32px) 22px}
.memo::before{content:"";position:absolute;top:-14px;left:50%;width:110px;height:28px;margin-left:-55px;background:var(--mint);border:1.5px solid var(--ink);rotate:-3deg}
.memo-t{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;font-weight:900;font-size:18px;margin-bottom:6px}
.memo-t button{min-height:40px;background:none;border:1.5px solid var(--ink);border-radius:999px;padding:0 14px;font-weight:700;font-size:13px;cursor:pointer;font-family:var(--f-ja);color:var(--ink)}
.ck{display:flex;align-items:center;gap:14px;min-height:54px;padding:6px 4px;border-bottom:1.5px dashed var(--rule);cursor:pointer;font-weight:700;font-size:16px;line-height:1.5}
.ck input{appearance:none;-webkit-appearance:none;flex:none;width:28px;height:28px;border:2.5px solid var(--ink);border-radius:8px;background:var(--white);display:grid;place-items:center;margin:0;cursor:pointer}
.ck input:checked{background:var(--green-deep);border-color:var(--green-deep)}
.ck input:checked::after{content:"";width:12px;height:7px;border-left:3px solid #fff;border-bottom:3px solid #fff;rotate:-45deg;translate:0 -2px}
.ck.on .t{background:linear-gradient(transparent 60%,var(--yellow) 60%)}
.res{position:sticky;top:100px;background:var(--ink);color:var(--paper);border:var(--bd);border-radius:20px;box-shadow:6px 7px 0 var(--green);padding:clamp(22px,3vw,30px);display:grid;gap:14px}
.res .lb{font-family:var(--f-en);font-weight:800;font-size:12px;letter-spacing:.3em;color:var(--mint-txt)}
.num{display:flex;align-items:baseline;gap:8px;font-weight:900;font-size:20px}
.num b{font-family:var(--f-en);font-size:76px;line-height:1;color:var(--yellow);letter-spacing:-.03em}
.res p{font-size:15px;font-weight:700;line-height:1.75}
.res .where{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:#D6D9D2}
.res .where .ic{margin-top:4px;color:var(--mint-txt)}
.res .ngs{font-size:13px;color:#C9CCC4;border-top:1.5px dashed #4A4D46;padding-top:12px;line-height:1.7}

.goes-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 28px;align-items:end}
.c-happachi{width:148px;margin-bottom:-8px}
.lanes{display:grid;gap:22px;margin-top:36px}
.lane{background:var(--white);border:var(--bd);border-radius:20px;padding:clamp(18px,2.6vw,26px);box-shadow:var(--sh)}
.lane-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:18px}
.lane-h .tag{font-size:13px;font-weight:900;background:var(--green-deep);color:var(--white);border-radius:999px;padding:4px 14px}
.lane.co .tag{background:var(--ink);color:var(--paper)}
.lane-h b{font-size:19px;font-weight:900}
.lane-h small{font-size:13px;color:var(--gray);font-weight:700}
.flow{display:flex;align-items:stretch;list-style:none;padding:0;margin:0}
.flow li{flex:1 1 0;min-width:0;position:relative;background:var(--paper-2);border:2px solid var(--ink);border-radius:14px;padding:14px 14px 12px;display:grid;gap:2px;align-content:start}
.flow li + li{margin-left:38px}
.flow li + li::before{content:"";position:absolute;left:-27px;top:50%;width:14px;height:14px;border-top:3px solid var(--ink);border-right:3px solid var(--ink);rotate:45deg;translate:0 -50%}
.flow .when{font-family:var(--f-en);font-weight:900;font-size:13px;color:var(--green-deep);letter-spacing:.02em}
.flow b{font-size:16px;font-weight:900;line-height:1.45}
.flow small{font-size:13px;color:var(--gray);line-height:1.55}
.flow li.fb{background:var(--green-pale);border-color:var(--green-deep);border-width:2.5px}
.cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}
.cmp div{border:2px solid var(--ink);border-radius:14px;padding:14px 18px;background:var(--white)}
.cmp small{display:block;font-size:12.5px;font-weight:900;color:var(--green-deep)}
.cmp b{font-size:16px;font-weight:900}
.cmp p{font-size:13px;color:var(--gray)}
.co-band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:center;background:var(--paper-2);border:var(--bd);border-radius:22px;padding:clamp(22px,3.4vw,40px);margin-top:34px}
.co-band h3{font-weight:900;font-size:clamp(20px,2.4vw,27px);line-height:1.45;margin:8px 0 8px}
.co-band p{color:var(--gray);font-size:15px;max-width:36em}
.co-btns{display:grid;gap:12px}
.about-cta{margin-top:26px}

@media (max-width:960px){
  .art{width:min(100%,380px);margin-top:8px}
  .exp,.ck-grid,.lists{grid-template-columns:minmax(0,1fr)}
  .res{position:static}
  .tips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fcs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .co-band{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .r3,.steps,.cmp,.tips,.ngl{grid-template-columns:minmax(0,1fr)}
  .steps{gap:36px}
  .steps li:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-25px;rotate:135deg;translate:-50% 0}
  .fx{grid-template-columns:minmax(0,1fr)}
  .fcs{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px;padding:4px 2px 8px}
  .fc{aspect-ratio:4/5}
  .flow{flex-direction:column}
  .flow li + li{margin-left:0;margin-top:34px}
  .flow li + li::before{left:50%;top:-25px;rotate:135deg;translate:-50% 0}
}
@media (max-width:560px){
  .art{--pt:100px;width:100%}
  .boxb::before{top:-14px;height:16px}
  .it{width:58px;height:86px;font-size:12.5px}
  .it:nth-child(1){translate:4px 10px}
  .it:nth-child(2){height:96px}
  .it:nth-child(4){height:92px}
  .it:nth-child(5){translate:-4px 12px}
  .seal{width:104px;right:-2%;top:46px}
  .seal b{font-size:20px}
  .seal span{font-size:24px}
  .c-ichika{width:84px;left:-4%;bottom:-14px}
  .c-moguta{width:60px}
  .goes-head{grid-template-columns:minmax(0,1fr) 92px;gap:8px 12px}
  .c-happachi{width:92px}
  .fc-f,.fc-b{padding:12px 10px 10px}
  .fc-name{font-size:17px}
  .fc-ask{font-size:12px}
  .fc-b small{font-size:12px}
  .mark{width:54px;font-size:17px}
  .num b{font-size:64px}
  .co-btns .btn{width:100%}
}

/* ヒーロー：食品が上から降ってきて、回収ボックスに入る（2026-10-06） */
@media (prefers-reduced-motion:no-preference){
  .hero .art .it{animation:fdDrop 6.4s cubic-bezier(.3,0,.3,1) infinite both}
  .hero .art .it:nth-child(1){animation-delay:.2s}
  .hero .art .it:nth-child(2){animation-delay:.55s}
  .hero .art .it:nth-child(3){animation-delay:.9s}
  .hero .art .it:nth-child(4){animation-delay:1.25s}
  .hero .art .it:nth-child(5){animation-delay:1.6s}
  @media (max-width:560px){.hero .art .it{--fd-h:-130px}}
  .hero .art .boxb{animation:fdBump 6.4s ease-out .2s infinite both}
}
@keyframes fdDrop{
  0%{transform:translateY(var(--fd-h,-240px)) rotate(-26deg);opacity:0}
  6%{opacity:1}
  20%{transform:translateY(8px) rotate(4deg);animation-timing-function:ease-out}
  24%{transform:translateY(-14px) rotate(-2deg);animation-timing-function:ease-in}
  28%{transform:none}
  74%{transform:none;opacity:1;animation-timing-function:ease-in}
  86%{transform:translateY(120px) rotate(6deg);opacity:1}
  87%,100%{transform:translateY(120px);opacity:0}
}
@keyframes fdBump{
  0%,19%,22.5%,25%,28%,30.5%,33.5%,36%,39%,41.5%,44.5%,100%{translate:0 0}
  20%,25.5%,31%,36.5%,42%{translate:0 4px}
}