@charset "utf-8";

/*-----------------------

    subpage common

-----------------------*/
.subpage {
    box-sizing: border-box;
}

@media screen and (max-width: 1200px) {
    .subpage {
        background-image: url(../images/bg.png);
        border: none;
    }
}

.subpage header {
    width: 100%;
    margin-bottom: 20px;

    background-color: var(--base-black);
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1000;

    border-bottom: 50px solid var(--base-red);
    /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2); */
}

@media screen and (max-width: 1200px) {
    .subpage header {
        height: 80px;
        border-bottom: 10px solid var(--base-red);
    }
}

.subpage header:has(.active) {
    z-index: 20000;
}

.subpage header h1 {
    flex: 1;
}

.subpage header h1 {
    line-height: 0;
}


.subpage header h1 .site-title img {
    width: auto;
    height: 60px;
    margin: 20px;
}

@media screen and (max-width: 1200px) {
    .subpage header h1 .site-title img {
        width: auto;
        height: 50px;
        margin: 10px;
    }
}

.subpage a.back {
    width: fit-content;
    display: block;
    background-color: var(--base-red);
    font-size: var(--font-size-base);
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    padding: 10px 20px;
    margin: 50px auto;
}

/*-----------------------

    subpage menu

-----------------------*/
.subpage .menu-trigger {
    background: none;
    border: none;
    width: 64px;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    padding: 0;
    gap: 8px;
}

.subpage .menu-icon {
    width: 30px;
    height: 16px;
    position: relative;
}

.subpage .menu-icon span {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

.subpage .menu-icon span:nth-child(1) {
    top: 0px;
}

.subpage .menu-icon span:nth-child(2) {
    top: 8px;
}

.subpage .menu-icon span:nth-child(3) {
    top: 15px;
}

.subpage .menu-text {
    font-size: 9px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    transition: color 0.3s ease-in-out;
}

.subpage .menu-text::after {
    content: "MENU";
}

.subpage .nav-menu {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    width: 100%;
    max-width: 1200px;
    height: 100vh;
    background-color: #ffffff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 5rem 2rem 3rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 20;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    border-radius: 0;

    border-left: 50px solid var(--base-red);
    border-right: 50px solid var(--base-red);
}

.subpage .nav-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 640px) {
    .subpage .nav-menu {
        padding: 3rem 1.5rem 3rem;
        border: 10px solid var(--base-red);
    }
}

.subpage .menu-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--base-red);
    cursor: pointer;
    transition: 0.2s;
}

@media (max-width: 640px) {
    .subpage .menu-close-btn {
        top: 0.5rem;
    }
}

.subpage .menu-close-btn:hover {
    background-color: #f3f4f6;
}

.subpage .menu-close-btn svg {
    width: 1.5rem;
    height: 1.5rem;
}

.subpage .nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}


.subpage .nav-menu li {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 25px;
}


@media screen and (max-width:600px) {
    .subpage .nav-menu li {
        padding-bottom: 15px;
    }
}

.subpage .nav-menu li:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.subpage .nav-menu .topic a.link_arrow {
    width: calc(50% - 10px);
    background-color: #fb9b01;
}

@media screen and (max-width:600px) {
    .subpage .nav-menu .topic a.link_arrow {
        width: 100%;
        min-height: 50px;
    }
}

.subpage .nav-menu .topic a.link_arrow img {
    width: 75%;
}

.subpage .nav-menu .base_menu {
    list-style: none;
    color: #ccc;
    margin-top: 20px;
}

.subpage .nav-menu .base_menu li {
    margin-bottom: 25px;
    font-weight: bold;
}

@media screen and (max-width:600px) {
    .subpage .nav-menu .base_menu li {
        margin-bottom: 15px;
    }

}

.subpage .nav-menu .base_menu li span {
    font-family: "Libre Franklin", sans-serif;
    font-size: clamp(24px, 1.318rem + 0.909vw, 32px);
    margin-right: 1rem;
}

.subpage .nav-menu .base_menu li a,
.subpage .nav-menu .base_menu li .comingsoon {
    font-size: clamp(16px, 0.818rem + 0.909vw, 24px);

    text-decoration: none;
    transition: all 0.3s;

    display: block;
}

.subpage .nav-menu .base_menu li a:hover {
    display: block;
    background-color: #fbb03b;
    letter-spacing: 2px;
    padding: 5px;
}


.subpage .menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(2px);
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.subpage .menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.subpage .nav-menu .topics {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px
}


.subpage .nav-menu .topics a {
    width: calc(50% - 10px);
}

@media screen and (max-width:600px) {
    .subpage .nav-menu .topics a {
        width: 100%;
        min-height: 50px;
    }
}

.subpage .nav-menu .topics a img {
    border-radius: 4px;
}

/* --- カテゴリタイトル（ボタン） --- */
.subpage .nav-menu .category_title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    font-size: clamp(16px, 0.818rem + 0.909vw, 24px);
    font-weight: bold;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: color 0.3s;

    color: var(--base-red);
}

.subpage .nav-menu .category_title:hover {
    color: #fbb03b;
}

.subpage .nav-menu .accordion-icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.subpage .nav-menu .accordion-icon::before,
.subpage .nav-menu .accordion-icon::after {
    content: "";
    position: absolute;
    background-color: currentColor;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.subpage .nav-menu .accordion-icon::before {
    width: 100%;
    height: 2px;
}

.subpage .nav-menu .accordion-icon::after {
    width: 2px;
    height: 100%;
}

.subpage .nav-menu .category_title.is-open .accordion-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}


