@charset "utf-8";
/*------------------------------------------------------------------------------------------
    pre.css - Pre-launch Event Page Styles
    
    Sections:
    1. Preload & Intro Animation (home page)
    2. Main Visual (#mv) - Title banners and animations
    3. Index List (#index_list) - Event listings and styling
    4. Archive Section (#archive) - Past event details
    5. Memo & Post-event Information
------------------------------------------------------------------------------------------ */

/* ========== 1. Preload & Intro Animation (home) ========== */
html.js-preload-home-intro #wrap{
    opacity: 0;
    visibility: hidden;
}

html.js-preload-home-intro #index_list{
    opacity: 0;
    visibility: hidden;
    transform: translateY(56px);
}

body#home.is-pre-intro #head,
body#home.is-pre-intro #index_list,
body#home.is-pre-intro #global_footer,
body#home.is-pre-intro #mv h1,
body#home.is-pre-intro #mv .sub,
body#home.is-pre-intro #index_list .t_box::after{
    opacity: 0;
}

body#home.is-pre-intro #wrap{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .32s ease-out;
}

body#home.is-pre-intro.intro-wrap-on #wrap{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body#home #contents_area {
    padding: 0;
}

body#home .site_logo {
    display: none;
}

body#home.is-pre-intro #mv::before{
    opacity: 0;
    transform: translateY(26px);
}

body#home.is-pre-intro #mv h1{
    transition: opacity .26s ease-in;
}

body#home.is-pre-intro #mv .sub{
    transform: rotate(-10deg) scale(0.8) translateY(-180px);
    transform-origin: 50% 52%;
    transition: opacity .4s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body#home.is-pre-intro #head{
    transform: translateY(-44px);
    transition: opacity .5s ease-out, transform .5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body#home.is-pre-intro #index_list{
    transform: translateY(56px);
    transition: opacity .55s ease-out, transform .55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body#home.is-pre-intro #global_footer{
    transition: opacity .35s ease-out;
}

@keyframes t_box_inner_in {
    0%   { opacity: 0; transform: rotate(-90deg) scale(0.82); }
    52%  { opacity: 1; transform: rotate(4deg) scale(1); }
    67%  { transform: rotate(-1.5deg) scale(1); }
    80%  { transform: rotate(1.5deg) scale(1); }
    90%  { transform: rotate(-0.3deg) scale(1); }
    100% { transform: rotate(0deg) scale(1); }
}

body#home.is-pre-intro #index_list .t_box{
    transform: none;
    animation: none;
}

body#home.is-pre-intro #index_list .t_box_inner{
    opacity: 0;
    transform: rotate(-90deg) scale(0.82);
    transform-origin: 40% 46%;
    transition: none;
    animation: none;
}

body#home.is-pre-intro #index_list .t_box::after{
    transition: opacity .2s ease-in;
    animation: none;
}

body#home.is-pre-intro.intro-step-1 #mv h1{
    opacity: 1;
}

body#home.is-pre-intro.intro-step-2 #mv .sub{
    opacity: 1;
    transform: rotate(0deg) scale(1) translateY(0);
}

body#home.is-pre-intro.intro-step-6 #head,
body#home.is-pre-intro.intro-step-6 #index_list{
    opacity: 1;
    transform: translateY(0);
}

body#home.is-pre-intro.intro-step-5 #mv::before{
    opacity: 1;
    transform: translateY(0);
}

body#home.is-pre-intro.intro-step-7 #index_list .t_box::after{
    opacity: 1;
}

body#home.is-pre-intro.intro-step-8 #index_list .t_box_inner{
    opacity: 1;
    transform: none;
    animation: t_box_inner_in .55s cubic-bezier(0.2, 0, 0.5, 1) forwards;
}

body#home.is-pre-intro.intro-done #global_footer{
    opacity: 1;
}

/* Accessibility: Reduce motion */
@media (prefers-reduced-motion: reduce){
    body#home.is-pre-intro #wrap,
    body#home.is-pre-intro #head,
    body#home.is-pre-intro #index_list,
    body#home.is-pre-intro #global_footer,
    body#home.is-pre-intro #mv::before,
    body#home.is-pre-intro #mv h1,
    body#home.is-pre-intro #mv .sub,
    body#home.is-pre-intro #index_list .t_box,
    body#home.is-pre-intro #index_list .t_box::after,
    body#home.is-pre-intro #index_list .t_box_inner{
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
        pointer-events: auto;
    }
}

/* ========== 2. Main Visual (#mv) - Title banners ========== */
#mv{
    margin: 0 auto;
    width: 100%;
    position: relative;
    padding: 0;
    overflow: hidden;
}

#mv::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(/seikatsunotanoshimi/2026_summer/common/images/pre/bg_top.webp) no-repeat;
    background-size: 110% auto;
    background-position: center bottom 3vw;
    z-index: 0;
    transition: opacity .32s ease-out, transform .45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#mv h1 {
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/main_title.webp);
    width: 100vw;
    height: 48.971vw;
    background-size: 110% auto;
    background-position: center bottom 3vw;
    background-repeat: no-repeat;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}
#mv .sub{
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/sub_title.webp);
    width: 100vw;
    height: 48.971vw;
    background-size: 110% auto;
    background-position: center bottom 3vw;
    background-repeat: no-repeat;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    position: absolute;
    z-index: 1;
}

.t_box{
    width: 262px;
    height: 414px;
    position: absolute;
    top: -345px;
    right: 60px;
    pointer-events: none;
    animation-name: bounce;
    animation-duration: 4s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
}

.t_box_inner{
    width: 100%;
    height: 100%;
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/parts_frame_pre.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.t_box::after{
    content: '';
    display: block;
    position: absolute;
    width: 262px;
    height: 414px;
    top: 0;
    right: 0;
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/parts_toridori.png);
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    animation: bounce 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1s infinite;
    z-index: 1;
}
.t_box_inner p{
    font-size: 24px;
    line-height: 1.5em;
    font-weight: bold;
    color: #0045c7;
    filter: drop-shadow(0 0 25px rgba(0,0,0,0.2));
    text-align: center;
    position: relative;
    top: 65px;
    left: 9px;
    pointer-events: none;
}

.t_box_inner p #num{
    margin-left: 2px;
    font-size: 36px;
    letter-spacing: .05em;
    font-family: 'Shin Maru Go Bold', '游ゴシック','YuGothic',Meiryo,メイリオ,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
}

