bundle.css

.HEAD1 {
  font-weight: regular;
  font-size: 80px;
  letter-spacing: 0.2rem;
  line-height: 1.67;
  margin: 0.2rem;
}

.HEAD2 {
  font-weight: regular;
  font-size: 60px;
  letter-spacing: 0.2rem;
  line-height: 1.67;
  margin: 0.4rem;
}
.HEAD3 {
  font-weight: regular;
  font-size: 36px;
  letter-spacing: 0.2rem;
  line-height: 1.67;
  margin: 1rem auto;
}

.HEAD4 {
  font-weight: bold;
  font-size: 20px;
  line-height: 1.5;
  margin: 2rem auto;
}

.white {
  color: white;
}

.right-line {
  border-right: 1px solid black;
}

.section-top-margin {
  margin-top: 8rem;
}

.section-bottom-margin {
  margin-bottom: 8rem;
}

.margin-bottom-small {
  margin-bottom: 1rem;
}

.background-white {
  background-color: white;
}
.background-purple100 {
  background-color: #d5485e;
}

.background-purple200 {
  background-color: #d54889;
}

.background-purple300 {
  background-color: #d548bf;
}
.background-purple400 {
  background-color: #af48d5;
}

.background-purple500 {
  background-color: #9448d5;
}

.background-purple600 {
  background-color: #7948d5;
}
.background-purple700 {
  background-color: #613fbc;
}

.background-orange100 {
  background-color: #ABB11F;
}

.background-orange200 {
  background-color: #B1A01F;
}

.background-orange300 {
  background-color: #B16E1F;
}
.background-orange400 {
  background-color: #B15D1F;
}

.background-orange500 {
  background-color: #B74827;
}
.background-orange600 {
  background-color: #BF4731;
}
.background-orange700 {
  background-color: #CC4040;
}

:root {
  --shadow-purple: #443aa8;
  --main-purple: #1d1569;
  --purple700: #613fbc;
  --purple600: #7948d5;
  --purple500: #9448d5;
  --purple400: #af48d5;
  --purple300: #d548bf;
  --purple200: #d54889;
  --purple100: #d5485e;
  --orange700: #CC4040;
  --orange600: #BF4731;
  --orange500: #B74827;
  --orange400: #B15D1F;
  --orange300: #B16E1F;
  --orange200: #B1A01F;
  --porange100: #ABB11F;
  --gallery-red: #ff006b;
  --gallery-link: #ffc2a7;
  --sketch-red: #ff006b;
  --sketch-peach: #f8907c;
  --sketch-pink: #ffc2a7;
  --sketch-yellow: #ffec57;
  --sketch-lime: #9ef2bb;
  --sketch-sky: #5fe0ff;
  --sketch-ocean: #6cbaf4;
  --sketch-purple: #b4adff;
}

.c1 {
  color: var(--sketch-purple);
}