.subpage .nav-menu .sub_link {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.subpage .nav-menu .sub_link.is-open {
    grid-template-rows: 1fr;
}

.subpage .nav-menu .sub_link>ul {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 1.5rem;
    transition: padding 0.3s ease;
}

.subpage .nav-menu .sub_link.is-open>ul {
    padding-top: 25px;
    padding-bottom: 5px;
}

/*-----------------------

category_menu

-----------------------*/

.subpage .category_menu {
    background-image: url(../images/bg.png);
    background-color: rgba(216, 96, 96, 0.2);
    position: sticky;
    top: 160px;
    width: 1100px;
    margin: 0 calc(50% - 550px);
    backdrop-filter: blur(12px);

    padding: var(--padding-inner);
    margin-bottom: var(--margin--l);

    padding: 10px;
    z-index: 900;
}

@media screen and (max-width: 1200px) {
    .subpage .category_menu {
        top: 80px;
        width: 100vw;
        margin: 0 calc(50% - 50vw);
        padding: 10px;
    }
}

.subpage .nosticky {
    position: static;
}

.subpage .category_menu .category_menu_list {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin: 0px auto;
}

.subpage .category_menu .category_menu_list li {
    width: calc((100% / 4) - 10px);
    background-color: var(--base-red);
    border-radius: 50vw;
    text-align: center;
    font-weight: bold;
}

@media screen and (max-width: 800px) {
    .subpage .category_menu .category_menu_list li {
        width: calc((100% / 2) - 10px);
    }
}

.subpage .category_menu .category_menu_list li:last-of-type {
    border: none;
}


.subpage .category_menu .category_menu_list li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 14px 8px 14px;
    font-size: var(--font-size-base);
    font-weight: bold;
    text-decoration: none;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    color: #fff;
}

@media screen and (max-width: 800px) {
    .subpage .category_menu .category_menu_list li a {
        padding: 4px 7px;
        font-size: var(--font-size-m);
    }
}

/* .subpage .category_menu .category_menu_list li a::after {
    content: " ";
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid rgba(255, 255, 255, 0.5);
}
 */

/*-----------------------

main

-----------------------*/

.subpage .main {
    width: 100%;
    max-width: 800px;
    margin: 0px auto;
}

.subpage .main h2 {
    font-family: "Libre Franklin", sans-serif;
    font-size: clamp(32px, 1.636rem + 1.818vw, 48px);
    font-weight: bold;
    text-align: center;

    margin-bottom: var(--margin--m);
}

.subpage .main h2 span {
    width: 100%;
    display: block;
    font-size: clamp(16px, 0.636rem + 1.818vw, 32px);
}


/*-----------------------

ticket

-----------------------*/

/* base */
.ticket .base {
    width: 100%;
    padding: 10px;
}

.ticket .base .resale_box {
    margin-bottom: var(--margin--m);
}

.ticket .base .resale_box h3 {
    background-color: var(--base-red);
    font-size: var(--title-font-size-xl);
    font-weight: bold;
    line-height: var(--line-height-l);
    text-align: center;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    color: #ffffff;
    padding: 10px;
    margin-bottom: 20px;
}

.ticket .base .resale_box .info_box {
    background-color: #fff;
    color: #000;
    padding: var(--padding-inner);
    border-radius: 2px;
    /* border: 6px double var(--base-red); */
}

.ticket .base .resale_box .info_box .read {
    font-weight: bold;
    margin: 10px 0px;
}

.ticket .base .resale_box .info_box .read span {
    color: var(--base-red);
}

.ticket .base .resale_box .resale_info dt {
    background-color: rgba(215, 12, 26, 0.1);
    font-weight: bold;
    line-height: 1;
    padding: 10px;
    color: var(--base-red);
}

.ticket .base .resale_box .resale_info dd {
    background-color: transparent;
    font-weight: normal;
    padding: 10px;
    margin-bottom: 10px;
}

.ticket .base .resale_box .resale_info dd span {
    font-weight: bold;
    color: var(--base-red);
    margin-right: 10px;
}

.ticket .tiket_text {
    background-color: #000;
    padding: var(--padding-inner);
    margin-bottom: var(--margin--m);
}

.ticket .tiket_text p:not(:last-of-type) {
    margin-bottom: var(--margin--m);
}

.ticket .base h3 {
    background-color: var(--base-red);
    font-size: var(--title-font-size-xl);
    font-weight: bold;
    line-height: var(--line-height-l);
    text-align: center;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    color: #ffffff;
    padding: 10px;
    margin-bottom: var(--margin--m);
}

.ticket .base h4 {
    font-size: var(--title-font-size-xl);
    font-weight: bold;
    line-height: var(--line-height-l);
    color: #ffffff;
    padding: 5px 10px;
    border-left: 10px solidvar(--base-red);
}

.ticket .base .attention {
    font-size: var(--font-size-s);
}

.ticket .base .box {
    padding: 10px;
    margin-bottom: 20px;
}

.ticket .base dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    border: 1px solid #ffffff;
    border-radius: 2px;
    margin-bottom: 5px;
}

.ticket .base .box dl:not(:first-of-type) {
    margin-top: 20px;
}

.ticket .base dl dt {
    width: 100%;
    flex-shrink: 1;
    background-color: #ffffff;
    border-bottom: 1px solid #ffffff;
    color: #000;
    padding: 10px;
}

.ticket .base dl dt span {
    display: inline-block;
    font-size: var(--title-font-size-m);
    font-weight: bold;
    line-height: var(--line-height-l);
    padding: 10px 0px;
    margin-right: 10px;

}

/* @media screen and (max-width: 600px) {
    .ticket .base dl dt span {
        display: block;
        width: 100%;
    }
} */

.ticket .base dl dt .happi_l {
    display: inline-block;
    text-decoration: none;
    background-color: var(--base-red);
    padding: 2px 10px 0px;
    border-radius: 5px;
    font-weight: bold;
    color: #ffffff;
}

.ticket .base dl dd {
    background-color: rgba(0, 0, 0, 0.5);
    width: fit-content;

    flex-shrink: 0;
    font-weight: bold;

    padding: 10px;
}

@media screen and (max-width: 600px) {
    .ticket .base dl dd {
        width: 100%;
    }
}

.ticket .base dl dd .tax {
    font-size: var(--font-size-s);
    margin-right: 5px;
}


/* happi  */
.ticket .base .happi {
    background-color: rgba(255, 255, 255, 1);
    text-align: center;
    padding: 20px;
    border-radius: 20px;
    border: 4px solid var(--base-red);
    margin-top: var(--margin--l);
    color: var(--base-red);
}

.ticket .base .happi h4 {
    background-color: var(--base-red);
    border: none;
    border-radius: 10px;

    text-align: center;
    margin-bottom: 20px;
}

.ticket .base .happi h4 span {
    display: block;
    font-weight: normal;
    font-size: var(--font-size-s);
    color: #ffffff;
}