#i_head .d span{
    padding-bottom: 5px;
    display: block;
    border-bottom: 2px solid #fff;
}

/* Index list section header styles */
#i_head .inner h2::before{
    content: '';
    display: block;
    position: absolute;
    background: url(../../../common/images/tori/tori66.svg) no-repeat;
    background-size: contain;
    width: 14vw;
    height: 27vw;
    bottom: -4vw;
    left: calc((100% / 2) - 440px);
    transform: rotate(-15deg);
    z-index: -1;
}
#i_head .inner h2::after{
    content: '';
    display: block;
    position: absolute;
    background: url(../../../common/images/tori/tori67.svg) no-repeat;
    background-size: contain;
    width: 18vw;
    height: 24vw;
    bottom: -3vw;
    right: calc((100% / 2) - 480px);
    transform: scale(-1, 1) rotate(-22deg);
    z-index: -1;
}
#index_list{
    max-width: 1400px;
    margin: -6vw auto 50px;
    padding: 0 20px;
    position: relative;
}

#index_list_inner{
    border-radius: 40px;
    border: 2px solid #fff;
    filter: drop-shadow(20px 20px 20px rgba(0,0,0,0.3));
    will-change: filter;
    background-color: #fff;
}

#i_head{
    border-radius: 40px 40px 0 0;
    position: relative;
    background: url(/seikatsunotanoshimi/2026_summer/common/images/pre/bg_title.jpg) no-repeat;
    background-size: cover;
}
#i_head a{
    display: block;
    transition: background .15s ease;
}
#i_head .inner > a:hover,
#i_head .inner > a.touch{
    background-color: initial;
}
#i_head a:hover,
#i_head a.touch{
    background-color: rgba(255, 255, 255, .5);
}

#i_head a:focus-visible{
    background-color: rgba(255, 255, 255, .5);
}

#i_head .inner{
    padding: 20px 0;
    position: relative;
    text-align: center;
    z-index: 2;
}

#i_head .d{
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background: #2490ed;
    color: #fff;
    font-size: 32px;
    letter-spacing: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Shin Maru Go Bold', '游ゴシック','YuGothic',Meiryo,メイリオ,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
    position: absolute;
    top: calc(50% - 40px);
    left: calc(50% - 380px);
}

#i_head .d span{
    padding-bottom: 5px;
    display: block;
    border-bottom: 2px solid #fff;
}

#i_head .inner h2{
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    padding: 7px 20px 7px 25px;
    display: inline-block;
    border-radius: 20px;
    background-color: #2490ed;
    color: #fff;
}

#i_head .ttl{
    z-index: 2;
    white-space: nowrap;
    line-height: 1.3;
}

#i_head h3{
    font-size: min(3vw, 28px);
    font-family: 'Shin Maru Go Bold',sans-serif;
    color: #000;
    letter-spacing: .1em;
    line-height: 1.6em;
    padding: 10px 0;
}

#i_head h3 .s{
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: min(2.5vw, 22px);
    line-height: 1.63636em;
}

#i_head h3 br{ display: inherit !important;}

#i_head .detail{
    width: 120px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    font-size: 16px;
    border-radius: 10px;
    text-indent: -10px;
    background-color: #272727;
    color: #fff;
    letter-spacing: .05em;
    transition: background, transform;
    transition-duration: .15s;
    position: relative;
}

#i_head .detail:after{
    content: '';
    display: block;
    width: 6px;
    height: 100%;
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/arrow_right_s.svg);
    background-repeat: no-repeat;
    background-size: 6px;
    background-position: center;
    position: absolute;
    top: 0;
    right: 14px;
}

#i_head a:hover .detail,
#i_head a.touch .detail{
    background-color: #2490ed;
    transform: scale(1.1);
}

#t_list{
    position: relative;
    z-index: 2;
}
    
#t_list li:nth-child(even){
    background-color: #b8f4cf;
}

#t_list li{
    position: relative;
    background-color: #ffffff;
}

#t_list li a{
    height: 160px;
    display: block;
    color: #000;
    position: relative;
}

#t_list li.disabled a:before{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: #cccccc;
    position: absolute;
    top: 0;
    left: 0;
}

#t_list li:nth-child(even).disabled a:before{
    background-color: #bfbfbf;
}


#t_list li a{ transition: background .25s ease;}
#t_list li a:hover{
    background-color: rgba(0, 0, 0, .2);
}

#t_list li a:focus-visible{
    background-color: rgba(0, 0, 0, .3);
}

#t_list li a:hover .day{ transition: color .15s ease;}
#t_list li a:hover .day span{ transition: border .15s ease;}
#t_list li a:hover .day{ color: #ffe200;}
#t_list li a:hover .day span{ border-color: #ffe200;}
#t_list li a:hover:after{ transform: translateX(10px);}
#t_list li a:focus-visible .day{ transition: color .15s ease;}
#t_list li a:focus-visible .day span{ transition: border .15s ease;}
#t_list li a:focus-visible .day{ color: #ffe200;}
#t_list li a:focus-visible .day span{ border-color: #ffe200;}
#t_list li a:focus-visible:after{ transform: translateX(10px);}


#t_list li.disabled a{ background: none !important;}


#t_list li a:after{
    content: '';
    display: block;
    width: 22px;
    height: 100%;
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/arrow_right_l.svg);
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: center;
    position: absolute;
    top: 0;
    right: 3.47%;
    transition: transform .15s ease;
}

#t_list li.disabled a:after{ display: none;}

#t_list li a .day{
    width: 180px;
    text-align: center;
    color: #0045c7;
    font-size: 36px;
    letter-spacing: .05em;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Shin Maru Go Bold', '游ゴシック','YuGothic',Meiryo,メイリオ,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
    position: absolute;
    top: calc(50%);
    left: 0;
    transform: translateY(-50%);
}

#t_list li.disabled a .day{
    color: #ebebeb !important;
}

#t_list li a .day span{
    padding-bottom: 8px;
    display: block;
    border-bottom: 2px solid #0045c7;
}

#t_list li.disabled a .day span{
    border-color: #ebebeb !important;
}

#t_list .ttl{
    width: 767px;
    height: 100%;
    margin: 0 auto;
    position: relative;
    left: 50px;
}

