@charset "utf-8";
/* =========================================================================================
PAGE HEADER
=========================================================================================*/
body.monodukuri-park .page-header {
    background: #00a4e3;
}

/* =========================================================================================
LAYOUT
=========================================================================================*/
body.monodukuri-park #main {
    background: linear-gradient(to right, #d9f3ff 0%, #e0fff2 100%);
}

/* =========================================================================================
PARK
=========================================================================================*/
section.park .inner h2 {
    width: fit-content;
    margin-inline: auto;
    margin-bottom: 50px;
}
section.park .inner > p.explanation {
    margin-bottom: 2em;
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

/*block*/
section.park .block {
    padding-block: 50px;
}
section.park .block h3 {
    text-align: center;
    font-size: clamp(1.25rem, calc(1.039rem + 0.899vw), 1.5rem); /* min: 20px, max: 24px */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em 1em;
    margin-bottom: 2.5em;
    position: relative;
    z-index: 1;
}
section.park .block h3::before {
    content: "";
    width: 80px;
    aspect-ratio: 80 / 28;
    background: url(../images/page/event/monodukuri-park/object_emphasis_pink.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% -150%;
    z-index: 5;
}
section.park .block h3 span {
    position: relative;
    z-index: 1;
}
section.park .block h3 span::before,
section.park .block h3 span::after {
    content: "";
    background: no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    z-index: 5;
}
section.park .block h3 span::before {
    left: 0;
    translate: -110% -50%;
}
section.park .block h3 span::after {
    right: 0;
    translate: 120% -50%;
}
section.park .block .box .text {
    /* text-align: center; */
}
section.park .block .box .text h4 {
    font-size: clamp(1.75rem, calc(1.118rem + 2.697vw), 2.5rem); /* min: 28px, max: 40px */
    font-weight: var(--black-font-weight);
    line-height: 1.4;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0.75em;
}
@media only screen and (max-width: 820px) {
    section.park .block h3 {
        margin-bottom: 2em;
    }
}
@media only screen and (max-width: 468px) {
    section.park .block h3 {
        margin-bottom: 1.5em;
    }
}

/*block-become*/
section.park .block.become h3 {
    color: #ff65a8;
    background: #ffd9ea;
}
section.park .block.become h3 span::before {
    width: 75px;
    aspect-ratio: 1 / 1;
    background-image: url(../images/page/event/monodukuri-park/object_jacket.svg);
    top: 10%;
}
section.park .block.become h3 span::after {
    width: 65px;
    aspect-ratio: 65 / 75;
    background-image: url(../images/page/event/monodukuri-park/object_photo.svg);
    top: 125%;
}
section.park .block.become .box {
    display: grid;
    grid-template-columns: 1fr minmax(125px, 22.5%);
    gap: 20px;
}
section.park .block.become .box .text h4 {
    color: #ff65a8;
}
section.park .block.become .box .text p {
    width: 100%;
    max-width: 715px;
    margin: auto;
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
    section.park .block.become .box {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
    section.park .block.become .box .image {
        max-width: 200px;
        margin: auto;
    }
}

/*block-find*/
section.park .block.find h3 {
    color: #1695d8;
    background: #e0ffff;
}
section.park .block.find h3::before {
    background-image: url(../images/page/event/monodukuri-park/object_emphasis_blue.svg);
}
section.park .block.find h3 span::before {
    display: none;
}
section.park .block.find h3 span::after {
    width: 68px;
    aspect-ratio: 68 / 74;
    background-image: url(../images/page/event/monodukuri-park/object_note.svg);
    top: 10%;
}
section.park .block.find .box {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
}
section.park .block.find .box .text h4 {
    color: #008ad4;
}
section.park .block.find .box:last-child {
    padding-block: 100px 75px;
}
section.park .block.find .box .image {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin: 1em 0;
}
@media only screen and (max-width: 820px) {
    section.park .block.find .box:last-child {
        padding-block: 75px 50px;
    }
    section.park .block.find .box .image {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}
@media only screen and (max-width: 468px) {
    section.park .block.find .box:last-child {
        padding-block: 50px 0px;
    }
}

/*block-try*/
section.park .block.try {
    margin-bottom: 100px;
}
section.park .block.try h3 {
    color: #ff5800;
    background: #ffedda;
}
section.park .block.try h3::before {
    background-image: url(../images/page/event/monodukuri-park/object_emphasis_orange.svg);
}
section.park .block.try h3 span::before {
    width: 85px;
    aspect-ratio: 85 / 57;
    background-image: url(../images/page/event/monodukuri-park/object_vr.svg);
    top: 10%;
    left: -7.5%;
}
section.park .block.try h3 span::after {
    display: none;
    /* width: 92px;
    aspect-ratio: 92 / 66;
    background-image: url(../images/page/event/monodukuri-park/object_dojo.svg); */
}
section.park .block.try .box {
    display: grid;
    grid-template-columns: minmax(250px, 40%) 1fr;
    gap: 30px;
}
section.park .block.try .box .text {
    order: 2;
}
section.park .block.try .box .text h4 {
    color: #ff5700;
}
section.park .block.try .box .image {
    order: 1;
}
@media only screen and (max-width: 820px) {
    section.park .block.try {
        margin-bottom: 75px;
    }
    section.park .block.try .box {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
    section.park .block.try .box .text {
        order: 1;
    }
    section.park .block.try .box .image {
        order: 2;
        max-width: 500px;
        margin: auto;
    }
}
@media only screen and (max-width: 468px) {
    section.park .block.try {
        margin-bottom: 50px;
    }
}

/*stage*/
:root {
    --stage-color: #00a5ea;
}
section.park .stage {
    border: 13px solid var(--stage-color);
    padding: 75px 3.5% 0;
    position: relative;
    z-index: 1;
}
section.park .stage h3 {
    color: #fff;
    font-size: clamp(1.875rem, calc(0.295rem + 6.742vw), 3.75rem); /* min: 30px, max: 60px */
    font-weight: var(--black-font-weight);
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
    width: fit-content;
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--stage-color);
    clip-path: polygon(7.5% 0, 0 50%, 7.5% 100%, 92.5% 100%, 100% 50%, 92.5% 0);
    padding: 0.15em 1em;
    margin: auto;
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% calc(-50% - 6px);
    z-index: 10;
}
section.park .stage .box {
    margin: 0 auto 35px;
    border: 4px solid var(--stage-color);
}
section.park .stage .box h4 {
    color: #fff;
    font-size: clamp(1.25rem, calc(0.197rem + 4.494vw), 2.5rem); /* min: 20px, max: 40px */
    font-weight: var(--black-font-weight);
    text-align: center;
    line-height: 1.4;
    background-color: var(--stage-color);
    padding: 5px 0.5em 7px;
}
section.park .stage .box h4 span {
    width: fit-content;
    display: block;
    padding: 0.25em 200px 0.25em 0;
    margin: auto;
    position: relative;
    z-index: 1;
}
section.park .stage .box h4 span .image {
    width: 200px;
    position: absolute;
    top: 50%;
    right: 0;
    translate: 0 -60%;
    z-index: 10;
}
section.park .stage .box > p {
    font-weight: var(--black-font-weight);
    color: #104b9b;
    width: 94%;
    font-size: clamp(1.25rem, calc(0.934rem + 1.348vw), 1.625rem); /* min: 20px, max: 26px */
    line-height: 1.6;
    margin: 1em auto 0;
}
section.park .stage .box dl {
    width: 94%;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 30px;
    margin: 20px auto 20px;
}
section.park .stage .box dl dt {
    font-size: clamp(1.875rem, calc(0.716rem + 4.944vw), 3.25rem); /* min: 30px, max: 52px */
    font-weight: var(--bold-font-weight);
    line-height: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 15px;
}
section.park .stage .box dl dt .time {
    font-size: clamp(1.25rem, calc(0.618rem + 2.697vw), 2rem); /* min: 20px, max: 32px */
}
section.park .stage .box dl dt span {
    font-size: 1.25em;
    margin-right: 0.1em;
}
section.park .stage .box table {
    font-size: clamp(1.25rem, calc(0.618rem + 2.697vw), 2rem); /* min: 20px, max: 32px */
    line-height: 1.5;
    border-collapse: collapse;
    border-spacing: 0;
}
section.park .stage .box table th,
section.park .stage .box table td {
    vertical-align: top;
    background: none;
    border-bottom: 1px solid #707070;
    padding: 10px 0;
}
section.park .stage .box table th {
    white-space: nowrap;
    padding-right: 0.5em;
}
section.park .stage .box table tr:last-child th,
section.park .stage .box table tr:last-child td {
    border-bottom: none;
}
section.park .stage .box table td span {
    display: block;
    font-weight: var(--normal-font-weight);
    font-size: clamp(1rem, calc(0.394rem + 1.182vw), 1.813rem); /* min: 16px, max: 29px */
}
section.park .stage .box dl.time {
    padding-block: 10px 0;
}
section.park .stage .box dl.time + dl.time {
    border-top: 1px solid #707070;
}
section.park .stage .box dl.time dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1em;
}
section.park .stage .box dl.time dd b {
    font-size: clamp(1.25rem, calc(0.618rem + 2.697vw), 2rem); /* min: 20px, max: 32px */
    line-height: 1.5;
}
section.park .stage .box dl.time dd p {
    width: 100%;
    font-size: clamp(1rem, calc(0.579rem + 1.798vw), 1.5rem); /* min: 16px, max: 24px */
    font-weight: var(--bold-font-weight);
    line-height: 1.5;
}
section.park .stage .box dl.time dd hr {
    width: 100%;
    max-width: none;
    background: #707070;
    margin: 1em 0;
}
section.park .stage .box dl table.performers {
    font-size: clamp(1rem, calc(0.789rem + 0.899vw), 1.25rem); /* min: 16px, max: 20px */
    margin-block: 0.5em;
}
section.park .stage .box dl table.performers th {
    width: fit-content;
    color: #fff;
    vertical-align: middle;
    font-weight: var(--black-font-weight);
    background-color: #104b9b;
    writing-mode: vertical-lr;
    letter-spacing: 0.25em;
    line-height: 1;
    padding: 0.5em !important;
}
section.park .stage .box dl table.performers td {
    padding: 0 0 0 0.5em;
}
section.park .stage .box dl dd ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 20px;
    margin-top: 1em;
}
section.park .stage .box dl dd ul li p {
    font-size: 0.8em;
    text-align: center;
    margin-top: 0.5em;
}
section.park .stage .box dl dd strong {
    color: #104b9b;
}
@media only screen and (max-width: 980px) {
    section.park .stage {
        border: 8px solid var(--stage-color);
    }
    section.park .stage .box dl {
        display: block;
    }
    section.park .stage .box dl dt {
        width: 100%;
        align-items: center;
        justify-content: center;
        padding-block: 0.375em;
    }
    section.park .stage .box h4 span {
        padding: 0.25em 120px 0.25em 0;
    }
    section.park .stage .box h4 span .image {
        width: 180px;
        translate: 30% -60%;
    }
}
@media only screen and (max-width: 468px) {
    section.park .stage {
        padding-block: 50px 0;
    }
    section.park .stage .box h4 span {
        padding: 0.25em 100px 0.25em 0;
    }
    section.park .stage .box h4 span .image {
        width: 140px;
    }
    section.park .stage .box dl,
    section.park .stage .box > p {
        width: calc(100% - 20px - 20px);
    }
    section.park .stage .box table th,
    section.park .stage .box table td {
        text-align: left;
        display: block;
        width: 100%;
    }
    section.park .stage .box table th {
        border-bottom: none;
        padding: 10px 0 0 0;
    }
    section.park .stage .box table td {
        padding: 0 0 10px 0;
    }
    section.park .stage .box dl table.performers th {
        width: 100%;
        writing-mode: horizontal-tb;
        letter-spacing: 0.1em;
        text-align: center;
    }
    section.park .stage .box dl table.performers td {
        padding: 0.5em 0 0 0;
    }
}