:root{ 
    --orange01: #FFA551;
    --orange02: #FF7E04;
    --blown: #3C2200;
    --yellow: #FFEC45;
    --white: #fff;
}

body{ background: #FFFBEF; } 

main{ margin-top: 0; }

footer > div{ width: 100%; }

section::before,section::after,.bg::before,.bg::after{ content: ''; position: absolute; background-repeat: no-repeat; background-size: contain; z-index: -20; }

.key{ margin-bottom: 42.667vw; }

.key::before{ background-image: url(../img/event-jobs/key_bg01.webp); width: 50vw; height: 42.667vw; top: -21.333vw; left: -21.333vw; }

.key::after{ 
    background-image: url(../img/event-jobs/key_bg01-01.webp); width: 35.333vw; height: 16.8vw; top: -9.6vw; left: 6.4vw;
}

.key .bg::before{ 
    background-image: url(../img/event-jobs/key_bg02.webp);
    width: 122.533vw;
    height: 85.333vw;
    top: -14.933vw;
    right: -93.867vw;
}

.key .bg::after{ 
    background-image: url(../img/event-jobs/key_bg02-01.webp);
    width: 18.133vw;
    height: 34.133vw;
    top: 18.133vw;
    right: -8.533vw;
}

.key .bg > p{ padding-top: 10.667vw; font-size: 5.333vw; font-weight: 600; text-align: center; color: var(--orange02); }

.key .bg > p span{ color: var(--blown); }

.key .bg > div{ width: 100%; padding-top: 9.6vw; margin: 4.267vw auto; text-align: center; position: relative; }

.key .bg > div::before{ content: ''; width: 98.933vw; height: 64vw; background: url(../img/event-jobs/key_txt_bg02.webp) no-repeat; background-size: contain; position: absolute; top: 0; left: 0; z-index: -10; }

.key .bg > div::after{ content: ''; width: 96.533vw; height: 60.8vw; background: url(../img/event-jobs/key_txt_bg01.webp) no-repeat; background-size: contain; position: absolute; top: 0.8vw; left: 1.467vw; z-index: -5; }

.key .copy{ width: fit-content; margin: 0 0 4.267vw 21.333vw; font-size: 4.267vw; font-weight: 600; color: var(--blown); position: relative; }

.key .copy::before{ content:''; width: 72.8vw; height: 11.733vw; background: url(../img/event-jobs/key_ribbon.webp) no-repeat; background-size: contain; position: absolute; top: -1.067vw; left: -11.734vw; z-index: -5; }

.key h1 p{ font-size: 10.133vw; font-weight: 600; line-height: 1.4; color: var(--white); -webkit-text-stroke: 2px var(--blown); text-stroke: 2px var(--blown); paint-order: stroke; }

.key h1 p span{ color: var(--yellow); }

.key .detail,.key .detail .date{ display: flex; align-items: flex-end; justify-content: center; gap: 0 0.533vw; }

.key .detail *{ font-weight: 600; line-height: 1; vertical-align: text-bottom; }

.key .detail .date p{ font-size: 3.733vw; writing-mode: sideways-lr; }

.key .detail .date strong{ font-size: 10.667vw; }

.key .detail .date span{ font-size: 3.2vw; color: var(--white); padding: 0.933vw 1vw 1.333vw 0.933vw; background: var(--blown); border-radius: 50%; }

.key .detail > p{ padding: 1.867vw 2.133vw; margin: 0 0.533vw -1.333vw; font-size: 3.2vw; line-height: 1.2; color: var(--blown); background: var(--yellow); border: 1px solid var(--blown); border-radius: 50%; }

.key .time{ position: relative; }

.key .detail .time p:first-child{ margin: 1.333vw 0; font-size: 4.8vw; }
.key .detail .time p:last-child{ margin-bottom: 0.533vw; font-size: 3.467vw; }

.key .sub{ font-size: 3.2vw; color: var(--orange01); position: absolute; bottom: -20.267vw; left: 33.067vw; }

.key .sub p{ padding: 2.667vw 4vw; font-weight: 600; position: relative; z-index: 10; }

.key .sub p::before{ content: ''; width: 34.133vw; height: 10.667vw; background: url(../img/event-jobs/key_comment.webp) no-repeat; background-size: contain; position: absolute; top: 0; left: 0; z-index: -5; }

.key .sub p::after{ content: ''; width: 35.2vw; height: 27.733vw; background: url(../img/event-jobs/key01.webp) no-repeat; background-size: contain; position: absolute; bottom: -10.667vw; left: -28.8vw; }

.key .time::before,.key .time::after{ content: ''; background-size: contain; background-repeat: no-repeat; position: absolute; }

.key .time::before{ background-image: url(../img/event-jobs/key02.webp); width: 19.2vw; height: 18.133vw; bottom: -22.4vw; left: 6.4vw; }

.key .time::after{ background-image: url(../img/event-jobs/key03.webp); width: 19.2vw; height: 18.133vw; bottom: -32vw; right: -7.467vw; }

h2{ font-size: 6.4vw; text-align: center; color: var(--blown); }

.company{ width: 92%; padding: 10.667vw 0 5.333vw; margin: 0 auto 16vw; border: 4px solid var(--orange01); background: var(--white); border-radius: 5.333vw; }

.company h2{ margin-bottom: 12.8vw; }

.company ul{ display: flex; flex-direction: column; align-items: center; gap: 5.333vw; width: 92%; margin: 0 auto; }

.company .ttl{ text-align: center; }

.company .ttl img{ width: auto; height: 11.733vw; margin: 0 auto 5.333vw; }

.company li:last-child .ttl img{ height: unset; width: 26.667vw; }

.company .pr{ margin-bottom: 2.133vw; text-align: center; font-weight: 600; font-size: 4.8vw; color: #51B459; }

.point{ margin: 21.333vw 0 14.933vw; }

.point::before{ content: ''; width: 202.667vw; height: 198.667vw; background: url(../img/event-jobs/point02.webp) no-repeat; background-size: contain; position: absolute; top: 0; left: -42.667vw; transform: rotate(36deg); }

.point h2{ width: fit-content; margin: 0 auto 17.067vw 28.8vw; position: relative; line-height: 1.4; }

.point h2::before{ content: ''; width: 17.067vw; height: 26.667vw; background: url(../img/event-jobs/point.webp) no-repeat; background-size: contain; position: absolute; top: -6.4vw; left: -17.067vw; }

.point ul{ display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 10.667vw; }

.point li{ width: 80vw; padding: 11.733vw 7.467vw 8.533vw; background: var(--white); border-radius: 2.667vw; position: relative; }

.point li .number{ border-radius: 50%; background: var(--orange01); display: flex; flex-direction: column; align-items: center; justify-content: center; width: 16vw; height: 16vw; position: absolute; font-size: 12.8vw; font-weight: 600; line-height: 1; top: -4.8vw; left: -3.2vw; }

.point li .number span{ color: var(--white); font-size: 2.667vw; }

.point li .number span:last-child{ font-size: 8.533vw; }

.point li h3{ margin-bottom: 3.2vw; font-size: 5.333vw; font-weight: 600; line-height: 1.4; color: var(--blown); text-align: center; }

.point li p{ font-size: 4.267vw; }

.access{ width: 80vw; margin: 0 auto 10.667vw; background: var(--white); padding: 10.667vw 0 7.467vw; border-radius: 2.667vw; }

.access::before{ width: 122.533vw; height: 85.867vw; background-image: url(../img/event-jobs/access01.webp); left: -77.867vw; top: -26.133vw; }

.access::after{ background-image: url(../img/event-jobs/key_bg02-01.webp); width: 21.333vw; height: 41.6vw; top: 42.667vw; left: -12.8vw; }

.access ul{ display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; gap: 4.267vw; position: relative; }

.access ul:nth-child(2):after{ content: ''; width: 101.333vw; height: 107.733vw; background: url(../img/event-jobs/access02.webp) no-repeat; background-size: contain; position: absolute; top: 50.133vw; right: -41.6vw; z-index: -10; }

.access .img{ padding: 8.533vw 3.2vw 2.133vw; }

.access h3{ font-size: 5.333vw; font-weight: 600; }

.access h4{ font-size: 4.267vw; margin: 2.133vw 0; }

.access p{ font-size: 4.267vw; }

.access ul:last-child{ padding: 8.533vw 4.267vw 0; }

.cta{ padding: 11.733vw 0 8.533vw; background: var(--orange01); }

.cta.cta-middle{ padding-bottom: 11.733vw; }
.cta.cta-middle::after{ bottom: 4.267vw; }

.cta::before, .cta::after {
    content: '';
    width: 100%;
    height: 4px;
    position: absolute;
    top: 4.267vw;
    left: 0;
    background-image: linear-gradient(to right, var(--white) 8px, transparent 8px);
    background-size: 16px 2px;
    background-repeat: repeat-x;
    z-index: 1;
}

.cta::after {
    top: unset;
    bottom: 4.267vw;
}

.cta h2{ position: relative; width: fit-content; margin: 0 auto 6.4vw; }

.cta h2::before{ content: ''; width: 90vw; height: 16vw; background: url(../img/event-jobs/cta_ribbon.webp) no-repeat; background-size: contain; top: 0; left: -12.8vw; position: absolute; z-index: 5; }

.cta h2 p{ position: relative; z-index: 10; }

.cta > p{ text-align: center; font-size: 5.333vw; font-weight: 600; color: var(--white); }

.cta > p span{ font-size: 4.267vw; color: var(--yellow); -webkit-text-stroke: 2px var(--blown); text-stroke: 2px var(--blown); paint-order: stroke; letter-spacing: 0.15em; }

.cta > p strong{ font-size: 10.667vw; letter-spacing: 0.03em; }

.cta .about{ font-size: 4.8vw; line-height: 1.4; color: var(--blown); }

.cta a{
    display: block;
    width: 77.867vw;
    height: unset;
    padding: 5.067vw 0;
    margin: 3.2vw auto;
    background: var(--blown);
    font-size: 4.8vw;
    font-weight: 600;
    line-height: 1;
    border: 2px solid var(--blown);
    border-radius: 80px;
    transition: all .2s ease-in-out; 
}

.cta a:hover{ background: var(--white); border: 2px solid var(--blown); color: var(--blown); }

footer .box{ padding: 5.333vw 0 4.267vw; text-align: center; background: var(--blown); }

footer .box *{ color: var(--white); font-weight: 400; }

footer .box h3{ margin-bottom: 2.133vw; font-size: 4vw; font-weight: 400; }

footer .box a,footer .box a:hover{ padding: 0; border: none; margin-bottom: 0; background: none; font-size: 4.8vw; line-height: 1.2; border-radius: 0; }

footer .tel span{ font-size: 3.2vw; }

footer .box .address{ font-size: 2.667vw; }

footer .box .address span{ font-size: 1.2em; }

footer .box .tel{ margin-bottom: 3.2vw; }

footer{ padding: 0; }

footer small{ background: var(--blown); }

@media (min-width: 979px) {

    .key::before{ width: 42.667vw; height: 35.2vw; }

    .key::after{ width: 25.6vw; height: 11.733vw; top: -5.333vw; }

    .key .bg::before{ width: 61.867vw; height: 45.867vw; top: -30.133vw; right: -19.2vw; }

    .key .bg::after{ width: 21.333vw; height: 21.333vw; top: 4.267vw; right: -10.667vw; background-image: url(../img/event-jobs/point01-1.webp); }

    .key .bg > p{ padding-top: 40px; font-size: 2.667vw; }

    .key .copy{ margin: 0 0 2.133vw 24.8vw; font-size: 2.4vw; }

    .key .copy::before{ width: 42.667vw; top: -0.533vw; left: -7.467vw; }

    .key .bg > div::before{ width: 74vw; background: url(../img/event-jobs/key_txt_bg02_pc.webp) no-repeat; background-size: contain; left: 74px; }

    .key .bg > div::after{ width: 70.4vw; background: url(../img/event-jobs/key_txt_bg01_pc.webp) no-repeat; background-size: contain; left: 96px; }

    .key .bg > div{ padding-top: 6.4vw; margin: 2.133vw auto; }

    .key h1 p{ width: fit-content; margin-left: 12.8vw; font-size: 6.4vw; }

    .key .detail{ justify-content: flex-start; margin-left: 13.6vw; }

    .key .detail .date p{ font-size: 2.133vw; }

    .key .detail .date strong{ font-size: 6.4vw; }

    .key .detail .date span{ padding: 0.533vw 0.533vw 0.8vw; font-size: 1.6vw; }

    .key .detail > p{ padding: 1.067vw 1.333vw; margin-bottom: -0.267vw; font-size: 1.867vw; }

    .key .detail .time p:first-child{ margin: 0.8vw 0; font-size: 2.667vw; }

    .key .detail .time p:last-child{ font-size: 1.867vw; letter-spacing: 0.1em; }

    .key .sub p::after{ width: 24.8vw; height: 18.133vw; left: 28.8vw; bottom: 20.267vw; }

    .key .time::before { width: 14.933vw; height: 14.933vw; bottom: -7.467vw; left: 19.2vw; }

    .key .time::after { width: 17.067vw; height: 14.933vw; bottom: -13.867vw; right: -30.933vw; }

    .key .sub { font-size: 1.867vw; bottom: -11.2vw; left: 36.267vw; }

    .key .sub p{ padding: 2.667vw 5.333vw; }

    .key .sub p::before { width: 24.8vw; height: 8.533vw; }

    .key{ margin-bottom: 248px; }

    h2{ font-size: 32px; }

    .company{ width: 1024px; padding: 56px; margin-bottom: 120px; }

    .company h2{ margin-bottom: 48px; }

    .company ul{ display: grid; gap: 0; justify-content: space-between; }

    .company li{ width: 240px; }

    .company li:first-child{ width: 200px; }
    .company li:nth-child(2){ grid-area: 1/2/2/3; width: 280px; }
    .company li:nth-child(3){ grid-area: 1/3/2/4; }
    .company li:nth-child(4){ grid-area: 2/1/3/3; width: 512px; }
    .company li:nth-child(5){ grid-area: 3/1/4/3; width: 512px; }
    .company li:nth-child(6){ grid-area: 2/3/4/4; width: 280px; display: flex; align-items: center; margin-top: 16px; }
    .company .ttl img{ margin-bottom: 40px; }
    .company li:nth-child(6) .ttl img{ width: 112px; height: unset; }
    .company li:nth-child(4) img,.company li:nth-child(5) img,.company li:nth-child(6) img{ margin-bottom: 0; }
    .company li:nth-child(4) .ttl img{ width: 320px; }
    .company li:nth-child(5) img{ width: 136px; margin: 32px auto 0; }

    .company .pr{ width: fit-content; margin: 0 16px; font-size: 20px; }

    .company .ttl img{ height: unset; }

    .point{ width: 1024px; margin: 196px auto; }

    .point h2::before { width: 180px; height: 278px; top: -128px; left: -214px; }

    .point h2{ margin: 0 auto 96px; }

    .point ul{ align-items: stretch; flex-direction: row; gap: 32px; }

    .point li .number{ width: 64px; height: 64px; top: -16px; left: -12px; }

    .point li .number span{ font-size: 12px; }

    .point li .number span:last-child{ font-size: 26px; }

    .point li h3{ margin-bottom: 24px; font-size: 28px; }

    .point li p{ font-size: 20px; }

    .point li{ width: 320px; padding: 56px 28px; }

    .point::before{ width: 1460px; height: 916px; top: -280px; left: -200px; transform: rotate(0); }

    .point::after{ width: 312px; height: 312px; top: -202px; left: -320px; background-image: url(../img/event-jobs/point01-1.webp); }

    .access{ width: 800px; padding: 40px 0; margin-bottom: 152px; }

    .access::before{ width: 902px; height: 672px; left: -816px; top: -160px; }

    .access::after { width: 312px; height: 312px; top: 320px; left: -464px; background-image: url(../img/event-jobs/point01-1.webp); }

    .access ul{ flex-direction: row; gap: 32px; }

    .access h3{ font-size: 24px; line-height: 1.6; }

    .access h4{ margin: 24px 0 8px; font-size: 20px; }

    .access p{ font-size: 16px; }

    .access .img{ padding: 48px 0 16px 16px; }

    .access ul:last-child{ width: 640px; margin: 0 auto; flex-direction: row-reverse; padding: 40px 0 0; justify-content: space-between; }

    .access ul:last-child img{ width: 320px; }

    .access ul:last-child p{ width: 280px; }

    .access ul:nth-child(2):before{ content: ''; position: absolute; width: 200px; height: 224px; top: -32px; right: -320px; background: url(../img/event-jobs/access02-1.webp) no-repeat; background-size: contain; }

    .access ul:nth-child(2)::after { width: 760px; height: 808px; top: 186px; right: -560px; }

    .cta{ padding: 96px 0 88px; }

    .cta.cta-middle{ padding-bottom: 96px; }
    .cta.cta-middle::after{ bottom: 40px; }

    .cta h2{ margin-bottom: 80px; }

    .cta h2::before{ width: 554px; height: 98px; left: -120px; top: -8px;  }

    .cta > p,.cta > p span{ font-size: 32px; line-height: 1.5; }

    .cta > p:nth-child(3){ margin-left: -32px; }

    .cta .about{ font-size: 24px; }

    .cta > p strong{ font-size: 80px; }

    .cta::before,.cta::after{ background-image: linear-gradient(to right, var(--white) 16px, transparent 10px); background-size: 26px 2px; }

    .cta::before{ top: 40px; }

    .cta::after{ bottom: 40px; }
    
    .cta a{ width: 320px; padding: 27px 0; margin: 24px auto 0; font-size: 24px; }

    .cta h2::after{ content: ''; width: 104px; height: 186px; background: url(../img/event-jobs/cta.webp) no-repeat; background-size: contain; position: absolute; top: 108px; right: -200px; z-index: 10; }

    footer .box h3{ margin-bottom: 0; font-size: 16px; grid-area: 1/1/2/2; }

    footer .box a,footer .box a:hover{ margin: 16px auto 8px; font-size: 20px; pointer-events: none; }

    footer .tel span{ display: block; font-size: 14px; }

    footer .box .address{ font-size: 12px; }

    footer .box{ display: grid; align-items: center; width: 584px; padding: 32px 0 40px; margin: 0 auto; }

    footer .box .tel{ grid-area: 2/1/3/2; margin: 8px 0 0; }

    footer .box .address{ grid-area: 1/2/3/3; text-align: left; }

    footer{ background: var(--blown); }

}