@charset "utf-8";
/* ACU札幌 20周年記念 特別キャンペーン LP */

:root{
  --ground:#fff7eb;
  --stripe:#fff2de;
  --ink:#212121;
  --white:#fff;

  --orange:#df6604;
  --orange-mid:#f7990c;
  --orange-dark:#bf7300;
  --orange-deep:#9b3b0c;
  --tint-amber:#ffdba5;

  --pink:#e55b68;
  --pink-dark:#c42736;
  --tint-pink:#ffaab2;

  --blue:#6fb5dc;
  --blue-dark:#3d92c2;
  --blue-deep:#1f6f9c;
  --tint-blue:#b8dff5;

  --green:#13c67f;
  --green-dark:#089b61;

  --gold:#b28400;
  --silver:#5f6565;

  --line:#a2a4a7;
  --shade:#dcdcdc;

  --glass:rgba(255,255,255,.4);
  --glass-blur:blur(6px);
  --glass-border:2px solid #fff;

  --font-jp:"Zen Kaku Gothic New",-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --font-en:"new-hero","Zen Kaku Gothic New",sans-serif;
  --ls:.06em;

  --frame:375px;
  --gut:15px;
  --r-card:20px;
  --r-box:10px;
  --bar-h:55px;

  --z-stripe:0;
  --z-body:1;
  --z-bar:90;
  --z-drawer:110;
  --z-header:120;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:80px;
}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-jp);
  font-weight:400;
  font-size:14px;
  line-height:1.6;
  letter-spacing:var(--ls);
  overflow-x:clip;
}

img{max-width:100%;height:auto;vertical-align:top}
a{color:inherit;text-decoration:none}

.textlink{color:var(--blue-deep);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}

.br-sp{display:inline}
@media (min-width:430px){
  .br-sp{display:none}
}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.header__btns,.sidenav{display:none}

/* ストライプ背景（固定） */
.stripe{
  position:fixed;
  inset:0;
  z-index:var(--z-stripe);
  pointer-events:none;
  background-color:var(--ground);
  background-image:repeating-linear-gradient(
    128.73deg,
    var(--stripe) 0 17.878px,
    transparent 17.878px 37.21px
  );
}

/* 土台 */
main,.header,.footer{position:relative;z-index:var(--z-body)}
main{max-width:430px;margin-inline:auto}

/* header（ロゴ x15 y15 102x39 / メニュー x320 y15 40x40） */
.header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:var(--z-header);
  max-width:430px;
  margin-inline:auto;
  padding:15px var(--gut);
  pointer-events:none;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  transition:transform .35s ease,opacity .35s ease,visibility 0s;
}

.header.is-hidden{transform:translateY(-100%);opacity:0;visibility:hidden;transition-delay:0s,0s,.35s}
.header__logo,.header__menu{pointer-events:auto}
.header__logo{display:block;width:102px;transition:opacity .3s ease}
.header__logo img{display:block;width:100%}
.header__menu{display:block;width:40px;height:40px;line-height:0}
.header__menu svg{display:block;width:40px;height:40px}

.header__menu .bar{transform-box:fill-box;transform-origin:center;transition:transform .3s ease}
.header__menu[aria-expanded="true"] .bar--1{transform:translateY(4px) rotate(45deg)}
.header__menu[aria-expanded="true"] .bar--2{transform:translateY(-4px) rotate(-45deg)}

.drawer{
  position:fixed;
  inset:0;
  z-index:var(--z-drawer);
  background-color:var(--ground);
  background-image:repeating-linear-gradient(
    128.73deg,
    var(--stripe) 0 17.878px,
    transparent 17.878px 37.21px
  );
  padding:76px 20px 32px;
  overflow-y:auto;
  overscroll-behavior:contain;
  opacity:0;
  transition:opacity .3s ease;
}
.drawer[hidden]{display:none}
.drawer.is-open{opacity:1}

.drawer__list{max-width:282px;margin-inline:auto}
.drawer__list a{
  position:relative;
  display:block;
  height:59px;
  padding-top:28px;
  text-align:center;
  font-size:16px;font-weight:700;
  line-height:1;
  color:var(--ink);
}
.drawer__list a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:repeating-linear-gradient(to right,var(--orange) 0 2px,transparent 2px 8px);
}
.drawer__btns{margin-top:49px}
.drawer__btns .btn+.btn{margin-top:15px}

/* 共通ボタン（280x60 / r30 / 下5pxの濃色エッジ） */
.btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  width:280px;
  height:60px;
  margin-inline:auto;
  border-radius:30px;
  color:var(--white);
  font-size:16px;
  font-weight:700;
  letter-spacing:var(--ls);
  transition:transform .2s ease, box-shadow .2s ease;
}

.btn{box-shadow:0 5px 0 var(--btn-shade)}
.btn>span{position:relative}
.btn__arrow{width:19px;height:11px;color:var(--white);flex:none}

@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(5px);box-shadow:0 0 0 var(--btn-shade)}
}
.btn:active,
.btn.is-pressed{transform:translateY(5px);box-shadow:0 0 0 var(--btn-shade)}

.btn--orange{background:var(--orange-mid);--btn-shade:var(--orange-dark)}
.btn--red{background:var(--pink);--btn-shade:var(--pink-dark)}
.btn--green{background:var(--green);--btn-shade:var(--green-dark)}
.btn--blue{background:var(--blue);--btn-shade:var(--blue-dark)}