#t_list .ttl:after,
#t_list .ttl:before{
    content: '';
    display: block;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    position: absolute;
    z-index: 2;
}

#t_list .ttl:before{
    display: none;
    background-color: #b9b9b9;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
#t_list .ttl:after{ background-size: contain;}

/* Item illustrations: i1-i9 - mask and background image URLs */
#t_list .i1 .ttl:before{ -webkit-mask-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il01.png); mask-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il01.png); }
#t_list .i2 .ttl:before{ -webkit-mask-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il02.png); mask-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il02.png); }
#t_list .i3 .ttl:before{ -webkit-mask-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il03.png); mask-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il03.png); }
#t_list .i4 .ttl:before{ -webkit-mask-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il04.png); mask-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il04.png); }
#t_list .i5 .ttl:before{ -webkit-mask-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il05.png); mask-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il05.png); }
#t_list .i6 .ttl:before{ -webkit-mask-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il06.png); mask-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il06.png); }
#t_list .i7 .ttl:before{ -webkit-mask-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il07.png); mask-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il07.png); }
#t_list .i8 .ttl:before{ -webkit-mask-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il08.png); mask-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il08.png); }
#t_list .i9 .ttl:before{ -webkit-mask-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il09.png); mask-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il09.png); }

#t_list .i1 .ttl:after{ background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il01.png); }
#t_list .i2 .ttl:after{ background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il02.png); }
#t_list .i3 .ttl:after{ background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il03.png); }
#t_list .i4 .ttl:after{ background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il04.png); }
#t_list .i5 .ttl:after{ background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il05.png); }
#t_list .i6 .ttl:after{ background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il06.png); }
#t_list .i7 .ttl:after{ background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il07.png); }
#t_list .i8 .ttl:after{ background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il08.png); }
#t_list .i9 .ttl:after{ background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il09.png); }

/* Item illustration dimensions - positioned layout for each item */
#t_list .i1 .ttl:before,
#t_list .i1 .ttl:after{ width: 130px; height: 234px; top: -12px; }
#t_list .i1 .ttl:before{ right: 25px; }
#t_list .i1 .ttl:after{ right: 0; }

#t_list .i2 .ttl:before,
#t_list .i2 .ttl:after{ width: 133px; height: 252px; left: -40px; top: -50px; }

#t_list .i3 .ttl:before,
#t_list .i3 .ttl:after{ width: 136px; height: 235px; top: -40px; right: -40px; }

#t_list .i4 .ttl:before,
#t_list .i4 .ttl:after{ width: 168px; height: 274px; top: -75px; left: -90px; }

#t_list .i5 .ttl:before,
#t_list .i5 .ttl:after{ width: 205px; height: 230px; top: -25px; right: -50px; }

#t_list .i6 .ttl:before,
#t_list .i6 .ttl:after{ width: 137px; height: 269px; top: -70px; left: -70px; }

#t_list .i7 .ttl:before,
#t_list .i7 .ttl:after{ width: 121px; height: 244px; top: -40px; right: -40px; }

#t_list .i8 .ttl:before,
#t_list .i8 .ttl:after{ width: 160px; height: 253px; top: -60px; left: -50px; }

#t_list .disabled .ttl:before{ display: block; }
#t_list .disabled .ttl:after{ display: none; }

#t_list .point{
    width: 72px;
    height: 72px;
    border-radius: 72px;
    background-color: #00c971;
    color: #fff;
    font-size: 16px;
    line-height: 1.1em;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Shin Maru Go Bold', '游ゴシック','YuGothic',Meiryo,メイリオ,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
    position: absolute;
    top: calc(50% - 36px);
}

#t_list .point br{ display: none;}
#t_list .point br.s{ display: inherit !important;}

#t_list .disabled .point{
    background-color: #ebebeb;
    color: #7d7d7d;
}

#t_list li:nth-child(odd) .point{
    left: 80px;
}

#t_list li:nth-child(even) .point{
    left: 190px;
}

#t_list .point span{
    display: block;
    font-size: 14px !important;
}

#t_list h3{
    font-size: 20px;
    line-height: 1.6em;
    letter-spacing: .05em;
    font-family: 'Shin Maru Go Bold', '游ゴシック','YuGothic',Meiryo,メイリオ,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#t_list a .point{ transition: transform .15s ease;}
#t_list a:hover .point,
#t_list a.touch .point{
    transform: scale(1.1);
}

#t_list a:focus-visible .point{
    transform: scale(1.1);
}

#t_list .disabled a:hover .point{ transform: inherit !important;}
#t_list .disabled a:focus-visible .point{ transform: inherit !important;}

#t_list .disabled h3{ color: #ebebeb;}

#t_list h3 br.p{ display: none;}


#t_list li:nth-child(odd) h3{
    left: 185px;
}

#t_list li:nth-child(even) h3{
    left: 295px;
}


#info_wrap{
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/bg_content.webp);
    background-repeat: repeat-y;
    background-size: 105%;
    border-radius: 0 0 40px 40px;
}
#info_inner{
    margin: 0 auto;
    padding-top: 240px;
    position: relative;
    text-align: center;
}

#credit{
    padding-bottom: 130px;
    text-align: center;
}

#credit p{
    font-size: 16px;
    letter-spacing: .1em;
    line-height: 1.8em;
}

/* ========== 4. Archive Section (#archive) - Past event details ========== */
#archive_head{
    border-radius: 40px 40px 0 0;
    background-position: center center;
    border-bottom: 2px solid #fff;
    position: relative;
    z-index: 0;
    overflow: hidden;
    background: url(/seikatsunotanoshimi/2026_summer/common/images/pre/bg_title.jpg) no-repeat;
    background-size: cover;
}

#archive_head .inner{
    min-height: 278px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

#archive_head .inner:after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    position: absolute;
    bottom: 15px;
}


