/* GOOD CYCLE FES イベントページ v1（2026-10-06）：食品の無料配布＆特価販売 専用 */
/* 食品の無料配布＆特価販売 */
.shelf-art{position:relative;justify-self:center;width:min(100%,440px);height:400px}
.shelf{position:absolute;left:6%;right:6%;top:60px;height:200px;display:flex;align-items:flex-end;justify-content:center;gap:10px;padding-bottom:16px}
.shelf .board{position:absolute;left:-4%;right:-4%;bottom:0;height:16px;background:var(--ink);border-radius:6px}
.crate{position:relative;flex:1 1 0;border:var(--bd);border-radius:10px;box-shadow:3px 4px 0 var(--ink);display:grid;place-items:end center;padding-bottom:10px;font-family:var(--f-en);font-weight:900;font-size:11px;letter-spacing:.2em;background-image:repeating-linear-gradient(0deg,transparent 0 22px,rgba(20,21,19,.18) 22px 24px)}
.crate span{background:var(--paper);border:1.5px solid var(--ink);border-radius:999px;padding:1px 8px}
.c1{height:110px;background-color:var(--mint)}
.c2{height:150px;background-color:var(--paper-2)}
.c3{height:125px;background-color:var(--green-pale)}
.ptag{position:absolute;display:grid;place-content:center;text-align:center;width:104px;aspect-ratio:1;border:var(--bd);border-radius:50%;box-shadow:3px 4px 0 var(--ink);font-weight:900;line-height:1.1;z-index:2}
.ptag b{font-size:28px}
.ptag small{font-size:13px}
.pt1{left:0;top:4px;background:var(--yellow);rotate:-10deg;animation:wob2 4.2s ease-in-out infinite}
.pt2{right:4%;top:0;background:var(--green-deep);color:var(--white);rotate:8deg;animation:wob2 4.8s ease-in-out -1.5s infinite}
@keyframes wob2{0%,100%{translate:0 0}50%{translate:0 -6px}}
.c-ichika-s{position:absolute;left:50%;bottom:0;width:170px;translate:-50% 0;z-index:3}

.hl3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:34px}
.hl{position:relative;background:var(--white);border:var(--bd);border-radius:18px;box-shadow:var(--sh);padding:24px 22px;display:grid;gap:8px;align-content:start}
.hl.y{background:var(--yellow)}
.hl-n{font-family:var(--f-en);font-weight:900;font-size:40px;line-height:.9;color:var(--green);letter-spacing:-.03em}
.hl.y .hl-n{color:var(--ink)}
.hl-ic{position:absolute;right:18px;top:18px;width:50px;height:50px;border-radius:14px;background:var(--green-pale);color:var(--green-deep);display:grid;place-items:center;font-size:26px}
.hl.y .hl-ic{background:var(--paper)}
.hl b{font-weight:900;font-size:21px;line-height:1.45}
.hl p{font-size:15px;color:var(--gray);line-height:1.75}
.hl.y p{color:var(--ink-2)}

.how-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:end}
.c-happachi-s{width:130px;margin-bottom:-6px}
.sflow{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.sflow li{position:relative;background:var(--white);border:var(--bd);border-radius:18px;box-shadow:var(--sh);padding:22px;display:grid;gap:8px;align-content:start}
.sflow li.fb{background:var(--green-pale);border-color:var(--green-deep)}
.sflow li:not(:last-child)::after{content:"";position:absolute;right:-25px;top:50%;width:13px;height:13px;border-top:3px solid var(--ink);border-right:3px solid var(--ink);rotate:45deg;translate:0 -50%}
.sf-n{width:44px;height:44px;border-radius:50%;background:var(--green-deep);color:var(--white);display:grid;place-items:center;font-family:var(--f-en);font-weight:900;font-size:19px}
.sf-ic{position:absolute;right:18px;top:18px;font-size:30px;color:var(--green-deep)}
.sflow b{font-weight:900;font-size:19px;line-height:1.45}
.sflow p{font-size:14px;color:var(--gray);line-height:1.7}
.co-mini{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:30px;background:var(--white);border:2px dashed var(--green-deep);border-radius:18px;padding:18px 22px}
.co-mini p{font-size:15px;color:var(--gray);max-width:36em}
.co-mini b{display:block;color:var(--ink);font-size:17px;font-weight:900}

@media (max-width:960px){
  .shelf-art{width:min(100%,400px);height:370px}
  .hl3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .sflow{grid-template-columns:minmax(0,1fr);gap:38px}
  .sflow li:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-26px;rotate:135deg;translate:-50% 0}
  .how-head{grid-template-columns:minmax(0,1fr) 96px}
  .c-happachi-s{width:96px}
}
@media (max-width:560px){
  .shelf-art{height:320px}
  .shelf{top:56px;height:160px}
  .c1{height:86px}.c2{height:118px}.c3{height:100px}
  .ptag{width:84px}
  .ptag b{font-size:22px}
  .c-ichika-s{width:132px}
  .co-mini .btn{width:100%}
}
@media (prefers-reduced-motion: reduce){.ptag{animation:none}}