/* MV（カンプ y0-632） */
.mv{position:relative;z-index:2;overflow-x:clip;overflow-y:visible}
.mv__inner{
  position:relative;
  width:100%;
  max-width:var(--frame);
  margin-inline:auto;
  height:632px;
}

.mv__ill{position:absolute;display:block}
.mv__ill--board{left:-12px;top:90px;width:70px}
.mv__ill--meeting{left:296px;top:71px;width:104px}
.mv__ill--suitcase{left:15px;top:266px;width:48px}
.mv__ill--greet{left:309px;top:293px;width:51px}

.mv__confetti{
  position:absolute;
  z-index:-1;
  pointer-events:none;
  line-height:0;
}
.mv__confetti--tr{right:-70px;top:-46px;width:300px;height:300px}
.mv__confetti--bl{left:-58px;top:348px;width:196px;height:196px}

@keyframes fluffy{
  0%,100%{translate:0 0}
  50%    {translate:0 var(--fy,8px)}
}
.mv__ill,
.cta__ill{
  animation:fluffy var(--dur,4s) ease-in-out var(--dly,0s) infinite;
  will-change:translate;
}
.mv__ill--board   {--fy:9px; --dur:4.2s; --dly:-1.1s}
.mv__ill--meeting {--fy:10px;--dur:4.6s; --dly:-2.4s}
.mv__ill--suitcase{--fy:7px; --dur:3.6s; --dly:-0.5s}
.mv__ill--greet   {--fy:8px; --dur:4s;   --dly:-3.1s}

.mv__lockup{position:absolute;left:63px;top:101px;width:250px;margin:0;line-height:0}
.mv__lockup img{display:block;width:100%}

.mv__lead,.mv__lead2{
  position:absolute;
  left:0;right:0;
  text-align:center;
  font-weight:700;
  line-height:1;
}
.mv__lead{top:306px;font-size:16px}
.mv__lead2{top:334px;font-size:24px}
.mv__lead2 em{font-family:var(--font-en);font-style:normal;font-size:24px;letter-spacing:0}
.mv__lead2 b{font-size:20px}
.mv__lead2 span{font-size:16px}

.mv__desc{
  position:absolute;
  left:0;right:0;
  top:373px;
  text-align:center;
  font-size:14px;
  line-height:30px;
}

.mv__ribbon{
  position:absolute;
  left:-15%;right:-15%;
  top:549px;
  aspect-ratio:750/204;
  z-index:1;
  display:block;line-height:0;
}

.period{position:absolute;left:var(--gut);right:var(--gut);top:493px;z-index:2}
.period__label{
  height:25px;
  border-radius:5px 5px 0 0;
  background:var(--orange);
  color:var(--white);
  font-size:14px;font-weight:700;
  line-height:25px;
  text-align:center;
}
.period__dates{
  display:flex;align-items:center;justify-content:center;
  gap:10px;
  height:44px;
  border-radius:0 0 5px 5px;
  background:var(--white);
  color:var(--orange);
  font-family:var(--font-en);
  font-weight:700;
  letter-spacing:0;
}
.period__date{display:flex;align-items:baseline;gap:3px}
.period__date .num{font-size:20px}
.period__date .dow{font-size:10px}
.period__dash{display:block;width:15px;height:3px;background:var(--orange);flex:none}

/* メッセージ（カード x15 y632 345x425） */
.message{position:relative;z-index:1;padding:0 var(--gut);overflow-x:clip;overflow-y:visible}

.message__ribbon{
  position:absolute;
  left:50%;
  width:calc(var(--frame) * 1.25);
  margin-left:calc(var(--frame) * -0.625);
  top:375px;
  aspect-ratio:750/250;
  z-index:-1;
  display:block;line-height:0;
}
.message__card{
  position:relative;
  min-height:425px;
  border-radius:var(--r-card);
  background:var(--glass);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:var(--glass-border);
  padding-top:36px;
  text-align:center;
}
.message__title{
  color:var(--orange);
  font-size:24px;font-weight:700;
  line-height:40px;
}
.message__body{
  margin-top:17px;
  font-size:14px;
  line-height:30px;
}
.message__body+.message__body{margin-top:15px}

/* キャンペーン一覧（チケット） */
.campaign{padding:0 var(--gut)}
.campaign__head{
  text-align:center;
  font-weight:700;
  padding-top:138px;
}
.campaign__sub{display:block;font-size:24px;line-height:1}
.campaign__main{display:block;font-size:32px;line-height:1;margin-top:17px}

.tickets{margin-top:42px;padding-bottom:5px}
.ticket+.ticket{margin-top:20px}