.t1 #archive_head .inner:after{ background-image: url(/seikatsunotanoshimi/common/images/tori/tori68.svg); background-size: contain; right: 25px;}
.t2 #archive_head .inner:after{ background-image: url(/seikatsunotanoshimi/common/images/tori/tori69.svg); background-size: auto 88%; background-position: right 30px;}
.t3 #archive_head .inner:after{ background-image: url(/seikatsunotanoshimi/common/images/tori/tori70.svg); background-size: auto 82%; background-position: right 30px; right: -10px; bottom: 0;}
.t4 #archive_head .inner:after{ background-image: url(/seikatsunotanoshimi/common/images/tori/tori73.png); background-size: auto 85%; background-position: right 35px;}
.t5 #archive_head .inner:after{ background-image: url(/seikatsunotanoshimi/common/images/tori/tori74.png); background-size: auto 80%; background-position: right bottom;}
.t6 #archive_head .inner:after{ background-image: url(/seikatsunotanoshimi/common/images/tori/tori71.svg); background-size: auto 82%; background-position: right bottom;}
.t7 #archive_head .inner:after{ background-image: url(/seikatsunotanoshimi/common/images/tori/tori21.png); background-size: auto 80%; background-position: right 40px;}
.t8 #archive_head .inner:after{ background-image: url(/seikatsunotanoshimi/common/images/tori/tori13.png); background-size: auto 80%; background-position: right bottom;}

#archive_head .d{
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background: #2490ed;
    color: #fff;
    font-size: 34px;
    letter-spacing: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Shin Maru Go Bold', '游ゴシック','YuGothic',Meiryo,メイリオ,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
    position: absolute;
    top: calc(50% - 50px);
    left: 30px;
}

#archive_head .d span{
    padding-bottom: 8px;
    display: block;
    border-bottom: 2px solid #fff;
}

#archive_head .inner h2{
    margin-bottom: 25px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    padding: 7px 20px 7px 25px;
    display: inline-block;
    border-radius: 20px;
    background-color: #2490ed;
    color: #fff;
}

.low article{
    padding: 0 20px;
    margin-bottom: 60px;
    filter: drop-shadow(0 9px 16px #507b98);
}

#archive_wrap{
    max-width: 1400px;
    margin: 0 auto;
    margin-top: 80px;
    border-radius: 40px;
    background-color: #fff;
    border: 2px solid #fff; 
    overflow: hidden;
}

#archive_body{
    width: 720px;
    margin: 0 auto;
    padding-top: 50px;
}

#archive_body p{
    margin-bottom: 2em;
    padding-left: 110px;
    font-size: 16px;
    line-height: 2;
    letter-spacing: .05em;
}

#archive_body .pic{
    margin-top: 50px;
    padding: 0;
    text-align: center;
}

#archive_body p a{
    border-bottom: 1px solid #fa6b18;
    transition: border .15s ease;
}

#archive_body p a:hover,
#archive_body p a.touch{
    border-bottom: 1px solid #fff;
}

#archive_body p a:focus-visible{
    border-bottom: 1px solid #fff;
}

#archive_body .indent {
    display: inline-block;
    text-indent: -1em;
    padding-left: 1em;
}

#archive_body .pic .caption{
    text-indent: -1em;
    padding-left: 1em;
    margin-left: 110px;
    display: block;
    font-size: 14px;
    line-height: 1.4em;
    letter-spacing: .05em;
    color: #888;
    text-align: left;
}

#archive_body .pic img{
    width: 100%;
    border-radius: 20px;
}

#archive_body .pic iframe{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

#archive_body .pic.v img{
    max-width: 300px;
}

#archive_body .pic2 {
    display: flex;
    font-weight: bold;
    font-size: 110%;
    align-items: center;
    gap: 10px;
}
#archive_body .pic2 span {
    display: block;
    line-height: 1.44;
}
#archive_body .pic2 span small {
    font-size: 80%;
}
#archive_body .pic2 img {
    border-radius: 10px;
}


#archive_body .h{
    width: 300%;
    margin-top: 70px;
    margin-bottom: 50px;
    background-color: #b0f799;
    text-align: center;
    position: relative;
    left: -100%;
}

#archive_body .h p{
    margin: 0;
    padding: 0;
    line-height: 1em;
}

#archive_body .h .point{
    width: 110px;
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #000;
    border-radius: 110px;
    color: #fff;
    font-size: 24px;
    line-height: 1.1666em;
    font-weight: 700;
}

#archive_body .h h2{
    padding: 13px 20px 15px 30px;
    font-size: 28px;
    line-height: 1.28;
    letter-spacing: .05em;
    font-weight: 700;
}

#archive_body .h h2 .c{
    color: #fa6b18;
}

#archive_body .h .il{
    position: absolute;
    left: 110%;
    top: 50%;
    transform: translateY(-50%);
}

#archive_body .h .il img {
    max-width: initial;
    height: 190px;
}

#archive_body.store .h h2{
    color: #ffffff;
}
#archive_body .h.store01 {
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/stores/header01.jpg);
}
#archive_body .h.store02 {
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/stores/header02.jpg);
}
#archive_body .h.store03 {
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/stores/header03.jpg);
}
#archive_body .h.store04 {
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/stores/header04.jpg);
}
#archive_body .h.store05 {
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/stores/header05.jpg);
}
#archive_body .h.store06 {
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/stores/header06.jpg);
}
#archive_body .h.store07 {
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/stores/header07.jpg);
}
#archive_body .h.store08 {
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/stores/header08.jpg);
}

#archive_wrap #after{
    margin-top: 70px;
    padding-top: 50px;
    padding-bottom: 10px;
    background-color: #ebebeb;
    overflow: hidden;
}

#archive_wrap #after .inner{
    margin: 0 auto;
}

#archive_wrap #after .inner p{
    margin-bottom: 2em;
    padding-left: 110px;
    font-size: 16px;
    line-height: 2em;
    letter-spacing: .05em;
}

#memo {
    background-color: #eeeeee;
}
#memo > div {
    padding: 25px 15px;
}
#memo p {
    font-size: 14px;
    line-height: 2;
    letter-spacing: .05em;
}
#memo p + p {
    margin-top: 2em;
}

/* ========== 5. Memo & Post-event Information (#memo, #todays_point) ========== */
#todays_point{
    padding: 40px 0 0 0;
    text-align: center;
    border-radius: 0 0 40px 40px;
    position: relative;
    z-index: 0;
    overflow: hidden;
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/bg_content.webp);
    background-repeat: repeat-y;
    background-size: 105%;
}

#todays_point h3{
    padding: 6px 18px;
    border-radius: 30px;
    margin-bottom: 30px;
    display: inline-block;
    background-color: #0045c7;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .05em;
}

