img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.in_page{padding-top: min(180px, 25vw); position: relative; top: 40px; opacity: 0; transition: opacity 1.2s ease-out, top 1.2s cubic-bezier(.25,.1,.25,1);
    &.load_open{opacity: 1; top: 0;}
}

/* container */
.container{width: 90%; margin: 0 auto;}

/* loading */
.loading{position: fixed; top: 0; left: 0; width: 100%; height: 100%; height: 100svh; z-index: 2000; display: flex; align-items: center; justify-content: center; background: linear-gradient(to right, #107D8F, #00A6C1);
    .loading_stamp{width: min(240px, 22vw);
        img{width: 100%; display: block; filter: drop-shadow(4px 4px 6px #00000040); animation: stamp_in 0.8s ease-out forwards;}
    }
    &.load_open{animation: fade_out 1s ease forwards;
        .loading_stamp img{animation: stamp_out 0.8s ease-in forwards;}
    }
    &.is_loaded{display: none;}
}
@keyframes stamp_out{
    0%{transform: scale(1); opacity: 1;}
    100%{transform: scale(1.8); opacity: 0;}
}
@media only screen and (max-width: 835px){
    .loading{
        .loading_stamp{width: min(140px, 34vw);}
    }
}

/* fix bg */
.fix_bg{position: fixed; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; z-index: -1; pointer-events: none; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(../images/bg/bg.webp); transition: opacity 1.2s ease-out;
    &.load_open{opacity: 1;}
}
.fix_bg_kasou{position: fixed; width: 100%; height: 100%; top: 0; left: 0; opacity: 1; z-index: -1; pointer-events: none; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(../images/bg/bg_lower_layer.webp);}
@media only screen and (max-width: 835px){
    .fix_bg{background-image: url(../images/bg/bg_sp.webp);}
    .fix_bg_kasou{background-image: url(../images/bg/bg_sp_lower_layer.webp);}
}

/* bg frame */
.bg_corner{position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 900; pointer-events: none;
    --corner_w: clamp(54px, 6vw, 60px); --corner_h: calc(var(--corner_w) * 56 / 58); --frame_bg_size: 100vw calc(100vh - var(--site_header_height));
    &::before{content: ""; position: absolute; top: var(--site_header_height); left: 0; right: 0; bottom: 0; padding: 12px; box-sizing: border-box; pointer-events: none;
        background: url(../images/bg/bg_frame_brown.png) no-repeat; background-size: var(--frame_bg_size); background-position: 0 0;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    }
    i{position: absolute; width: var(--corner_w); aspect-ratio: 58 / 56; display: block;
        background: url(../images/bg/bg_frame_brown.png) no-repeat; background-size: var(--frame_bg_size);
        &::after{content: ""; position: absolute; inset: 6px; background: url(../images/bg/bg_corner.png) top left / contain no-repeat; pointer-events: none; transform: translate(6px, 6px);}
    }
    .tl{top: var(--site_header_height); left: 0; background-position: 0 0; -webkit-mask: url(../images/bg/corner_2.png) center/contain no-repeat; mask: url(../images/bg/corner_2.png) center/contain no-repeat;}
    .tr{top: var(--site_header_height); right: 0; background-position: calc(-100vw + var(--corner_w)) 0; -webkit-mask: url(../images/bg/corner_2_tr.png) center/contain no-repeat; mask: url(../images/bg/corner_2_tr.png) center/contain no-repeat;
        &::after{transform: scaleX(-1) translate(6px, 6px);}
    }
    .bl{bottom: 0; left: 0; background-position: 0 calc(-100vh + var(--site_header_height) + var(--corner_h)); -webkit-mask: url(../images/bg/corner_2_bl.png) center/contain no-repeat; mask: url(../images/bg/corner_2_bl.png) center/contain no-repeat;
        &::after{transform: scaleY(-1) translate(6px, 6px);}
    }
    .br{bottom: 0; right: 0; background-position: calc(-100vw + var(--corner_w)) calc(-100vh + var(--site_header_height) + var(--corner_h)); -webkit-mask: url(../images/bg/corner_2_br.png) center/contain no-repeat; mask: url(../images/bg/corner_2_br.png) center/contain no-repeat;
        &::after{transform: scale(-1, -1) translate(6px, 6px);}
    }
}
@media only screen and (max-width: 835px){
    .bg_corner{
        --corner_w: clamp(20px, 8vw, 36px);
        &::before{padding: 6px;}
        i::after{inset: 3px; transform: translate(3px, 3px);}
        .tr::after{transform: scaleX(-1) translate(3px, 3px);}
        .bl::after{transform: scaleY(-1) translate(3px, 3px);}
        .br::after{transform: scale(-1, -1) translate(3px, 3px);}
    }
}

#js-loading ~ .bg_corner{opacity: 0; transition: opacity 1.2s ease-out;
    &.load_open{opacity: 1;}
}

.tix_btn{position: fixed; bottom: 24px; right: 24px; z-index: 1000; width: min(150px, 14vw); min-width: 120px; opacity: 0; pointer-events: none; transform: translateY(40px); transition: opacity 0.35s ease-out, transform 0.4s cubic-bezier(.25,.1,.25,1), filter 0.3s;
    &:hover{filter: brightness(1.2);}
    &.fv_scrolled{opacity: 1; pointer-events: auto; transform: translateY(0);}
    &.page_bottom{opacity: 0; pointer-events: none; transform: translateX(150%);}
}
.top_btn{position: fixed; bottom: 34px; right: 34px; z-index: 1000; width: min(90px, 14vw); height: min(90px, 14vw); min-width: 80px; background-color: #0892A8; border: 1px solid #ffffff; border-radius: 100px; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transform: translateY(40px); transition: opacity 0.35s ease-out, transform 0.4s cubic-bezier(.25,.1,.25,1), filter 0.3s;
    img{width: calc(100% - 8px);}
    &:hover{filter: brightness(1.2);}
    &.fv_scrolled{opacity: 1; pointer-events: auto; transform: translateY(0);}
    &.page_bottom{opacity: 0; pointer-events: none; transform: translateX(150%);}
}
@media only screen and (max-width: 835px){
    .tix_btn{width: min(120px, 22vw); min-width: 70px; bottom: 12px; right: 12px;}
    .top_btn{width: min(80px, 16vw); height: min(80px, 16vw); min-width: 60px; min-height: 60px; bottom: 16px; right: 16px;}
}

@keyframes train-run {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(calc(100vw + 100%)); }
}
@keyframes train-shake {
  0%   { transform: translateY(0px)    rotate(0deg); }
  10%  { transform: translateY(-1.5px) rotate(-0.15deg); }
  20%  { transform: translateY(1px)    rotate(0.1deg); }
  30%  { transform: translateY(-2px)   rotate(0.2deg); }
  40%  { transform: translateY(0.5px)  rotate(-0.1deg); }
  50%  { transform: translateY(-1px)   rotate(0.15deg); }
  60%  { transform: translateY(2px)    rotate(-0.2deg); }
  70%  { transform: translateY(-0.5px) rotate(0.1deg); }
  80%  { transform: translateY(1.5px)  rotate(0.15deg); }
  90%  { transform: translateY(-1px)   rotate(-0.1deg); }
  100% { transform: translateY(0px)    rotate(0deg); }
}

.list_tit{margin-bottom: 0.3em;}

/* sec tit */
.sec_tit{font-family: var(--f_01);font-family: var(--f_01);display: flex;flex-direction: column; margin-bottom: min(40px);
    .top{font-size: min(80px,5vw);line-height: 1em;}
    .bottom{font-size: min(18px,1.5vw);font-weight: bold;line-height: 1.7em;}
}
@media only screen and (max-width: 835px){
    .sec_tit{
        .top{font-size: 12vw;line-height: 1.2em;}
        .bottom{font-size: 3.3vw;font-weight: 500;}
    }
}

/* swiper */
.swiper_controller{
    .swiper-button-prev,
    .swiper-button-next{position: absolute; transform: translateY(-50%); margin: 0; width: 0; height: 0; background: none;
        &::after{display: none;}
    }
    .swiper-button-prev{left: calc(2vw - min(9px, 1.9vw)); border-top: min(16px, 2.5vw) solid transparent; border-bottom: min(16px, 2.5vw) solid transparent; border-right: min(18px, 3.8vw) solid #002A4C; transition: opacity 0.3s;}
    .swiper-button-next{right: calc(2vw - min(9px, 1.9vw)); border-top: min(16px, 2.5vw) solid transparent; border-bottom: min(16px, 2.5vw) solid transparent; border-left: min(18px, 3.8vw) solid #002A4C; transition: opacity 0.3s;}
    .swiper-button-disabled{opacity: 0; pointer-events: none;}
    .swiper-pagination{display: none;}
}
@media only screen and (max-width: 835px){
    .swiper_controller{
        .swiper-button-prev{left: 2.8vw;}
        .swiper-button-next{right: 2.8vw;}
    }
}


/* scroll in */
[data-scroll="reveal"] {opacity: 0; transform: translateY(40px); transition: 1s ease;
    &.scroll_in{opacity: 1; transform: translateY(0);}
}
@media only screen and (max-width: 835px){
    [data-scroll="reveal"] {opacity: 0; transform: translateY(40px); transition: 0.6s ease;
        &.scroll_in{opacity: 1; transform: translateY(0);}
    }
}


/*----------------------------------------
	共通パーツ
------------------------------------------*/
.btn{display: block; text-align: center; background-color: #69412E; border: 3px solid #F0BC55; border-radius: 100px; width: 40vw; margin: 0 auto; transition: 0.3s; text-decoration: none;
    .btn_inner{display: block; border: 1px solid #F0BC55; border-radius: 100px; width: 97%; margin: 1.5%;
        .btn_txt{padding: 3% 0; display: flex; justify-content: center; align-items: center; gap: 4%;
            p{margin-bottom: 0;}
            .txt{font-size: min(28px, 2vw); line-height: 1.2em; font-weight: bold; color: #F0BC55;}
            .arrow{position: relative; left: 0; width: min(40px, 3.5vw); height: min(40px, 3.5vw); transition: 0.3s;}
        }
    }
    &:hover{filter: brightness(1.1);
        .btn_inner{
            .btn_txt{
                .arrow{left: 8px;}
            }
        }
    }
}
.btn.kasou{display: block; text-align: center; border-radius: 100px; min-width: 330px; max-width: 680px; margin: 0 auto; transition: 0.3s;
    .btn_inner{
        .btn_txt{padding: 3% 0; display: flex; justify-content: center; align-items: center; gap: 4%;
            p{margin-bottom: 0;}
            .txt{font-size: min(24px, 2.4vw); line-height: 1.2em; font-weight: bold;}
            .arrow{position: relative; left: 0; width: min(40px, 3.5vw); height: min(40px, 3.5vw); transition: 0.3s;}
        }
    }
    &:hover{filter: brightness(1.1);
        .btn_inner{
            .btn_txt{
                .arrow{left: 8px;}
            }
        }
    }
}
.btn_color{display: block; text-align: center; border-radius: 100px; width: 40vw; min-width: 400px; margin: 0 auto; transition: 0.3s;
    .btn_inner{display: block;
        .btn_txt{padding: 3% 0; display: flex; justify-content: center; align-items: center; gap: 4%;
            p{margin-bottom: 0;}
            .txt{font-size: min(28px, 2vw); line-height: 1em; font-weight: 800;}
            .arrow{position: relative; left: 0; width: min(40px, 3.5vw); height: min(40px, 3.5vw); transition: 0.3s;}
        }
    }
    &:hover{filter: brightness(1.1);
        .btn_inner{
            .btn_txt{
                .arrow{left: 8px;}
            }
        }
    }
}
.s_tit_box{color: #4C5B3C; margin-bottom: 4em;
    p{margin-bottom: 0;}
    .s_tit{font-size: min(120px, 10vw); line-height: 1em; font-weight: 400; position: relative; display: inline-block;
        &::before{content: ""; display: block; position: absolute; left: 0; top: 50%; transform: translateX(-100%) translateY(-50%); width: min(100px, 8vw); height: min(100px, 8vw); background-image: url(../images/title_parts.svg); background-repeat: no-repeat; background-position: center; background-size: contain;}
        &::after{content: ""; display: block; position: absolute; right: 0; top: 50%; transform: translateX(100%) translateY(-50%) rotate(180deg); width: min(100px, 8vw); height: min(100px, 8vw); background-image: url(../images/title_parts.svg); background-repeat: no-repeat; background-position: center; background-size: contain;}
    }
    .s_tit_jp{font-size: min(24px,3vw); line-height: 1.3em; font-weight: 600;}
}
.page_tix{padding-bottom: 3em;
    .tix_inner{width: 80%; position: relative; padding: 4%;
        &::before{
            position: absolute;
            content: "";
            background-color: #F0BC55;
            width: 100%;
            height: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: -1;

            --r: 49px;
            --overlap: 2px;
            mask-image:
            radial-gradient(circle var(--r) at top left, transparent calc(var(--r) - 1px), #000 var(--r)),
            radial-gradient(circle var(--r) at top right, transparent calc(var(--r) - 1px), #000 var(--r)),
            radial-gradient(circle var(--r) at bottom left, transparent calc(var(--r) - 1px), #000 var(--r)),
            radial-gradient(circle var(--r) at bottom right, transparent calc(var(--r) - 1px), #000 var(--r));
            mask-repeat: no-repeat;
            mask-size: calc(50% + var(--overlap)) calc(50% + var(--overlap));
            mask-position: top left, top right, bottom left, bottom right;

            -webkit-mask-image:
            radial-gradient(circle var(--r) at top left, transparent calc(var(--r) - 1px), #000 var(--r)),
            radial-gradient(circle var(--r) at top right, transparent calc(var(--r) - 1px), #000 var(--r)),
            radial-gradient(circle var(--r) at bottom left, transparent calc(var(--r) - 1px), #000 var(--r)),
            radial-gradient(circle var(--r) at bottom right, transparent calc(var(--r) - 1px), #000 var(--r));
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-size: calc(50% + var(--overlap)) calc(50% + var(--overlap));
            -webkit-mask-position: top left, top right, bottom left, bottom right;
        }
        .tix_wrap{
            .tix_box{z-index: 50;
                p{margin-bottom: 0;}
                .tix_txt{font-size: min(28px, 3vw); line-height: 1em; font-weight: 900; text-align: center; margin-bottom: 0.8em;}
                .btn_kasou{ background-color: #333333;
                    .btn_txt{color: #F0BC55;}
                }
            }
        }
        .deco_line{position: absolute; width: calc(100% - 25px); height: calc(100% - 25px); border: 1px solid #69412E; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 10;}
    }
}
@media only screen and (max-width: 835px){
    .btn{width: 90%; min-width: unset;
        .btn_inner{
            .btn_txt{padding: 4% 0;
                .txt{font-size: clamp(16px, 3.2vw, 24px); line-height: 1.3em;}
                .arrow{width: 6vw; height: 6vw;}
            }
        }
    }
    .btn.kasou{display: block; text-align: center; min-width: 280px; margin: 0 auto;
        .btn_inner{
            .btn_txt{
                .txt{font-size: min(20px, 4.8vw); line-height: 1em;}
                .arrow{width: 5vw; height: 5vw; min-width: 22px; min-height: 22px;}
            }
        }
    }
    .btn_color{display: block; text-align: center; width: 50%; min-width: 280px; margin: 0 auto;
        .btn_inner{
            .btn_txt{
                .txt{font-size: min(20px, 4.8vw); line-height: 1em;}
                .arrow{width: 5vw; height: 5vw;}
            }
        }
    }
    .s_tit_box{margin-bottom: 2em;
        .s_tit{font-size: min(120px, 16vw); line-height: 1em;
            &::before{width: min(100px, 12vw); height: min(100px, 12vw);}
            &::after{width: min(100px, 12vw); height: min(100px, 12vw);}
        }
        .s_tit.long{font-size: min(120px, 12vw); line-height: 1em;
            &::before{width: min(100px, 10vw); height: min(100px, 10vw);}
            &::after{width: min(100px, 10vw); height: min(100px, 10vw);}
        }
        .s_tit_jp{font-size: clamp(16px, 3.2vw, 24px); line-height: 1.3em;}
    }
    .page_tix{padding-bottom: 1em;
        .tix_inner{width: 90%; padding: 6%;
            &::before{--r: 29px;}
            .tix_wrap{
                .tix_box{
                    .tix_txt{font-size: min(30px, 5vw); line-height: 1.3em; margin-bottom: 0.5em;}
                }
                .corner{
                    img{width: 30px; height: 30px;}
                }
            }
            .deco_line{width: calc(100% - 15px); height: calc(100% - 15px);}
        }
    }
}

/*----------------------------------------
	TOP ページ
------------------------------------------*/

/* fv */
@keyframes obje_float{
    0%, 100%{translate: 0 0;}
    50%{translate: 0 var(--obje_float_y, max(-20px,-2vw));}
}
.fv{position: relative; z-index: 901; padding-top: var(--site_header_height); min-width: 100vw; height: auto; margin-bottom: 8vw;
    .kv{position: relative; overflow: hidden;
        .kv_img{width: 100%; opacity: 0; transform: scale(1.06); transition: opacity 1.2s ease-out, transform 1.6s cubic-bezier(.25,.1,.25,1);
            img{width: 100%; display: block;}
            &.load_open{opacity: 1; transform: scale(1);}
        }
        .kv_text{position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% + min(30px,5vw))); width: 100%; opacity: 0; transition: opacity 1.4s ease-out, transform 1.5s cubic-bezier(.25,.1,.25,1);
            img{width: 100%;}
        }
        &:has(.kv_parts.load_open) .kv_text{opacity: 1; transform: translate(-50%, -50%); transition-delay: 0.6s;}
        .kv_parts{position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;
            .obje01{position: absolute; top: 63%; left: 50%; width: 100%; opacity: 0; transform: translate(-50%, calc(-50% - min(110px,14vw))); transition: opacity 0.6s ease-out 0.45s, transform 1.2s cubic-bezier(.22,1,.36,1) 0.45s;}
            .obje02{position: absolute; top: 63%; left: 50%; width: 100%; opacity: 0; transform: translate(-50%, calc(-50% - min(70px,9vw))); transition: opacity 0.6s ease-out 0s, transform 1.2s cubic-bezier(.22,1,.36,1) 0s;}
            .obje03{position: absolute; top: 63%; left: 50%; width: 100%; opacity: 0; transform: translate(-50%, calc(-50% - min(140px,17vw))); transition: opacity 0.6s ease-out 0.1s, transform 1.2s cubic-bezier(.22,1,.36,1) 0.1s;}
            .obje04{position: absolute; top: 63%; left: 50%; width: 100%; opacity: 0; transform: translate(-50%, calc(-50% - min(90px,11vw))); transition: opacity 0.6s ease-out 0.28s, transform 1.2s cubic-bezier(.22,1,.36,1) 0.28s;}
            .obje05{position: absolute; top: 63%; left: 50%; width: 100%; opacity: 0; transform: translate(-50%, calc(-50% - min(120px,15vw))); transition: opacity 0.6s ease-out 0.18s, transform 1.2s cubic-bezier(.22,1,.36,1) 0.18s;}
            &.load_open{
                .obje01{opacity: 1; transform: translate(-50%, -50%); --obje_float_y: max(-26px,-2.6vw); animation: obje_float 3.6s ease-in-out infinite; animation-delay: 1.3s;}
                .obje02{opacity: 1; transform: translate(-50%, -50%); --obje_float_y: max(-22px,-2.2vw); animation: obje_float 4.1s ease-in-out infinite reverse; animation-delay: 0.85s;}
                .obje03{opacity: 1; transform: translate(-50%, -50%); --obje_float_y: max(-24px,-2.4vw); animation: obje_float 4.4s ease-in-out infinite; animation-delay: 0.95s;}
                .obje04{opacity: 1; transform: translate(-50%, -50%); --obje_float_y: max(-32px,-3.2vw); animation: obje_float 4.8s ease-in-out infinite reverse; animation-delay: 1.13s;}
                .obje05{opacity: 1; transform: translate(-50%, -50%); --obje_float_y: max(-28px,-2.8vw); animation: obje_float 3.8s ease-in-out infinite; animation-delay: 1.03s;}
            }
        }
    }
    .gold_line{opacity: 0; transform: scaleX(0.2); transform-origin: center; transition: opacity 0.8s ease-out, transform 1s cubic-bezier(.25,.1,.25,1);
        &.load_open{opacity: 1; transform: scaleX(1);}
    }
}
@media only screen and (max-width: 835px){
    .fv{margin-bottom: 12vw;
        .kv{
            .kv_img{transition-duration: 0.9s, 1.2s;}
            .kv_text{transition-duration: 1.05s, 1.1s;}
            &:has(.kv_parts.load_open) .kv_text{transition-delay: 0.5s;}
            .kv_parts{
                .obje01{top: 51%; transition: opacity 0.45s ease-out 0.08s, transform 0.9s cubic-bezier(.22,1,.36,1) 0.08s;}
                .obje02{top: 51%; transition: opacity 0.45s ease-out 0.21s, transform 0.9s cubic-bezier(.22,1,.36,1) 0.21s;}
                .obje03{top: 51%; transition: opacity 0.45s ease-out 0.14s, transform 0.9s cubic-bezier(.22,1,.36,1) 0.14s;}
                .obje04{top: 50%; transition: opacity 0.45s ease-out 0s, transform 0.9s cubic-bezier(.22,1,.36,1) 0s; width: 92%;}
                .obje05{top: 51%; transition: opacity 0.45s ease-out 0.34s, transform 0.9s cubic-bezier(.22,1,.36,1) 0.34s;}
                &.load_open{
                    .obje01{animation-delay: 0.73s;}
                    .obje02{animation-delay: 0.86s;}
                    .obje03{animation-delay: 0.79s;}
                    .obje04{animation-delay: 0.65s;}
                    .obje05{animation-delay: 0.99s;}
                }
            }
        }
        .gold_line{transition-duration: 0.6s, 0.75s;}
    }
}

/* gold_line */
.gold_line{width: 100%; line-height: 0;
    img{width: 100%; display: block;}
}
.gold_line.top{transform: rotate(180deg);}
.gold_line.top_tix{margin-bottom: 8vw;}
@media only screen and (max-width: 835px){
    .gold_line.top_tix{margin-bottom: 12vw;}
}

/* date */
/* .date{margin-bottom: 6vw; width: 90%;}
@media only screen and (max-width: 835px){
    .date{margin-bottom: 12vw;}
} */

/* letter */
.letter{width: 90%; margin: 0 auto 8vw;
    .letter_inner{position: relative;  isolation: isolate; width: 100%; max-width: 1540px;
        .txt_box{ background-image: url(../images/top/invitation_bg.webp);background-position: center;background-repeat: no-repeat;background-size: cover;width: 100%;height: 100%;top: 0;left: 0;pointer-events: none; border: 1px solid #3D2525; padding: min(120px,8vw) 0 min(100px,6vw); text-align: center; position: relative;
            .tit_box{position: relative; padding-left: min(160px, 13vw); text-align: left;width: 80%; margin: 0 auto; 
                .letter_tit{font-size: min(34px, 2.2vw); line-height: 2.2em; font-weight: bold; border-bottom: 1px dotted #333333; display: inline-block; margin-bottom: 0.5em;}
                .tit2{line-height: 2.2em; border-bottom: 1px dotted #333333; display: inline-block;}
                &::before{content: ""; display: block; position: absolute; left: -3vw; top: -2.5vw; width: min(180px, 13vw); height: min(180px, 13vw); background-image: url(../images/bg_parts/wax_stamp02.svg); background-repeat: no-repeat; background-position: center; background-size: contain; filter: drop-shadow(4px 4px 4px #00000040);}
            }
            .letter_txt{font-size: min(24px, 1.8vw); line-height: 2.6em; font-weight: 400; border-bottom: 1px dotted #333333; padding-bottom: 1em; margin-bottom: 2em; display: inline-block; width: 73%; text-align: left;}
            .btn{pointer-events: auto;}
            &::after{content: ""; background-color: #815751; opacity: 0.4; filter: blur(2px); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; transform: rotate(-2.6deg); pointer-events: none;}
        }

        .l_p02{position: absolute; top: -4vw; right: -3vw; transform: rotate(60deg); width: min(135px, 10vw); animation-delay: 0s;}
        .l_c01{position: absolute; bottom: -4vw; left: -7vw; width: min(360px, 24vw); opacity: 0; transform: translateX(-80px); transition: opacity 0.8s ease-out, transform 0.9s cubic-bezier(.25,.1,.25,1);}
        .l_c02{position: absolute; bottom: -3.5vw; right: -6vw; width: min(360px, 24vw); opacity: 0; transform: translateX(80px); transition: opacity 0.8s ease-out, transform 0.9s cubic-bezier(.25,.1,.25,1);}
    }
}
@media only screen and (min-width: 836px){
    .letter.scroll_in{
        .l_c01{opacity: 1; transform: translateX(0); transition-delay: 0.5s;}
        .l_c02{opacity: 1; transform: translateX(0); transition-delay: 0.5s;}
    }
}
@media only screen and (max-width: 835px){
    .letter{width: 90%; margin: 0 auto 4vw;
        .letter_inner{width: 100%;
            .txt_box{padding: min(86px, 12vw) 0 min(120px,16vw);
                .tit_box{padding-left: 0; width: 80%; margin-bottom: 1em;
                    .letter_tit{font-size: min(28px, 5vw); line-height: 2em; display: inline;}
                    .tit2{border-bottom: none;}
                    &::before{display: none;}
                }
                .letter_txt{font-size: clamp(16px, 4.3vw, 20px); line-height: 2em; margin-bottom: 1em; width: 82%;}
            }

            .l_p01{position: absolute; top: -6vw; left: -3vw; width: min(110px, 18vw);}
            .l_p02{position: absolute; top: -7vw; right: -2vw; width: min(100px, 14vw);}
            .l_c01{position: absolute; bottom: 15vw; left: 2vw; width: 50vw;
                &.scroll_in{opacity: 1; transform: translateX(0);}
            }
            .l_c02{position: relative; bottom: 12vw; right: -16vw; width: 50vw;
                &.scroll_in{opacity: 1; transform: translateX(0);}
            }
        }
        .btn{width: 80%;}
    }
}

/* project */
.project{ width: 90%; margin: 0 auto 12vw;
    .content_box{display: flex; justify-content: center; width: 100%; margin-bottom: 2em;
        .con_left{text-align: left; width: 55%; align-content: center;
            .txt_box{
                .txt{font-size: min(30px, 3vw); line-height: 1.7em; font-weight: 800;}
                .txt_s{font-size: min(18px, 2vw); line-height: 1.7em; font-weight: 400;}
            }
        }

        .con_right{width: 30%; align-content: center;}
    }
}
@media only screen and (max-width: 835px){
    .project{margin: 0 auto 16vw;
        .content_box{flex-direction: column; margin-bottom: 1em;
            .con_left{text-align: center; width: 100%; margin: 0 auto;
                .txt_box{padding: 0 10px;
                    .txt{font-size: clamp(16px, 5vw, 36px); line-height: 1.7em;}
                    .txt_s{font-size: clamp(16px, 3.2vw, 26px); line-height: 1.7em; text-align: left;}
                }
            }
            .con_right{width: 60%; margin: 0 auto 1em;}
        }
    }
}

/* ticket_line */
.ticket_line{display: block; height: calc(min(24px, 2vw) + min(4px, 1vw) + min(4px, 1vw));
    background:
        linear-gradient(to right, #D3B81F, #FFFFFF, #D3B81F) top / 100% min(24px, 2vw) no-repeat,
        linear-gradient(to right, #D3B81F, #FFFFFF, #D3B81F) bottom / 100% min(4px, 1vw) no-repeat;
}
.ticket_line.top{
    background:
        linear-gradient(to right, #D3B81F, #FFFFFF, #D3B81F) top / 100% min(4px, 1vw) no-repeat,
        linear-gradient(to right, #D3B81F, #FFFFFF, #D3B81F) bottom / 100% min(24px, 2vw) no-repeat;
}
.ticket_line.bottom{margin-bottom: 8vw;}
@media only screen and (max-width: 835px){
.ticket_line.bottom{margin-bottom: 16vw;}
}

/* top_ticket */
.top_tickets{background: linear-gradient(to top, #EEBE5E, #EDC047, #FFF4B8);width: 100%; position: relative; z-index: 0; padding: 12vw 0 8vw;
    &::before{content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/top/bg_line.svg) center/600px repeat; z-index: -1; pointer-events: none; opacity: 0.15;}
    .tickets_inner{width: 90%; margin: 0 auto 4vw;
        .content_box{background-color: #ffffff; display: flex; gap: 3%; padding: 3%; border-radius: 10px; position: relative; z-index: 10;
            .con_left{width: 43%;
                img{width: 100%;}
            }
            .con_right{width: 54%; text-align: left;
                .txt_box{
                    .tit{font-size: min(25px, 2.3vw); line-height: 1.7em; font-weight: 800; border-bottom: 1px solid #333333; padding-bottom: 0.5em; margin-bottom: 0.5em;}
                    .s_tit{color: #ffffff; border-radius: 5px; padding: 0.1em 0.8em; margin-bottom: 0.3em; margin-right: 1em; font-weight: bold;}
                    .s_tit.blu{background-color: #0892A8;}
                    .s_tit.red{background-color: #D03A00;}
                    .txt{padding: 0 1em; font-weight: 400;
                        span{font-size: 14px; font-weight: bold; line-height: 1.7em; color: #0892A8;}
                    }
                }
            }
        }
    }
    .t_c01{position: absolute; bottom: 1vw; left: -2vw; width: min(360px, 24vw); opacity: 0; transform: translateY(60px); transition: opacity 0.8s ease-out, transform 0.9s cubic-bezier(.25,.1,.25,1);}
    .t_c02{position: absolute; bottom: 4vw; right: -2vw; width: min(360px, 24vw); opacity: 0; transform: translateY(60px); transition: opacity 0.8s ease-out, transform 0.9s cubic-bezier(.25,.1,.25,1);}
}
@media only screen and (min-width: 836px){
    .top_tickets.scroll_in{
        .t_c01{opacity: 1; transform: translateY(0); transition-delay: 0.5s;}
        .t_c02{opacity: 1; transform: translateY(0); transition-delay: 0.5s;}
    }
}
@media only screen and (max-width: 835px){
    .top_tickets{padding: 16vw 0 35vw; overflow: hidden;
        .tickets_inner{margin: 0 auto 8vw;
            .content_box{flex-direction: column; gap: 3vw 0; padding: 5%;
                .con_left{width: 100%;
                    img{width: 100%;}
                }
                .con_right{width: 100%; text-align: left;
                    .txt_box{
                        .tit{font-size: min(25px, 4.6vw); line-height: 1.7em; padding-bottom: 0.8em; margin-bottom: 0.8em;}
                    }
                }
            }
        }
        .t_c01{bottom: -62vw; left: 10vw; width: 50vw; transform: translateX(-60px); transition-delay: 0.1s;
            &.scroll_in{opacity: 1; transform: translateX(0);}
        }
        .t_c02{bottom: -55vw; right: 6vw; width: 50vw; transform: translateX(60px); transition-delay: 0.1s;
            &.scroll_in{opacity: 1; transform: translateX(0);}
        }
    }
}

.sec_parts{position: relative;
    .tm_p01{position: absolute; top: -17vw; left: 6vw; transform: rotate(-72deg); width: min(160px, 14vw); animation-delay: 0.4s;}
    .tm_p02{position: absolute; top: -10vw; left: 14vw; transform: rotate(28deg); width: min(80px, 8vw); animation-delay: 1.1s;}
    .tm_p03{position: absolute; top: -18vw; right: 10vw; transform: rotate(-20deg); width: min(110px, 10vw); animation-delay: 0.8s;}
    .tm_p04{position: absolute; top: -3vw; right: 8vw; width: min(110px, 8vw); animation-delay: 1.6s;}
}
@media only screen and (max-width: 835px){
    .sec_parts{
        .tm_p01{top: -18vw; left: 4vw; width: min(160px, 16vw);}
        .tm_p02{top: -11vw; left: 13vw; width: min(80px, 8vw);}
        .tm_p04{top: 1vw; right: 6vw; width: min(64px, 9vw);}
    }
}

/* movie */
.movie{position: relative; margin-bottom: 12vw;
    .movie_inner{position: relative; width: 60%; margin: 0 auto; aspect-ratio: 16 / 9;
        .s_tit_box {margin-bottom: 4em;}
        .movie_bg{position: relative; 
                        width: 100%;
                        height: 100%;
                        top: 0;
                        left: 0;
                        pointer-events: none;
                        z-index: -1;

                        &:before{
                            position: absolute;
                            content: "";
                            background-color: #EABF6A;
                            width: 100%;
                            height: calc(100% + 1.8vw);
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            background-size: cover;
                            background-position: center;
                            pointer-events: none;
                            z-index: -1;

                            --r: min(60px, 6vw);
                            --overlap: 2px;
                            mask-image:
                            radial-gradient(circle var(--r) at top left, transparent calc(var(--r) - 1px), #000 var(--r)),
                            radial-gradient(circle var(--r) at top right, transparent calc(var(--r) - 1px), #000 var(--r)),
                            radial-gradient(circle var(--r) at bottom left, transparent calc(var(--r) - 1px), #000 var(--r)),
                            radial-gradient(circle var(--r) at bottom right, transparent calc(var(--r) - 1px), #000 var(--r));
                            mask-repeat: no-repeat;
                            mask-size: calc(50% + var(--overlap)) calc(50% + var(--overlap));
                            mask-position: top left, top right, bottom left, bottom right;

                            -webkit-mask-image:
                            radial-gradient(circle var(--r) at top left, transparent calc(var(--r) - 1px), #000 var(--r)),
                            radial-gradient(circle var(--r) at top right, transparent calc(var(--r) - 1px), #000 var(--r)),
                            radial-gradient(circle var(--r) at bottom left, transparent calc(var(--r) - 1px), #000 var(--r)),
                            radial-gradient(circle var(--r) at bottom right, transparent calc(var(--r) - 1px), #000 var(--r));
                            -webkit-mask-repeat: no-repeat;
                            -webkit-mask-size: calc(50% + var(--overlap)) calc(50% + var(--overlap));
                            -webkit-mask-position: top left, top right, bottom left, bottom right;
                        }
            .s_tit_box {margin-bottom: 4em;}
            .movie_dammy{width: 95%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; aspect-ratio: 16 / 9;}
            .movie_text{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 40%;}
            .deco_line{position: absolute; width: max(97%, calc(100% - 22px)); height: max(95%, 100%); border: 1px solid #69412E; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none;}
        }
    }
    .m_c01{position: absolute; bottom: -5vw; left: 5vw; width: min(360px, 24vw); z-index: 10; opacity: 0; transform: translateX(calc(-100% - 60px)); transition: opacity 0.8s ease-out, transform 0.9s cubic-bezier(.25,.1,.25,1);}
    .m_c02{position: absolute; bottom: -4vw; right: 4vw; width: min(360px, 24vw); z-index: 10; opacity: 0; transform: translateX(calc(100% + 60px)); transition: opacity 0.8s ease-out, transform 0.9s cubic-bezier(.25,.1,.25,1);}
}
@media only screen and (min-width: 836px){
    .movie.scroll_in{
        .m_c01{opacity: 1; transform: translateX(-100%); transition-delay: 0.5s;}
        .m_c02{opacity: 1; transform: translateX(100%); transition-delay: 0.5s;}
    }
}
@media only screen and (max-width: 835px){
    .movie{margin-bottom: 42vw;
        .movie_inner{width: 90%;
            .s_tit_box {margin-bottom: 2em;}
            .movie_bg{
                .movie_dammy{width: 94%;}
                .movie_text{width: 50%;}
            }
        }
        .m_c01{bottom: -100vw; left: 4vw; width: 60vw; z-index: -1; opacity: 0; transform: translateX(-60px); transition: opacity 0.8s ease-out, transform 0.9s cubic-bezier(.25,.1,.25,1);
            &.scroll_in{opacity: 1; transform: translateX(0);}
        }
        .m_c02{bottom: -100vw; right: 0vw; width: 60vw; z-index: -1; opacity: 0; transform: translateX(60px); transition: opacity 0.8s ease-out, transform 0.9s cubic-bezier(.25,.1,.25,1);
            &.scroll_in{opacity: 1; transform: translateX(0);}
        }
    }
}

/* sns */
.sns{background-color: #fbf6ef; padding: 7vw 0; position: relative; margin-bottom: 4vw;
    .bg_txt{position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: 0.3;
        .top, .bottom{position: absolute; left: 0; width: 100%; height: min(90px, 3.8vw); display: flex; flex-wrap: nowrap;
            img{display: block; width: auto; max-width: initial; height: 100%; flex-shrink: 0; animation: hor_move_l 100s linear infinite; margin-right: 3em;}
        }
        .top{top: 1.8vw; transform: scale(2);}
        .bottom{bottom: 1.8vw; transform: rotate(180deg) scale(2);}
    }
    .sns_inner{width: 80%; margin: 0 auto;
        .s_tit_box {margin-bottom: 6em;}
        .sns_wrap{display: flex; gap: 2%; width: 100%;
            .sns_box_wrap{display: flex; position: relative; width: 49%;}
            .sns_box.red{border: 2px solid #D03A00; color: #D03A00;
                .sns_tit{ line-height: 2.3em;}
            }
            .sns_box.blue{border: 2px solid #00A6C1; color: #00A6C1;}
            .sns_box{background-color: #FFFFFF; display: flex; gap: 3%; justify-content: space-between; align-items: center; width: 100%; padding: 6% 4.5%; border-radius: 20px; position: relative;
                .sns_tit{ align-content: center; font-size: min(28px, 1.8vw); line-height: 1.4em; font-weight: 800; width: 85%; text-align: left;
                    .tit_txt{display: inline-block; text-align: center;}
                    p{margin-bottom: 0;}
                }
                .icon_wrap{width: 22%;
                    .sns_list{display: flex; gap: 8%;
                        .sns_icon{position: relative; bottom: 0; transition: 0.3s;
                            &:hover{bottom: 6px;}
                        }
                    }
                }
            }
        }
    }
    .s_c01{position: absolute; top: 0; left: 50%; width: min(360px, 24vw); opacity: 0; transform: translate(-50%, calc(-100% + 60px)); transition: opacity 0.8s ease-out, transform 0.9s cubic-bezier(.25,.1,.25,1);}
    .s_c02{position: absolute; top: 0; left: 50%; width: min(360px, 24vw); opacity: 0; transform: translate(-50%, calc(-100% + 60px)); transition: opacity 0.8s ease-out, transform 0.9s cubic-bezier(.25,.1,.25,1);}
    @media only screen and (max-width: 1300px){
        .s_c01{left: 42%;}
        .s_c02{left: 60%;}
    }
}
@media only screen and (min-width: 836px){
    .sns.scroll_in{
        .s_c01{opacity: 1; transform: translate(-50%, -100%); transition-delay: 0.5s;}
        .s_c02{opacity: 1; transform: translate(-50%, -100%); transition-delay: 0.5s;}
    }
}
@media only screen and (max-width: 835px){
    .sns{padding: 16vw 0 36vw; position: relative; z-index: 1; margin-bottom: 12vw;
        .bg_txt{
            .top{top: 4%; transform: scale(5);}
            .bottom{bottom: 3%; transform: rotate(180deg) scale(5);}
        }
        .sns_inner{
            .s_tit_box {margin-bottom: 2em;}
            .sns_wrap{flex-direction: column; gap: 4vw; width: 100%;
                .sns_box_wrap{width: 100%;}
                .sns_box{flex-direction: column; align-items: center; justify-content: center; gap: 4vw; width: 100%; padding: 10% 4%;
                    .sns_tit{width: 100%; font-size: min(38px, 5vw); line-height: 1.7em; text-align: center;}
                    .icon_wrap{width: auto;
                        .sns_list{gap: 6vw; justify-content: center;
                            .sns_icon img{width: min(74px, 14vw);}
                        }
                    }
                }
            }
        }
        .s_c01{top: auto; bottom: 0; left: 6vw; width: 58vw; opacity: 0; transform: translateX(-60px); transition: opacity 0.8s ease-out, transform 0.9s cubic-bezier(.25,.1,.25,1);
            &.scroll_in{opacity: 1; transform: translateX(0);}
        }
        .s_c02{top: auto; bottom: 0; left: 42vw; width: 58vw; opacity: 0; transform: translateX(60px); transition: opacity 0.8s ease-out, transform 0.9s cubic-bezier(.25,.1,.25,1);
            &.scroll_in{opacity: 1; transform: translateX(0);}
        }
    }
}

/* top_access */
.top_access{width: 90%; position: relative; margin: 0 auto 4vw;
    .access_inner{background-color: #FFFFFFB2; border-radius: 20px; padding: 5% 12%;
        .access_wrap{display: flex; width: 100%; gap: 2%; margin-bottom: 4em;
            .access_left{width: 49%; align-self: stretch;
                iframe{width: 100%; height: 100%;}
            }
            .access_right{width: 49%;
                .place{font-size: min(28px, 3vw); line-height: 1.7em; font-weight: 800; border-top: 1px solid #333333; border-bottom: 1px solid #333333; padding: 0.3em 0; margin-bottom: 0.5em;}
                .txt_box{text-align: left; font-weight: 400;
                    li{margin-bottom: 0;}
                }
            }
        }    
        .a_p01{position: absolute; top: 3vw; left: 10vw; width: min(150px, 10vw); z-index: 10; animation-delay: 0.6s;}
        .a_p02{position: absolute; top: -2vw; right: 11vw; width: min(140px, 10vw); z-index: 10; animation-delay: 1.3s;}
    }
    .a_c01{position: absolute; bottom: 4vw; left: 17vw; width: min(360px, 24vw); z-index: 10; opacity: 0; transform: translateX(calc(-100% - 60px)); transition: opacity 0.8s ease-out, transform 0.9s cubic-bezier(.25,.1,.25,1);}
    .a_c02{position: absolute; bottom: 4vw; right: 16vw; width: min(360px, 24vw); z-index: 10; opacity: 0; transform: translateX(calc(100% + 60px)); transition: opacity 0.8s ease-out, transform 0.9s cubic-bezier(.25,.1,.25,1);}
}
@media only screen and (min-width: 836px){
    .top_access.scroll_in{
        .a_c01{opacity: 1; transform: translateX(-100%); transition-delay: 0.5s;}
        .a_c02{opacity: 1; transform: translateX(100%); transition-delay: 0.5s;}
    }
}
@media only screen and (max-width: 835px){
    .top_access{width: 90%; position: relative; margin: 0 auto 8vw; overflow: hidden;
        .access_inner{padding: 15% 5% 48%;
            .access_wrap{flex-direction: column; gap: 2vw; margin-bottom: 1.5em;
                .access_left{width: 100%; align-self: flex-start;
                    iframe{width: 100%; height: 60vw;}
                }
                .access_right{width: 100%;
                    .place{font-size: min(32px, 6vw); line-height: 1.7em; padding: 0.3em 0; margin-bottom: 0.5em;}
                    .txt_box{font-size: clamp(16px, 4.3vw, 20px); line-height: 1.8em;}
                }
            }    
        }
        .a_c01{bottom: -62vw; left: 62vw; width: 58vw;
            &.scroll_in{opacity: 1; transform: translateX(-100%);}
        }
        .a_c02{bottom: -68vw; right: 58vw; width: 58vw;
            &.scroll_in{opacity: 1; transform: translateX(100%);}
        }
    }
    .access_deco{display: block !important; position: relative;
        .a_p01{position: absolute; top: -8vw; left: 3vw; width: min(120px, 16vw); z-index: 10; animation-delay: 0.6s;}
        .a_p02{position: absolute; top: 30vw; right: 2vw; width: min(120px, 16vw); z-index: 10; animation-delay: 1.3s;}
    }
}


/*----------------------------------------
	ABOUT ページ
------------------------------------------*/

/* about */
.about{margin-bottom: 8vw;
    .chara_all{position: relative; margin-bottom: 6vw;
        .bg{display: block; width: 100%; height: auto; clip-path: inset(0 round 0 0 60% 60% / 0 0 20vw 20vw);}
        .chara{position: absolute; bottom: 2vw; left: 50%; transform: translateX(-50%) scale(0.85); width: 90%; z-index: 1; opacity: 0; transition: opacity 1s ease-out, transform 1.2s cubic-bezier(.25,.1,.25,1);
            &.load_open{opacity: 1; transform: translateX(-50%) scale(1);}
        }
    }
    .about_inner{
        .text_box{
            p{margin-bottom: 0;}
            .about_tit{font-size: min(30px, 3vw); line-height: 1.7em; font-weight: bold; color: #333333;}
            .about_txt{font-size: min(20px, 2vw); line-height: 1.8em; font-weight: 500; padding: 0.8em 0.6em;
                .txt_space{display: block; height: 0.6em;}
            }
            .about_txt.small{font-size: 16px; line-height: 1.4em; font-weight: 400;}
            hr{background-color: #333333; border: none; height: 1px;}
        }
    }
}
@media only screen and (max-width: 835px){
    .about{margin-bottom: 12vw;
        .about_inner{
            .text_box{
                .about_tit{font-size: min(26px, 5.2vw); line-height: 1.7em;}
                .about_txt{font-size: 16px; line-height: 1.8em; text-align: left; padding: 0.8em 0em;}
            }
        }
    }
}

/* message */
.message{position: relative; padding: 8% 3%;
    &::before{content: ''; position: absolute; inset: 0; background-color: #EABF6A; mix-blend-mode: hard-light; z-index: -1;}
    .msg_inner{
        .fukidashi {position: relative;border: 2px solid #69412e;border-bottom: none;border-radius: 100px;padding: min(34px, 5vw) min(20px, 3vw);;text-align: center; margin-bottom: 4vw;
            .text{margin: 0;color: #69412e;font-size: min(26px, 2.4vw);font-weight: bold;}
            .f_line{position: absolute;top: -2px;left: -2px;width: calc(100% + 4px);height: calc(100% + 4px);pointer-events: none;
                .center{background-color: #69412e;display: block;width: 4%;height: 2px;position: absolute;left: 48%;bottom: 0;transform: rotate(-45deg);transform-origin: right;}
                .left{border-bottom: 2px solid #69412e;border-left: 2px solid #69412e;border-radius: 100px 100px 0;display: block;width: 48%;height: 100%;position: absolute;left: 0;bottom: 0;}
                .right{border-bottom: 2px solid #69412e;border-right: 2px solid #69412e;border-radius:0 100px 100px 0;display: block;width: 48%;height: 100%;position: absolute;right: 0;bottom: 0;}
            }
        }
        .msg_box{margin-bottom: 4vw;
            &:last-child{margin-bottom: 0;}
            .tit_box{background-color: #0892A8; border-radius: 20px 20px 0 0; color: #ffffff; padding: 2%;
                .msg_tit{font-size: min(26px, 2.6vw); line-height: 1.7em; font-weight: bold; margin-bottom: 0.1em;}
                .msg_tit_s{font-size: min(18px, 1.7vw); line-height: 2em; font-weight: 600; margin-bottom: 0;}
            }
            .txt_box{background-color: #ffffff; border-radius: 0 0 20px 20px; display: flex; gap: 2%; width: 100%; padding: 3%; text-align: left;
                .msg_left{width: 45%;
                    .small_txt{font-size: 12px; margin-bottom: 0;}
                    img{width: 100%;}
                }
                .msg_right{width: 53%;
                    a{text-decoration: underline;}
                    .text.info{display: flex; align-items: flex-start; margin-bottom: 0.5em; align-items: baseline;
                        &:last-of-type{margin-bottom: 1em;}
                        p{margin-bottom: 0;}
                        .text_left{font-size: min(18px, 1.8vw); line-height: 1.7em; font-weight: bold; background-color: #0892A8; color: #ffffff; border-radius: 5px; padding: 0.1em 0.8em; margin-right: 1em; display: inline-block; white-space: nowrap;}
                    }
                }
            }
        }
    }
}
@media only screen and (max-width: 835px){
    .message{position: relative; padding: 12% 3%;
        .msg_inner{
            .fukidashi{margin-bottom: 8vw;
                .text{font-size: clamp(16px, 4.3vw, 20px); line-height: 1.7em;}
            }
            .msg_box{
                .tit_box{padding: 5%;
                    .msg_tit{font-size: min(24px, 4.6vw); line-height: 1.7em;}
                    .msg_tit_s{font-size: min(18px, 3.5vw); line-height: 1.7em;}
                }
                .txt_box{gap: 2vw; padding: 5%; flex-direction: column;
                    .msg_left{width: 100%;}
                    .msg_right{width: 100%;
                        .text.info{flex-direction: column;
                            .text_left{font-size: 16px; line-height: 1.7em;}
                        }
                    }
                }
            }
        }
    }
}

/* play format */
.format{position: relative; padding: 8% 3%;
    &::before{content: ''; position: absolute; inset: 0; background-color: #EABF6A; mix-blend-mode: hard-light; z-index: -1;}
    .format_inner{
        .format_wrap{margin-bottom: 4em;
            .format_list{display: flex; width: 100%; gap: 1%;
                .format_box{background-color: #ffffff; border-radius: 20px; border: 1px solid #69412E; width: 24.3%; padding: 2% 1.3%;
                    a{text-decoration: underline; color: #333333;}
                    .icon{padding-top: min(100px, 12vw); position: relative;
                        img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
                        .pf_icon_01{width: 42px;}
                    }
                    .name{font-size: min(24px, 2vw); line-height: 1.7em; font-weight: 800; color: #69412E; margin-bottom: 0.5em;}
                    .comment{font-size: min(16px, 1.6vw); line-height: 1.7em; font-weight: 400; color: #69412E;}
                }
            }
        }
        .text_box{background-color: #ffffff; padding: 3% 5%; text-align: left; font-weight: 400;}
    }
}
@media only screen and (max-width: 835px){
    .format{padding: 12% 3%;.format_inner{
            .format_wrap{margin-bottom: 2em;
                .format_list{flex-direction: column; gap: 2vw;
                    .format_box{width: 100%; padding: 5%;
                        .icon{padding-top: min(120px, 25vw);}
                        .name{font-size: min(24px, 6vw); line-height: 1.7em; margin-bottom: 0.3em;}
                        .comment{font-size: 16px; line-height: 1.7em;}
                    }
                }
            }
        }
    }
}

/* how to play */
.howto{position: relative; padding: 8% 3%;
    &::before{content: ''; position: absolute; inset: 0; background-color: #E8764A; mix-blend-mode: hard-light; z-index: -1;}
    .howto_inner{
      
        .howto_wrap{margin-bottom: 4vw;
            .howto_list{
                .step{margin-bottom: 1vw; background-color: #ffffff; border: 1px solid #333333; border-radius: 20px; padding: 3% 3% 3% 5%;
                    .step_box{display: flex; gap: 5%;
                        p{margin-bottom: 0;}
                        .step_left{color: #0892A8; align-content: center;
                            .text{font-size: min(26px, 6.4vw); line-height: 1em; font-weight: 400;}
                            .number{font-size: min(50px, 12vw); line-height: 1em; font-weight: 900;}
                        }
                        .step_right{text-align: left; flex: 1; align-content: center;
                            .step_tit{font-size: 18px;  line-height: 1.4em; font-weight: bold; color: #0892A8; margin-bottom: 0.5em;}
                            .text{font-size: 16px; line-height: 1.4em; font-weight: 400; color: #333333;}
                        }
                        .step_img{width: 22%; align-content: center;
                            img{width: 100%;}
                        }
                    }
                    .step_lastline{transform: rotate(180deg);}
                }
            }
        }
    }
    .benefits{display: flex; background-color: #FFFFFFB2; border-radius: 20px; padding: 2.5%; width: 100%; gap: 2%; width: 90%; margin: 0 auto 3vw;
        &:last-child{margin-bottom: 0;}
        .bene_left{width: 30%; align-content: center;
            .coin{width: 65%; margin: 0 auto;}
            img{width: 90%;}
            .small_txt{font-size: 12px; text-align: left; margin: 1em 0 0;}
        }
        .bene_right{width: 68%; flex: 1;
            .tit_line{padding: 0.3vw 0; margin-bottom: 1.5em;
                .bene_tit{color: #ffffff; font-size: min(28px, 2.5vw); line-height: 2em; font-weight: bold;}
            }
            .text{text-align: left; color: #333333; font-weight: 400;}
            .text.info{display: flex; align-items: flex-start; margin-bottom: 0.5em; align-items: baseline;
                &:last-of-type{margin-bottom: 1em;}
                p{margin-bottom: 0;}
                .text_left{font-size: min(18px, 1.8vw); line-height: 1.7em; font-weight: bold; background-color: #D03A00; color: #ffffff; border-radius: 5px; padding: 0.1em 0.8em; margin-right: 1em; display: inline-block; white-space: nowrap;}
            }
        }
    }
    .benefits.yel{
        .tit_line{border-top: 1px solid #DB9B1C; border-bottom: 1px solid #DB9B1C;
            .bene_tit{background-color: #DB9B1C;}
        }
    }
    .benefits.red{
        .tit_line{border-top: 1px solid #D03A00; border-bottom: 1px solid #D03A00;
            .bene_tit{background-color: #D03A00;}
        }
    }
}
.howto_img_wrap{background-color: #FFEA7E; padding: 2% 0; overflow: hidden;
    .img_box{display: flex; flex-wrap: nowrap; gap: 1%; width: max-content; animation: howto-img-scroll 50s linear infinite;
        img{width: min(320px, 20vw); flex-shrink: 0;}
    }
}
.howto.top{padding: 0; margin-bottom: 8vw;
    &::before{background-color: #00000000;}
    .benefits{display: flex; flex-direction: column;
        .bene_right{width: 100%; margin-bottom: 1.6vw;
            p{margin-bottom: 0; padding: 0 1em;}
        }
    }
}
@keyframes howto-img-scroll{
    from{transform: translateX(0);}
    to{transform: translateX(-50%);}
}
@media only screen and (max-width: 835px){
    .howto{padding: 12% 3% 10vw;
        .howto_inner{
            .howto_wrap{margin-bottom: 0;
                .howto_list{
                    .step{margin-bottom: 3vw;
                        .step_box{flex-direction: column; gap: 4vw; padding: 3% 1%;
                            .step_left{border-right: none; padding-right: 0;}
                            .step_right{padding-left: 0;
                                .text{font-size: clamp(16px, 4.3vw, 20px); line-height: 1.7em;}
                            }
                            .step_img{width: 100%;}
                        }
                    }
                }
            }
        }
        .benefits{flex-direction: column; padding: 8% 5% 5%; gap: 4vw;
            .bene_left{width: 100%; align-content: center;
                img{width: 100%;}
            }
            .bene_right{width: 100%;
                .tit_line{margin-bottom: 1em;
                    .bene_tit{font-size: min(24px, 5.2vw); line-height: 1.3em; padding: 4% 0;}
                }
                .text.info{flex-direction: column;
                    .text_left{font-size: 16px; line-height: 1.7em;}
                }
            }
        }
    }
    .howto_img_wrap{padding: 4% 0;
        .img_box{
            img{width: min(220px, 40vw); flex-shrink: 0;}
        }
    }
    .howto.top{
        .benefits{
            .bene_right{margin-bottom: 0;}
        }
    }
}

/* guide */
.guide{position: relative; padding: 8% 3%;
    &::before{content: ''; position: absolute; inset: 0; background-color: #E8764A; mix-blend-mode: hard-light; z-index: -1;}
    .guide_inner{
        .text_box{text-align: left;
            .list_tit{position: relative; padding-left: 1.2em; font-size: min(22px, 1.2em); line-height: 1.8em; font-weight: 800; margin-top: 1.5em; margin-bottom: 0.5em;
                &:first-child{margin-top: 0;}
                &::before {position: absolute; display: block; content: ""; top: 0; left: 0; width: 1em; height: 1em; transform: translateY(0.4em) scale(0.8); background-color: #333333;}
            }
            a{text-decoration: underline; color: #0892A8;}
        }
    }
}
@media only screen and (max-width: 835px){
    .guide{position: relative; padding: 12% 3%;
        .guide_inner{
            .text_box{
                .list_tit{font-size: min(22px, 4.6vw); line-height: 1.8em;}
            }
        }
    }
}

/* faq */
.faq {position: relative; padding: 8% 3%; margin-bottom: 8vw;
    &::before{content: ''; position: absolute; inset: 0; background-color: #EABF6A; mix-blend-mode: hard-light; z-index: -1;}
    [data-accordion="content"] { overflow: hidden; height: 0; }
    .faq_inner{

        .faq_wrap{margin-bottom: 1em;
            .faq_btn{display: flex; gap: 2%; align-items: center; background: #ffffff; color: #0892A8; border: 1px solid #0892A8; padding: 2%; width: 100%; border-radius: 20px; transition: 0.2s;
                p{margin-bottom: 0;}
                .q_icon{background-color: #0892A8; color: #ffffff; width: min(40px, 8vw); height: min(40px, 8vw); align-content: center; font-size: 1.2em;}
                .q_txt{text-align: left; line-height: 1.7em;}
                &::after{content: "+"; margin-left: auto; font-size: 3em; line-height: 1em; font-weight: 200; flex-shrink: 0;}
            }
            .faq_btn.accordion_active { background: #0892A8; color: #ffffff; border-radius: 20px 20px 0 0; width: 100%;
                .q_icon{background-color: #ffffff; color: #0892A8;}
                &::after{content: "−";}
            }
            .anser_box{display: flex; gap: 2%; align-items: center; background-color: #ffffff; border-radius: 0 0 20px 20px; border: 1px solid #0892A8; padding: 2%; width: 100%;
                p{margin-bottom: 0;}
                a{text-decoration: underline; color: #0892A8;}
                .a_icon{background-color: #D03A00; color: #ffffff; width: min(40px, 8vw); height: min(40px, 8vw); align-content: center; font-size: 1.2em;}
                .a_txt{text-align: left; line-height: 1.7em; flex: 1;}
            }
        }
    }
}
@media only screen and (max-width: 835px){
    .faq {padding: 12% 3%; margin-bottom: 12vw;
        .faq_inner{
            .faq_wrap{margin-bottom: 0.5em;
                .faq_btn{gap: 4%; font-size: 16px; padding: 3% 4%; line-height: 1.7em;
                    &::after{font-size: 2em; line-height: 1em;}
                    .q_txt{width: 75%;}
                }
                .anser_box{gap: 4%; padding: 3% 4%; line-height: 1.7em;}
            }
        }
    }
}


/*----------------------------------------
	TICKETS ページ　ACCESSページ　共通
------------------------------------------*/
.info_tit{background-color: #69412E; color: #ffffff; font-size: min(30px, 3vw); line-height: 1em; font-weight: bold; padding: 0.5em; margin-bottom: calc(1em + 20px);}
.kasou_nav{margin-bottom: 4vw;
    .nav_btn_wrap{display: flex; justify-content: space-between; width: 100%;
        .nav_btn{background-color: #ffffff; border-radius: 20px; width: 32%; padding: 3% 2%; transition: 0.3s; text-decoration: none;
            .btn_tit{font-size: min(24px, 2.2vw); line-height: 1.7em; font-weight: bold; margin-bottom: 1em;}
            .btn_icon{position: relative; padding-top: 5vw; margin-bottom: 1.5em;
                img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
            }
            .btn_arrow{position: relative; top: 0; width: min(45px, 9vw); height: min(18px, 3.6vw); margin: 0 auto; transition: 0.3s;}
            &:hover{
                .btn_arrow{top: 8px;}
            }
        }
        .nav_btn.red{border: 2px solid #D03A00; color: #D03A00;}
        .nav_btn.yel{border: 2px solid #DB9B1C; color: #DB9B1C;}
        .nav_btn.blu{border: 2px solid #0892A8; color: #0892A8;}
    }
}
.kasou_info{
    .info_box{margin-bottom: 4vw;
        &:last-child{margin-bottom: 0;}
        .tit_box{color: #ffffff; border-radius: 20px 20px 0 0; padding: 2em;
            p{margin-bottom: 0;}
            .box_tit{font-size: min(28px, 3vw); line-height: 1em; font-weight: bold;}
            .box_tit_s{font-size: min(18px, 2vw); line-height: 1.3em; font-weight: 600;}
        }
        .text_box{background-color: #ffffff; border-radius: 0 0 20px 20px; text-align: left; padding: 3% 5%; font-family: "Noto Sans JP", sans-serif;
            strong {font-weight: 900;}
        }
    }
    .info_box.plus{margin-bottom: calc(4vw + 80px);}

    .info_box.red{
        .tit_box{background-color: #D03A00;}
    }
    .info_box.yel{
        .tit_box{background-color: #DB9B1C;}
    }
    .info_box.blu{
        .tit_box{background-color: #0892A8;}
    }
    .info_box.non_tit{
        .text_box{border-radius: 20px;}
    }
}
@media only screen and (max-width: 835px){
    .info_tit{font-size: min(24px, 4.8vw); line-height: 1em;}
    .kasou_nav{
        .nav_btn_wrap{
            .nav_btn{padding: 3% 1%;
                .btn_tit{font-size: clamp(16px, 4.3vw, 20px); line-height: 1.3em;}
                .btn_icon{padding-top: 18vw;}
                .btn_arrow{position: relative; top: auto; width: min(45px, 9vw); height: min(18px, 3.6vw); margin: 0 auto; bottom: 3vw;}
                .sp_flex{align-content: center;}
                &:hover{
                    .btn_arrow{top: auto;}
                }
            }
        }
    }
    .kasou_info{
        .info_box{margin-bottom: 8vw;
            .tit_box{padding: 1em 0.5em;
                .box_tit{font-size: min(26px, 5vw); line-height: 1.7em; margin-bottom: 0.2em;}
                .box_tit_s{font-size: min(16px, 3.2vw); line-height: 1.7em;}
            }
            .text_box{background-color: #ffffff; border-radius: 0 0 20px 20px; text-align: left; padding: 5% 5% 6%; font-family: "Noto Sans JP", sans-serif;}
        }
        .info_box.plus{margin-bottom: calc(8vw + 40px);}
    }
}

/*----------------------------------------
	TICKETS ページ
------------------------------------------*/
.tickets{
    .tickets_inner{

        .kasou_info{
            .info_box{font-family: "Noto Sans JP", sans-serif;
                h4 {position: relative; display: flex; align-items: center; gap: 0.3em; font-size: clamp(16px, 2vw, 22px); line-height: 2em; font-weight: 800; text-align: left; margin-top: 1.75em; margin-bottom: 0.75em; border-bottom: 1px dotted #333333;
                    &:first-child{margin-top: 0;}
                    span{font-size: 0.8em;}
                    &.wirh_icon::before{content: ""; display: inline-block; flex-shrink: 0; width: 0; height: 0; border-left: 0.5em solid transparent; border-right: 0.5em solid transparent; border-top: 0.8em solid #0892A8; position: relative; top: 0.1em;}
                }
                h5 {position: relative; display: inline-block; font-size: 1.4em; font-weight: 800; margin-bottom: 0.7em; margin-top: 1.5em; line-height: 1.4em; padding-left: 0.8em; color:#333333;;}
                h6 {position: relative; display: block; margin-top: 1.2em; margin-bottom: 0.7em; font-size: 1.4em; line-height: 1.4em; font-weight: 800; color: #333333;}
                .text_box{
                    p{margin-bottom: 0;}
                    .tix_name{font-size: min(26px, 2.4vw); line-height: 1.7em; font-weight: 800; margin-bottom: 0.5em;
                        span{font-size: 0.8em;}
                    } 
                    .tix_price{display: flex; align-items: center; margin-bottom: 1em; border-bottom: 1px solid #333333; padding-bottom: 0.3em;
                        p{margin-bottom: 0;}
                        .price_left{font-size: min(20px, 1.8vw); line-height: 1.7em; font-weight: 800; background-color: #D03A00; color: #ffffff; border-radius: 5px; padding: 0.1em 0.8em; margin-right: 1em;}
                        .price_right{font-size: min(36px, 3.2vw); line-height: 1.7em; font-weight: 800; color: #D03A00;
                            span{font-size: min(16px, 1.5em); line-height: 1.7em; font-weight: 800;}
                        }
                    }
                    .date_box{display: flex; align-items: flex-start;
                        .date_tit{font-size: min(20px, 1.8vw); line-height: 1.7em; font-weight: bold; color: #ffffff; border-radius: 5px; padding: 0.1em 0.8em; margin-right: 1em; white-space: nowrap;}
                        .date{font-size: min(20px, 1.8vw); line-height: 1.7em; font-weight: bold; color: #333333;
                            span{font-size: 14px; font-weight: bold; line-height: 1.7em; color: #0892A8;}
                        }
                    }
                    .tickets_btn{display: inline-flex; align-items: center; justify-content: space-between; gap: 1em; width: 45%; box-sizing: border-box; padding: 1.2em 2em 1.2em 1.5em; background-color: #ffffff; border: 1px solid #333333; border-radius: 10px; transition: 0.3s; margin-bottom: 2em;
                        .tickets_logo{width: auto; height: min(68px, 10vw); min-width: 0; object-fit: contain;}
                        .btn_arrow{position: relative; left: 0; width: min(38px, 6vw); height: min(38px, 6vw); max-width: 15%; flex-shrink: 0; object-fit: contain; transition: 0.3s;}
                        &:hover{
                            .btn_arrow{left: 8px;}
                        }
                    }
                    .tickets_map{font-size: min(22px, 2vw); line-height: 1.8em; font-weight: 800; margin-bottom: 1em;}
                    .map_img{width: 100%;
                        img{width: 100%;}
                    }
                    .tdc_app{display: flex; gap: 5%;
                        .app_left{flex: 1;
                            .app_tit{font-size: min(26px, 2.4vw); line-height: 1.7em; font-weight: 800; border-bottom: 1px dotted #333333; padding-bottom: 0.5em; margin-bottom: 1em;}
                            .btn_color{background-color: #DB9B1C; width: 46%; margin: 2em 0 2em; text-decoration: none;
                                .btn_txt{color: #ffffff; padding: 4% 0; display: flex; justify-content: center; align-items: center; gap: 4%;
                                    p{margin-bottom: 0;}
                                    .txt{font-size: min(22px, 2.2vw); line-height: 1.7em; font-weight: bold;}
                                    .arrow{width: min(40px, 3vw); height: min(40px, 3vw);}
                                }
                            }
                            .dowload{width: min(552px, 58vw); display: flex; align-items: center; gap: 1.5em; background-color: #2E2E2E; color: #ffffff; padding: 1em;
                                a{color: #ffffff;}
                                .dowload_btn{display: flex; align-items: center; gap: 1em; flex: 1; text-decoration: none;
                                    img{width: 56px; height: 56px; flex-shrink: 0; object-fit: contain; transform: rotate(-10deg);}
                                    .dowload_txt{font-size: min(16px, 1.6vw); line-height: 1.7em; font-weight: bold; margin-bottom: 0;
                                        span{font-size: 1.1em; font-weight: bold;}
                                    }
                                }
                                .dowload_qr{display: flex; align-items: center; gap: 1em; padding-left: 1.5em; border-left: 1px solid #ffffff;
                                    .qr_txt{font-size: min(16px, 1.8vw); line-height: 1.7em; white-space: nowrap; margin-bottom: 0;}
                                    img{width: 64px; height: 64px; flex-shrink: 0; object-fit: contain;}
                                }
                            }
                        }
                        .app_right{width: 180px;
                            img{}
                        }
                    }
                }
            }
            .info_box.red{
                h4 {color:#D03A00;}
                h5 {border-left: 5px solid #D03A00;}
                .price_right{color: #D03A00;}
                .date_box{display: flex;
                    .date_tit{background-color: #D03A00;}
                }

            }
            .info_box.yel{
                h4 {color:#DB9B1C;}
                h5 {border-left: 5px solid #DB9B1C;}
                .price_right{color: #DB9B1C;}
                .date_box{display: flex;
                    .date_tit{background-color: #DB9B1C;}
                }
            }
            .info_box.blu{
                h4 {color:#0892A8;}
                h5 {border-left: 5px solid #0892A8;}
                .price_right{color: #0892A8;}
                .date_box{display: flex;
                    .date_tit{background-color: #0892A8;}
                }
            }
        }

    }
}
@media only screen and (max-width: 835px){
    .tickets{
        .tickets_inner{

            .kasou_info{
                .info_box{
                    h4 {margin-top: 1em;}
                    .text_box{padding: 5% 6%;
                        .tix_name{font-size: clamp(16px, 4.3vw, 18px); line-height: 1.7em;
                            span{font-size: 0.85em;}
                        } 
                        .tix_price{
                            .price_left{font-size: clamp(16px, 4.3vw, 18px); line-height: 1.7em;}
                            .price_right{font-size: min(30px, 7.2vw); line-height: 1.7em;
                                span{font-size: 16px; line-height: 1.7em;}
                            }
                        }
                        .date_box{flex-direction: column;
                            .date_tit{font-size: 16px; line-height: 1.7em; margin-right: 0.5em;}
                            .date{font-size: clamp(16px, 4.3vw, 18px); line-height: 1.7em;}
                        }
                        .tickets_btn{gap: 1em; width: 100%; padding: 0.8em 1.5em;
                            .btn_arrow{width: min(40px, 8vw); height: min(40px, 8vw);}
                        }
                        .tickets_map{font-size: clamp(16px, 4.3vw, 20px); line-height: 1.7em;}
                        .tdc_app{flex-direction: column; gap: 4vw;
                            .app_left{width: 100%;
                                .app_tit{font-size: clamp(16px, 4.3vw, 20px); line-height: 1.7em;}
                                .btn_color{display: block; text-align: center; width: 100%; max-width: 400px; margin: 1em 0;
                                    .btn_inner{
                                        .btn_txt{
                                            .txt{font-size: clamp(16px, 4.3vw, 20px); line-height: 1em;}
                                            .arrow{width: 5vw; height: 5vw;}
                                        }
                                    }
                                }
                                .dowload{width: 100%;
                                    .dowload_btn{width: 100%;
                                        img{width: 60px; height: 60px;}
                                        .dowload_txt{font-size: 14px; line-height: 1.7em;
                                            span{font-size: 1.2em;}
                                        }
                                    }
                                    .dowload_qr{
                                        .qr_txt{font-size: 14px; line-height: 1.7em;}
                                        img{width: 64px; height: 64px;}
                                    }
                                }
                            }
                            .app_right{width: 100%; background: #DB9B1C; padding: 1%; display: flex; justify-content: center; border-radius: 10px;
                                img{width: 50%; padding: 20px 0;}
                            }
                        }
                    }
                }
            }
        }
    }
}
@media only screen and (max-width: 680px){
    .tickets .tickets_inner .kasou_info .info_box .text_box .tdc_app .app_left {
        .dowload{flex-direction: column; padding: 1em; gap: 0.5em; width: 100%; min-width: 302px;
            .dowload_btn{width: 100%;
                img{width: 60px; height: 60px;}
                .dowload_txt{font-size: 16px; line-height: 1.7em; flex: 1;
                    span{font-size: 1.1em; font-weight: bold;}
                }
            }
            .dowload_qr{width: 100%; border-left: none; padding-left: 0; justify-content: flex-end;
                .qr_txt{font-size: 16px; line-height: 1.7em;}
                img{width: 64px; height: 64px;}
            }
        }
    }
}

/*----------------------------------------
	ACCESS ページ
------------------------------------------*/
.access{margin-bottom: 8vw;
    .access_inner{
        .access_map{width: 100%; height: 40vw; margin-bottom: calc(4vw + 80px);
            iframe{width: 100%; height: 100%;}
        }

        .kasou_info{
            .info_box{font-family: "Noto Sans JP", sans-serif;
                h3 {position: relative; display: flex; align-items: center; gap: 0.3em; font-size: clamp(18px , 2.3vw , 22px); line-height: 2em; font-weight: 800; text-align: left; margin-top: 1.5em; margin-bottom: 0.5em;
                    &:first-child{margin-top: 0;}
                    &::before{content: ""; display: inline-block; width: 0.9em; height: 0.9em; background-color: #333333; flex-shrink: 0;}
                }
                h4 {position: relative; display: inline-block; font-size: 1.2em; font-weight: 800; margin-bottom: 0.5em; line-height: 1.7em; color:#333333;}
                h5 {position: relative; display: flex; align-items: flex-start; gap: 0.3em; margin-top: 1.5em; margin-bottom: 0.3em; font-size: 1.2em; line-height: 1.7em; font-weight: bold; color: #333333;
                    &::before{content: ""; display: inline-block; width: 0.3em; height: 0.3em; margin-top: calc((1.4em - 0.3em) / 2); background-color: #333333; border-radius: 100px; flex-shrink: 0;}
                }
                hr{margin: 2.5vw 0;}
                a{text-decoration: underline;}
                ul{margin-top: 1.8em;
                    &:first-child{margin-top: 0;}
                }
                .box_tit{margin-bottom: 0;}
                .tit_box{padding: 1.5em;}
                .text_box{
                    p{margin-bottom: 0;}
                    .place_name{font-size: min(28px, 3vw); line-height: 1.7em; font-weight: 800; border-bottom: 1px solid #333333; align-items: center; margin-bottom: 2vw; padding-bottom: 0.3em;} 
                    .place_box{display: flex; align-items: flex-start; margin-bottom: 1vw;
                        &:last-child{margin-bottom: 0;}
                        p{margin-bottom: 0;}
                        .place_left{font-size: min(18px, 1.8vw); line-height: 1.7em; font-weight: bold; background-color: #DB9B1C; color: #ffffff; border-radius: 5px; padding: 0.1em 0.8em; margin-right: 1em; display: inline-block; white-space: nowrap;}
                    }
                    .train_box{display: flex; justify-content: space-between; gap: 2%; margin-top: 2vw;
                        .train_map{width: 49%;}
                        .train_info{width: 49%;}
                    }
                }
            }
            .info_box.first{margin-bottom: 2vw;}
            .info_box.red{
                a{color:#D03A00;}
            }
            .info_box.yel{
                a{color: #DB9B1C;}
            }
            .info_box.blu{
                a{color: #0892A8;}
            }
        }
    }
    @media only screen and (max-width: 835px){
        .access_inner{
        .access_map{width: 100%; height: 40vw; margin-bottom: calc(4vw + 40px);
            iframe{width: 100%; height: 100%;}
        }

        .kasou_info{
            .info_box{
                h3 {font-size: clamp(16px , 2.2vw , 26px); line-height: 2em; margin-top: 1em; margin-bottom: 0.2em;}
                h4 {font-size: 1em; line-height: 1.4em;}
                h5 {margin-top: 1em; margin-bottom: 0.3em; font-size: 16px; line-height: 1.4em;}
                hr{margin: 4vw 0;}
                ul{margin-top: 1em;}
                .tit_box{padding: 1em;}
                .text_box{
                    .place_name{font-size: min(24px, 5vw); line-height: 1.7em; margin-bottom: 3.5vw; padding-bottom: 0.5em;} 
                    .place_box{flex-direction: column; margin-bottom: 4vw;
                        &:last-child{margin-bottom: 0;}
                        p{margin-bottom: 0;}
                        .place_left{font-size: 16px; line-height: 1.7em; padding: 0.1em 0.8em; margin-right: 1em; display: inline-block; margin-bottom: 0.3em;}
                        .place_right{font-size: 16px; line-height: 1.7em; margin-bottom: 1em;
                            &:last-child{margin-bottom: 0;}
                        }
                    }
                    .train_box{flex-direction: column; gap: 2vw; margin-top: 4vw;
                        .train_map{width: 100%;}
                        .train_info{width: 100%;}
                    }
                }
            }
            .info_box.first{margin-bottom: 4vw;}
        }
    }
    }



    /* 特定日カレンダー */
    /* ==========================================================
    共通変数・共通スタイル
    ========================================================== */
    .table-wrap {
    margin-top: 1.5em;
    --header-bg: #cccccc;
    --border-color: #333333;
    --body-bg: #fff;
    --text-color: #333333;
    --note-text: #333333;
    }

    .table-wrap .note {
    display: block;
    margin-top: 4px;
    }

    /* ==========================================================
    PC / タブレット用テーブル
    ========================================================== */
    .table-wrap .pc-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    color: var(--text-color);
    }

    .table-wrap .pc-table th,
    .table-wrap .pc-table td {
    border: 1px solid var(--border-color);
    padding: 14px 10px;
    text-align: center;
    vertical-align: middle;
    font-weight: 500;
    line-height: 1.6;
    }

    .table-wrap .pc-table thead th {
    background: var(--header-bg);
    font-weight: bold;
    }

    .table-wrap .pc-table th.row-label {
    background: var(--header-bg);
    width: 90px;
    font-weight: bold;
    }

    .table-wrap .pc-table tbody td {
    background: var(--body-bg);
    }

    /* ==========================================================
    SP用カード(PC/タブレット幅では常に非表示)
    ========================================================== */
    .table-wrap .sp-cards {
    display: none;
    }

    .table-wrap .facility-card {
    overflow: hidden;
    background: var(--body-bg);
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
    }

    .table-wrap .facility-card:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
    }

    .table-wrap .facility-card__title {
    margin: 0;
    background: var(--header-bg);
    font-weight: bold;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    }

    .table-wrap .facility-card__row:last-child {
    border-bottom: none;
    }

    .table-wrap .facility-card__label {
    margin: 0;
    background: #dddddd;
    font-weight: bold;
    padding: 8px 12px;
    }

    .table-wrap .facility-card__value {
    margin: 0;
    padding: 10px 12px;
    line-height: 1.6;
    }

    @media (max-width: 835px) {
        .table-wrap {
            overflow-x: visible;
        }

        .table-wrap .pc-table {
            display: none;
        }

        .table-wrap .sp-cards {
            display: flex;
            flex-direction: column;
            gap: 0;
        }
    }

    /* 駐車割引サービスのご案内 */
    .discount-table {
    margin-top: 1.5em;
    --title-bg: #333333;
    --title-text: #fff;
    --border-color: #333333;
    --text-color: #333333;
    border-bottom: 1px solid var(--border-color);
    }

    .discount-table__title {
    margin: 0;
    background: var(--title-bg);
    color: var(--title-text);
    font-weight: bold;
    padding: 14px 16px;
    }

    .discount-table__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    color: var(--text-color);
    }

    .discount-table__table th,
    .discount-table__table td {
    border: none;
    border-bottom: 1px solid var(--border-color);
    padding: 16px;
    text-align: left;
    font-weight: 500;
    line-height: 1.6;
    }

    .discount-table__table thead th {
    font-weight: bold;
    border-bottom: 1px solid var(--border-color);
    background-color: #cccccc;
    }

    .discount-table__table th:first-child,
    .discount-table__table td:first-child {
    width: 65%;
    border-right: 1px solid var(--border-color);
    }

    .discount-table__table tbody tr:last-child th,
    .discount-table__table tbody tr:last-child td {
    border-bottom: none;
    }

    /* ==========================================================
    レスポンシブ:縦のcolumn幅比率は保ったまま、文字と余白だけ縮小
    ========================================================== */
    @media (max-width: 600px) {
    .discount-table__title {
        padding: 10px 12px;
    }

    .discount-table__table th,
    .discount-table__table td {
        padding: 10px 12px;
    }
    }

}

/*----------------------------------------
	PROJECTS ページ
------------------------------------------*/
.projects{
    .projects_inner{
        .img_10th{width: 100%; margin-bottom: 6vw;
            img{width: 100%;}
        }
        .msg_10th{margin-bottom: 6vw; text-align: center;
            .msg_tit{font-size: min(30px, 3.8vw); line-height: 1.7em; font-weight: 800; margin-bottom: 0.6em;}
            .msg_txt{font-size: min(18px, 2.4vw); line-height: 1.7em; padding: 0 1em;}
        }
        .contents_wrap{
            .contents_box{
                .contents_tit{text-align: center; background-color: #0892A8; border-radius: 20px; padding: 0.5em; color: #ffffff; font-size: min(26px, 3.4vw); line-height: 1em; font-weight: bold; margin-bottom: 0.6em;}
                .contents_txt{display: flex; gap: 2%;
                    .txt_left{text-align: left; font-size: min(18px, 2.4vw); line-height: 1.7em; flex: 1; align-content: center; padding: 0 1em;}
                    .txt_right{width: 35%; align-content: center;
                        img{width: 90%;}
                    }
                }
                .btn_color{background-color: #D03A00; width: 46%; margin: 0 auto 6vw; text-decoration: none;
                    .btn_txt{color: #ffffff; padding: 4% 0; display: flex; justify-content: center; align-items: center; gap: 4%;
                        p{margin-bottom: 0;}
                        .txt{font-size: min(22px, 2vw); line-height: 1.2em; font-weight: bold;}
                        .arrow{width: min(40px, 3.5vw); height: min(40px, 3.5vw);}
                    }
                }
            }
            hr{background-color: #333333; border: none; height: 1px; margin: 2vw 0;}
        }
    }
}
.projects.top {
    .projects_inner {
        .contents_wrap {
            .contents_box {margin-bottom: 0;
                .btn_color{margin-bottom: 0;}
            }
        }
    }
}

@media only screen and (max-width: 835px){
    .projects{
        .projects_inner{
            .msg_10th{margin-bottom: 12vw;
                .msg_tit{font-size: min(30px, 5.6vw); line-height: 1.7em; margin-bottom: 0.5em;}
                .msg_txt{font-size: clamp(16px, 4.3vw, 20px); line-height: 1.7em; text-align: left;}
            }
            .contents_wrap{
                .contents_box{margin-bottom: 10vw;
                    .contents_tit{font-size: min(26px, 5.6vw); line-height: 1em; margin-bottom: 0.6em;}
                    .contents_txt{flex-direction: column; gap: 5vw;
                        .txt_left{font-size: clamp(16px, 4.3vw, 20px); line-height: 1.7em;}
                        .txt_right{width: 100%; margin-bottom: 4vw;
                            img{width: 50%;}
                        }
                    }
                    .btn_color{display: block; text-align: center; width: 100%; max-width: 400px; margin: 0 auto 16vw;
                        .btn_inner{
                            .btn_txt{
                                .txt{font-size: clamp(16px, 4.3vw, 20px); line-height: 1.7em;}
                                .arrow{width: 6.5vw; height: 6.5vw;}
                            }
                        }
                    }
                }
                hr{margin: 4vw 0;}
            }
        }
    }
    .projects.top {
        .projects_inner {
            .contents_wrap {
                .contents_box {
                    .btn_color{margin-bottom: 4vw;}
                }
            }
        }
    }
}