.ticket__link{
  --stub-w:51px;
  --notch-x:calc(100% - 49.6px);
  --notch-r:10.4px;
  position:relative;
  display:flex;
  align-items:stretch;
  height:168px;
  color:var(--white);
}
.ticket__link::before,
.ticket__link::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--r-box);
  -webkit-mask:
    radial-gradient(circle var(--notch-r) at var(--notch-x) 0,transparent var(--notch-r),#000 calc(var(--notch-r) + .5px)),
    radial-gradient(circle var(--notch-r) at var(--notch-x) 100%,transparent var(--notch-r),#000 calc(var(--notch-r) + .5px));
  -webkit-mask-composite:source-in;
  mask:
    radial-gradient(circle var(--notch-r) at var(--notch-x) 0,transparent var(--notch-r),#000 calc(var(--notch-r) + .5px)),
    radial-gradient(circle var(--notch-r) at var(--notch-x) 100%,transparent var(--notch-r),#000 calc(var(--notch-r) + .5px));
  mask-composite:intersect;
}
.ticket__link::before{transform:translate(5px,5px);background:var(--shade);z-index:-2}
.ticket__link::after{background:var(--tk);z-index:-1}

.ticket--01 .ticket__link{--tk:var(--pink);       --tint:var(--tint-pink)}
.ticket--02 .ticket__link{--tk:var(--orange-mid); --tint:var(--tint-amber)}
.ticket--03 .ticket__link{--tk:var(--blue);       --tint:var(--tint-blue)}

.ticket__no{
  position:absolute;
  left:5px;top:4px;
  font-family:var(--font-en);
  font-size:20px;font-weight:700;
  line-height:1;letter-spacing:0;
  color:var(--tint);
}

.ticket__body{
  width:calc(100% - var(--stub-w));flex:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding-top:4px;
  text-align:center;
}
.ticket__eyebrow{
  position:relative;
  display:inline-block;
  font-size:16px;font-weight:700;
  line-height:1;
  padding:0 12px;
}
.ticket__eyebrow::before,
.ticket__eyebrow::after{
  content:"";
  position:absolute;
  top:2px;
  width:1px;height:13.2px;
  background:var(--white);
}
.ticket__eyebrow::before{left:5px;transform:rotate(-20deg)}
.ticket__eyebrow::after{right:5px;transform:rotate(20deg)}

.ticket__title{
  display:block;
  font-size:24px;font-weight:700;
  line-height:35px;
  margin-top:9.5px;
}
.ticket__pill{
  display:inline-block;
  margin-top:14.5px;
  padding:0 14px;
  height:21px;
  border-radius:10.5px;
  background:var(--white);
  color:var(--tk);
  font-size:12px;font-weight:700;
  line-height:21px;
  white-space:nowrap;
}

.ticket__stub{
  position:relative;
  flex:0 0 var(--stub-w);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:28px;
}
.ticket__stub::before{
  content:"";
  position:absolute;
  left:0;top:16.6px;bottom:16.4px;
  border-left:2px dashed var(--white);
}
.ticket__more{
  writing-mode:vertical-rl;
  font-family:var(--font-en);
  font-weight:500;
  font-size:14px;
  line-height:1;
  letter-spacing:.02em;
  color:var(--tint);
}
.ticket__arrow{
  position:absolute;
  left:15px;top:127px;
  width:25px;height:25px;
  border:1px solid var(--white);
  border-radius:50%;
  display:grid;place-items:center;
}

.ticket__arrow svg{width:13px;height:7.5px;color:var(--white)}

.ticket__link{
  transition:transform .25s cubic-bezier(.22,.61,.36,1);
  transform-origin:50% 60%;
}
.ticket__arrow{transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.ticket__link::before{transition:transform .25s cubic-bezier(.22,.61,.36,1)}

@media (hover:hover) and (pointer:fine){
  .ticket__link:hover{transform:translateY(-4px) rotate(-1deg)}
  .ticket__link:hover .ticket__arrow{transform:translateX(3px)}

  .ticket__link:hover::before{transform:translate(7px,9px)}
  .ticket__link:active{transform:translateY(-1px) rotate(-.3deg);transition-duration:.08s}
  .ticket__link:active::before{transform:translate(5px,6px);transition-duration:.08s}
}

@media (hover:none){
  .tickets.is-wiggle .ticket__link{animation:ticket-wiggle 3.2s ease-in-out infinite}
  .tickets.is-wiggle .ticket--01 .ticket__link{animation-delay:.35s}
  .tickets.is-wiggle .ticket--02 .ticket__link{animation-delay:.51s}
  .tickets.is-wiggle .ticket--03 .ticket__link{animation-delay:.67s}
  .ticket__link:active{transform:scale(.985);transition-duration:.08s}
}

@keyframes ticket-wiggle{
  0%         {transform:rotate(0deg)    translateY(0)}
  6%         {transform:rotate(-1.1deg) translateY(-2px)}
  12%        {transform:rotate(.9deg)   translateY(-1px)}
  18%        {transform:rotate(-.7deg)  translateY(-2px)}
  24%        {transform:rotate(.45deg)  translateY(-1px)}
  30%        {transform:rotate(-.25deg) translateY(0)}
  36%, 100%  {transform:rotate(0deg)    translateY(0)}
}

/* 詳細セクション（01/02/03） */
.detail{padding:0 var(--gut)}
.detail--01{padding-top:50px;--hd:var(--pink)}
.detail--02{padding-top:35px;--hd:var(--orange-mid)}
.detail--03{padding-top:35px;--hd:var(--blue)}

.detail__card{
  border-radius:var(--r-card);
  background:var(--white);
  overflow:hidden;
}

.detail__head{
  height:125px;
  padding-top:19px;
  background:var(--hd);
  color:var(--white);
  text-align:center;
}
.detail__eyebrow{font-size:16px;font-weight:700;line-height:1}
.detail__eyebrow span{position:relative;display:inline-block;padding:0 12px}
.detail__eyebrow span::before,
.detail__eyebrow span::after{
  content:"";
  position:absolute;
  top:3px;
  width:1px;height:13.2px;
  background:var(--white);
}
.detail__eyebrow span::before{left:5px;transform:rotate(-20deg)}
.detail__eyebrow span::after{right:5px;transform:rotate(20deg)}

.detail__title{
  font-size:24px;font-weight:700;
  line-height:1;
  margin-top:15px;
}
.detail__pill{
  display:inline-block;
  margin-top:15px;
  padding:0 14px;
  height:21px;
  border-radius:10.5px;
  background:var(--white);
  color:var(--hd);
  font-size:12px;font-weight:700;
  line-height:21px;
  white-space:nowrap;
}

.detail__inner{padding:0 var(--gut) 34px}
.detail--03 .detail__inner{padding-bottom:35px}

.detail__desc{
  padding-top:20px;
  font-size:14px;
  line-height:30px;
  text-align:center;
}

.detail__cta{margin-top:34px}

.prizes{margin-top:35px}
.prize{
  position:relative;
  border-radius:var(--r-box);
  background:var(--ground);
}
.prize--1{height:62px}
.prize--2{height:56px;margin-top:25px}
.prize--3{height:75px;margin-top:25px}

.prize__medal{position:absolute;left:0;top:-15px;display:block}
.prize--1 .prize__medal{width:50px}
.prize--2 .prize__medal,.prize--3 .prize__medal{width:45px}

.prize__rank{
  position:absolute;
  left:0;top:-4px;
  text-align:center;
  font-weight:700;
  line-height:1;
}
.prize--1 .prize__rank{width:50px;font-size:24px;color:var(--gold)}
.prize--2 .prize__rank{width:45px;font-size:20px;color:var(--silver)}
.prize--3 .prize__rank{width:45px;font-size:20px;color:var(--orange-deep)}
.prize__rank em{font-family:var(--font-en);font-style:normal;letter-spacing:0}
.prize--1 .prize__rank b{font-size:14px}
.prize--2 .prize__rank b,.prize--3 .prize__rank b{font-size:12px}

.prize__text{
  position:absolute;
  left:53px;
  font-weight:700;
  line-height:1;
}

.prize__text::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:repeating-linear-gradient(to right,var(--pink) 0 2px,transparent 2px 8px);
}

.prize--1 .prize__text{top:9px;font-size:32px;padding-bottom:6px}
.prize--2 .prize__text{top:12px;font-size:24px;padding-bottom:5px}
.prize--3 .prize__text{top:9px;font-size:20px;line-height:20px;padding-bottom:6px}

.prize__when{font-size:14px}
.prize--1 .prize__when{font-size:16px}
.prize__what{font-size:16px}
.prize--1 .prize__what{font-size:20px}
.prize__num{font-family:var(--font-en);font-style:normal;letter-spacing:0}
.prize--1 .prize__num{font-size:32px;color:var(--gold)}
.prize--2 .prize__num{font-size:24px;color:var(--silver)}
.prize__unit{font-family:var(--font-en);letter-spacing:0;margin-left:.1em}
.prize--1 .prize__unit{font-size:20px;color:var(--gold)}
.prize--2 .prize__unit{font-size:16px;color:var(--silver)}
.prize__text--2l small{font-size:12px;font-weight:700}
.prize__free{font-style:normal;font-size:20px;color:var(--orange-deep)}

.offer{
  position:relative;
  margin-top:30px;
  border-radius:var(--r-box);
  background:var(--ground);
  padding:14px 12px 17px;
  text-align:center;
}
.offer__tag{
  position:absolute;
  left:0;top:-10px;
  height:22px;
  padding:0 12px;
  border-radius:11px;
  background:var(--orange);
  color:var(--white);
  font-size:12px;font-weight:700;
  line-height:22px;
  white-space:nowrap;
}
.offer__main{
  position:relative;
  display:inline-block;
  font-size:32px;
  font-weight:700;
  line-height:1;
  padding-bottom:4px;
}

.offer__main::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-2px;
  height:2px;
  background:repeating-linear-gradient(to right,var(--orange-mid) 0 2px,transparent 2px 8px);
}
.offer__when{font-size:16px}
.offer__what{font-size:20px}
.offer__num{font-family:var(--font-en);font-style:normal;font-size:32px;letter-spacing:0;color:var(--orange-mid)}
.offer__unit{font-family:var(--font-en);font-size:20px;letter-spacing:0;color:var(--orange-mid);margin-left:.1em}
.offer__note{margin-top:8px;font-size:12px;line-height:1}

.offer--wide{padding:30px 0 16px}
.offer__lead{
  position:relative;
  display:inline-block;
  font-size:20px;font-weight:700;
  line-height:1;
  padding-bottom:6px;
}

.offer__lead::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-2px;
  height:2px;
  background:repeating-linear-gradient(to right,var(--blue) 0 2px,transparent 2px 8px);
}

.options{margin-top:21px;padding:0 15px;text-align:left}
.option{display:flex;align-items:flex-start;gap:8px}
.option+.option{margin-top:19px}
.option__mark{
  flex:none;
  width:20px;height:20px;
  border-radius:50%;
  background:var(--blue);
  color:var(--white);
  font-family:var(--font-en);
  font-size:12px;font-weight:700;
  line-height:20px;
  text-align:center;
  letter-spacing:0;
}
.option__body{padding-top:1px}
.option__title{display:block;font-size:16px;font-weight:700;line-height:1}
.option__desc{display:block;margin-top:5px;font-size:12px;line-height:25px}

.info{margin-top:30px}

.detail--01 .info{margin-top:25px}
.info dt{font-size:14px;font-weight:700;line-height:30px}
.info dd{
  position:relative;
  font-size:14px;
  line-height:30px;
  padding-bottom:11px;
}
.info dd::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:repeating-linear-gradient(to right,var(--line) 0 2px,transparent 2px 8px);
}
.info__row+.info__row{margin-top:9px}