.ticket .base .happi h5 {
    width: fit-content;
    background-color: #fb9b01;

    border: none;
    border-radius: 10px 10px 0px 0px;
    padding: 10px 20px 5px;

    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    text-align: center;
    font-weight: bold;

    margin: 0px auto;
    color: #ffffff;
}

.ticket .base .happi p {
    margin-bottom: 1rem;
}

.ticket .base .happi figure {
    border: 4px solid #fb9b01;
    padding: 20px;
    border-radius: 10px;
}

.ticket .base .happi figure:not(:last-of-type) {
    margin-bottom: var(--margin--s);
}

.ticket .base .happi figure figcaption {
    font-size: var(--font-size-s);
    color: #333;
}

.ticket .base .happi figure img {
    margin-bottom: 10px;
}

/* note_list  */
.ticket .base .note_list {
    margin-top: var(--margin--l);
}

.ticket .base .note_list li {
    text-indent: -1rem;
    margin-left: 1rem;
    margin-bottom: 1rem;
}

.ticket .base .note_list li::before {
    content: "※";
    font-size: 0.8rem;
    margin-right: 0.2rem;
}

.ticket .base .note_list li a {
    color: #fff;
}

.ticket .base .note_list li .readme {
    padding: var(--padding-inner);
    margin: 20px 10px 20px 0px;
    border: 2px solid var(--base-yellow);
    color: var(--base-yellow);
}

.ticket .base .note_list li .readme span {
    display: block;
    text-align: center;
    font-weight: bold;
    text-decoration: underline;
}

/* purchase */
.ticket .purchase {
    width: 100%;
    padding: 10px;
    margin-top: var(--margin--l);
}

.ticket .purchase h3 {
    background-color: var(--base-red);
    font-size: var(--title-font-size-xl);
    font-weight: bold;
    line-height: var(--line-height-l);
    text-align: center;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    color: #ffffff;
    padding: 10px;
    margin-bottom: var(--margin--s);
}

.ticket .purchase h4 {
    display: block;
    background-color: var(--base-yellow);
    font-size: var(--title-font-size-l);
    font-weight: bold;
    line-height: var(--line-height-l);
    text-align: center;
    color: var(--base-red);
    padding: 10px;
    border-radius: 2px 2px 0px 0px;
}

.ticket .purchase .read {
    background-color: #000;
    text-align: center;
    font-size: var(--title-font-size-m);
    padding: var(--padding-inner);
    margin-bottom: var(--margin--m);
}

.ticket .purchase .category {
    background-color: #000;
    padding: clamp(10px, 0.398rem + 1.136vw, 20px);
    border: 1px solid var(--base-yellow);
    margin-bottom: var(--margin--m);
}

.ticket .purchase .category .point {
    margin: 20px 0px;
}


.ticket .purchase ul {
    color: #000;
}

.ticket .purchase ul li {
    background-color: #ffffff;
    padding: var(--padding-inner);
    margin-bottom: 10px;
    border-radius: 2px;

    border-left: 10px solid #fbb03b;
}

.ticket .purchase ul li.pre {
    border-left: 10px solid var(--base-red);
}

.ticket .purchase ul li h5 {
    font-size: var(--title-font-size-l);
    font-weight: bold;
    line-height: var(--line-height-l);
    margin-bottom: 20px;
}

.ticket .purchase ul li h5 span {
    display: inline-block;
    text-decoration: none;
    background-color: #fbb03b;
    padding: 2px 10px 0px;
    border-radius: 5px;
    font-weight: bold;
    font-size: var(--font-size-base);
    color: #ffffff;
    margin-bottom: 10px;
}

.ticket .purchase ul li.pre h5 span {
    background-color: var(--base-red);
}

.ticket .purchase .attention {
    font-size: var(--font-size-s);
}

.ticket .purchase ul li dl {
    margin-top: var(--margin--s)
}

.ticket .purchase ul li dl dt {
    background-color: rgba(251, 177, 59, 0.2);
    font-size: var(--title-font-size-m);
    font-weight: bold;
    padding: 2px 5px;
    color: #fb9b01;
}

.ticket .purchase ul li.pre dl dt {
    background-color: rgba(215, 12, 26, 0.1);
    font-weight: bold;
    padding: 2px 5px;
    color: var(--base-red);
}

.ticket .purchase ul li dl dd {
    padding: 5px;
    margin-bottom: 10px;
}

.ticket .purchase ul li dl dd span {
    font-weight: bold;
    color: var(--base-red);
}

@media screen and (max-width: 800px) {
    .ticket .purchase ul li dl dd span {
        display: block;
        font-weight: bold;
    }
}

.ticket .purchase ul li a.external-link {
    background-color: #000;
    width: 100%;
    display: inline-flex;
    align-items: center;
    position: relative;
    padding: 16px 48px 16px 24px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;

    margin-top: 10px;
}


.ticket .purchase ul li a.external-link:hover {
    background-color: #fb9b01;
}


.ticket .purchase ul li.pre a.external-link:hover {
    background-color: var(--base-red);
}


.ticket .purchase ul li a.external-link::after {
    position: absolute;
    right: 10px;

    font-family: "Material Symbols Outlined";
    content: 'open_in_new';
    font-size: 1.2rem;
    font-weight: normal;

    padding-right: 0.5rem;
    vertical-align: middle;
}

/* accordion  */
.accordion-toggle {
    display: none;
}

.accordion-header {
    background-color: #000;
    width: 100%;
    display: inline-flex;
    align-items: center;
    position: relative;
    padding: 16px 48px 16px 24px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 20px;
}

@media (hover: hover) {
    .accordion-header:hover {
        background-color: var(--base-red);
    }
}

.accordion-header::after {
    content: "";
    position: absolute;
    right: 20px;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(135deg);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: -4px;
}

.accordion-toggle:checked+.accordion-header::after {
    transform: rotate(-45deg);
    margin-top: 4px;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #ffffff;
}

.accordion-toggle:checked~.accordion-content {
    max-height: 100%;
}

/*-----------------------

   .volunteer

-----------------------*/
.volunteer .base {
    padding: 10px;
}

.volunteer .base h3 {
    background-color: var(--base-red);
    font-size: var(--title-font-size-xl);
    font-weight: bold;
    line-height: var(--line-height-l);
    text-align: center;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    color: #ffffff;
    padding: 10px;
    margin-bottom: var(--margin--m);
}