button,
hr,
input {
  overflow: visible;
}
audio,
canvas,
progress,
video {
  display: inline-block;
}
progress,
sub,
sup {
  vertical-align: baseline;
}
body,
sub,
sup {
  position: relative;
}
body,
mark {
  color: #000;
}
*,
legend {
  box-sizing: border-box;
}
.nav,
html,
section {
  width: 100%;
}
.hdg__lv2,
section {
  text-align: left;
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  src: local("Noto Sans Japanese Regular"), local("NotoSansJapanese-Regular"),
    url(https://fonts.gstatic.com/s/notosansjp/v24/-F62fjtqLzI2JPCgQBnw7HFYwQgM.otf)
      format("opentype");
}
@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 400;
  src: local("Nunito Regular"), local("Nunito-Regular"),
    url(https://fonts.gstatic.com/s/nunito/v12/XRXV3I6Li01BKofINeaE.ttf)
      format("truetype");
} /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

html {
  line-height: 1.5;
  font-weight: 500;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  min-height: 100%;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
figure {
  margin: 1em 40px;
}
hr {
  box-sizing: content-box;
  height: 0;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
a {
  color: var(--sketch-ocean);
  font-weight: 600;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  text-decoration: none;
}
a:active,
a:hover {
  outline-width: 0;
  color: var(--sketch-sky);
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: bolder;
}
dfn {
  font-style: italic;
}
mark {
  background-color: #ff0;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
img {
  border-style: none;
}
svg:not(:root) {
  overflow: hidden;
}
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
select {
  text-transform: none;
}
[type="reset"],
[type="submit"],
button,
html [type="button"] {
  -webkit-appearance: button;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
  outline: ButtonText dotted 1px;
}
fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
summary {
  display: list-item;
}
[hidden],
template {
  display: none;
}
.hidetext {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
body {
  margin: 0;
  font-family: "Raleway", "Noto Sans JP", sans-serif;
  line-height: 1.5;
  font-weight: regular;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--main-purple);
  font-size: 18px;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "pwid";
  word-wrap: break-word;
}

a:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}
li,
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.sp {
  display: none !important;
}
.navigation {
  display: flex;
  position: absolute;
  top: 9rem;
  right: 1rem;
  width: 28%;
  line-height: 1.67;
  font-weight: 600;
  z-index: 10;
  transition: 0.6s;
  transform-style: preserve-3d;
  transform-origin: top;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.navigation ul {
  display: flex;
  flex-wrap: wrap;
}
.navigation li {
  padding-left: 0.5rem;
  flex-basis: 50%;
  font-size: 24px;
  margin: 0.5rem auto;
  border-left: 3px solid var(--sketch-purple);
  text-shadow: 2px 2px var(--shadow-purple);
}
.navigation a {
  color: white;
  flex-basis: 50%;
}
.navigation li:hover {
  background-color: var(--sketch-sky);
}

.link-to-gallery {
  display: flex;
  align-items: center;
  position: relative;
  font-size: 1.5rem;
  padding: 1rem;
  background-color: var(--gallery-link);
  box-shadow: 8px 8px var(--shadow-purple);
  border-bottom: none;
  margin-right: 0.5rem;
}
.link-to-twitter{
  background-color: var(--gallery-link);
  box-shadow: 8px 8px var(--shadow-purple);
  padding: 1rem;
  height: 60px;
}
.link-to-twitter img{
  height: 100%;
}
#G1{
  flex:5;
}
#G2{
  flex: 4;
}
.link-to-gallery:hover, .link-to-twitter:hover {
  background-color: var(--gallery-red);
  opacity: 1;
}
#gallery{
  position: fixed;
  top: 3rem;
  left: 56%;
  right: 1rem;
  width: auto;
  display: flex;
  flex-direction: row;
  z-index: 10000;
}
#gallery a {
  color: black;
}
.link-to-gallery img {
  width: 10%;
  margin-right: 1rem;
}
#notice {
  position: absolute;
  left: 70%;
  top: 60%;
  transform: translateY(50%);
  font-size: 48px;
  color: var(--sketch-purple);
  text-shadow: 8px 8px var(--shadow-purple);
  vertical-align: text-top;
}

#notice #date {
  margin-left: 1rem;
  font-weight: 600;
  line-height: 0.8;
  font-style: italic;
  letter-spacing: -0.4rem;
  font-size: 3em;
  color: white;
}

#notice #online {
  display: block;
  margin-top: -0.2rem;
  letter-spacing: 1rem;
}

#hero {
  position: relative;
}

#ticket .pticket,
.nav.is-active {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.nav > div {
  width: 96.25vw;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0 auto;
}
.nav > div > a {
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}
.nav > div ul,
.nav > div ul li {
  height: 100%;
  display: -ms-flexbox;
}
.nav > div ul {
  width: 29.6875vw;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
}
.nav > div ul li {
  width: auto;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.nav > div ul li a {
  display: -ms-flexbox;
  display: flex;
  display: -webkit-box;
}
.nav > div ul li a img {
  width: 2.34375vw;
}
#gmap {
  width: 100%;
  height: 400px;
  margin: 100px 0 50px;
}

#hero {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
#p5canvas {
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  width: 92%;
  margin: auto;
  z-index: 3;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  mask-image: url(images/logo-2021.png);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url(images/logo-2021.png);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  background-color: var(--main-purple);
}