#todays_point .inner{
    max-width: 980px;
    margin: 0 auto;
    padding-bottom: 100px;
    position: relative;
}

#todays_point .inner:after{
    content: '';
    display: block;
    width: 193px;
    height: 359px;
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il_btm_info_tori.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: -65px;
    bottom: 30px;
    transform: rotate(-5deg);
}

#todays_point .desc{
    padding: 40px 0 40px 65px;
    margin-right: 10px;
    margin-left: 150px;
    border-radius: 40px;
    background-color: #fff;
    text-align: left;
    position: relative;
}

#todays_point .inner dl{
    font-size: 23px;
    line-height: 2em;
    letter-spacing: .1em;
    display: table;
    color: #0045c7;
}

#todays_point .inner dt{
    display: table-cell;
}

#todays_point .inner dd{
    display: table-cell;
    line-height: 1.3em;
}
#todays_point .inner small {
    font-size: 70%;
}
#todays_point .inner .n{
    width: 40px;
    height: 40px;
    text-indent: 0 !important;
    padding-top: 5px;
    padding-left: 2px;
    margin-right: 20px;
    font-size: 30px;
    line-height: 1em;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    border-radius: 40px;
    background-color: #0045c7;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
    position: relative;
    top: -2px;
}

#archive_body h4{
    margin: 0 110px;
    margin-top: 70px;
    font-size: 28px;
    letter-spacing: .05em;
    font-family: 'Shin Maru Go Bold',sans-serif;
    color: #fa6b18;
    text-align: center;
}

.anchor_area{
    margin-bottom: -40px;
    text-align: center;
}

.btn_anc{
    display: inline-block;
    text-align: left;
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: 40px !important;
}

.btn_anc a{
    min-width: 520px;
    padding: 20px 40px;
    border-radius: 460px;
    color: #fff;
    display: block;
    background-color: #fa6b18;
    line-height: 1.5em;
    border: none !important;
    text-decoration: none;
    box-sizing: border-box;
    position: relative;
    transition: opacity .15s ease !important;
}

.btn_anc a:hover,
.btn_anc a.touch{
    opacity: .7;
}

.btn_anc a:focus-visible{
    opacity: .7;
}

.btn_anc a:after{
    content: '';
    width: 16px;
    height: 28px;
    display: block;
    position: absolute;
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/btn_arrow_right.svg);
    background-size: 16px;
    background-position: center;
    background-repeat: no-repeat;
    top: calc(50% - 14px);
    right: 40px;
    transform: rotate(90deg);
}

.btn_detail{
    display: inline-block;
    text-align: left;
    margin: 0 !important;
    margin-bottom: 40px !important;
}

.btn_detail + .btn_detail{
    margin-top: -20px !important;
}

#archive_body .pic2 img {
    width: 120px;
}
.btn_detail + .pic2 {
    margin-top: 40px;
}

.btn_reg{
    text-align: center;
}
.top1 {
    margin-top: 1em;
}

.btn_detail a{
    min-width: 480px;
    padding: 20px 100px 20px 60px;
    border-radius: 460px;
    font-size: 18px;
    letter-spacing: .05em;
    font-weight: 700;
    color: #fff;
    display: block;
    background-color: #fa6b18;
    line-height: 1.6em;
    border: none !important;
    text-decoration: none;
    box-sizing: border-box;
    position: relative;
    transition: opacity .15s ease !important;
}

.btn_detail a:after{
    content: '';
    width: 16px;
    height: 28px;
    display: block;
    position: absolute;
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/btn_arrow_right.svg);
    background-size: 16px;
    background-position: center;
    background-repeat: no-repeat;
    top: calc(50% - 14px);
    right: 40px;
}

.btn_detail a:hover,
.btn_detail a.touch{
    opacity: .7;
}

.btn_detail a:focus-visible{
    opacity: .7;
}



.date_area{
    margin: 40px 0;
    padding: 40px 0 40px 80px;
    background-color: #eee;
    border-radius: 15px;
    box-sizing: border-box;
}

.date_area dl{
    display: table;
    margin-bottom: 40px;
}

.date_area dl:last-child{ margin-bottom: 0;}

.date_area dt{
    text-align: center;
    min-width: 110px;
    display: table-cell;
    font-size: 18px;
    font-weight: 700;
    color: #fa6b18;
    letter-spacing: .05em;
}

.date_area dt span{
    width: 95px;
    padding: 5px;
    border-radius: 5px;
    display: block;
    background-color: #fff;
    box-sizing: border-box;
    position: relative;
    top: 2px;
}

.date_area dd{
    width: 100%;
    display: table-cell;
    line-height: 2em;
    font-size: 16px;
    letter-spacing: .05em;
}

.date_area p{
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: 1em !important;
}

.date_area dd p:last-child{ margin-bottom: 0 !important;}

.date_area .list{
    padding-left: 1em;
}

.date_area .list p{
    text-indent: -1em;
    padding-left: 1em;
}


.profile_area{
    padding: 0 40px;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #eee;
}

.profile_area p{
    padding: 0 !important;
}

#archive_body .app {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 0 15px;
    margin-bottom: 40px;
}
#archive_body .app .icon img {
    width: 80px;
    border-radius: 10px;
}
#archive_body .app .download {
    display: flex;
    gap: 10px;
}      
#archive_body .app .download a {
    display: block;
}            
#archive_body .app .download img {
    width: 100px;
}
#archive_body .app h2 {
    font-weight: bold;
    padding-bottom: 16px;
}

/* --------------------------------------------------
*
    #shop_list
*
-------------------------------------------------- */
#shop_list{
    padding: 0;
    background-color: #eee7df;
}

#shop_list h1{
    height: 152px;
    padding: 57px 0;
    box-sizing: border-box;
    text-align: center;
    background-color: #fa6b18;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: .1em;
}

#shop_list h1 span{
    display: inline-block;
    position: relative;
}

#shop_list h1 span:after{
    content: '';
    display: block;
    width: 98%;
    height: 4px;
    background-color: #fff;
    position: absolute;
    bottom: -10px;
    left: 0;
}

#shop_list h2{
    margin-top: -30px;
    line-height: 0;
    overflow: hidden;
    text-align: center;
    position: relative;
}

#shop_list h2:before{
    content: '';
    width: 300vw;
    height: 84px;
    display: block;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: -100vw;
    z-index: 1;
}