/* 注意事項（03 と CTA の間） */
.notes{padding:35px var(--gut) 0}
.notes__card{
  border-radius:var(--r-box);
  background:var(--white);
  padding:25px 20px;
}
.notes__head{
  font-size:16px;font-weight:700;
  line-height:1.45;
  margin-bottom:15px;
}
.notes__item{
  font-size:14px;
  line-height:1.45;
  padding-left:11px;
  text-indent:-11px;
}
.notes__item::before{
  content:"";
  display:inline-block;
  position:relative;
  top:-3px;
  width:6px;height:6px;
  margin-right:5px;
  background:var(--orange);
}
.notes__item+.notes__item{margin-top:15px}

/* CTA */
.cta{position:relative;padding:105px var(--gut) 0}
.cta__ill{position:absolute;display:block;z-index:1}
.cta__ill--board{right:16px;top:25px;width:70px;--fy:9px;--dur:4.4s;--dly:-1.8s}
.cta__ill--meeting{left:15px;top:473px;width:114px;--fy:10px;--dur:3.9s;--dly:-.7s}

.cta__card{
  position:relative;
  min-height:420px;
  border-radius:var(--r-card);
  background:var(--glass);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:var(--glass-border);
  padding:31px 0 63px;
  text-align:center;
}
.cta__title{
  color:var(--orange);
  font-size:24px;font-weight:700;
  line-height:40px;
}
.cta__btns{margin-top:32px}
.cta__btns .btn+.btn{margin-top:15px}

