:root {
 --color-txtlink: #2817e7;
 --color-white1: hsl(0, 0%, 100%);
 --color-black: hsl(0, 0%, 0%);
 --color-gray1: hsl(0, 0%, 93%);
 --color-gray2: hsl(0, 0%, 80%);
 --color-gray3: hsl(0, 0%, 60%);
 --color-blue1: hsl(200, 85%, 60%);
 --color-blue2: hsl(214, 79%, 60%);
 --color-blue3: hsl(214, 79%, 40%);
 --color-orange1: hsl(35, 100%, 50%);
 --color-orange2: hsl(35, 100%, 60%);
 --color-lblue1: hsl(201, 100%, 96%);
 --color-lblue2: hsl(201, 100%, 80%);
 --color-liberty1: hsl(169, 100%, 97%);
 --color-liberty2: hsl(169, 47%, 65%);
 --color-liberty3: hsl(169, 65%, 37%);
 --color-event0: hsl(205, 100%, 33%);
 --color-event1: hsl(212, 47%, 49%);
 --color-event2: hsl(228, 56%, 98%);
 --color-event3: hsl(358, 67%, 41%);
 --color-event4: hsl(55, 100%, 95%);
}

.l-header {
 position: relative;
}
.l-wrapper {
 position: sticky;
 top: 0;
 z-index: 1;
}

main {
 margin-inline: auto;
 padding: 0;
}
section > div {
 padding: 1em;
 max-width: 1000px;
 margin-inline: auto;
}

section.beginning-box {
 background: var(--color-event2);
}
section.beginning-box > div {
 max-width: 1000px;
 margin-inline: auto;
}
section.beginning-box > div > h2 {
 color: var(--color-event3);
 font-weight: 800;
 font-size: clamp(1.2em, 5.0vw, 2.0em);
}
h2 .sub {
 font-size: .6em;
}

section.evt-order {
 background: #c8dff4;
 padding: 0 0 2em;
}
section.evt-order > div {
 max-width: 650px;
 margin-inline: auto;
}
.allfadein {
 animation-name: fadeIn;
 animation-duration: 1.0s;
 animation-fill-mode: forwards;
 animation-timing-function: ease-in;
}
@keyframes fadeIn {
 0% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}
.box-flex {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 10px;
 background: var(--color-gray1);
 padding: .6em;
 border-radius: 5px;
 margin-top: .5em;
}
.box-flex > li {
 display: flex;
 background: var(--color-white1);
 border-radius: 5px;
 padding: .5em;
 font-size: .9em;
 line-height: 1.3;
 gap: 1em;
 align-items: center;
}
.box-flex > li .box-img {
 width: 60px;
 background: var(--color-gray1);
 border-radius: 100px;
}
.box-flex > li > div:last-child {
 flex: 1;
}
.pdem {
 padding: .3em;
}

/*メディアクエリ*/
@media screen and (min-width:375px) {}
@media screen and (min-width:1024px) {
 .beginning-box h2 {
  font-size: 2.0em;
 }
}