#shop_list h2 img{
    position: relative;
    z-index: 2;
}

#shop_list ul{
    max-width: 1212px;
    margin: 0 auto;
    padding: 20px 10px 45px 10px;
    text-align: left;
    letter-spacing: -.40em;
    display: flex;
    flex-wrap: wrap;
}

#shop_list li{
    width: calc(25% - 20px);
    margin: 0 10px 25px 10px;
    background-color: #fff;
    border-radius: 10px;
    letter-spacing: 0;
    text-align: left;
    vertical-align: top;
    position: relative;
}

#shop_list li a{
    color: #000;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

#shop_list li .inner{
    padding: 15px;
}

#shop_list .desc p{
    font-size: 14px;
    color: #b3b3b3;
    letter-spacing: .05em;
    line-height: 1.5714em;
}

#shop_list .exhibitor{
    width: 100%;
    border-top: 1px solid #eee7df;
    bottom: 0;
}

#shop_list .exhibitor .inner{
    display: table;
}

#shop_list .exhibitor .logo{
    width: 40px;
    min-width: 40px;
    height: 100%;
    overflow: hidden;
    display: table-cell;
    vertical-align: top;
}

#shop_list .exhibitor .logo img{
    width: 40px;
}

#shop_list .exhibitor h4{
    width: 100%;
    padding: 0 0 0 15px;
    display: table-cell;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
    line-height: 1.2857em;
}
.font-bold {
    font-family: 'Shin Maru Go Bold', sans-serif;
    color: #fa6b18;
    font-size: 120%;
}

@media (min-width : 751px){
/*------------------------------------------------------------------------------------------
*
*
    min-width : 751px
*
*
------------------------------------------------------------------------------------------ */
#head {
    height: 42px;
    top: 0;
}
#t_list li.new:after{
    content: '';
    display: block;
    width: calc(112px / 2);
    height: calc(112px / 2);
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/icon_new.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform .15s ease;
}
#archive_head .inner{
    max-width: 960px;
}
#archive_head .inner h2{
    white-space: nowrap;
}
#archive_body.store .h {
    min-height: 120px;
}
#archive_body.store .h .il {
    left: 140%;
}
#archive_body.store .h .inner {
    padding: 30px 0;
}
#archive_head .ttl{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#archive_head h1{
    font-size: 28px;
    font-family: 'Shin Maru Go Bold', sans-serif;
    color: #000;
    letter-spacing: .1em;
    line-height: 1.6em;
    white-space: nowrap;
}

#archive_head h1 .s{
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 22px;
    line-height: 1.63636em;
}

#archive_head .detail{
    width: 120px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    border-radius: 10px;
    text-indent: -10px;
    background-color: #fff;
    color: #1a5574;
    letter-spacing: .05em;
    position: absolute;
    bottom: 28px;
    left: calc(50% - 60px);
    transition: background, transform;
    transition-duration: .15s;
}

#archive_head .detail:after{
    content: '';
    display: block;
    width: 6px;
    height: 100%;
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/arrow_right_s.svg);
    background-repeat: no-repeat;
    background-size: 6px;
    background-position: center;
    position: absolute;
    top: 0;
    right: 14px;
}

#archive_head a:hover .detail,
#archive_head a.touch .detail{
    background-color: #ffe200;
    transform: scale(1.1);
}

#archive_head a:focus-visible .detail{
    background-color: #ffe200;
    transform: scale(1.1);
}
.t1 #archive_head .inner:after{ width: 156px; height: 244px;}
#archive_body .h .inner{
    display: inline-block;
    text-align: left;
    padding: 10px 0;
    margin: 0 auto;
    position: relative;
    left: -2.5%;
}
#archive_body .h h2{
    white-space: nowrap;
}
#archive_body .pic2 {
    gap: 20px;
}
#archive_body .pic2 img {
    width: 200px;
}
#memo > div {
    width: 720px;
    margin: 0 auto;
    padding: 50px 0;
}
#memo p {
    padding-left: 110px;
    font-size: 16px;
}
#todays_point .desc:before{
    content: '';
    display: block;
    width: 25px;
    height: 25px;
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/parts_point_arrow.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: right top;
    position: absolute;
    left: -25px;
    top: 37%;
}
#archive_wrap #after .inner{
    width: 720px;
}

#shop_list h3{
    height: 4.5em;
    font-size: 14px;
    overflow: hidden;
    font-weight: bold;
    letter-spacing: .05em;
    line-height: 1.428em;
    transition: color .15s ease .0s;
}

#shop_list li a:hover h3,
#shop_list li a.touch h3{
    transition: color .2s ease .05s;
}

#shop_list li a:focus-visible h3{
    transition: color .2s ease .05s;
}

#shop_list li .img{
    width: 100%;
    background-color: #eee;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

#shop_list li .img img{
    width: 100%;
    visibility: hidden;
}

#shop_list .desc{
    min-height: 4em;
}

#archive_map{
    background-color: #ede7df;
    position: relative;
}

#archive_map:after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/il_btm_info_bear.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    position: absolute;
    left: calc(50% - 560px);
    bottom: 0;
    pointer-events: none;
}

#archive_map .inner{
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 0;
}

#archive_map .inner img{
    width: 100%;
}

#archive_body .app {
    padding: 0;
    margin-bottom: 80px;
    margin-left: 110px;
}
#archive_body .app .icon img {
    width: 100px;
}
#archive_body .app .download img {
    width: 120px;
}