/* FAQ */
.faq{padding:117px var(--gut) 0}
.faq__head{font-size:32px;font-weight:700;line-height:1}
.faq__list{margin-top:42px}
.faq__item{border-radius:var(--r-box);background:var(--white)}
.faq__item+.faq__item{margin-top:10px}

.faq__q{
  position:relative;
  display:block;
  width:100%;
  padding:9.5px 45px 9.5px 46px;
  text-align:left;
}
.faq__mark{
  position:absolute;
  left:15px;top:16px;
  font-family:var(--font-en);
  font-size:24px;font-weight:700;
  line-height:1;letter-spacing:.1em;
  color:var(--orange);
}
.faq__text{
  display:block;
  font-size:16px;font-weight:700;
  line-height:35px;
}
.faq__icon{position:absolute;right:15px;top:22px;width:12px;height:12px}
.faq__icon::before,
.faq__icon::after{
  content:"";
  position:absolute;
  background:var(--ink);
  transition:transform .3s ease,opacity .3s ease;
}
.faq__icon::before{left:0;top:5px;width:12px;height:2px}
.faq__icon::after{left:5px;top:0;width:2px;height:12px}
.faq__item.is-open .faq__icon::after{transform:rotate(90deg);opacity:0}

.faq__a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .35s ease;
}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a-inner{overflow:hidden}
.faq__a p{
  margin:5px 15px 0;
  padding:14px 0 15px;
  border-top:1px solid var(--line);
  font-size:14px;
  line-height:30px;
}

/* footer */
.footer{
  margin-top:68px;
  max-width:430px;
  margin-inline:auto;
  border-radius:var(--r-card) var(--r-card) 0 0;
  background:var(--orange);
  color:var(--white);
  padding:35px var(--gut) 17px;
}
.footer__logo{width:209px;margin:0 auto;line-height:0}
.footer__logo a{display:block;transition:opacity .3s ease}
.footer__logo img{display:block;width:100%}
@media (hover:hover) and (pointer:fine){
  .footer__logo a:hover{opacity:.7}
}
.footer__title{
  margin-top:30px;
  font-size:20px;font-weight:700;
  line-height:40px;
  text-align:center;
}
.footer__body{
  margin-top:4px;
  font-size:14px;
  line-height:30px;
  text-align:center;
}
.footer__btn{margin-top:30px}
.footer__info{
  margin-top:40px;
  padding-top:18px;
  border-top:1px solid var(--white);
}
.footer__name{font-size:16px;font-weight:700;line-height:1}
.footer__addr{margin-top:8px;font-size:12px;line-height:20px}
.footer__tel{margin-top:12px;font-size:12px;line-height:20px}
.footer__copy{
  margin-top:26px;
  color:var(--ground);
  font-size:12px;line-height:1;
  text-align:center;
}

/* 追従CTA（下スクロールで隠れ、上スクロールで出現） */
.fixedbar{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:var(--z-bar);
  max-width:430px;
  margin-inline:auto;
  display:flex;
  transition:transform .35s ease,visibility 0s;
}
.fixedbar.is-hidden{transform:translateY(110%);visibility:hidden;transition-delay:0s,.35s}

.fixedbar__btn{
  position:relative;
  flex:1 1 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  height:var(--bar-h);
  color:var(--white);
  font-size:16px;font-weight:700;
  letter-spacing:var(--ls);
}

