@charset "utf-8";

h3 {
    margin: 0;
}


/* 地域別メインカラーの設定 */
.event-page.hokkaido {
    --area-color: #406CB1;
}

.event-page.tohoku {
    --area-color: #FFB601;
}

.event-page.kanto {
    --area-color: #E76D9E;
}

.event-page.chubu {
    --area-color: #8FCD0F;
}

.event-page.kinki {
    --area-color: #01B7E5;
}

.event-page.tyugoku {
    --area-color: #EB6666;
}

.event-page.kyushu {
    --area-color: #A978F4;
}

.event-page.over-sea {
    --area-color: #4BA17A;
}

/* セクションカラー */
#spot {
    --this-section-color: #E76D9E;
}

#map {
    --this-section-color: #017C45;
}

#contents {
    --this-section-color: #F9B03A;
}



/* 初期状態：コンテンツを隠す */
.ticket-tab__content {
    display: none;
}

/* activeクラスがついているものだけ表示 */
.ticket-tab__content.active {
    display: block;
}

/* タブボタンの見た目（調整用） */
.ticket-tab__btns {
    display: flex;
    list-style: none;
    padding: 0;
}

.tab-btn {
    flex: 1;
    text-align: center;
    padding: 10px;
    background: #ccc;
    cursor: pointer;
}

.tab-btn.active {
    background: #333;
    color: #fff;
}

/* =================================================
   イベントページ全体レイアウト
   ================================================= */
.event-page {
    background-color: #EFEFEF;
    /* style.cssと共通 */
}

/* 2カラムコンテナ */
.event-page_main {
    display: grid;
    flex-wrap: wrap;
    max-width: 1920px;
    grid-template-columns: calc(730 / 1920 * 100%) calc(1080 / 1920 * 100%);
    margin: 0 auto;
    padding: 40px 0px;
    gap: 20px;
    align-items: start;
}

/* メインコンテンツエリア */
.event-main_contents {
    flex: 1;
    min-width: 0;
    /* flexアイテムの縮小を許可 */
}

/* =================================================
    メインビジュアル
   ================================================= */
.event-mv__wrap {
    padding: 0 56px;
    display: grid;
    grid-template-columns:
        calc(1151 / 1804 * 100%) calc(665 / 1804 * 100%);
    column-gap: 0;
    align-items: start;
}

.event-mv__img img {
    border-radius: 38px;
}

.event-mv__ttl {
    background-color: var(--area-color, #F0007F);
    border-radius: 38px;
    padding: 20px 40px 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
}

.event-mv__ttl h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.event-mv__ttl img {
    display: block;
    width: 100%;
    margin: 0 auto;
}

.venue-name {
    display: block;
    text-align: center;
    font-size: clamp(20px, 2.4vw, 50px);
    margin-top: 15px;
    color: #F0007F;
    z-index: 1;
    font-weight: 900;
    text-shadow:
        5px 0 0 #fff, -5px 0 0 #fff, 0 5px 0 #fff, 0 -5px 0 #fff,
        3.5px 3.5px 0 #fff, -3.5px 3.5px 0 #fff, 3.5px -3.5px 0 #fff, -3.5px -3.5px 0 #fff,
        4.6px 1.9px 0 #fff, 4.6px -1.9px 0 #fff, -4.6px 1.9px 0 #fff, -4.6px -1.9px 0 #fff,
        1.9px 4.6px 0 #fff, 1.9px -4.6px 0 #fff, -1.9px 4.6px 0 #fff, -1.9px -4.6px 0 #fff;
}

.name-sub {
    font-size: 1.8rem;
}

.event-mv__dat {
    margin: 10px 0;
    text-shadow:
        5px 0 0 #fff, -5px 0 0 #fff, 0 5px 0 #fff, 0 -5px 0 #fff,
        3.5px 3.5px 0 #fff, -3.5px 3.5px 0 #fff, 3.5px -3.5px 0 #fff, -3.5px -3.5px 0 #fff,
        4.6px 1.9px 0 #fff, 4.6px -1.9px 0 #fff, -4.6px 1.9px 0 #fff, -4.6px -1.9px 0 #fff,
        1.9px 4.6px 0 #fff, 1.9px -4.6px 0 #fff, -1.9px 4.6px 0 #fff, -1.9px -4.6px 0 #fff;
}

.month-dat {
    display: flex;
    font-size: clamp(20px, 5vw, 100px);
    font-weight: 900;
    letter-spacing: .01em;
    letter-spacing: .05em;
}

.month-dat.is-3days {
    font-size: clamp(20px, 4vw, 100px);
    letter-spacing: .01em;
}

.date {
    margin: 0;
    font-family: Roboto;
    letter-spacing: .01em;
}

.year {
    font-size: 2.4rem;
    font-weight: 900;
    font-family: Roboto;
    letter-spacing: .01em;
}

.day-en {
    font-size: 3rem;
    margin-right: 10px;
    letter-spacing: .01em;
}


.event-mv__copy {
    font-size: clamp(20px, 2.4vw, 34px);
    font-weight: 700;
    color: #fff;
    margin: 5px 0;
}

.event-mv__copy p {
    margin: 10px 0;
}

.event-mv__copy span {
    font-size: 2.2rem;
    font-weight: 500;
    color: #ffefca;
    line-height: 1.2;
    display: block;
}

/* =================================================
   PC限定サイドコンテンツ
   ================================================= */
.side-contents {
    position: sticky;
    top: 0px;
}

.side_mv img {
    border-radius: 0 0 38px 0;
    width: 100vw;
    height: 66vh;
    object-fit: cover;
}

.side_nav {
    display: grid;
    grid-template-columns: calc(330 / 600 * 100%) calc(270 / 600 * 100%);
    gap: 0px;
    padding: 10px 0 0;
}

.side-mv__ttl {
    padding: 0 15px;
}

.side-event__ttl img {
    max-width: 350px;
    width: 100%;
    margin: 0 auto;
    display: block;
}

.side-ttl {
    display: block;
    text-align: center;
    font-size: clamp(20px, 1.1vw, 24px);
    margin-top: 15px;
    color: #F0007F;
    z-index: 1;
    font-weight: 900;
    text-shadow:
        5px 0 0 #fff, -5px 0 0 #fff, 0 5px 0 #fff, 0 -5px 0 #fff,
        3.5px 3.5px 0 #fff, -3.5px 3.5px 0 #fff, 3.5px -3.5px 0 #fff, -3.5px -3.5px 0 #fff,
        4.6px 1.9px 0 #fff, 4.6px -1.9px 0 #fff, -4.6px 1.9px 0 #fff, -4.6px -1.9px 0 #fff,
        1.9px 4.6px 0 #fff, 1.9px -4.6px 0 #fff, -1.9px 4.6px 0 #fff, -1.9px -4.6px 0 #fff;
}

.side-event__dat .date {
    display: flex;
    font-size: clamp(20px, 2.6vw, 50px);
    font-weight: 900;
    letter-spacing: .05em;
    align-items: baseline;
}


.side-event__dat .event-mv__dat {
    display: block;
    width: fit-content;
    margin: 10px auto;
}

.side-ticket_link a {
    background-color: #2ecc71;
    color: #fff;
    text-align: center;
    padding: 18px 20px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 2.6rem;
    display: block;
    width: 100%;
}

.side-ticket_link span {
    position: relative;
    padding-left: 30px;
    color: #fff;
}

.side-ticket_link span::before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../img/common/icon_staca.svg) no-repeat center / cover;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%) translateX(0%);
    -webkit-transform: translateY(-50%) translateX(0%);
}

