/* GOOD CYCLE FES イベントページ v1（2026-10-06）：フェスとは？ 専用 */
/* フェスとは？ */
.h1-about{font-size:clamp(30px,4.4vw,56px)}
.crew-wrap{position:relative;display:grid;justify-items:center;gap:14px}
.gp-about .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.crew{position:relative;display:flex;justify-content:center;align-items:flex-end;width:100%;padding:18px 10px 0}
.crew::after{content:"";position:absolute;left:4%;right:4%;bottom:-6px;height:22px;border-radius:50%;background:var(--green-pale);border:2px solid var(--ink);z-index:-1}
.crew .chara{width:20%;margin-inline:-1.2%}
.crew .chara:nth-child(2){width:21%}
.crew .chara:nth-child(3){width:20.5%;margin-bottom:6px}
.crew .chara:nth-child(5){width:20%}
.crew-lb{font-size:13px;font-weight:700;color:var(--gray);text-align:center}
.crew-lb b{color:var(--green-deep);margin-right:8px}
.tagline{font-weight:900;font-size:clamp(18px,2vw,23px);line-height:1.6;margin:-6px 0 14px}

.vid-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:center}
.vframe{position:relative;aspect-ratio:16/9;border:var(--bd);border-radius:18px;background:var(--ink);box-shadow:6px 7px 0 var(--green);overflow:hidden}
.vframe video,.pframe video{display:block;width:100%;height:100%;object-fit:contain;background:var(--ink)}
.vframe .ph,.pframe .ph{height:100%;min-height:0;border:0;border-radius:0}

.theme-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,5vw,64px);align-items:center}
.theme-h{font-size:clamp(32px,5.4vw,66px);line-height:1.4}
.mk{position:relative;display:inline-block;white-space:nowrap}
.mk svg{position:absolute;left:-4%;top:50%;width:108%;height:70%;translate:0 -50%;overflow:visible;pointer-events:none}
.mk path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.mk-x path{stroke:var(--ink);stroke-width:6}
.mk-o svg{left:-10%;width:120%;height:130%}
.mk-o path{stroke:var(--green);stroke-width:5}
.theme-p{font-size:clamp(16px,1.5vw,18px);font-weight:700;line-height:2;margin-top:22px;max-width:34em}
.theme-p.sub{color:var(--gray);font-weight:500;font-size:16px;margin-top:14px}
.theme-art{position:relative;display:grid;place-items:center;min-height:320px}
.loop{position:relative;width:min(100%,300px);aspect-ratio:1}
.loop-c{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--green);stroke-width:3;stroke-dasharray:10 9;animation:spin 40s linear infinite}
@keyframes spin{to{rotate:360deg}}
.lp{position:absolute;display:grid;place-items:center;width:78px;height:78px;border-radius:50%;background:var(--white);border:var(--bd);box-shadow:3px 4px 0 var(--ink);font-weight:900;font-size:16px;z-index:1}
.lp1{left:50%;top:0;translate:-50% -10%}
.lp2{left:2%;bottom:6%}
.lp3{right:2%;bottom:6%;background:var(--yellow)}
.c-ecoba-bag{position:absolute;left:50%;top:50%;width:150px;translate:-50% -46%;z-index:2}

.sec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 32px;align-items:end;margin-bottom:28px}
.guide-box{border:var(--bd);border-radius:18px;background:var(--white);box-shadow:var(--sh);padding:16px}
.guide-box .ph{min-height:300px}
.guide-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.guide-track a{flex:none;width:clamp(180px,22vw,240px);scroll-snap-align:start;border:2px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--paper-2)}
.guide-track img{width:100%;height:auto;display:block}
#guide .note{margin-top:12px}

.do-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 22px;margin-top:34px}
.do{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:8px;min-height:250px;padding:22px 22px 18px;border:var(--bd);border-radius:18px;background:var(--white);box-shadow:var(--sh);text-decoration:none;overflow:hidden;transition:transform .2s,box-shadow .2s}
.do:hover{transform:translate(-3px,-3px) rotate(-.6deg);box-shadow:9px 10px 0 var(--ink)}
.do-n{font-family:var(--f-en);font-weight:900;font-size:40px;line-height:.9;color:var(--green);letter-spacing:-.03em}
.do b{font-weight:900;font-size:clamp(18px,1.8vw,21px);line-height:1.45;padding-right:84px}
.do small{font-size:13.5px;color:var(--gray);line-height:1.6;padding-right:96px}
.do-more{display:flex;align-items:center;gap:6px;font-weight:900;font-size:14px;color:var(--green-deep)}
.do .chara{position:absolute;right:12px;bottom:12px;width:104px}