.volunteer .base h4 {
    font-size: var(--title-font-size-l);
    font-weight: bold;
    line-height: var(--line-height-l);
    color: #ffffff;
    padding: 5px 10px;
    border-left: 10px solid var(--base-red);
}


.volunteer .read {
    background-color: #000;
    padding: var(--padding-inner);
    margin-bottom: var(--margin--m);
}

.volunteer .close {
    filter: brightness(50%)
}



.volunteer .read .attention {
    text-align: center;
    font-size: var(--title-font-size-m);
    color: #fbb03b;
    font-weight: bold;
    margin-top: 20px;
}


/* summary  */

.volunteer .summary {
    background-color: #ffffff;
    margin-top: 20px;
    margin-bottom: var(--margin--m);
    border: 1px solid #ffffff;
    border-radius: 2px;
    color: #000;
}

.volunteer .summary .attention {
    font-size: var(--font-size-s);
    margin-top: 10px;
}

.volunteer .summary>dt {
    background-color: #000;
    font-size: var(--title-font-size-m);
    font-weight: bold;
    line-height: var(--line-height-l);
    color: #ffffff;
    padding: 10px;
}

.volunteer .summary>dd {
    padding: 10px;
}

.volunteer .summary>dd span {
    display: inline-block;
    font-weight: bold;
    padding-right: 5px;
}

.volunteer .summary>dd span:not(:first-of-type) {
    margin-top: 10px;
}

.volunteer .summary>dd span::before {
    content: "●";
    color: var(--base-red);
    padding-right: 5px;
}

.volunteer .summary>dd p {
    margin-bottom: 10px;
}

.volunteer .summary table {
    margin-bottom: 10px;
}

.volunteer .summary .time {
    text-align: right;
    padding-right: 10px;
}

.volunteer .summary ul {
    list-style-type: disc;
    list-style-position: outside;
    padding-left: 1.5rem;
}

.volunteer .summary ul li::marker {
    font-size: 1.2em;
}


/* schedule */

.volunteer .base .schedule {
    background-color: #ffffff;
    text-align: center;
    padding: var(--padding-inner);
    border-radius: 20px;
    border: 4px solid var(--base-red);
    margin: 20px 0px var(--margin--m);
    color: var(--base-red);
}

.volunteer .base .schedule figcaption {
    font-size: var(--font-size-s);
    color: #333;
}

/* schedule_message */

.volunteer .base .schedule_message {
    background-color: #ffffff;
    margin-top: 20px;
    margin-bottom: var(--margin--m);
    border: 1px solid #ffffff;
    border-radius: 2px;
    color: #000;
}

.volunteer .base .schedule_message dt {
    background-color: #000;
    font-size: var(--title-font-size-m);
    font-weight: bold;
    line-height: var(--line-height-l);
    color: #ffffff;
    padding: 10px;
}

.volunteer .base .schedule_message dd {
    padding: 10px;
}

.volunteer .base .schedule_message dd p:not(:first-of-type) {
    margin-bottom: 10px;
}

/* happi  */
.volunteer .base .happi {
    background-color: rgba(255, 255, 255, 1);
    text-align: center;
    padding: 20px 20px 0px;
    border-radius: 20px;
    border: 4px solid var(--base-red);
    margin: var(--margin--m) 0px;
    color: var(--base-red);
}

.volunteer .base .happi h4 {
    background-color: var(--base-red);
    border: none;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 20px;
}

.volunteer .base .happi figure {
    padding: var(--padding-inner);
}

.volunteer .base .happi figure figcaption {
    font-size: var(--font-size-s);
    color: #333;
}

.volunteer .base .happi figure img {
    margin-bottom: 10px;
}


/* q_a_list */

.volunteer .base .q_a_list {
    background-color: #ffffff;
    margin-top: 20px;
    margin-bottom: var(--margin--m);
    border: 1px solid #ffffff;
    border-radius: 2px;
    color: #000;
}

.volunteer .base .q_a_list dt {
    display: flex;
    align-items: flex-start;

    background-color: #000;
    font-size: var(--title-font-size-m);
    font-weight: bold;
    line-height: var(--line-height-l);

    color: #ffffff;
    padding: 10px;
}

.volunteer .base .q_a_list dt span {
    display: block;
    flex: 1;
}

.volunteer .base .q_a_list dt::before {
    display: block;
    content: "Q";
    background-color: var(--base-red);
    text-align: center;
    width: 40px;
    border-radius: 15px;
    margin-right: 10px;
    flex-basis: 30px;
}

.volunteer .base .q_a_list dd {
    padding: 10px;
}

.volunteer .base .q_a_list dd p:not(:first-of-type) {
    margin-bottom: 10px;
}

/* form */
.volunteer .base .form {
    margin: 50px auto;
    text-align: center;
}

.volunteer .base .form a {
    width: fit-content;
    background-color: var(--base-red);
    color: #ffffff;
    font-size: 1.2rem;
}

.volunteer .base .form a:hover {
    background-color: #fbb03b;
}


/*-----------------------

enjoy

-----------------------*/

.enjoy .base {
    padding: 10px;
}

.enjoy .base h3 {
    background-color: var(--base-red);
    font-size: var(--title-font-size-xl);
    font-weight: bold;
    line-height: var(--line-height-l);
    text-align: center;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    color: #ffffff;
    padding: 10px;
    margin-bottom: var(--margin--m);
}

.enjoy .base h4 {
    font-size: var(--title-font-size-xl);
    font-weight: bold;
    line-height: var(--line-height-l);
    color: #ffffff;
    padding: 5px 10px;
    border-left: 10px solid var(--base-red);
}


/* detail  */
.enjoy .detail {
    background-color: #ffffff;
    margin-top: 20px;
    margin-bottom: var(--margin--m);
    border: 1px solid #ffffff;
    border-radius: 2px;
    color: #000;
}

.enjoy .detail .attention {
    font-size: var(--font-size-s);
}

.enjoy .detail>dt {
    background-color: #000;
    font-size: var(--title-font-size-m);
    font-weight: bold;
    line-height: var(--line-height-l);
    color: #ffffff;
    padding: 10px;
}