.fixedbar__btn::before{
  content:"";
  position:absolute;
  inset:0 0 0 0;
  border:2px solid var(--white);
  border-bottom:0;
  border-radius:inherit;
  pointer-events:none;
}
.fixedbar__btn--orange{background:var(--orange-mid);border-radius:15px 0 0 0}
.fixedbar__btn--blue{background:var(--blue);border-radius:0 15px 0 0}
.fixedbar__btn .btn__arrow{width:19px;height:11px;color:var(--white);flex:none}

/* スクロールで出す（reveal） */
.js [data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1) var(--rd,0s),
             transform .6s cubic-bezier(.22,.61,.36,1) var(--rd,0s);
}
.js [data-reveal].is-in{opacity:1;transform:none}

.message__body:nth-of-type(1){--rd:.12s}
.message__body:nth-of-type(2){--rd:.24s}

.ticket--02{--rd:.10s}
.ticket--03{--rd:.20s}

.prize--2{--rd:.10s}
.prize--3{--rd:.20s}

.cta__title{--rd:.02s}
.cta__btns{--rd:.14s}
.cta__ill--board{--rd:.22s}
.cta__ill--meeting{--rd:.30s}

.faq__item:nth-child(2){--rd:.10s}
.faq__item:nth-child(3){--rd:.20s}

/* アクセシビリティ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .mv__ill,.cta__ill{animation:none !important;translate:0 0 !important}
  .ticket__link,.ticket__arrow{animation:none !important;transform:none !important}
  .btn.is-pressed{transform:translateY(5px) !important}
  .ticket__link::before{transform:translate(5px,5px) !important}
  .js [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .message__card,.cta__card{background:rgba(255,255,255,.9)}
}

/* リボン（支給APNG） */
.ribbon-anim{display:block;width:100%;height:100%}

html:not(.js) .mv__ribbon{background:url(../img/ribbon-mv-still.png) center/contain no-repeat}
html:not(.js) .message__ribbon{background:url(../img/ribbon-msg-still.png) center/contain no-repeat}