.side-nav__main {
    padding: 10px 15px;
    background-color: #fff;
    border-radius: 20px;
}

.side-nav__main .nav-title p::after {
    background: url(../img/event/nav-icon_a.svg) no-repeat center / cover;


}

.side-nav__main ul {
    margin: 10px auto;
    padding: 0;
}

.side-nav__main li {
    list-style: none;
    padding-bottom: 12px;
    border-bottom: 3px solid #aaaaaa;
}

.side-nav__main li a {
    display: block;
    width: 100%;
    font-size: 1.8rem;
    padding: 12px 35px 0;
    position: relative;
    font-weight: 500;
}

.side-nav__main li a::before {
    content: "";
    width: 25px;
    height: 29px;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-30%) translateX(0%);
    -webkit-transform: translateY(-30%) translateX(0%);
}

.side-nav__main .snv-ticket a::before {
    background-image: url(../img/event/nav-icon_ticket.svg);
    background-size: contain;
}

.side-nav__main .snv-map a::before {
    background-image: url(../img/event/nav-icon_map.svg);
    background-size: contain;
}

.side-nav__main .snv-content a::before {
    background-image: url(../img/event/nav-icon_contents.svg);
    background-size: contain;
}

.side-nav__main .snv-shop a::before {
    background-image: url(../img/event/nav-icon_shop.svg);
    background-size: contain;
}

.side-nav__main .snv-access a::before {
    background-image: url(../img/event/nav-icon_access.svg);
    background-size: contain;
}


/* =================================================
   イベントメインコンテンツ
   ================================================= */

.event-main_contents {
    max-width: 1012px;
    width: 100%;
    margin: 0 auto;
}