@media (min-width: 1401px) {
    #i_head .inner h2::before{
        width: 182px;
        height: 350px;
        bottom: -50px;
    }
    #i_head .inner h2::after{
        width: 240px;
        height: 320px;
        bottom: -40px;
    }
}
} /* ----- min-width : 751px ----- */
@media (max-width: 1024px) {
    #i_head .inner h2::after{
        display: none;
    }
}
@media (max-width: 960px) {
    .t_box{
        right: 20px;
    }
    #i_head .inner h2::before {
        display: none;
    }
    #t_list li:nth-child(odd) .ttl:after,
    #t_list li:nth-child(odd) .ttl:before {
        right: 2vw;
    }
    #t_list li:nth-child(even) .ttl:after,
    #t_list li:nth-child(even) .ttl:before {
        left: 3vw;
    }
    #t_list .i1 .ttl:before,
    #t_list .i1 .ttl:after{ width: calc(156px / 2.8); height: calc(238px / 2.8); top: -25px;}
    #t_list .i2 .ttl:before,
    #t_list .i2 .ttl:after{ width: calc(192px / 2.8); height: calc(219px / 2.8); top: -25px;}
    #t_list .i3 .ttl:before,
    #t_list .i3 .ttl:after{ width: calc(145px / 2.8); height: calc(216px / 2.8); top: -25px;}
    #t_list .i4 .ttl:before,
    #t_list .i4 .ttl:after{ width: calc(167px / 2.8); height: calc(234px / 2.8); top: -35px;}
    #t_list .i5 .ttl:before,
    #t_list .i5 .ttl:after{ width: calc(142px / 2.8); height: calc(233px / 2.8); top: -25px;}
    #t_list .i6 .ttl:before,
    #t_list .i6 .ttl:after{ width: calc(119px / 2.8); height: calc(236px / 2.8); top: -35px;}
    #t_list .i7 .ttl:before,
    #t_list .i7 .ttl:after{ width: calc(120px / 2.8); height: calc(260px / 2.8); top: -40px;}
    #t_list .i8 .ttl:before,
    #t_list .i8 .ttl:after{ width: calc(150px / 2.8); height: calc(218px / 2.8); top: -35px;}
}
@media (max-width: 768px) {
    #t_list h3 br{ display: inherit !important;}
}
@media (max-width: 750px) {
#home #head h1 a {
    opacity: 0;
    transition: opacity .35s ease;
}
#t_head .t_head_inner{
    margin: 0 10px;
}
#t_head h1{
    top: 7px;
}

#t_head h1 img{
    width: 32px;
}

#t_head nav li{
    margin-left: 25px;
    padding-top: 12px;
}

#t_head nav a{
    font-size: 12px;
}

/* --------------------------------------------------
*
    #mv
*
-------------------------------------------------- */
#mv{
    min-height: 480px;
}
#mv::before{
    background: url(/seikatsunotanoshimi/2026_summer/common/images/pre/bg_top_sp.webp) no-repeat;
    background-size: 100% auto;
    background-position: center top;
}
#mv h1{
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/main_title_sp.webp);
    background-size: 100% auto;
    background-position: top center;
    height: 0;
    padding-top: 164%;
}
#mv .sub{
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/sub_title_sp.webp);
    background-size: 100% auto;
    background-position: top center;
    height: 0;
    padding-top: 164%;    
}
.t_box{
    width: calc(461px/2);
    height: calc(366px/2);
    right: 12vw;
    top: -110px;
}
.t_box::after {
    width: calc(461px/2);
    height: calc(366px/2);
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/parts_toridori_sp.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.t_box_inner{
    background-image: url(/seikatsunotanoshimi/2026_summer/common/images/pre/parts_frame_pre_sp.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.t_box_inner p{
    width: 8em;
    font-size: 14px;
    line-height: 1.7em;
    top: 36px;
    left: 27px;
}

.t_box_inner p #num{
    font-size: 18px;
}



/* --------------------------------------------------
*
    #index_list
*
-------------------------------------------------- */
#index_list{
    margin-top: -10vw;
    padding: 0 10px;
}

#index_list_inner{
    border-radius: 20px;
}

#i_head {
    border-radius: 20px 20px 0 0;
}
#i_head .inner{
    padding: 16px 0;
}

#i_head .inner h2{
    font-size: 9px;
    padding: 5px 15px;
    white-space: nowrap;
}
#i_head .d {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    font-size: 16px;
    top: calc((100% - 50px)/2);
    left: 2%;
}
#i_head .ttl {
    padding: 10px 0px 5px 15px;
}

#i_head h3{
    font-size: 14px;
}

#i_head h3 .s{
    margin-top: 0;
    font-size: 12px;
}

#i_head .detail{
    width: 100px;
    height: 24px;
    font-size: 13px;
}

#t_list li a{
    box-sizing: border-box;
    height: 140px;
}

#t_list li a:hover:after{ transform: translateX(5px);}
#t_list li a.touch:after{ transform: translateX(5px);}


#t_list li a:after{
    width: 11px;
    background-size: 11px;
}


#t_list li a .day{
    width: 3.5em;
    font-size: 18px;
}


#t_list .ttl{
    width: 100%;
    left: auto;
}

#t_list .point{
    width: 60px;
    height: 60px;
    border-radius: 60px;
    font-size: 13px;
    top: -20px;
    right: 0;
    white-space: nowrap;
}

#t_list li:nth-child(odd) .point{
    left: 2vw;
}

#t_list li:nth-child(even) .point{
    left: auto;
    right: 2vw;
}

#t_list .point span{
    display: block;
    font-size: 12px !important;
}

#t_list h3{
    font-size: 13.5px;
    left: 20% !important;
    white-space: nowrap;
}


#info_wrap{
    background-size: 200%;
    background-position: center top;
    border-radius: 0 0 20px 20px;
}    
#info_inner{
    padding-top: 60px;
}

#info{
    margin-bottom: 70px;
}
#cast p{
    padding: 0 15px;
    font-size: 13px;
    line-height: 2em;
}


#credit{
    padding-bottom: 50px;
}

#credit p{
    font-size: 12px;
}



/* --------------------------------------------------
*
    archive
*
-------------------------------------------------- */
#archive_head{
    border-radius: 20px 20px 0 0;
    /* background-size: 300%; */
    background-position: center;
}
#archive_head .ttl {
    height: auto !important;
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50%);
    transform: translateY(-50%);
    z-index: 2;
}
#archive_head .inner{
    min-height: 120px;
}


#archive_head .inner:after{
    background-size: 100px;
    top: 5px;
    right: -15px;
}

.t1 #archive_head .inner:after{ background-size: auto 85%; background-position: right 5px; right: 5px;;}
.t2 #archive_head .inner:after{ background-position: right 5px; right: 5px;}
.t3 #archive_head .inner:after{ background-position: right 10px; right: 5px;}
.t4 #archive_head .inner:after{ background-position: 100% 5px;right: 5px;}
.t5 #archive_head .inner:after{ background-position: 100% 10px; right: 5px;}
.t6 #archive_head .inner:after{ background-position: 100% 10px; right: 5px;}
.t7 #archive_head .inner:after{ background-position: 100% 10px; right: 5px;}
.t8 #archive_head .inner:after{ background-position: 98% 8px; right: 5px;}