.enjoy .detail>dd {
    padding: 10px;
}

.enjoy .detail>dd span {
    display: inline-block;
    font-weight: bold;
    margin-right: 10px;
}

.enjoy .detail>dd span::before {
    content: "●";
    color: var(--base-red);
}

.enjoy .detail>dd p {
    margin-bottom: 10px;
}

/* time_schedule */

.enjoy .time_schedule {
    padding: 50px;
    text-align: center;
    font-weight: bold;
    font-size: 2rem;
    color: #ccc;
}


/* event */
.enjoy .event {
    margin-bottom: var(--margin--l);
}

.enjoy .event h4 {
    margin-bottom: var(--margin--s);
    color: #000;
}

.enjoy .event h5 {
    margin-bottom: 10px;
    font-weight: bold;
}

.enjoy .event h5::before {
    content: "●";
    color: var(--base-red);
}

.enjoy .event h5::before {
    content: "●";
    color: var(--base-red);
}


.enjoy .event .read {
    font-weight: bold;
    color: var(--base-red);
    margin: var(--margin--m) 0;
}

.enjoy .event p {
    margin-bottom: var(--margin--s)
}

.enjoy .event_list {
    color: var(--base-black);
}

.enjoy .event_list .link_external {
    background-color: var(--base-yellow);
    text-shadow: none;
}

.enjoy .event_list .attention {
    font-size: 0.8rem;
    margin-top: 10px;
    color: var(--base-red);
}

.enjoy .event_list .day2 {
    background-color: #53a7c8;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 2px;
}

.enjoy .event_list .day3 {
    background-color: #f96e6e;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    margin-top: var(--margin--m);
    margin-bottom: 5px;
    border-radius: 2px;
}

.enjoy .event_list li {
    background-color: #fff;
    padding: var(--padding-inner);
    border-radius: 2px;
    margin-bottom: var(--margin--s);
}

.timetable {
    max-width: 800px;
}

.timetable-row {
    background: #faf8f6;
    border: 1px solid #d0d0d0;

    display: flex;
    padding: 10px;
    margin-bottom: 5px;
}

@media screen and (max-width: 600px) {
    .timetable-row {
        flex-wrap: wrap;
    }
}

.timetable-time {
    display: inline-block;

    width: 30%;
    flex-shrink: 0;
    text-align: center;
    margin-right: 10px;

    color: var(--base-red);
    font-size: var(--font-size-base);
    font-weight: bold;
    align-self: flex-start;
}


@media screen and (max-width: 600px) {
    .timetable-time {
        width: 100%;
        text-align: left;
        margin-bottom: var(--margin--s);
    }
}


.timetable-time span {
    display: inline-block;
    font-size: var(--font-size-s);
}

.timetable-content {
    flex-grow: 1;
}

.timetable-title {
    /* font-weight: bold; */
}

.timetable-desc {
    color: #64748b;
    line-height: 1.2;
    margin-top: 5px;
}


.enjoy .event_list .item_list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    width: 100%;
}

@media screen and (max-width: 500px) {
    .enjoy .event_list .item_list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.enjoy .event_list .item_list .item_box {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 10px;
    color: #000;
    border-radius: 5px;
    border: 1px solid #d0d0d0;
    overflow: hidden;

}

/* item-img */
.enjoy .event_list .item_list .item_box .img_box figure {
    display: block;
    aspect-ratio: 1 / 1 !important;
    margin-bottom: 0;
}

.enjoy .event_list .item_list .item_box .img_box img {
    min-width: 0;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    overflow: hidden;
    position: relative;
}

/* item-tag */
.enjoy .event_list .item_list .item_box .item-tag {
    height: 20px;
}

.enjoy .item-tag span {
    display: inline-block;
    padding: 0px 5px;
    margin-right: 5px;
    border: 1px solid var(--base-red);
    border-radius: 5px;
    font-size: 10px;
    letter-spacing: 0.7px;
    color: var(--base-red);
}

.enjoy .item-tag span.limited {
    background-color: var(--base-red);
    border: 1px solid var(--base-red);

    color: #fff;
}

.enjoy .item-tag span.presale {
    background-color: var(--base-yellow);
    border: 1px solid var(--base-yellow);
    color: var(--base-red);
}



/* item-name */
.enjoy .event_list .item_list .item_box .item-name {
    font-size: 14px;
    line-height: 1.2;
    margin-top: 10px;
    word-break: break-all;

    /* display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; */
    overflow: hidden;
}

.enjoy .event_list .item_list .item_box .item-price {
    height: 1rem;
    flex-grow: 0;
    margin: 10px 0px;
    font-weight: bold;
    color: var(--base-red);
    text-align: right;
}

.enjoy .event_list .item_list .item_box .item-price span {
    font-weight: normal;
    font-size: 10px;
}


/*-----------------------

   .stance

-----------------------*/
.stance .base {
    padding: 10px;
}


.stance .base h3 {
    background-color: var(--base-red);
    font-size: var(--title-font-size-xl);
    font-weight: bold;
    line-height: var(--line-height-l);
    text-align: center;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    color: #ffffff;
    padding: 10px;
    margin-bottom: 20px;
}

.stance .base .stance_box {
    margin-bottom: var(--margin--m);
}

.stance .base .stance_box ul {
    list-style-type: disc;
    list-style-position: outside;
    padding-left: 1.5rem;
}

.stance .base .stance_box ul li {
    margin-bottom: 20px;
}

.stance .base .stance_box ul li .attention {
    font-size: var(--font-size-s);
}

.stance .base .stance_box ul li::marker {
    font-size: 1.5em;
    color: var(--base-red);
}

.stance .base .stance_box ul li a {
    color: #ffffff;
}


/*-----------------------

   performer

-----------------------*/
.performer h3 {
    line-height: 1;
}

.performer h3 span {
    font-size: var(--font-size-base);
    margin-left: 10px;
}

.performer .date {
    display: flex;
    flex-wrap: wrap;
}

.performer .date dt {
    font-weight: bold;
    padding: 3px 5px 2px;
}

.performer .date dd span {
    display: inline-flex;
    align-items: center;
    padding: 1px 12px;
    border-radius: 2px;
    font-size: 14px;
    font-weight: bold;

    margin: 0px 2px;
    color: #000;
}

@media screen and (max-width: 800px) {
    .performer .date dd span {
        padding: 1px 4px;
        font-size: 12px;
    }
}

.performer .date dd .fri {
    background-color: var(--base-yellow);
}

.performer .date dd .sat {
    background-color: #53a7c8;
}

.performer .date dd .sun {
    background-color: #f96e6e;
}

#cast ul,
#guest ul {
    width: 100%;
    margin-top: var(--margin--s);
    margin-bottom: var(--margin--l);
}

