@charset "UTF-8";

:root{
  --navy:#132133;
  --teal:#0e8a8f;
  --orange:#f06a30;
  --mustard:#f4b128;
  --purple:#6b5b8a;
  --cream:#fff8eb;
  --black:#22252a;
  --mobile-width:480px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:#FFE6B7;
  color:var(--black);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}


/* =========================
   MAIN LP
========================== */

.lp{
  position:relative;
  z-index:10;
  width:100%;
  max-width:var(--mobile-width);
  margin:0 auto;
  background:#fff;
  min-height:100vh;
  box-shadow:0 0 28px rgba(19,33,51,.16);
}

.image-section{
  margin:0;
  padding:0;
  line-height:0;
}

.image-section img{
  display:block;
  width:100%;
  height:auto;
}

.image-section a{
  display:block;
}


/* =========================
   PC SIDE
========================== */

.pc-side{
  display:none;
}


@media (min-width:1100px){

  body{
    overflow-x:hidden;
    background:
      linear-gradient(rgba(255,230,183,.95), rgba(255,230,183,.95)),
      url("assets/pc-bg-pattern.png") center/420px auto repeat;
  }

  .pc-side{
    display:block;
    position:fixed;
    top:0;
    bottom:0;
    width:calc((100vw - var(--mobile-width))/2);
    z-index:1;
    overflow:hidden;
  }

  .pc-side--left{
    left:0;
  }

  .pc-side--right{
    right:0;
  }


  /* =========================
     PC SIDE INNER
  ========================== */

  .pc-side__inner{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:min(360px,78%);
    left:9%;
    z-index:3;
  }

  .pc-side__inner--right{
    left:auto;
    right:9%;
    text-align:right;
  }


  /* =========================
     LEFT : LOGO
  ========================== */

  .pc-side__logo{
    display:block;
    width:min(280px,100%);
    height:auto;
    margin-bottom:8px;
  }

  .pc-side__tagline{
    margin:0 0 28px;
    color:var(--navy);
    font-weight:900;
    letter-spacing:.08em;
  }


  /* =========================
     LEFT : COPY
  ========================== */

  .pc-side__lead{
    margin:0 0 15px;
    color:var(--navy);
    font-size:clamp(24px,2vw,38px);
    line-height:1.35;
    font-weight:900;
  }

  .pc-side__lead strong{
    color:var(--orange);
  }

  .pc-side__text{
    margin:0;
    font-size:13px;
    line-height:1.9;
    font-weight:700;
  }


  /* =========================
     LEFT : ENTRY BUTTON
  ========================== */

  .pc-side__entry{
    display:flex;
    flex-direction:column;
    justify-content:center;
    margin-top:28px;
    padding:18px 22px;
    min-height:88px;
    border-radius:18px;
    background:var(--orange);
    color:#fff;
    text-decoration:none;
    box-shadow:8px 8px 0 var(--navy);
    transition:.18s ease;
  }

  .pc-side__entry:hover{
    transform:translate(3px,3px);
    box-shadow:5px 5px 0 var(--navy);
  }

  .pc-side__entry span{
    font-size:28px;
    line-height:1;
    font-weight:1000;
    letter-spacing:.03em;
  }

  .pc-side__entry small{
    margin-top:8px;
    font-size:12px;
    font-weight:800;
  }


  /* =========================
     LEFT : ENTRY NOTE
  ========================== */

  .pc-side__entry-note{
    margin-top:20px;
    max-width:340px;
    color:var(--black);
  }

  /*
   上部の
   「見て楽しんで、体験して楽しめる。」
   「みんなでつくる参加型フェス。」
   と同じ文字サイズ・行間
  */
.pc-side__entry-note p{
  margin:0;
  font-size:13px;
  line-height:1.9;
  font-weight:400;
  color:#e46933;
}

.pc-side__entry-guide{
  margin-top:12px !important;
  font-size:13px !important;
  line-height:1.9 !important;
  font-weight:700 !important;
  color:var(--navy) !important;
}

  /* =========================
     LEFT : GUIDELINE LINK
  ========================== */

  .pc-side__guideline{
    display:inline-flex;
    align-items:center;
    gap:7px;

    margin-top:9px;
    padding:0;

    background:transparent;
    border:none;

    color:var(--teal);

    font-size:13px;
    line-height:1.6;
    font-weight:900;

    text-decoration:none;
    border-bottom:1.5px solid currentColor;

    transition:
      color .18s ease,
      opacity .18s ease;
  }

  .pc-side__guideline:hover{
    color:var(--orange);
    opacity:.9;
  }

  .pc-side__guideline-arrow{
    display:inline-block;
    font-size:14px;
    line-height:1;
    transition:transform .18s ease;
  }

  .pc-side__guideline:hover .pc-side__guideline-arrow{
    transform:translateY(2px);
  }


  /* =========================
     RIGHT : EVENT INFO
  ========================== */

  .pc-side__info{
    display:inline-block;
    padding:22px 24px;
    border:3px solid var(--navy);
    border-radius:22px;
    background:rgba(255,255,255,.82);
    box-shadow:8px 8px 0 var(--navy);
    text-align:left;
  }

  .pc-side__date{
    margin:0;
    color:var(--navy);
    font-size:clamp(32px,3vw,54px);
    line-height:1;
    font-weight:1000;
  }

  .pc-side__date span{
    color:var(--orange);
    font-size:.42em;
    vertical-align:middle;
  }

  .pc-side__time{
    margin:8px 0 14px;
    color:var(--navy);
    font-size:18px;
    font-weight:900;
  }

  .pc-side__place{
    margin:0;
    color:#fff;
    background:var(--teal);
    padding:12px 14px;
    border-radius:12px;
    font-size:15px;
    line-height:1.45;
    font-weight:900;
  }


  /* =========================
     RIGHT : CATEGORIES
  ========================== */

  .pc-side__categories{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:7px;
    margin-top:24px;
  }

  .pc-side__categories span{
    display:inline-block;
    padding:7px 10px;
    border-radius:999px;
    background:var(--navy);
    color:#fff;
    font-size:11px;
    font-weight:900;
  }

  .pc-side__categories span:nth-child(2){
    background:#667f3c;
  }

  .pc-side__categories span:nth-child(3){
    background:var(--orange);
  }

  .pc-side__categories span:nth-child(4){
    background:var(--purple);
  }

  .pc-side__categories span:nth-child(5){
    background:var(--teal);
  }


  /* =========================
     PC DECORATION
  ========================== */

  .pc-side__deco{
    position:absolute;
    z-index:1;
    pointer-events:none;
    user-select:none;
  }

  .pc-side__deco--01{
    width:150px;
    left:1%;
    top:5%;
    transform:rotate(-8deg);
  }

  .pc-side__deco--02{
    width:180px;
    right:2%;
    bottom:2%;
    transform:rotate(5deg);
  }

  .pc-side__deco--03{
    width:160px;
    right:2%;
    top:5%;
    transform:rotate(8deg);
  }

  .pc-side__deco--04{
    width:190px;
    left:2%;
    bottom:2%;
    transform:rotate(-6deg);
  }

}


/* =========================
   MOBILE FIXED ENTRY
========================== */

.mobile-entry{
  position:fixed;
  z-index:50;
  left:50%;
  bottom:max(10px, env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:calc(100% - 28px);
  max-width:430px;
}

.mobile-entry a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  border:2px solid #fff;
  border-radius:999px;
  background:var(--orange);
  color:#fff;
  text-decoration:none;
  box-shadow:0 7px 18px rgba(19,33,51,.25);
}

.mobile-entry span{
  font-size:17px;
  font-weight:1000;
  letter-spacing:.02em;
}

.mobile-entry small{
  font-size:11px;
  font-weight:800;
  text-align:right;
}


/* =========================
   RESPONSIVE
========================== */

@media (min-width:1100px){

  .mobile-entry{
    display:none;
  }

}

@media (max-width:1099px){

  .lp{
    padding-bottom:78px;
  }

}