#archive_head .d{
    width: 55px;
    height: 55px;
    border-radius: 55px;
    font-size: 18px;
    top: 5px;
    left: 5px;
}

#archive_head .d span{
    padding-bottom: 5px;
}

#archive_head .inner h2{
    font-size: 9px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px 15px;
    white-space: nowrap;
}

#archive_head h1{
    font-size: 15px;
    line-height: 1.44;
    top: calc(50% + 15px);
    font-family: 'Shin Maru Go Bold', sans-serif;
}
#archive_head h1 br{ display: inherit !important;}
#archive_head h1 .s{
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    line-height: 1.63636em;
}

.low article{
    padding: 0 10px;
}

#archive_wrap{
    margin-top: 60px;
    border-radius: 20px;
}

#archive_body{
    width: auto;
    margin: 0 auto;
    padding-top: 30px;
}

#archive_body p{
    padding: 0 15px;
    font-size: 14px;
}


#archive_body .pic{
    margin: 30px 15px 15px;
}

#archive_body .pic .caption{
    margin: 0 15px;
    font-size: 12px;
}

#archive_body .pic img{
    width: 100%;
    border-radius: 10px;
}

#archive_body .h{
    margin-top: 40px;
    margin-bottom: 30px;
}

#archive_body .h .inner{
    padding: 10px 0;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
}
#archive_body.store .h {
    background-size: 160% auto;
}
#archive_body.store .h .inner{
    min-height: 60px;
}
#archive_body.store .h h2{
    font-size: 18px;
}


#archive_body .h .point{
    width: 60px;
    height: 60px;
    border-radius: 60px;
    font-size: 12px;
    line-height: 1.2em;
}

#archive_body .h .point br{
    display: inherit !important;
}

#archive_body .h h2{
    padding: 0 5px 0 10px;
    font-size: 15px;
}

#archive_body .h h2.sp_s{
    font-size: 14px;
}

#archive_body .h h2 br{
    display: inherit !important;
}

#archive_body .h .il{
    display: none;
    position: relative;
    top: -15px;
}

.btn_detail + .pic2 {
    margin-top: 20px;
}

#archive_wrap #after{
    margin-top: 30px;
    padding-top: 30px;
}

#archive_wrap #after .inner{
    padding: 0 15px;
    margin: 0 auto;
}

#archive_wrap #after .inner p{
    font-size: 14px;
    padding-left: 0;
}

#todays_point{
    /* margin-top: 20px; */
    padding: 20px 0 0 0;
    border-radius: 0;
}

#todays_point h3{
    margin-bottom: 20px;
    font-size: 13px;
}

#todays_point .inner{
    width: auto;
    padding-bottom: 65px;
}

#todays_point .inner:after{
    width: 14vw;
    height: 0;
    padding-top: 26.4%;
    left: 0;
    bottom: -4vw;
}

#todays_point .desc{
    max-width: 450px;
    width: calc(100% - 12vw);
    padding: 15px 10px 15px 15px;
    margin: 0 auto;
    border-radius: 10px;
}



#todays_point .inner dl{
    font-size: 13px;
}


#todays_point .inner .n{
    width: 20px;
    height: 20px;
    padding-top: 3px;
    padding-left: 1px;
    margin-right: 5px;
    font-size: 13px;
    border-radius: 20px;
    top: -1px;
}


#archive_body h4{
    margin: 0 15px;
    margin-top: 40px;
    font-size: 16px;
}



.anchor_area{
    padding: 0 15px;
}

.btn_anc{
    max-width: 520px;
    width: 100%;
    display: block;
    margin: 0 auto !important;
    margin-bottom: 30px !important;
}

.btn_anc a{
    max-width: 480px;
    width: 100%;
    padding: 10px 45px 10px 20px;
    border-radius: 10px;
    font-size: 13px;
    letter-spacing: .05em;
    font-weight: 700;
}

.btn_anc a:after{
    right: 15px;
    transform: rotate(90deg) scale(.7);
}


.btn_detail{
    width: calc(100% - 30px);
}

.btn_detail a{
    min-width: 100%;
    width: 100%;
    padding: 15px 40px 15px 20px;
    border-radius: 10px;
    font-size: 13px;
}

.btn_detail a:after{
    right: 10px;
    transform: scale(.7);
}


.date_area{
    margin: 40px 10px;
    padding: 10px;
    border-radius: 10px;
}

.date_area dl{
    margin-bottom: 30px;
}

.date_area dt{
    margin-bottom: 10px;
    display: inline-block;
    font-size: 15px;
}


.date_area dd{
    padding: 0 10px;
    display: block;
    font-size: 14px !important;
}

.date_area dd p {
    padding-right: 15px !important;
}
.date_area p{
    font-size: 14px !important;
}
/* .date_area .list p {
    padding-right: 10px !important;
} */
.profile_area{
    padding: 0 15px;
    margin: 0 10px;
    margin-top: 30px;
    padding-top: 30px;
}


#archive_map{
    background-color: #ede7df;
    position: relative;
}

#archive_map .inner{
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 0;
    text-align: center;
}

#archive_map .inner img{
    width: 90%;
}

/* --------------------------------------------------
*
    #shop_list
*
-------------------------------------------------- */

#shop_list h2{
    margin-top: -20px;
}

#shop_list h2:before{
    height: 56px;
}

#shop_list h2 img{
    width: 100%;
    max-width: 320px;
}

#shop_list ul{
    padding: 20px 5px 45px 5px;
}

#shop_list li{
    width: calc(50% - 10px);
    margin: 0 5px 20px 5px;
}

#shop_list h3{
    margin-bottom: 15px;
    font-size: 13px;
}


#shop_list .desc p{
    font-size: 13px;
}



#shop_list .exhibitor h4{
    font-size: 13px;
}


} /* ----- max-width: 750px ----- */
@media (max-width: 640px) {
    .t_box {
        top: -160px;
    }
}
@media (max-width: 540px) {
    #shop_list li{
        width: 100%;
    }
}
@media (max-width: 420px) {
    .t_box {
        right: 9.8vw;
        top: -160px;
    }
}
@media (max-width: 350px) {
    #t_list h3 {
        font-size: 12px;
    }
}