/* #cast  */

#cast ul.list_01 {
    display: grid;
    gap: var(--margin--l);
    grid-template-columns: repeat(2, 1fr);

    background-image: url(../enjoy/images/performer/bg_ryuusui.webp);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: bottom;
}

@media screen and (max-width: 500px) {
    #cast ul.list_01 {
        width: 80%;
        margin: 20px auto var(--margin--m);
        grid-template-columns: repeat(1, 1fr);
    }
}

#cast ul.list_01 li {
    text-align: center;
}

#cast ul.list_01 li h4 {
    line-height: 0;
    border-left: none;
    border: 2px solid #fff;
    padding: 0;
    margin-bottom: 10px;
}

#cast ul.list_01 li h4 span {
    font-size: clamp(10px, 0.489rem + 0.682vw, 16px);
}

#cast ul.list_01 li img {
    margin: 0px auto;
}

#cast .open-btn {
    width: 80%;
    display: block;
    background-color: var(--base-red);
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: var(--font-size-base);
    line-height: 1;
    letter-spacing: 1px;
    border-radius: 20px;
    padding: 10px;
    margin: 10px auto 0;
}

/* #guest  */

#guest ul.list_02 {
    display: grid;
    gap: var(--margin--l);
    grid-template-columns: repeat(2, 1fr);

    background-image: url(../enjoy/images/performer/bg_ryuusui.webp);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: bottom;
}

@media screen and (max-width: 600px) {
    #guest ul.list_02 {
        gap: var(--margin--m);
    }
}

@media screen and (max-width: 500px) {
    #guest ul.list_02 {
        gap: var(--margin--s);
        width: 80%;
        margin: 20px auto;
        grid-template-columns: repeat(1, 1fr);
    }
}

#guest ul.list_02 li h5 {
    line-height: 0;
    margin-bottom: 10px;
    border: 2px solid #fff;
}

#guest ul.list_02 li img {
    align-self: center;
    justify-self: end;
}

#guest .open-btn {
    width: 80%;
    display: block;
    background-color: var(--base-red);
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: var(--font-size-base);
    line-height: 1;
    letter-spacing: 1px;
    border-radius: 20px;
    padding: 10px;
    margin: 10px auto 0;
}

/* lineup */
.lineup {
    margin-bottom: var(--margin--m);
}

#daily_lineup {
    display: grid;
    gap: var(--margin--s);
    grid-template-columns: repeat(3, 1fr);
}

@media screen and (max-width: 600px) {
    #daily_lineup {
        grid-template-columns: repeat(1, 1fr);
    }

    #daily_lineup li div {
        display: grid;
        gap: 5px;
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 10px;
    }

}

#daily_lineup h4 {
    width: 100%;
    border: none;
    text-align: center;
    padding: 2px 0px 0px;
    margin-bottom: var(--margin--s);
    color: #000;
    border-radius: 2px;
}

#daily_lineup li div .new {
    display: inline-block;
    position: relative;
    line-height: 0;
}

#daily_lineup li div .new::before {
    position: absolute;
    content: " ";
    width: 10px;
    height: 10px;
    top: -2px;
    right: 0px;

    background-color: var(--base-red);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 2px 2px 5px #0000007b;
}

#daily_lineup .day1 {
    background-color: #fbb13b4f;
    padding: 10px;
}

#daily_lineup .day1 h4 {
    background-color: #fbb13b;
}

#daily_lineup .day2 {
    background-color: #53a7c84f;
    padding: 10px;
}

#daily_lineup .day2 h4 {
    background-color: #53a7c8;
}

#daily_lineup .day3 {
    background-color: #f96e6e4f;
    padding: 10px;
}

#daily_lineup .day3 h4 {
    background-color: #f96e6e;
}


/* dialog  sns_link*/
#guest .dialog-body .sns_link {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
    margin-top: var(--margin--m);
}

@media screen and (max-width: 600px) {
    #guest .dialog-body .sns_link {
        grid-template-columns: 1fr;
    }
}

#guest .dialog-body .sns_link li a {
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: center;
    border: 1px solid #888888;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);

    font-size: 12px;
    text-decoration: none;
    color: #000;

    padding: 10px;
}

#guest .dialog-body .sns_link li a img {
    grid-column: 1;
    padding-right: 10px;
}

#guest .dialog-body .sns_link li a span {
    grid-column: 2;
}

/*-----------------------

   buy index

-----------------------*/
.buy .base {
    padding: 10px;
}

.buy .base h3 {
    background-color: var(--base-red);
    font-size: var(--title-font-size-xl);
    font-weight: bold;
    line-height: var(--line-height-l);
    text-align: center;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    color: #ffffff;
    padding: 10px;
    margin-bottom: 20px;
}

.buy .base .description {
    margin-bottom: var(--margin--s);
}

.buy .base .announce {
    padding: var(--padding-inner);
    margin: var(--margin--s);
    border: 2px solid var(--base-red);
}

.buy .base .announce span {
    font-weight: bold;
}


.buy .base .buy_box {
    margin-bottom: var(--margin--m);
}

.buy .base .buy_box .info_box {
    background-color: #fff;
    color: #000;
    padding: var(--padding-inner);
    border-radius: 2px;
    /* border: 6px double var(--base-red); */
}

.buy .base .buy_box .info_box .read {
    font-weight: bold;
    margin: 10px 0px;
}

.buy .base .buy_box .info_box .read span {
    color: var(--base-red);
}

.buy .base .buy_box .info_box .note {
    font-size: 12px;
    margin: 10px 0px 20px;
}

.buy .base .buy_box .buy_info dt {
    background-color: rgba(215, 12, 26, 0.1);
    font-weight: bold;
    line-height: 1;
    padding: 10px;
    color: var(--base-red);
}