.e-slider {
    background-color: var(--area-color, #F0007F);
    padding: 35px;
    border-radius: 30px;
    margin-bottom: 35px;
}

/* 埋め込みコード（X, Drive等）のコンテナ */
.top-video-embed-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Xのポストを中央寄せにし、最大幅を調整 */
.top-video-embed-container .twitter-tweet {
    margin: 0 auto !important;
}

/* GoogleドライブやYouTubeのiframeをレスポンシブに（必要に応じて） */
.top-video-embed-container iframe {
    max-width: 100%;
    /* Googleドライブのiframeはサイズ指定が必要な場合が多いので調整してください */
}

/* 直リンク動画（videoタグ） */
.top-video-file-container video {
    max-width: 100%;
    aspect-ratio: 16 / 9;
    /* 基本のアスペクト比 */
    object-fit: cover;
}



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

.top_slide_bottom {
    width: 75%;
    margin: 20px auto 0;
}

.top_slide_bottom p {
    font-size: 2.6rem;
    font-weight: 500;
    color: #fff;
    text-align: center;
    line-height: 1.6;
}

.top_slide_bottom img {
    display: block;
    margin: 10px auto;
    max-width: 640px;
}

.intro_bottom {
    max-width: 646px;
    width: 100%;
    margin: 0 auto 80px;

}

.case-gallery_link {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 40px;
}

.case-gallery_link a {
    background-color: var(--area-color, #F0007F);
    display: block;
    width: 100%;
    border-radius: 20px;
    color: #fff;
}

.c-gal_links {
    display: flex;
}

.c-gal_links img {
    width: 560px;
    height: 134px;
    object-fit: cover;
    border-radius: 20px 0 0 20px;
}

.c-gal_links span {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    font-size: 2.8rem;
    color: #fff;
    font-weight: 500;
    letter-spacing: .05em;
}

.a-btn {
    position: relative;
}

.a-btn::after {
    content: "";
    width: 55px;
    height: 55px;
    background: url(../img/common/icon-link_bk-gray.svg) no-repeat center / cover;
    position: absolute;
    bottom: 0%;
    right: 0%;
    transform: translateY(0%) translateX(0%);
    -webkit-transform: translateY(0%) translateX(0%);
}

.panf_link a {
    display: block;
    width: 100%;
    text-align: center;
    position: relative;
    padding: 25px 0;
    font-weight: 700;
    color: #fff;
    background-color: #333;
    border-radius: 20px;
}

.panf_link span {
    font-size: 2.6rem;
}

.panf_link a::after {
    content: "";
    width: 48px;
    height: 48px;
    background: url(../img/event/icon_webpanf.svg) no-repeat center / cover;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%) translateX(0%);
    -webkit-transform: translateY(-50%) translateX(0%);
}

.panf_link a:visited {
    color: #fff;
}

.event-main_contents>section:not(.intro), .event-section-wrap {
    max-width: 646px;
    width: 100%;
    margin: 0 auto;
}

/*== イベント概要 ==*/
.event_contents-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.event_contents-title h2 {
    color: var(--area-color, #F0007F);
    font-size: 4.5rem;
    margin: 0;
}

.event_contents-title span {
    display: flex;
    text-align: right;
    padding-right: 14px;
    font-size: 2.4rem;
    font-weight: 700;
    font-family: "Lato", sans-serif;
    color: #333;
    position: relative;
}

.event_contents-title span span {
    color: #F0007F;
    padding-right: 0;
}

.event_contents-title span::after {
    content: "";
    width: 15px;
    height: 28px;
    background: url(../img/event/nav-icon_a2.svg) no-repeat center/cover;
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translateY(-50%) translateX(0%);
    -webkit-transform: translateY(-50%) translateX(0%);
}

.event_contents-title span span::after {
    content: none;
}

.inner {
    background-color: #fff;
    border-radius: 20px;
    margin: 15px auto 30px;
    padding: 40px;
}

.report .inner {
    padding: 20px 20px 40px 20px;
}

.info .inner h3 {
    display: inline-block;
    padding: 10px;
    background-color: var(--area-color, #F0007F);
    font-size: 2.6rem;
    color: #fff;
    font-weight: 700;
    border-radius: 10px;
}

.info__dat {
    margin: 15px auto;
}

.info__dat .month-dat {
    font-size: 6rem;
}

.info__dat .is-3days {
    font-size: clamp(45px, 4vw, 100px);
}

.time {
    font-size: 4.6rem;
    margin: 10px 0;
    font-weight: 700;
    font-family: Roboto;
}

.time-txt {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.6;
}

.info__venue {
    border: 1px solid;
    border-color: var(--area-color, #F0007F);
    border-radius: 10px;
}

.info__venue-ttl {
    display: flex;
    background-color: var(--area-color, #F0007F);
    border: 1px solid;
    border-color: var(--area-color, #F0007F);
    justify-content: space-between;
    align-items: baseline;
    border-radius: 10px 10px 0 0;
    padding: 10px 15px;
}

.info .inner .info__venue-ttl h3 {
    padding: 0;
}

.jump_access {
    padding: 8px 30px;
    background-color: #fff;
    border-radius: 9px;
    position: relative;
}

.jump_access::before {
    content: "";
    width: 16px;
    height: 19px;
    background: url(../img/event/nav-icon_access.svg) no-repeat center / cover;
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%) translateX(0%);
    -webkit-transform: translateY(-50%) translateX(0%);
}

.jump_access::after {
    content: "";
    width: 10px;
    height: 18px;
    background: url(../img/event/icon_arrow-bottom.svg) no-repeat center/contain;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%) translateX(0%);
    -webkit-transform: translateY(-50%) translateX(0%);
}

.jump_access a {
    text-align: center;
    display: block;
    width: 100%;
}

.info__venue_inner {
    padding: 20px 13px;
}

.info__venue-name h4 {
    margin: 10px 0;
    font-size: 3.4rem;
    font-weight: 900;
    padding-bottom: 10px;
    border-bottom: 3px solid #aaa;
}

.info__venue-name p {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.6;
}

.spac-venue {
    background-color: #fff;
    border: 1px solid;
    border-color: var(--area-color, #F0007F);
    border-radius: 10px;
}

.spac-venue:not([open]) {
    margin-bottom: 7px;
}

.spac-venue summary {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    position: relative;
    padding: 7px 24px;
    border-radius: 10px;
    background-color: var(--area-color, #F0007F);
    color: #fff;
    cursor: pointer;
}

.spac-venue h4 {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 5px 0;
}

.spac-venue summary span {
    font-size: 1.4rem;
    font-weight: 500;
    display: block;
    margin-left: 20px;
}

.spac-venue summary::-webkit-details-marker {
    display: none;
}

.spac-venue summary::before,
.spac-venue summary::after {
    width: 3px;
    height: .9em;
    border-radius: 5px;
    background-color: #fff;
    content: '';
}

.spac-venue summary::before {
    position: absolute;
    right: 1.5em;
    top: 37%;
    rotate: 90deg;
}

.spac-venue summary::after {
    transition: rotate .3s;
}

.spac-venue[open] summary {
    border-radius: 10px 10px 0 0;
}

.spac-venue[open] summary::after {
    rotate: 90deg;
}

.venue__detail-block {
    padding: 15px;
    margin: 20px auto;
    border-bottom: 1px solid var(--area-color, #F0007F);
    display: block;
    width: 98%;
}

.venue__detail-block:last-child {
    border-bottom: none;
}

.venue__detail-block h5 {
    margin: 0 0 10px;
    padding-left: 20px;
    font-size: 2.4rem;
    position: relative;
}

.venue__detail-block h5::before {
    content: "";
    width: 10px;
    height: 100%;
    background-color: var(--area-color, #F0007F);
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%) translateX(0%);
    -webkit-transform: translateY(-50%) translateX(0%);
}

.venue__detail-block p {
    padding-left: 20px;
    font-size: 2rem;
    font-weight: 500;
    margin: 10px 0;
}

.venue__detail-block span {
    display: block;
    padding-left: 20px;
    font-size: 1.6rem;
    font-weight: 400;
}

.spac-venue h5, .spac-venue p, .spac-venue .venue__detail-block span {
    transform: translateY(-10px);
    opacity: 0;
    transition: transform .5s, opacity .5s;
}

.spac-venue[open] h5, .spac-venue[open] p, .spac-venue[open] .venue__detail-block span {
    transform: none;
    opacity: 1;
}

.ticket-first_announce {
    text-align: center;
    margin: auto;
}

.ticket-first_announce p {
    display: inline-block;
    background-color: #555555;
    color: #fff;
    padding: 10px 10px 10px 60px;
    font-size: 2.2rem;
    font-weight: 500;
    border-radius: 99px;
    position: relative;
    margin: 0px 0 10px;
}

.ticket-first_announce p::before {
    content: "";
    width: 35px;
    height: 35px;
    background: url(../img/event/icon_ticket_att.svg) no-repeat center / cover;
    position: absolute;
    top: 50%;
    left: 2.5%;
    transform: translateY(-50%) translateX(0%);
    -webkit-transform: translateY(-50%) translateX(0%);
}

.ticket-orignal_announce p {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.6;
    margin: 10px 0;
}

.ticket-orignal_announce a {
    text-decoration: underline;
    text-underline-offset: 7px;
}

/* =================================================
   チケット情報（タブ & テーブル）
   ================================================= */

.ticket-tab__wrapper {
    margin: 30px 0 0px;
}

/* タブボタンの装飾 */
.ticket-tab__btns {
    display: flex;
    margin: 0;
}

.tab-btn {
    flex: 1;
    padding: 15px;
    background: #fff;
    border: 2px solid #555;
    border-radius: 0px;
    font-weight: bold;
    transition: all 0.3s;
}

.tab-btn.active {
    background: #555;
    color: #fff;
    border-color: #555;
}

/* チケットテーブル */
.ticket-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border: 2px solid #555;
}

.ticket-table th,
.ticket-table td {
    padding: 15px 20px;
    border-bottom: 1px solid #555;
    text-align: left;
}

.ticket-table thead th {
    padding: 5px 0;
    background: #555;
    border: 2px solid #555;
    text-align: center;
    font-size: 1.4rem;
    color: #fff;
}

.ticket-table thead th span {
    position: relative;
}

.ticket-table thead th span::before {
    content: "";
    width: 15px;
    height: 12px;
    position: absolute;
    top: 50%;
    left: -10%;
    transform: translateY(-50%) translateX(-100%);
    -webkit-transform: translateY(-50%) translateX(-100%);

}

.ticket-table .t_type span::before {
    background: url(../img/event/icon_price_ticket.svg) no-repeat center / contain;
    left: -20%;
}

.ticket-table .t_time span::before {
    background: url(../img/event/icon_price_time.svg) no-repeat center / contain;
}

.ticket-table .t_price span::before {
    background: url(../img/event/icon_price_price.svg) no-repeat center / contain;
}

.ticket-table .ticket-name {
    width: 25%;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 20px 21px;
    font-size: 2rem;
}

.bg-early {
    background-color: #F372B2;
}

.bg-nomal {
    background-color: #2974C5;
}

.bg-car {
    background-color: #E79D0A;
}

.bg-student {
    background-color: #60910C;
}

.bg-kids {
    background-color: #E84C39;
}

.ticket-table .txt-time {
    text-align: center;
    width: 20%;
    border-right: 1px solid #555;
    font-size: 2rem;
    font-weight: 900;
    color: #555;
    font-family: Roboto;
}

.price-pre {
    background-color: #F0007F;
    padding: 5px;
    border-radius: 99px;
    font-size: 1.4rem;
    color: #fff;
    font-weight: 600;
    margin-right: 10px;
    position: relative;
    bottom: 5px;
}

.txt-price_wrap {
    max-width: 80%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: end;
    margin: 0;
}

.txt-price_pre {
    display: flex;
    align-items: baseline;
}

.txt-price_pre p {
    margin: 0;
}

.txt-price strong {
    font-size: 3.2rem;
    font-weight: 900;
    color: #333;
    font-family: Roboto;
    margin-right: 4px;
}

.txt-price .price-day {
    display: block;
    text-align: right;
}

.ticket-tax-note {
    margin-top: -20px;
    text-align: right;
}

.rule_btn a {
    display: flex;
    justify-content: start;
    align-items: baseline;
    background-color: #555;
    padding: 18px 65px;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    border-radius: 10px;
}

.rule_btn a span {
    display: block;
    font-size: 1.6rem;
    font-weight: 400;
    margin-left: 20px;
    text-decoration: underline;
    text-underline-offset: 8px;
    color: #F7FF31;
}

.rule_btn .btn::after {
    bottom: 30%;
}

.rule_btn a:visited {
    color: #fff;
}

.note_main-list {
    margin: 20px 0;
}

.note_main-list ul, .notes-block__list {
    margin: 0;
    padding-left: 20px;
}

.note_main-list li, .notes-block__list li {
    margin: 7px 0;
    line-height: 1.4;
}

.att_detail {
    background-color: #fff;
    border: 1px solid;
    border-color: var(--area-color, #F0007F);
    border-radius: 10px;
}

.att_detail:not([open]) {
    margin-bottom: 7px;
}

.att_detail summary {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    position: relative;
    padding: 7px 24px;
    border-radius: 10px;
    background-color: var(--area-color, #F0007F);
    color: #fff;
    cursor: pointer;
}

.att_detail h4 {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 5px 0;
}

.att_detail summary span {
    font-size: 1.4rem;
    font-weight: 500;
    display: block;
    margin-left: 20px;
}

.att_detail summary::-webkit-details-marker {
    display: none;
}

.att_detail summary::before,
.att_detail summary::after {
    width: 3px;
    height: .9em;
    border-radius: 5px;
    background-color: #fff;
    content: '';
}

.att_detail summary::before {
    position: absolute;
    right: 1.5em;
    top: 32%;
    rotate: 90deg;
}

.att_detail summary::after {
    transition: rotate .3s;
}

.att_detail[open] summary {
    border-radius: 10px 10px 0 0;
}

.att_detail[open] summary::after {
    rotate: 90deg;
}

.att_detail {
    margin: 20px auto;
    border-bottom: 1px solid var(--area-color, #F0007F);
    display: block;
    width: 98%;
}

.att_detail h5 {
    margin: 0 0 10px;
    padding-left: 20px;
    font-size: 2.4rem;
    position: relative;
}

.att_detail h5::before {
    content: "";
    width: 10px;
    height: 100%;
    background-color: var(--area-color, #F0007F);
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%) translateX(0%);
    -webkit-transform: translateY(-50%) translateX(0%);
}

.att_detail p {
    padding-left: 20px;
    font-size: 2rem;
    font-weight: 500;
    margin: 10px 0;
}

.att_detail span {
    display: block;
    padding-left: 20px;
    font-size: 1.6rem;
    font-weight: 400;
}

.att_detail h5, .att_detail p, .att_detail .att_detail span {
    transform: translateY(-10px);
    opacity: 0;
    transition: transform .5s, opacity .5s;
}

.att_detail[open] h5, .att_detail[open] p, .att_detail[open] .att_detail span {
    transform: none;
    opacity: 1;
}

.notes-block {
    padding: 20px;
}


/* =================================================
   チケット購入
   ================================================= */
.ticket .inner {
    background-color: #AEEAB7;
    padding: 10px;
}

.ticket_block {
    background-color: #fff;
    padding: 10px;
    border-radius: 15px;
    margin-bottom: 20px;
}

.sale_start h3 {
    text-align: center;
    font-size: 2.8rem;
    font-weight: 700;
}

.sale_start p {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 900;
    margin: 20px 0 0;
    font-family: Roboto;
    line-height: 1.4;
}

.link-area img {
    max-width: 318px;
    width: 100%;
}

.link-area span {
    margin-left: 20px;
}

.ticket-links {
    margin: 20px auto;
}

/* --- チケットリンクエリア共通設定 --- */
.ticket-link-item {
    padding: 15px;
    background-color: #F0007F;
    margin-bottom: 20px;
    border-radius: 99px;
}

.ticket-link-item .t-btn {
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-size: 4.2rem;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.3s;
    color: #fff;
    position: relative;
    font-family: Roboto;
}

.ticket_btn__inner {
    border: 1px solid #fff;
    border-radius: 99px;
    padding: 10px 0;
    position: relative;
    width: 100%;
}

.ticket-link-item .t-btn span {
    font-size: 2rem;
}

.ticket-link-item .t-btn .ticket_btn_w {
    margin-left: 10px;
}

.ticket-link-item .t-btn::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 73px;
    height: 78px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url(../img/event/a_logo.svg);
}



.ticket-link-item .t-btn::after {
    content: "";
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 73px;
    height: 78px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url(../img/event/ticket_btn_icon.svg);
}

/**チケットタイプアイコン**/
.ticket-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.ticket-icons span {
    padding: 5px 7px 5px 25px;
    background-color: #555;
    border-radius: 5px;
    color: #fff;
    position: relative;
    margin: 4px;
}

.ticket-icons span::before {
    content: "";
    width: 14px;
    height: 12px;
    position: absolute;
    top: 50%;
    left: 4%;
    transform: translateY(-50%) translateX(0%);
    -webkit-transform: translateY(-50%) translateX(0%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ticket-icons .icon-changing {
    background-color: #F372B2;
}

.ticket-icons .icon-changing::before {
    background-image: url(../img/event/icon_price_cos.svg);
    left: 5%;
}

.ticket-icons .icon-camera {
    background-color: #00A0E9;
}

.ticket-icons .icon-camera::before {
    background-image: url(../img/event/icon_price_cam.svg);
}

.ticket-icons .icon-nomal {
    background-color: #989898;
}

.ticket-icons .icon-nomal::before {
    background-image: url(../img/event/icon_price_person.svg);
    left: 5%;
}

.ticket-icons .icon-car {
    background-color: #E79D0A;
}

.ticket-icons .icon-car::before {
    background-image: url(../img/event/icon_price_car.svg);
}


.other-ticket {
    padding-top: 20px;
    padding-bottom: 20px;
}

.other-ticket h3 {
    font-size: 2.8rem;
    margin-bottom: 20px;
}

.other-ticket a img {
    width: 100%;
    margin: 0 auto;
}

/**チケットタイプ注釈部分**/
.attention-ttl {
    font-size: 1.8rem;
    font-weight: 500;
    color: #FF1D1D;
}

.attention-txt {
    margin: 5px 0 0;
    color: #555555;
}

.ticket-desc {
    margin: 0;
    color: #555;
}

.ticket-icons .ticket-type-desc {
    background-color: unset;
    color: #fff;
    padding: 0;
    color: #FF1D1D;
    font-weight: 500;
    font-size: 1.4rem;
}

/* ===レポート/ブログリンク===*/
.c-gal_wrap {
    background-color: #EFEFEF;
    padding: 15px 10px;
    border-radius: 10px;
}

.blog_link {
    margin: 20px 0;
}

.blog_link a {
    padding: 20px;
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    background-color: #F99D25;
    border-radius: 7px;
    text-align: center;
    width: 100%;
    display: block;
}

.blog_link a span {
    position: relative;
}

.blog_link a span::before {
    content: "";
    width: 70px;
    height: 54px;
    background: url(../img/event/blog_logo.svg) no-repeat center/contain;
    position: absolute;
    top: 50%;
    left: -10%;
    transform: translateY(-50%) translateX(-100%);
    -webkit-transform: translateY(-50%) translateX(-100%);
}

.blog_link a.btn::after {
    bottom: auto;
}

.blog_link a:visited {
    color: #fff;
}

/* =================================================
   コンテンツ部分
   ================================================= */
/*** ===== マップ ==== ***/
.event-map-block .map-lead {
    font-size: 2.8rem;
    font-weight: 700;
    padding-bottom: 20px;
    position: relative;
    margin: 10px 0;
}

.event-map-block .map-lead::before {
    content: "";
    width: 30px;
    height: 7px;
    background-color: var(--area-color, #F0007F);
    position: absolute;
    bottom: 0%;
    left: 0%;
    border-radius: 10px;
}

.event-map-block .map-text-top {
    font-size: 1.8rem;

}

.event-map-block {
    margin: 20px auto;
}

/*** コンテンツブロック共通 ***/
.contents-block {
    border-radius: 20px;
    border: 1px solid var(--this-section-color, #F0007F);
    margin: 20px 0;
}

.contents-header {
    padding: 20px;
    padding-left: 45px;
    background-color: var(--this-section-color, #F0007F);
    border: 1px solid var(--this-section-color, #F0007F);
    border-radius: 17px 17px 0 0;
    margin-bottom: 10px;
}

.contents-header h3 {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0;
    color: #fff;
    position: relative;
}

.contents-header h3::before {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%) translateX(0%);
    -webkit-transform: translateY(-50%) translateX(0%);
}

.content_inner {
    padding: 10px;
}

/**コンテンツブロックアイコン**/
.contents-header .c-spot-ttl::before {
    content: "";
    width: 23px;
    height: 19px;
    background: url(../img/event/contents_icon_camera.svg) no-repeat center / cover;
    left: -7%;
}

.contents-header .c-service-label h3::before {
    content: "";
    width: 30px;
    height: 23px;
    background: url(../img/event/contents_icon_content.svg) no-repeat center / cover;
    left: -7%;
}

#map .contents-header h3::before {
    content: "";
    width: 22px;
    height: 19px;
    background: url(../img/event/contents_icon_shop.svg) no-repeat center / cover;
    left: -6%;
}

/**撮影スポットブロック**/
.c-spot-status {
    margin: 20px 0 0;
}

.c-spot-text, .c-service-desc, #shop .content_inner p {
    margin: 10px 0;
    line-height: 1.5;
    font-size: 1.8rem;
}

.c-spot-time {
    padding-top: 14px;
    border-top: 1px solid #555;
    display: flex;
    align-items: baseline;
    margin: 20px 0;
}

.icon-clock {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../img/event/spot_icon_time.svg) no-repeat center/contain;
    margin-right: 10px;
}

.c-spot-time p {
    font-size: 1.8rem;
    font-weight: 500;
    margin: 0;
}

.c-spot-sub-ttl {
    background-color: #555;
    padding: 7px;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 600;
    display: inline-block;
    margin: 20px 0 0;
}

/* ステータス項目（タグ）のベース */
.status-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* アイコンとテキストの間隔 */
    background-color: #FFF4F8;
    /* 指定の薄ピンク背景 */
    padding: 7px 10px;
    border-radius: 5px;
    /* 角を丸くしてチップ状に */
    font-size: 1.8rem;
    font-weight: 500;
    color: #6A6A6A;
    /* 指定のグレー（テキスト） */
    margin-right: 8px;
    margin-bottom: 8px;
}

/* アイコン描画用の共通設定 */
.status-item::before {
    content: "";
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: inline-block;
}

/* ○（is-ok）のデザイン */
.status-item.is-ok::before {
    border: 2px solid var(--this-section-color);
    /* セクションカラー連動 */
    border-radius: 50%;
}

/* ×（is-ng）のデザイン */
.status-item.is-ng::before {
    /* linear-gradientを使って1つの要素で2本の斜め線を描画 */
    background:
        linear-gradient(45deg, transparent 44%, #6A6A6A 44%, #6A6A6A 56%, transparent 56%),
        linear-gradient(-45deg, transparent 44%, #6A6A6A 44%, #6A6A6A 56%, transparent 56%);
}

.c-spot-note-list {
    margin: 0;
    padding: 20px;
    padding-left: 35px;
    border: 1px solid #555;
    background-color: #F8F8F8;
    border-radius: 0 0 20px 20px;
}

.c-spot-note-list li {
    margin: 7px 0;
    line-height: 1.35;
}

.c-spot-btn, .c-service-detail-link, .access_link a, .block-btns a {
    text-align: center;
    display: block !important;
    width: 95%;
    padding: 20px 0;
    background-color: #555;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    margin: 20px auto;
    border-radius: 7px;
}

.c-spot-btn:visited {
    color: #fff;
}

.c-spot-btn.btn::after, .c-service-detail-link.btn::after, .access_link a::after {
    bottom: auto;
}

/***カメラマンサービスブロック***/
.c-day-title {
    margin: 0 0 15px;
    padding-left: 16px;
    font-size: 2rem;
    position: relative;
}


.c-day-title::before {
    content: "";
    width: 5px;
    height: 100%;
    background-color: var(--area-color, #F0007F);
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%) translateX(0%);
    -webkit-transform: translateY(-50%) translateX(0%);
}

.c-service-desc span {
    font-size: 1.6rem;
}

.c-service-desc span a {
    color: var(--this-section-color);
    text-decoration: underline;
    text-underline-offset: 5px;
}

.c-p-cards a {
    display: flex;
    border-bottom: 2px solid var(--this-section-color);
    padding: 15px;
    background-color: color-mix(in srgb, var(--this-section-color), white 90%);
    filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.2));
    margin: 20px 0;
}

.c-p-cards a:hover {
    border-radius: 20px;
    border: 2px solid var(--this-section-color);
    transition: all .2s;
}

.c-p-info {
    padding: 10px;
    display: block;
}

.c-p-info span {
    display: block;
}

.c-p-card.btn::after {
    bottom: auto;
}

.c-p-name {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .03em;
    margin-bottom: 5px;
}

.c-day-group {
    margin-bottom: 30px;
}

.c-day-group:last-child {
    margin-bottom: 0;
}

/*協力店舗ブロック*/
.shop-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.shop-card-info h4 {
    margin: 10px 0;
}

#map .shop-card-info p {
    font-size: 1.4rem;
}

.shop-more {
    width: 100%;
    margin-bottom: 7px;
}

.shop-more summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}

.shop-more summary p {
    width: 100%;
    text-align: center;
}

.shop-more summary::-webkit-details-marker {
    display: none;
}

.shop-more summary::before,
.shop-more summary::after {
    width: 3px;
    height: .9em;
    border-radius: 5px;
    background-color: #333333b3;
    content: '';
}

.shop-more summary::before {
    position: absolute;
    right: 2em;
    rotate: 90deg;
}

.shop-more summary::after {
    transition: rotate .3s;
}

.shop-more[open] summary::after {
    rotate: 90deg;
}

.shop-more p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

.shop-more[open] p {
    transform: none;
    opacity: 1;
}

.shop-more[open] summary~* {
    display: grid;
}

.shop-more .more-txt {
    opacity: 1;
    text-align: center;
    margin: 0;
    transform: none;
}

.shop-more[open] .more-txt {
    font-size: 0 !important;
}

.shop-more[open] .more-txt::before {
    content: "閉じる";
    font-size: 1.8rem;
}

/**協力店舗アコーディオンカラー**/
.color-blue {
    border-color: #2974c5;
    border-bottom: 1px solid #2974c5;
}

.color-blue summary {
    background-color: #2974c5;
}

.color-red {
    border-color: #ef4e3a;
    border-bottom: 1px solid #ef4e3a;
}

.color-red summary {
    background-color: #ef4e3a;
}

.color-green {
    border-color: #61920c;
    border-bottom: 1px solid #61920c;
}

.color-green summary {
    background-color: #61920c;
}

.shop-accordion-area ul {
    padding: 20px 30px;
    margin: 0;
}

.shop-accordion-area li {
    font-size: 1.8rem;
    margin: 10px 0;
    font-weight: 500;
    line-height: 1.3;
}

/*汎用コンテンツブロック*/
.block-lead {
    margin: 10px 0;
    padding-left: 20px;
    font-size: 2rem;
    position: relative;
}

.block-lead::before {
    content: "";
    width: 10px;
    height: 100%;
    background-color: var(--area-color, #F0007F);
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%) translateX(0%);
    -webkit-transform: translateY(-50%) translateX(0%);
}

/* 自由入力エリア内の余白調整 */
.block-free-content {
    margin-top: 20px;
    line-height: 1.8;
    display: block;
}

/* 1. 全てのiframeの基本設定 */
.block-free-content iframe {
    width: 100% !important;
    display: block;
    margin: 10px 0;
    /* height: auto !important; は削除！ */
}

/* 2. YouTubeなど、アスペクト比を固定したい動画（TikTok以外） */
/* src属性に tiktok.com を含まない iframe だけに 16:9 を適用 */
.block-free-content iframe:not([src*="tiktok.com"]) {
    aspect-ratio: 16 / 9;
    height: auto !important;
    /* aspect-ratioを使う場合はここはautoでOK */
}

/* 3. TikTok専用の調整（縦長を維持） */
.block-free-content blockquote.tiktok-embed {
    margin: 10px auto !important;
    min-width: 325px !important;
    width: 100% !important;
}

/* TikTokが生成したiframeは高さを固定せず、TikTok側の指定に従わせる */
.block-free-content blockquote.tiktok-embed iframe {
    aspect-ratio: auto !important;
    /*height: 700px !important;*/
    /* TikTokの標準的な高さに固定するか、指定を外す */
}

.block-free-content p {
    margin: 10px 0;
}

/**セクション開始時の見た目**/
.in-section h3 {
    color: var(--this-section-color, #F0007F);
    font-size: 2.8rem;
    margin: 0;
}


/***参加表明***/
.sanka_img p {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 500;
}

.sanka_hash h3 {
    display: inline-block;
    padding: 10px;
    background-color: var(--area-color, #F0007F);
    font-size: 2rem;
    color: #fff;
    font-weight: 700;
    border-radius: 10px;
}

.sanka_hash p {
    text-align: center;
    font-size: 3.8rem;
    font-weight: 700;
    margin-bottom: 30px;
}

.sanka_link a {
    position: relative;
    display: block;
    width: 100%;
    margin: 20px auto;
    text-align: center;
    padding: 20px 0;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    background-color: #1A1A1A;
    border-radius: 10px;
}

.sanka_link a::after {
    content: "";
    width: 25px;
    height: 25px;
    background: url(../img/event/sns_icon.svg) no-repeat center/contain;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%) translateX(0%);
    -webkit-transform: translateY(-50%) translateX(0%);
}

.sanka_link a:visited {
    color: #fff;
}

/**アクセス**/
.other_access h4 {
    display: inline-block;
    padding: 10px;
    background-color: var(--area-color, #F0007F);
    font-size: 2rem;
    color: #fff;
    font-weight: 700;
    border-radius: 10px;
}

.other_access p {
    margin: 10px 0;
    font-size: 1.8rem;
    line-height: 1.4;
}

.access_link a:visited {
    color: #fff;
}

/**主催セクション**/
.organizer .inner {
    display: flex;
    justify-content: center;
    padding: 0px 20px;
    background-color: unset;
}

.organizer table {
    /* 幅を100%にせず、中身に合わせて伸縮させる */
    width: auto;
    /* セクションとして許容する最大幅 */
    max-width: 800px;
    border-collapse: collapse;
}

.organizer tr {
    border-bottom: 1px solid #aaa;
}

.organizer tr:last-child {
    border-bottom: none;
}

.organizer th {
    /* 見出しを改行させず、文字数ピッタリの幅にする */
    width: 1px;
    white-space: nowrap;
    text-align: left;
    vertical-align: middle;
    padding: 10px 40px 10px 0;
    /* この「40px」がthとtdの間の適切な距離になります */
    font-weight: 700;
    color: #333;
}

.organizer td {
    text-align: left;
    vertical-align: top;
    padding: 10px 0;
    line-height: 1.6;
}

/* スマホ版の調整（必要に応じて） */
@media screen and (max-width: 768px) {
    .organizer table {
        width: 100%;
        /* スマホでは全幅使う */
    }

    .organizer th {
        padding-right: 20px;
        vertical-align: baseline;
        /* 隙間を少し詰める */
    }
}

/**注意事項ブロック**/
.event-attention-block {
    border-radius: 20px;
    background-color: #EAEAEA;
    padding: 16px 19px;
    margin-bottom: 20px;
    line-height: 1.4;
}

.att-title {
    font-size: 2.4rem;
    padding-left: 28px;
    position: relative;
}

.has-icon::before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../img/event/icon_att.svg) no-repeat center / cover;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%) translateX(0%);
    -webkit-transform: translateY(-50%) translateX(0%);
}

.att-text p {
    margin: 20px 0;
    font-size: 2rem;
    font-weight: 500;
}

.att-content {
    border-radius: 20px;
    background-color: #fff;
    padding: 10px;
}

.att-text-bottom p {
    margin: 10px 0;
}

/**1日開催日付調整**/
.count-1 .event-mv__dat, .count-1 .info__dat_dat {
    display: flex;
    align-items: baseline;
}

.count-1 .year {
    margin-right: 10px;
}

.side-event__dat .count-1 .year {
    margin-right: 10px;
    font-size: 2.4rem;
}

/**旧タイプの店舗リスト**/

.shop-status-list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin-left: 0;
}

.shop-status-list li {
    background: #f0f0f0;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 16px;
    display: block;
    border: 1px solid #ddd;
    font-weight: 500;
    margin: 0;
}

.shop-status-list li span {
    display: block;
    font-size: 1.4rem;
    font-weight: 400;
    padding-top: 7px;
    padding-left: 0;
}

/* 撮影可能アイコン（カメラ） */
.shop-status-list li::before {
    content: "　";
    margin-right: 7px;
    font-size: 1.1em;
}

.shop-status-list li.can-photo::before {
    content: "📷";
    /* もしくはWEBフォントやSVG */
    margin-right: 7px;
    font-size: 1.1em;
}

/* 特典ありアイコン（ギフト） */
.shop-status-list li.has-gift span::before {
    content: "🎁";
    margin-right: 7px;
    font-size: 1.1em;
}

/* 両方ある場合の色付け例（任意） */
.shop-status-list li.can-photo.has-gift {
    background: #fff5f5;
    border-color: #ffcccc;
}


.side-event__dat .is-3days .date {
    font-size: clamp(30px, 0.7vw + 0.6rem, 2.6rem);
}

.side-event__dat .is-3days .day-en {
    font-size: 1.8rem;
    margin-left: 2px;
}

.org_images {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: left;
}

.org_images img {
    max-width: 200px;
    width: 100%;
}

/* ==========================================================================
   通常+定点カメラマンサービス
   ========================================================================== */
.c-service-special-block {
    margin-bottom: 40px;
}


.c-service-special-block .c-fixed-section-title {
    font-size: 2.6rem;
    padding-bottom: 16px;
    margin-bottom: 5px;
    font-weight: 700;
    border-bottom: 3px solid #AAAAAA;
    position: relative;
    text-align: left;
    /* 左揃えにして下線を綺麗に見せる */
}

.c-service-special-block .c-fixed-section-title::before {
    content: "";
    width: 223px;
    height: 3px;
    display: block;
    background-color: #F0007F;
    position: absolute;
    bottom: -3px;
    left: 0;
}

/* 定点セクションの説明文 */
.c-service-special-block .c-fixed-section-desc {
    font-size: 1.6rem;
    color: #555;
    margin-top: 15px;
    margin-bottom: 25px;
    line-height: 1.6;
}

/* 各日程の見出し（○.○担当など） */
.c-service-special-block .c-day-title {
    font-size: 1.8rem;
    color: #333;
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: bold;
}


.c-service-special-block .exhibitor-list-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin-top: 15px;
    margin-bottom: 20px;
}

.c-service-fixed-section {
    margin-top: 50px;
}

.c-service-special-block .exhibitor-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    width: 100%;
}

/* リンクがある場合だけホバーアクション */
.c-service-special-block a.exhibitor-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

/* 1. 画像エリア（正方形を維持する設定） */
.c-service-special-block .exhibitor-img-box {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* 正方形にする */
    background: #f7f7f7;
    overflow: hidden;
}

.c-service-special-block .exhibitor-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 画像の比率を崩さずトリミング */
}

/* スペース枠（カメラマンでは空タグですが構造維持のため残してあります） */
.c-service-special-block .exhibitor-space_wrap {
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translateY(0%) translateX(-50%);
    -webkit-transform: translateY(0%) translateX(-50%);
    display: block;
    width: 100%;
}

/* 2. 情報エリア */
.c-service-special-block .exhibitor-info {
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* 高さを揃えるため */
    justify-content: center;
    /* 名前を縦中央に美しく配置 */
}

/* カメラマン名前 */
.c-service-special-block .exhibitor-name {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 0;
    line-height: 1.2;
    text-align: center;
    /* カード中央に名前を配置 */
}


.c-service-special-block a.exhibitor-card::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('../img/common/icon_link_b.svg');
    /* デフォルトの別窓アイコン */
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    position: absolute;
    top: 6%;
    left: 90%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    z-index: 1;
}


.c-service-special-block a.exhibitor-card[href*="x.com"]::before,
.c-service-special-block a.exhibitor-card[href*="twitter.com"]::before {
    background-image: url('../img/common/icon_x_b.svg');
}

/* InstagramのURLの自動切り替え（必要に応じてコメント解除） */
/*
a.c-service-special-block .exhibitor-card[href*="instagram.com"]::before {
    background-image: url('../img/common/icon_instagram_b.svg');
}
*/

@media screen and (max-width: 768px) {

    /* スマホ時は3列に自動縮小、gapを詰める */
    .c-service-special-block .exhibitor-list-wrap {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important;
    }

    /* タイトル周りのスマホ調整 */
    .c-service-special-block .c-fixed-section-title {
        font-size: 2.2rem;
        padding-bottom: 6px;
        margin-bottom: 15px;
    }

    .c-service-special-block .c-fixed-section-desc {
        font-size: 1.3rem;
        text-align: left;
        /* スマホでは説明文を左寄せにして読みやすく */
        margin-bottom: 15px;
    }

    .c-service-special-block .c-day-title {
        font-size: 1.6rem;
        margin-top: 20px;
        margin-bottom: 10px;
    }
}

.venue-map-list {
    background-color: color-mix(in srgb, var(--area-color) 37%, transparent);
    padding: 16px 25px;
    margin: 20px auto;
    border-radius: 20px;
    border: 2px solid var(--area-color);
}

.venue-map-list li {
    margin: 5px 0;
    font-size: 1.4rem;
}

.venue-map-btn-wrap {
    margin: 20px auto;
}

.venue-map-btn-wrap a {
    text-align: center;
    display: block !important;
    width: 95%;
    padding: 20px 0;
    background-color: var(--area-color);
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    margin: 20px auto;
    border-radius: 7px;
}

.c-spot-text a {
    color: #0044CC;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.c-event-sub-logo.append img {
    width: 90%;
    padding: 10px;
}



/* =================================================
   レスポンシブ
   ================================================= */
@media screen and (max-width: 1024px) {
    .event-page_main {
        flex-direction: column;
    }

    .side-contents {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .event-mv__wrap, .event-page_main, .side_nav {
        grid-template-columns: 1fr;
    }

    .side_mv, .side-mv__ttl, .nav-title {
        display: none;
    }

    .event-page_main {
        position: static;
        isolation: auto;
        padding-top: 0;
    }

    .side-contents {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 990;
        transform: translateY(-100%);
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        background-color: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(16px);
    }

    .side-contents.is-show {
        transform: translateY(0);
        pointer-events: auto;
    }

    .side_nav {
        padding-top: 60px;
        backdrop-filter: blur(12px);
    }

    .side_nav ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 8px 0px;
        margin: 0;
        list-style: none;
    }

    .side_nav ul li {
        margin: 0;
        padding: 0 4px;
        flex: 1;
        text-align: center;
        height: 57px;
        border-bottom: none;
    }

    .side_nav ul li a {
        font-size: 1.1rem;
        font-weight: 700;
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: end;
        height: 57px;
        line-height: 1.2;
        padding: 0;
        border-bottom: 1px solid var(--area-color);
        padding-bottom: 5px;
    }

    .side-nav__main .btn::after {
        content: none;
    }

    .side-nav__main li a::before {
        width: 20px;
        height: 22px;
        top: 15%;
        left: 50%;
        transform: translateY(0%) translateX(-50%);
        -webkit-transform: translateY(0%) translateX(-50%);
    }

    .side-nav__main {
        padding: 10px 2px 0;
        background-color: unset;
    }

    main.event-page {
        padding-top: 75px;
    }

    .event-mv__wrap {
        padding: 0 5px;
    }

    .event-mv__img img {
        height: 480px;
        object-fit: cover;
        object-position: center;
        border-radius: 10px;
        zoom: 1.1;
    }

    .event-mv__wrap {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "overlap";
        position: relative;
    }

    .event-mv__img,
    .event-mv__dat,
    .event-mv__ttl h2 {
        grid-area: overlap;
    }

    .event-mv__img {
        z-index: 1;
    }

    .event-mv__ttl {
        grid-area: overlap;
        align-self: end;
        padding: 40px 20px 0;
        background: unset;

        z-index: 2;
        justify-content: flex-end;
    }

    .month-dat {
        font-size: 5.2rem;
    }

    .spnone {
        display: none;
    }

    .intro {
        padding: 0 5px;
    }

    .intro .e-slider {
        border-radius: 10px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .c-gal_links img {
        width: 170px;
        height: 81px;
        border-radius: 10px 0 0 10px;
    }

    .c-gal_links span {
        font-size: 1.8rem;
        width: 80%;
    }

    .case-gallery_link a {
        border-radius: 10px;
    }

    .a-btn::after {
        width: 35px;
        height: 35px;
    }

    .c-spot-btn, .c-service-detail-link, .access_link a, .panf_link a, .block-btns a {
        border-radius: 99px;
        padding: 18px;
    }

    .case-gallery_link {
        margin-bottom: 20px;
    }

    .panf_link span {
        font-size: 1.8rem;
    }

    .panf_link a::after {
        width: 40px;
        height: 40px;
    }

    .event_contents-title h2 {
        font-size: 2.9rem;
    }

    .event_contents-title span {
        font-size: 1.4rem;
    }

    .intro_bottom {
        margin-bottom: 30px;
    }

    /**メインコンテンツ**/
    .inner {
        padding: 20px 5px;
    }

    .info .inner h3 {
        font-size: 1.8rem;
        border-radius: 99px;
    }

    .time {
        font-size: 3rem;
    }

    .info .inner h3 {
        font-size: 1.8rem;
    }

    .jump_access a {
        font-size: 1.4rem;
    }

    .info__venue_inner {
        padding: 13px 8px;
    }

    .info__venue-name h4 {
        font-size: 2.4rem;
    }

    .info__venue-name p {
        font-size: 1.6rem;
    }

    .spac-venue summary {
        padding: 7px 15px;
    }

    .spac-venue h4 {
        font-size: 1.7rem;
    }

    .spac-venue summary span {
        font-size: 1.2rem;
        margin-left: 0px;
    }

    .spac-venue summary::before {
        right: 1em;
        top: 32%;
    }

    .venue__detail-block {
        padding: 13px 8px;
    }

    .venue__detail-block h5 {
        font-size: 1.7rem;
    }

    .venue__detail-block p {
        font-size: 1.6rem;
    }

    .venue__detail-block span {
        font-size: 1.4rem;
    }

    .ticket-first_announce p {
        font-size: 1.6rem;
    }

    .ticket-first_announce p::before {
        width: 25px;
        height: 25px;
    }

    .ticket-orignal_announce p {
        font-size: 1.6rem;
    }

    .event-main_contents>section:not(.intro), .event-section-wrap {
        padding: 0 5px;
    }

    /**料金表**/
    .txt-price_wrap {
        max-width: unset;
    }

    .txt-price strong {
        font-size: 2.6rem;
    }

    .txt-price p {
        font-size: 1.4rem;
    }

    .price-pre {
        font-size: 1.1rem;
    }

    .ticket-table th, .ticket-table td {
        padding: 15px;
    }

    .ticket-table .ticket-name {
        font-size: 1.6rem;
        padding: 15px 7px;
    }

    .ticket-table .txt-time {
        font-size: 1.6rem;
    }

    .tab-btn {
        font-size: 1.5rem;
    }

    .ticket-tab__content table {
        width: 100%;
        table-layout: auto;
        /* オートのままにする */
    }

    /* 1列目と2列目は「中身が入り切る最小幅」をキープ */
    .ticket-tab__content td:nth-child(1),
    .ticket-child td:nth-child(2) {
        width: 1%;
        /* 1%と指定すると、中身（文字）が入り切る最小幅まで縮まる */
        white-space: nowrap;
        /* ★重要：絶対に改行させない */
        padding-right: 15px;
        /* カラム間の余白を確保 */
    }

    /* 3列目（.txt-price）は残りのスペースを全部もらう */
    .ticket-tab__content td:nth-child(3) {
        width: auto;
    }

    .rule_btn a {
        padding: 18px 15px;
        align-items: center;
    }

    .rule_btn a span {
        font-size: 1.2rem;
        margin-left: 10px;
    }

    .att_detail h4 {
        font-size: 1.8rem;
    }

    .att_detail h5 {
        font-size: 1.8rem;
    }

    .notes-block {
        padding: 15px 7px;
    }

    .link-area img {
        max-width: 181px;
    }

    .link-area span {
        margin-left: 1px;
    }

    .ticket-link-item .t-btn::before, .ticket-link-item .t-btn::after {
        width: 55px;
        height: 50px;
    }

    .ticket-link-item .t-btn {
        font-size: 3rem;

    }

    .ticket-link-item .t-btn span {
        font-size: 1.6rem;
    }

    .ticket-link-item .t-btn .ticket_btn_w {
        margin-left: 5px;
    }

    .ticket_btn__inner {
        padding: 8px 0;
    }

    .ticket-link-item {
        padding: 8px;
    }

    .other-ticket h3 {
        font-size: 1.6rem;
    }

    .blog_link a {
        font-size: 1.6rem;
        padding: 24px;
    }

    .event-map-block .map-lead {
        font-size: 2rem;
    }

    .in-section h3 {
        font-size: 2.4rem;
    }

    .contents-header {
        padding: 10px;
        padding-left: 40px;
    }

    .contents-header .c-spot-ttl::before {
        left: -9%;
    }

    .c-spot-sub-ttl {
        font-size: 1.6rem;
    }

    .contents-header .c-service-label h3::before {
        left: -9%;
    }

    .event-attention-block {
        padding: 10px;
    }

    .att-title {
        font-size: 2rem;
    }

    .att-text p {
        font-size: 1.8rem;
    }


    .att-content {
        padding: 7px;
    }

    /**一応不要なbrを削除**/

    .att-text br, .content_inner br {
        display: none;
    }

    .shop-accordion-area ul {
        padding-right: 10px;
    }

    .shop-accordion-area li {
        font-size: 1.6rem;
    }

    .att_detail summary::before {
        top: 25%;
    }

    .org_images {
        flex-direction: column;
    }

    .top_slide_bottom {
        width: 100%;
    }

    .top_slide_bottom img {
        max-width: 100%;
    }

    .event-mv__copy p {
        text-align: center;
    }
}

@media screen and (min-width: 769px) {
    .pcnone {
        display: none;
    }
}

/**イベント終了案内**/

.event_alert_wrap {
    padding: 0 56px;
    margin: 10px 0;
}

.p-event-alert {
    background-color: #F7F4A1;
    border-radius: 10px;
}

.p-event-alert p {
    font-size: 2.6rem;
    text-align: center;
    padding: 20px;
    margin: 0;
    font-weight: 700;
    color: #F0007F;
}

.p-event-alert a {
    color: #0044CC;
    text-decoration: underline;
    text-underline-offset: 7px;
}

@media screen and (max-width: 768px) {
    .event_alert_wrap {
        padding: 0 7px;
    }

    .p-event-alert p {
        padding: 10px;
        font-size: 2.2rem;
        line-height: 1.5;
    }
}

/* --- Slick Dots: シンプル＆モダン（横伸び） --- */
.js-gallery-slider .slick-dots {
    display: block;
    width: 100%;
    padding: 0;
    margin: 20px 0 0;
    list-style: none;
    text-align: center;
}

.js-gallery-slider .slick-dots li {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
    vertical-align: middle;
}

.js-gallery-slider .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 8px;
    height: 8px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: #8a8a8a;
    /* 通常時のドットの色 */
    border-radius: 4px;
    transition: all 0.3s ease;
    /* 変化をなめらかに */
}

/* アクティブ（現在表示中）のドット */
.js-gallery-slider .slick-dots li.slick-active button {
    width: 24px;
    /* 横に伸ばす */
    background: var(--area-color);
    /* アクティブ時の色（イベントのメインカラーに合わせて変更してください） */
}

.c-gal_wrap .slick-dotted.slick-slider {
    margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
    .c-gal_wrap {
        padding: 0;
    }

    .c-gal_wrap .c_gallery-item__venue {
        font-size: 1.4rem;
    }

    .c-gal_wrap .c_gallery-item::after {
        width: 25px;
        height: 25px;
    }
}