/* ============ PC（カンプ アートボード04 / 1366px・コンテンツ1266px） ============ */
@media (min-width:1200px){

:root{
  --pc-w:1266px;
  --pc-side:50px;
}

html{scroll-padding-top:120px}
body{font-size:16px}

main{max-width:calc(var(--pc-w) + var(--pc-side) * 2);padding-inline:var(--pc-side)}

.header__menu,.drawer,.fixedbar{display:none !important}
.header__btns,.sidenav{display:block}

/* header：ロゴ＋CTA2つ */
.header{
  max-width:calc(var(--pc-w) + var(--pc-side) * 2);
  padding:25px var(--pc-side) 0;
  align-items:flex-start;
}
.header__logo{width:155px;margin-top:12px}
.header__btns{display:flex;gap:15px;margin:0;pointer-events:auto}
.header__btns .btn{width:230px;height:50px;border-radius:25px;gap:16px;margin:0}

/* 共通ボタン（PC：280x64 + 下5px） */
.btn{width:280px;height:64px;border-radius:32px;gap:28px}

/* ---- MV ---- */
.mv__inner{max-width:var(--pc-w);height:812px}

.sidenav{position:absolute;left:0;top:524px;z-index:3}
.sidenav li+li{margin-top:22px}
.sidenav a{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;line-height:18px;
  transition:opacity .2s ease;
}
.sidenav a::before{content:"";flex:none;width:10px;height:2px;background:var(--orange)}
.sidenav a:hover{opacity:.6}

.mv__lockup{left:50%;translate:-50%;top:108px;width:463px}

.mv__leadwrap{
  position:absolute;left:0;right:0;top:466px;
  display:flex;align-items:baseline;justify-content:center;
}
.mv__lead,.mv__lead2{position:static;top:auto;font-size:24px;line-height:48px}
.mv__lead2 em{font-family:var(--font-jp);font-size:44px;letter-spacing:0;margin-left:10px}
.mv__lead2 b{font-size:32px;margin-left:8px}
.mv__lead2 span{font-size:24px;margin-left:5px}

.mv__desc{top:530px;font-size:16px;line-height:35px}
.mv__desc br:nth-of-type(2){display:none}

.mv__ill--board{left:0;top:141px;width:134px}
.mv__ill--suitcase{left:16.19%;top:279px;width:89px}
.mv__ill--meeting{left:82.86%;top:193px;width:200px}
.mv__ill--greet{left:79.07%;top:414px;width:96px}

.mv__confetti--tr{left:58.29%;right:auto;top:-39px;width:458px;height:458px}
.mv__confetti--bl{left:5.53%;top:334px;width:321px;height:321px}

/* PCではリボンは1本だけ。メッセージ下の位置に、上のリボン（ribbon03）を置く。
   ribbon03 は素材が右上→左下の順に描かれるので、流れの向きもそのまま合う。
   幅は px 固定にすると画面が広いほど左右に余白が空いて宙に浮くので vw 基準。
   幅は115vwで両端を画面外へ。比率は素材のまま（引き伸ばすと不自然に見える） */
.mv,.message{overflow-x:visible}
.message__ribbon{display:none}
.mv__ribbon{
  left:50%;right:auto;
  width:105vw;margin-left:-52.5vw;  /* 端が画面外に出る最小は約103vw。ここが実質の下限 */
  aspect-ratio:1520/414;   /* 素材そのままの比率（引き伸ばさない） */
  /* 上端ではなく下端で位置を決める。幅が広いほどリボンは背が高くなるので、
     上端基準だと広い画面で下に伸びて見出しに近づいてしまう */
  top:auto;bottom:-694px;   /* .mv__inner(812px)の下端から694px下＝ページ1506px */
}
/* リボンの頭はメッセージカード（半透明ガラス）の裏に入れて、自然に出てくるようにする */
.message{z-index:3}

.period{left:50%;right:auto;translate:-50%;width:533px;top:627px}
.period__label{height:31px;line-height:31px;font-size:16px}
.period__dates{height:50px;gap:15px}
.period__date{gap:5px}
.period__date .num{font-size:28px}
.period__date .dow{font-size:14px}

/* ---- メッセージ ---- */
.message{padding:0}
.message__ribbon{width:min(118vw,1700px);margin-left:min(-59vw,-850px);aspect-ratio:1900/380;top:300px}
.message__card{min-height:391px;padding:68px 0 0}
.message__title{font-size:40px;line-height:48px}
.message__title br{display:none}
.message__body{margin-top:33px;font-size:16px;line-height:35px}
.message__body+.message__body{margin-top:14px}
.message__body:nth-of-type(1) br:nth-of-type(2),
.message__body:nth-of-type(2) br:nth-of-type(1),
.message__body:nth-of-type(2) br:nth-of-type(3){display:none}

/* ---- キャンペーン一覧 ---- */
.campaign{padding:0}
.campaign__head{padding-top:226px}   /* リボンの下端(1528px)から見出しまで。1920pxでも30px空く */
.campaign__sub{font-size:40px}
.campaign__main{font-size:56px;margin-top:34px}

.tickets{
  margin-top:67px;padding-bottom:6px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:41px;
}
.ticket+.ticket{margin-top:0}
.ticket__link{
  --stub-w:58px;
  --notch-x:calc(100% - 58px);
  --notch-r:12px;
  height:191px;
}
.ticket__link::before{transform:translate(6px,6px)}
.ticket__no{left:10px;top:8px;font-size:24px}
.ticket__body{padding-top:6px}
.ticket__eyebrow{font-size:16px}
.ticket__title{font-size:28px;line-height:36px;margin-top:12px}
.ticket__pill{margin-top:15px;height:23px;line-height:23px;border-radius:11.5px;font-size:14px;padding:0 15px}
.ticket__stub{padding-top:32px}
.ticket__stub::before{top:20px;bottom:20px}
.ticket__arrow{left:17px;top:133px}
@media (hover:hover) and (pointer:fine){
  .ticket__link:hover::before{transform:translate(9px,11px)}
  .ticket__link:active::before{transform:translate(6px,7px)}
}

/* ---- 詳細（01/02/03） ---- */
.detail{padding:0}
.detail--01{padding-top:60px}
.detail--02{padding-top:40px}
.detail--03{padding-top:41px}

.detail__head{height:155px;padding-top:12px}
.detail__eyebrow{font-size:24px;line-height:36px}
.detail__eyebrow span{padding:0 20px}
.detail__eyebrow span::before,
.detail__eyebrow span::after{top:10px;width:2px;height:19px}
.detail__eyebrow span::before{left:6px}
.detail__eyebrow span::after{right:6px}
.detail__title{font-size:40px;line-height:48px;margin-top:6px}
.detail__pill{margin-top:12px;height:27px;line-height:27px;border-radius:13.5px;font-size:16px;padding:0 20px}

.detail__inner,
.detail--03 .detail__inner{padding:0 39px 52px}
.detail__desc{padding-top:29px;font-size:16px;line-height:35px}
.detail--01 .detail__desc br:nth-of-type(1),
.detail--01 .detail__desc br:nth-of-type(3),
.detail--02 .detail__desc br:nth-of-type(1),
.detail--03 .detail__desc br:nth-of-type(2){display:none}
.detail__cta{margin-top:37px}

/* 賞（PC：3カラム） */
.prizes{
  margin-top:45px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
}
.prize{
  height:100px;margin:0 !important;padding-left:51px;
  display:flex;align-items:center;   /* テキストをベージュ枠の上下中央に置く */
}
.prize--1,.prize--2,.prize--3{height:100px}
.prize--1 .prize__medal{top:-35px;width:70px}
.prize--2 .prize__medal,.prize--3 .prize__medal{top:-21px;width:56px}

/* 等級はメダルの中心にセンタリング（カンプ実測） */
.prize__rank{
  left:0;
  display:flex;align-items:center;justify-content:center;
}
.prize__rank b{letter-spacing:0}
.prize--1 .prize__rank{top:-35px;width:70px;height:70px;font-size:32px}
.prize--1 .prize__rank em{position:relative;top:-3px}   /* 「1」が下に垂れて見えるので上げる */
.prize--1 .prize__rank b{font-size:16px}
.prize--2 .prize__rank,.prize--3 .prize__rank{top:-21px;width:56px;height:56px;font-size:24px}
.prize--2 .prize__rank b,.prize--3 .prize__rank b{font-size:14px}

.prize__text{position:relative;left:auto;right:auto;top:auto;white-space:nowrap}
.prize--1 .prize__text,.prize--2 .prize__text{top:auto;font-size:40px;padding-bottom:8px}
.prize--3{justify-content:center;padding-left:0}   /* 文字は左揃えのまま、枠の中央に配置 */
.prize--3 .prize__text{top:auto;font-size:16px;line-height:29px;padding-bottom:8px}
.prize__when,.prize--1 .prize__when{font-size:16px}
.prize__what,.prize--1 .prize__what{font-size:24px}
.prize--3 .prize__what{font-size:16px}
.prize--1 .prize__num,.prize--2 .prize__num{font-size:40px}
.prize--1 .prize__unit,.prize--2 .prize__unit{font-size:24px}
.prize__text--2l small{font-size:14px}
.prize__free{font-size:24px}

/* オファー（02/03） */
.offer{width:min(500px,100%);margin:25px auto 0;padding:18px 20px 26px}
.offer__tag{top:-11px;height:22px;line-height:22px;font-size:14px;padding:0 14px}
.offer__main{font-size:40px;padding-bottom:8px}
.offer__when{font-size:16px}
.offer__what{font-size:24px}
.offer__num{font-size:40px}
.offer__unit{font-size:24px}

.offer--wide{width:min(900px,100%);margin-top:24px;padding:29px 0 35px}
.offer__lead{font-size:24px;padding-bottom:11px}
.options{margin-top:22px;padding:0 35px}
.option{gap:18px;align-items:flex-start}
.option+.option{margin-top:21px}
.option__mark{width:26px;height:26px;line-height:26px;font-size:15px}
.option__body{display:flex;align-items:baseline;gap:25px;padding-top:2px}
.option__title{font-size:20px;line-height:26px;flex:none}
.option__desc{margin-top:0;font-size:16px;line-height:26px}
.option__desc br{display:none}

/* 概要リスト（PC：2カラム） */
.info{
  margin-top:38px !important;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:48px;row-gap:24px;
}
.info__row+.info__row{margin-top:0}
.info dt{font-size:16px;line-height:1}
.info dd{font-size:16px;line-height:30px;padding-bottom:6px;margin-top:11px}

/* ---- 注意事項 ---- */
.notes{padding:60px 0 0}
.notes__card{border-radius:var(--r-card);padding:32px 30px 29px}
.notes__head{font-size:20px;margin-bottom:19px}
.notes__item{font-size:16px;line-height:1.45;padding-left:14px;text-indent:-14px}
.notes__item::before{top:-2px;margin-right:8px}
.notes__item+.notes__item{margin-top:16px}

/* ---- CTA ---- */
.cta{padding:100px 0 0}
.cta__card{min-height:282px;padding:55px 0 0}
.cta__title{font-size:40px;line-height:48px}
.cta__title br{display:none}
.cta__btns{display:flex;justify-content:center;gap:35px;margin-top:39px}
.cta__btns .btn{margin:0}
.cta__btns .btn+.btn{margin-top:0}
.cta__ill--board{right:19px;left:auto;top:75px;width:119px}
.cta__ill--meeting{left:0;top:293px;width:213px}

/* ---- FAQ ---- */
.faq{padding:166px 0 0}
.faq__head{font-size:56px}
.faq__list{margin-top:40px}
.faq__item+.faq__item{margin-top:20px}
.faq__q{padding:31px 70px 31px 72px}
.faq__mark{left:30px;top:24px;font-size:32px}
.faq__text{font-size:20px;line-height:30px}
.faq__icon{right:40px;top:35px;width:20px;height:20px}
.faq__icon::before{top:9px;width:20px}
.faq__icon::after{left:9px;height:20px}
.faq__a p{margin:0 30px;padding:17px 0 23px;font-size:16px;line-height:35px}

/* ---- footer ---- */
.footer{
  position:relative;
  max-width:none;margin-top:100px;
  border-radius:30px 30px 0 0;
  padding:43px max(var(--pc-side),calc((100% - var(--pc-w)) / 2)) 18px;
}
.footer__inner{position:relative;max-width:var(--pc-w);margin-inline:auto}
.footer__logo{position:absolute;left:0;top:302px;width:265px;margin:0}
.footer__title{margin-top:0;font-size:40px;line-height:48px}
.footer__title br{display:none}
.footer__body{margin-top:23px;font-size:16px;line-height:35px}
.footer__body br:nth-of-type(2){display:none}
.footer__btn{margin-top:28px}
.footer__info{
  margin-top:34px;padding-top:41px;
  display:grid;grid-template-columns:minmax(285px,414px) minmax(0,1fr) auto;
}
.footer__name{grid-column:2;grid-row:1;font-size:20px;line-height:1}
.footer__addr{grid-column:2;grid-row:2;margin-top:12px;font-size:16px;line-height:30px}
.footer__tel{grid-column:3;grid-row:1 / 3;align-self:end;margin-top:0;font-size:16px;line-height:30px}
.footer__tel br{display:none}
.footer__copy{margin-top:13px;font-size:14px;line-height:1;text-align:right}


/* 1366px未満：PCレイアウトのままチケット内の文字を詰めて収める */
@media (max-width:1365px){
  .ticket__eyebrow{font-size:14px}
  .ticket__title{font-size:24px;line-height:32px}
  .ticket__pill{font-size:12px;padding:0 10px}
}


html:not(.js) .mv__ribbon{background-image:url(../img/ribbon-mv-pc-still.png)}

}