.buy .base .buy_box .buy_info dd {
    background-color: transparent;
    font-weight: normal;
    padding: 10px;
    margin-bottom: 10px;
}

.buy .base .buy_box .buy_info dd span {
    font-weight: bold;
    color: var(--base-red);
    margin-right: 10px;
}

.buy .base .buy_box .buy_info dd ul {
    list-style: disc;
    margin-left: 1rem
}




.buy .base .buy_box .item_list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    width: 100%;
}

@media screen and (max-width: 500px) {
    .buy .base .buy_box .item_list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

.buy .base .buy_box .item_list .item_box {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background-color: #ffffff;
    padding: 10px;
    color: #000;
    border-radius: 5px;

    overflow: hidden;
}

.buy .base .buy_box .item_list .item_box a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}

/* item-img */
.buy .base .buy_box .item_list .item_box .img_box figure {
    display: block;
    /* background-color: #ebebeb; */
    aspect-ratio: 1 / 1 !important;
    margin-bottom: 0;
}


.buy .base .buy_box .item_list .item_box .img_box img {
    min-width: 0;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    overflow: hidden;
    position: relative;
}

/* item-tag */
.buy .base .buy_box .item_list .item_box .item-tag {
    height: 20px;
}

.buy .item-tag span {
    display: inline-block;
    padding: 0px 5px;
    margin-right: 5px;
    border: 1px solid var(--base-red);
    border-radius: 5px;
    font-size: 10px;
    color: var(--base-red);
}

.buy .item-tag span.presale {
    background-color: var(--base-yellow);
    border: 1px solid var(--base-yellow);
    color: var(--base-red);
}

.buy .item-tag span.soldout {
    background-color: #828282;
    border: 1px solid #828282;
    color: #fff;
}

.buy .item-tag span.limited {
    background-color: var(--base-red);
    border: 1px solid var(--base-red);
    color: #fff;
}

/* item-name */
.buy .base .buy_box .item_list .item_box .item-name {
    font-size: 14px;
    line-height: 1.2;
    margin-top: 10px;
    word-break: break-all;


    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.buy .base .buy_box .item_list .item_box .item-price {
    height: 1rem;
    flex-grow: 0;
    margin: 10px 0px;
    font-weight: bold;
    color: var(--base-red);
    text-align: right;
}

.buy .base .buy_box .item_list .item_box .item-price span {
    font-weight: normal;
    font-size: 10px;
}

/*-----------------------

   buy detail

-----------------------*/

.buy .base .buy_detail {
    background-color: #ffffff;
    padding: var(--padding-inner);
    color: #000;
    border-radius: 5px;
}

/*detail item-img */
.buy .base .buy_detail .img_box figure {
    display: block;
    aspect-ratio: 1 / 1 !important;
    margin-bottom: 0;
}


.buy .base .buy_detail .img_box img {
    min-width: 0;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    overflow: hidden;
    position: relative;
}

/*detail item-tag */
.buy .base .buy_detail .item-detail .item-tag {
    height: 20px;
    margin-bottom: 20px;
}

.buy .base .buy_detail .item-detail .item-tag span {
    font-size: var(--font-size-s);
}

/*detail item-name */
.buy .base .buy_detail .item-detail .item-name {
    font-weight: bold;
    font-size: var(--title-font-size-l);
    line-height: 1.5;
    margin-top: 20px;
    word-break: break-all;
}

/*detail item-price */
.buy .base .buy_detail .item-detail .item-price {
    font-size: var(--title-font-size-l);
    margin: 20px 0px;
    font-weight: bold;
    color: var(--base-red);
    text-align: left;
}

.buy .base .buy_detail .item-detail .item-price span {
    font-size: var(--font-size-base);
    font-weight: normal;
    font-size: 16px;
}


/*detail item-xxx */
.buy .base .buy_detail .item-detail .item-txt,
.buy .base .buy_detail .item-detail .item-overview,
.buy .base .buy_detail .item-detail .item-size,
.buy .base .buy_detail .item-detail .item-locations {
    font-size: var(--font-size-base);
    line-height: 1.5;
    word-break: break-all;
    border-top: 1px solid #cecece;
}

.buy .base .buy_detail .item-detail .item-txt {
    margin-bottom: 20px;
    border-top: none;
}

.buy .base .buy_detail .item-detail .item-txt p {
    margin-bottom: 20px;
}

.buy .base .buy_detail .item-detail dl {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-auto-rows: auto;
}


.buy .base .buy_detail .item-detail dl dt {
    grid-column: 1;

    font-weight: bold;
    padding: 10px;
}

@media screen and (max-width: 500px) {
    .buy .base .buy_detail .item-detail dl dt {
        font-size: var(--font-size-s);
    }
}

.buy .base .buy_detail .item-detail dl dd {
    grid-column: 2;
    padding: 10px;
}

.buy .base .buy_detail .item-detail dl dt:not(:first-of-type),
.buy .base .buy_detail .item-detail dl dd:not(:first-of-type) {
    border-top: 1px solid #f3f4f6;
}


.buy .base .buy_detail .item-detail .item-locations dl dd ul li {
    display: inline-block;
    font-size: var(--font-size-s);
    line-height: 0;
    padding: 10px;
    margin: 5px;
    border: 1px solid #888888;
    border-radius: 20px;
    transition: all 0.6s ease 0s;
}

.buy .base .buy_detail .item-detail .item-locations dl dd ul li:has(a):hover {
    background-color: #ffd6d6;
    color: var(--base-red);
}


.buy .base .buy_detail .item-detail .item-locations dl dd ul li a {
    position: relative;
    text-decoration: none;
    padding-right: 20px;
    color: #000;
}

.buy .base .buy_detail .item-detail .item-locations dl dd ul li a::after {
    position: absolute;
    right: 10px;
    font-family: "Material Symbols Outlined";
    content: 'open_in_new';
    font-size: var(--font-size-s);
    font-weight: normal;
    vertical-align: middle;
    right: 0px;
    color: #333;
}

/*-----------------------

   .shop_food

-----------------------*/

.shop_food .base {
    padding: 10px;
}

.shop_food .base h3 {
    background-color: var(--base-red);
    font-size: var(--title-font-size-xl);
    font-weight: bold;
    line-height: var(--line-height-l);
    text-align: center;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    color: #ffffff;
    padding: 10px;
    margin-bottom: 20px;
}


.shop_food .base .shop_food_box {
    margin-bottom: var(--margin--m);
}

/* category_menu_list  */

.subpage .area_category {
    background-image: none;
    background-color: rgba(255, 255, 255, 0.2);
    margin-bottom: var(--margin--m);
}


.subpage .area_category .category_menu_list li {
    width: auto;
    background-color: var(--base-red);
    border-radius: 50vw;
    text-align: center;
    font-weight: bold;
}

.subpage .area_category .category_menu_list li a::after {
    content: " ";
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid rgba(255, 255, 255, 0.5);
}




/* item_list  */
.shop_food .base .shop_food_box .item_list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    width: 100%;
}