.song{background:var(--ink);color:var(--paper)}
.song .h2 em{color:var(--mint-txt)}
.eb.on-ink{color:var(--mint-txt)}
.song-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.song-art{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:0}
.pframe{position:relative;width:min(62%,300px);aspect-ratio:9/16;border:3px solid var(--paper);border-radius:30px;background:#000;overflow:hidden;box-shadow:6px 7px 0 var(--green);z-index:1}
.pframe .ph{background:repeating-linear-gradient(-45deg,#24271f 0 14px,#1b1d18 14px 28px)}
.pframe .ph span{background:var(--ink);color:var(--mint-txt);border-color:var(--mint-txt)}
.song-l,.song-r{width:24%;max-width:130px;z-index:2}
.song-l{margin-right:-6%}
.song-r{margin-left:-6%}
.song-p{font-size:16px;line-height:2;color:#DADDD6;max-width:30em}
.song-tag{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:13px;font-weight:700;color:var(--mint-txt);border:1.5px solid var(--mint-txt);border-radius:999px;padding:4px 14px}

.c-moguta-i{width:130px;margin-bottom:-6px}
.pts{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pts li{background:var(--white);border:2px solid var(--ink);border-radius:14px;padding:16px 18px;font-size:14px;line-height:1.7;color:var(--gray)}
.pts b{display:block;color:var(--ink);font-size:17px;font-weight:900}
.routes-h{font-weight:900;font-size:clamp(20px,2.4vw,26px);margin:44px 0 16px}
.routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.route{background:var(--white);border:var(--bd);border-radius:20px;box-shadow:var(--sh);padding:clamp(18px,2.6vw,26px);display:grid;gap:14px;align-content:start}
.route-t{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-weight:900;font-size:19px}
.tag{font-size:13px;font-weight:900;background:var(--green-deep);color:var(--white);border-radius:999px;padding:4px 14px}
.tag.ink{background:var(--ink);color:var(--paper)}
.rflow{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.rflow li{position:relative;display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:10px;align-items:baseline;background:var(--paper-2);border:2px solid var(--ink);border-radius:12px;padding:10px 14px;font-weight:700;font-size:15px;line-height:1.5}
.rflow li span{font-family:var(--f-en);font-weight:900;font-size:13px;color:var(--green-deep)}
.rflow li.fb{background:var(--green-pale);border-color:var(--green-deep)}
.rflow li + li::before{content:"";position:absolute;left:28px;top:-12px;width:2.5px;height:10px;background:var(--ink)}
.tl{display:inline-flex;align-items:center;gap:8px;font-weight:900;text-decoration:none;border-bottom:2.5px solid var(--ink);padding-bottom:2px;justify-self:start}
.out-cta{margin-top:26px}

.cbox{margin-top:30px;display:grid;gap:22px}
.cpick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.cpick button{display:grid;justify-items:center;gap:6px;padding:14px 8px 12px;border:var(--bd);border-radius:16px;background:var(--white);box-shadow:3px 4px 0 var(--ink);cursor:pointer;font-family:var(--f-ja);font-weight:900;font-size:15px;color:var(--ink);transition:transform .15s,background .15s}
.cpick button:hover{transform:translate(-2px,-2px)}
.cpick button.on{background:var(--yellow);transform:translate(-2px,-3px)}
.cpick .chara{width:min(100%,96px)}
.cpick button.on .chara{animation:jump .6s ease}
.cpanel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:center;background:var(--white);border:var(--bd);border-radius:22px;box-shadow:var(--sh);padding:clamp(20px,3vw,34px)}
.cp-img{width:clamp(140px,16vw,200px);animation:popt .5s cubic-bezier(.3,1.5,.5,1) both}
.cp-txt{display:grid;gap:10px;justify-items:start}
.cp-name{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-weight:900;font-size:clamp(26px,3vw,36px);line-height:1.3}
.cp-role{font-size:13px;font-weight:900;background:var(--green-pale);color:var(--green-deep);border-radius:999px;padding:3px 12px}
.cp-desc{font-size:16px;line-height:1.9;color:var(--ink-2);max-width:32em}
.cp-txt .bub{font-size:16px}

@media (max-width:960px){
  .crew-wrap{order:-1;margin-bottom:6px}
  .vid-grid,.theme-grid,.song-grid{grid-template-columns:minmax(0,1fr)}
  .theme-art{min-height:280px}
  .do-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .routes{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .sec-head{grid-template-columns:minmax(0,1fr)}
  .pts{grid-template-columns:minmax(0,1fr)}
  .cpick{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .cpick button{padding:8px 2px 8px;font-size:12px;border-width:2px;box-shadow:2px 3px 0 var(--ink)}
  .cpanel{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .cp-txt{justify-items:center}
  .cp-name{justify-content:center}
  #fooddrive .sec-head{grid-template-columns:minmax(0,1fr) 96px}
  .c-moguta-i{width:96px}
}
@media (max-width:560px){
  .crew{padding-top:8px}
  .do-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .do{min-height:0;padding:18px 18px 16px}
  .do .chara{width:84px;right:10px;bottom:10px}
  .do b{padding-right:80px}
  .do small{padding-right:84px}
  .theme-art{min-height:250px}
  .loop{width:240px}
  .lp{width:64px;height:64px;font-size:14px}
  .c-ecoba-bag{width:120px}
  .song-l,.song-r{width:22%}
  .pframe{width:58%}
  .rflow li{grid-template-columns:minmax(0,1fr);gap:0}
  .guide-box{padding:10px}
  .guide-box .ph{min-height:240px}
}