#background {
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 90vh;
  z-index: -1;
  top: 0;
  left: 0;
  background-color: var(--main-purple);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

#bgcanvas {
  position: fixed;
  width: auto;
  z-index: -2;
  top: 0;
  left: 0;
  height: 100vh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.section-wrap {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
  padding: 3rem;
  box-shadow: 16px 16px var(--shadow-purple);
}
#shadow-image {
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  width: 92%;
  z-index: 1;
  top: 52%;
  left: 2.5rem;
  transform: translateY(-50%);
}

#shadow-image > img {
  width: 100%;
}

#sponsor-section {
  display: flex;
  justify-content: center;
  align-items: center;
}
#sponsor-section a{
  color: black;
}
#sponsor-section div {
  flex: 1;
  text-align: center;
  font-size: 1.5rem;
}
#sponsor-section div img {
  width: 50%;
}

#sns img {
  width: 54px;
}

.tt{
  font-size: 2rem;
  margin-right: 1rem;
}
.sd{
  font-size: 2rem;
  font-weight: 600;
}
#timetable-13 img{
width: 24px;
background-color: var(--sketch-pink);
}
#timetable-13 img:hover{
  width: 24px;
  background-color: var(--sketch-red);
  }

.section-wrap img.profile-image {
  position: absolute;
  top: 1rem;
  right: 0.8rem;
  width: 96px;
  box-shadow: 8px 8px var(--shadow-purple);
  cursor: pointer;
}
.section-wrap img.profile-image:hover, #profile-image-group .group-image:hover {
  box-shadow: 8px 8px var(--sketch-sky);
}

.section-wrap #profile-image-group {
  display: flex;
  position: absolute;
  top: 1rem;
  right: 0.8rem;
}

#profile-image-group .group-image{
  width: 70px;
  height: 70px;
  box-shadow: 8px 8px var(--shadow-purple);
}

@media screen and (max-width: 1024px) {
  .navigation {
    top: 5%;
    left: 1rem;
    width: 80%;
  }
  #notice {
    top: 68%;
    left: 1rem;
  }
  #p5canvas {
  }
  #shadow-image {
    left: 1rem;
  }
  .link-to-gallery {
    margin-right: 1rem;
  }
  
  .tt{
    font-size: 1.44rem;
    display: block;
    margin-top: 0.6rem;
    font-weight: bold;
  }
  .sd{
    font-size: 1.44rem;
  }
}

@media screen and (max-width: 767px) {
  .HEAD1 {
    font-size: 54px;
    letter-spacing: 0rem;
  }

  .HEAD2 {
    font-size: 42px;
  }
  .HEAD3 {
    font-size: 24px;
  }

  .HEAD4 {
    font-size: 18px;
  }
  .navigation li {
    font-size: 18px;
  }
  #background{
    min-height: 670px;
  }
  #p5canvas {
    top: 42%;
  }
  #shadow-image {
    top: 43%;
    left: 2rem;
  }
  #notice {
    font-size: 32px;
    top: 55%;
  }
  #gallery{
    top: auto;
    left: 0;
    bottom: 6%;
    width: auto;
  }
  .link-to-gallery {
    font-size: 16px;
    padding: 1rem 0.5rem;
  }
  .link-to-gallery img{
    margin-right: 0.5rem;
  }
  .section-wrap {
    width: auto;
    max-width: 100%;
    margin-left: 1rem;
    margin-right: 2rem;
    padding: 1rem;
  }

  #sponsor-section {
    flex-direction: column;
    color: black;
  }
  #sponsor-section div {
    margin: 2rem auto;
  }
  .right-line {
    border: none;
  }

  .section-wrap img.profile-image {
    position: relative;
    top: auto;
    right: auto;
  }

  .section-wrap #profile-image-group{
    position: relative;
    height: 70px;
    top: auto;
    right: auto;
  }
}

.footer {
  width: 100%;
  background-color: var(--orange400);
  height: 2rem;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
  color: white;
}