@media screen and (max-width: 500px) {
    .shop_food .base .shop_food_box .item_list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

.shop_food .base .shop_food_box .item_list .item_box {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background-color: #ffffff;
    padding: 10px;
    color: #000;
    border-radius: 5px;

    overflow: hidden;
}

.shop_food .base .shop_food_box .item_list .item_box a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}

/* item-img */
.shop_food .base .shop_food_box .item_list .item_box .img_box figure {
    display: block;
    /* background-color: #ebebeb; */
    aspect-ratio: 1 / 1 !important;
    margin-bottom: 0;
}


.shop_food .base .shop_food_box .item_list .item_box .img_box img {
    min-width: 0;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    overflow: hidden;
    position: relative;
}

/* area-tag */
.shop_food .base .shop_food_box .item_list .item_box .area-tag {
    height: 20px;
}

.shop_food .base .shop_food_box .item_list .item_box .area-tag span {
    background-color: var(--base-red);
    display: inline-block;
    padding: 0px 5px;
    margin-right: 5px;
    border-radius: 5px;
    font-size: 10px;
    color: #fff;
}


/* item-name */
.shop_food .base .shop_food_box .item_list .item_box .item-name {
    font-size: 14px;
    line-height: 1.2;
    margin-top: 10px;
    word-break: break-all;


    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}


/*-----------------------

   .shop_food detail

-----------------------*/

.shop_food .base .shop_food_detail {
    background-color: #ffffff;
    padding: var(--padding-inner);
    color: #000;
    border-radius: 5px;
}

/*detail item-img */
.shop_food .base .shop_food_detail .img_box figure {
    display: block;
    aspect-ratio: 1 / 1 !important;
    margin-bottom: 0;
}

.shop_food .base .shop_food_detail .img_box img {
    min-width: 0;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    overflow: hidden;
    position: relative;
}

/*detail area-tag */
.shop_food .base .shop_food_detail .item-detail .area-tag {
    height: 20px;
    margin-bottom: 20px;
}

.shop_food .base .shop_food_detail .item-detail .area-tag span {
    display: inline-block;
    padding: 0px 5px;
    margin-right: 5px;
    border-radius: 5px;
    font-size: var(--font-size-s);
    color: #fff;
}



/*detail item-name */
.shop_food .base .shop_food_detail .item-detail .item-name {
    font-weight: bold;
    font-size: var(--title-font-size-l);
    line-height: 1.5;
    margin-top: 20px;
    word-break: break-all;
}

/*detail item-xxx */
.shop_food .base .shop_food_detail .item-detail .item-txt,
.shop_food .base .shop_food_detail .item-detail .osusume-overview {
    font-size: var(--font-size-base);
    line-height: 1.5;
    word-break: break-all;
}

.shop_food .base .shop_food_detail .item-detail .item-txt {
    margin: 20px 0px;
}

.shop_food .base .shop_food_detail .item-detail .osusume-overview .osusume_title {
    font-weight: bold;
    border-bottom: 1px solid #cecece;
}

.shop_food .base .shop_food_detail .item-detail .osusume-overview .osusume_title::before {
    content: "●";
    color: var(--base-red);
    margin-right: 5px;
}

.shop_food .base .shop_food_detail .item-detail dl {
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-auto-rows: auto;
}

@media screen and (max-width: 500px) {
    .shop_food .base .shop_food_detail .item-detail dl {
        grid-template-columns: 1fr 80px;
    }
}

.shop_food .base .shop_food_detail .item-detail dl dt {
    grid-column: 1;
    padding: 10px;
}

@media screen and (max-width: 500px) {
    .shop_food .base .shop_food_detail .item-detail dl dt {
        font-size: var(--font-size-s);
    }
}

.shop_food .base .shop_food_detail .item-detail dl dd {
    grid-column: 2;
    font-weight: bold;
    text-align: right;
    padding: 10px;
}


.shop_food .base .shop_food_detail .item-detail dl .atttention {
    padding: 10px;
}


.shop_food .base .shop_food_detail .item-detail dl dt:not(:first-of-type),
.shop_food .base .shop_food_detail .item-detail dl dd:not(:first-of-type) {
    border-top: 1px solid #f3f4f6;
}

/* area-color */

.shop_food .base h3.center_area,
.shop_food .base .area_category .category_menu_list .center_area,
.shop_food .base .shop_food_box .item_list .item_box .area-tag span.center_area,
.shop_food .base .shop_food_detail .item-detail .area-tag span.center_area {
    background-color: #38bef0;
}

.shop_food .base h3.north_area,
.shop_food .base .area_category .category_menu_list .north_area,
.shop_food .base .shop_food_box .item_list .item_box .area-tag span.north_area {
    background-color: #7abd28;
}

.shop_food .base h3.east_area,
.shop_food .base .area_category .category_menu_list .east_area,
.shop_food .base .shop_food_box .item_list .item_box .area-tag span.east_area {
    background-color: #f39600;
}

.shop_food .base h3.south_area,
.shop_food .base .area_category .category_menu_list .south_area,
.shop_food .base .shop_food_box .item_list .item_box .area-tag span.south_area {
    background-color: #985ea3;
}


/*-----------------------

map

-----------------------*/
#map figure {
    padding: var(--padding-inner) 0px;
}

.viewer-container {
    z-index: 20000 !important;
}

.viewer-button {
    background-color: var(--base-red);
}

.viewer-button:hover {
    background-color: var(--base-red);
    opacity: 0.5;
}