@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ margin: 0; padding: 0; }
ul,ol,li,dl,dt,dd{ list-style: none; }
fieldset,img{ border: 0; vertical-align: middle; overflow: hidden; }
img{ max-width: 100%; box-sizing: border-box; }
body{ font-family: "Noto Serif JP","Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif; overflow-x: hidden; color: var(--c05); background: #ddd; }
a{ color: inherit; text-decoration: none; transition: opacity 0.4s; }

:root{ --hf: 100px; --bf: 0.2rem; --w-width: 92%; }

/*********** share ***********/
html{ font-size: var(--hf); }
body{ font-size: var(--bf); 
  --c01: #71dade;
  --c02: #00bbc2;
  --c03: #595959;
  --c04: #bfbfbf;
  --c05: rgb(0, 0, 0, 0.8);
  --c06: #ffffff;
}

html:not(.loaded) body *:not(.loader):not(.spinner){ animation: none !important; }

.pc_none{display: none; }
.sp_none{display: block;}

/****** loader ******/
.loader{ position: absolute; bottom: 0; left: 0; width: 100vw; height: 100%; background-color: #ddd; z-index: 999; animation: jr 0.8s cubic-bezier(0.35, 0.1, 0.25, 1) forwards;}
.loaded .loader{ animation: tc 0.8s cubic-bezier(0.35, 0.1, 0.25, 1) forwards; }
@keyframes jr {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes tc {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* spinner */
.spinner{ height:50px; width:50px; border:4px solid var(--c01); border-radius:50%; border-top-color:var(--c06); position: fixed; top:calc(48% - 25px); left: calc(50% - 25px); opacity:0; animation: spin 0.6s linear infinite, fadeIn 0.5s ease forwards; backface-visibility: hidden; }
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner.fade-out { animation: spin 0.6s linear infinite, fadeOut 0.8s ease forwards !important; }


/*********** header ***********/
header{ opacity: 0; width: 100%; height: 2rem; display: flex; justify-content: center; align-items: center; background-color: var(--c06);  position: relative; }
header::before{ content: ""; position: absolute; bottom: -0.392rem; left: 50%; transform: translateX(-50%); width: 0.792rem; height: 0.784rem; background: url(../images/i_t.svg) no-repeat center center; background-size: 100%; z-index: 1; }
.loaded header{ opacity: 1; }
.loaded .t_bg{ opacity: 0.25; }
.logo{ width: 4.3rem; z-index: 2; }
.logo{ opacity: 0; width: 4.3rem; animation: logo_a 1s ease-out 0.4s forwards; z-index: 2; }
@keyframes logo_a{
  from{ opacity: 0; transform: translateY(-0.2rem); }
  to{ opacity: 1; transform: translateY(0); }
}


/*********** wrap ***********/
.wrap{ opacity: 0; width: 100%; padding-top: 52vw; position: relative; background: url(../images/t_ph.png) no-repeat center 0, url(../images/bg.png) repeat; background-size: 100% auto, auto; overflow: hidden; }
.loaded .wrap{ opacity: 1; }

.youtube{ position: relative; width: 100%; max-width: 960px; margin: 0 auto; background-color: #000; aspect-ratio: 16 / 9; }
.youtube::before{ content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 121.46%; height: 125.185%; background: url('../images/youtube_b.png') no-repeat center center; background-size: 100%; z-index: 1; pointer-events: none; }
.youtube iframe{  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.ytb2{ margin: 0.9rem auto; }


h2{ display: flex; align-items: center; justify-content: center; width: 960px; margin: 0 auto 0.5rem; padding-bottom: 0.36rem; font-size: 2.4em; font-weight: 600; letter-spacing: 0.2em; text-indent: 0.2em; color: var(--c03); background: url(../images/title_i02.png) no-repeat center bottom; background-size: 100% auto; }
h2::before,h2::after { content: ''; flex-shrink: 0; width: 2.24rem; height: 0.38rem; background: url(../images/title_i01.png) no-repeat center center; background-size: contain; }
h2::before{ margin-right: 0.16rem; }
h2::after{ margin-left: 0.16rem; transform: scaleX(-1); }
h2 b{ color: var(--c01); }


.story{ width: 100%; margin: 1.4rem auto 0; position: relative; }
.story::before{ content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -42%); width: 100%; height: 160%; background: url(../images/bg2.png) no-repeat center center; background-size: 100%; z-index: -1; }
.story p{ width: 960px; margin: 0 auto; font-size: 0.9em; font-weight: 600; line-height: 200%; text-align: center; }
.story .circle{ position: absolute; top: 0; width: 100%; height: 120%; background: url(../images/i_circle01.svg) no-repeat center center; animation: rotate 50s linear infinite; z-index: -1; }
@keyframes rotate {
  to { transform: rotate(360deg); }
}
.story .c_l{ left: -52%; }
.story .c_r{ right: -52%; }


/* explanation */
.explanation{ width: var(--w-width); margin: 1.2rem auto 0; }


.artist{ width: var(--w-width); margin: 1.2rem auto 0; }
.artist-module{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.16rem; position: relative; }
.artist-module img{ min-width: 100%; }
.artist-item{ position: relative; background: url(../images/a_b.png) no-repeat 0 0; background-size: auto 100%; overflow: hidden; transition: all .4s ease; display: block; }
.artist-item h3 { position: absolute; display: flex; align-items: center; justify-content: center; bottom: 5%; left: 50%; transform: translate(-50%, 0); width: 100%; height: 13.6%; color: var(--c01); font-size: 1.4em; font-weight: 600; background: url(../images/a_h3_bg.png) no-repeat center 0; background-size: 100% auto; transition: all .8s ease; }
.artist-item:hover{ background: url(../images/a_b_over.png) no-repeat 0 0; background-size: auto 100%; cursor: pointer; transform: scale(1.06); }
.artist-item:hover h3 { background: url(../images/a_h3_bg_over.png) no-repeat center 0; background-size: 100% auto; }


/* artist */
.hidden-content { display: none; }
.artist-box{ display: flex; background: var(--c06); --bbp: 24px; outline: 2px solid #000; outline-offset: calc(-1 * (var(--bbp) + 2px)); box-shadow: 0 20px 60px rgba(0,0,0,0.2); max-height: 90vh; }
.b_tl,.b_tr,.b_bl,.b_br{ position: absolute; width: 74px; height: 50px; background-image: url(../images/border4.svg); background-repeat: no-repeat; background-size: 200%; }
.b_tl{ top: var(--bbp); left: var(--bbp);  background-position: 0 0; }
.b_tr{ top: var(--bbp); right: var(--bbp);  background-position: 100% 0; }
.b_bl{ bottom: var(--bbp); left: var(--bbp);  background-position: 0 100%; }
.b_br{ bottom: var(--bbp); right: var(--bbp); background-position: 100% 100%; }

.artist-content{ display: flex; margin: 4% 3%; }
.artist-content .a-ph{ width: 42%; padding: 0 2%; text-align: center; }
.artist-content .a-ph img{ max-height: 100%; }
.artist-content .a-info{ width: 56%; margin-right: 2%; padding: 0 2% 0 0; overflow-y: auto; }
.artist-content .a-info h3{ font-size: 1.9em; color: var(--c01); font-weight: 600; line-height: 200%; background: url(../images/i_a.svg) no-repeat 0 center; background-size: 1em auto; padding-left: 1.2em; }
.artist-content .a-info h3 span{ font-size: 0.5em; color: var(--c03); }
.artist-content .a-info p{ font-size: 0.9em; line-height: 180%; margin-top: 0.6em; }
.snsmob{display: flex;--wh: 2em;padding: 1em 0;}
.snsmob.infosns{--wh: 2.5em; align-items: center; justify-content: center; }
.snsmob.infosns a{margin:0 0.5em;}

.snsmob a{ display: inline-flex; align-items: center; justify-content: center;width:var(--wh); height:var(--wh); box-sizing: border-box; padding:calc(var(--wh) * 0.2); border-radius: 100%; overflow: hidden;margin-right: 0.5em; border: 1px solid #000; transition: all 0.4s;}
.snsmob a:hover{background-color: var(--c01);border-color:var(--c01);}
.snsmob .sns_X{padding:calc(var(--wh) * 0.25);}
.snsmob img{ width: 100%; height: auto; }




/* cd info */
.info{ width: var(--w-width); margin: 1.4rem auto 1rem; }

.carousel-wrapper{ width:100%; max-width:var(--imgsl); --imgsl:780px; padding-top:.2rem; position:relative; margin:auto; }
.carousel-wrapper.compact{ --imgsl:320px; }
.carousel-stage{ position:relative; }
.carousel-container{ position:relative; width:100%; height:calc(var(--imgsl) * 0.7); perspective:1200px; touch-action:pan-y; }

.carousel-container.mode-slide{ overflow:hidden; }
.carousel-container.mode-slide .card{ width:var(--cc-card-width, 100%); left:calc((100% - var(--cc-card-width, 100%)) / 2); }

.card{ position:absolute; width:100%; height:100%; left:0; top:0; color:var(--c06); background: var(--c06); box-shadow:0 .1rem .3rem rgba(0,0,0,.25); user-select:none; -webkit-user-select:none; will-change:transform, opacity; border:.05rem solid transparent; touch-action:pan-y; transform-origin:center center; backface-visibility:hidden; }
.card.interactive{ cursor:pointer; }
.card.active{ border-color:var(--c01); box-shadow:0 0 0 .1rem rgba(255,255,255,.5), 0 .2rem .5rem rgba(0,0,0,.35); }
.card img{ width:100%; height:100%; display:block; object-fit:cover; }
.card .card-info{ display:none; }

.c001 { height:auto; }
.c001 .card{ position:relative; height:auto; background: none; box-shadow:none; }
.c001 .card img{ height:auto; border:0.02rem solid var(--c01); box-shadow:0 0 0 .1rem rgba(255,255,255,.5), 0 .1rem .2rem rgba(0,0,0,.35); }

.nav-btn{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.1); border:none; color:var(--c06); font-size:28px; width:.6rem; height:.6rem; padding:.1rem; border-radius:50%; cursor:pointer; z-index:100; transition:background .8s, transform .5s; display:flex; justify-content:center; align-items:center; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
.nav-btn img{ width:100%; }
.nav-btn:hover{ background:rgba(255,255,255,1); transform:translateY(-50%) scale(1.3); }
.nav-btn:active{ transform:translateY(-50%) scale(.95); }
.prev-btn{ left:-1rem; }
.next-btn{ right:-1rem; }

.indicators{ display:flex; justify-content:center; margin-top:.5rem; gap:.1rem; }
.dot{ width:.1rem; height:.1rem; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; transition:background .3s, transform .3s; }
.dot.active{ background:var(--c01); transform:scale(1.3); }

.info-display{ text-align:center; color:var(--c03); padding:.15rem .2rem; margin-top:.15rem; display:flex; align-items:center; justify-content:center; }
.info-content{ width:100%; }
.info-content h3, .info-content .t01{ opacity:0; transition:opacity 1s ease, transform .6s ease; transform:translateY(.2rem); }
.info-content.show h3, .info-content.show .t01{ opacity:1; transform:translateY(0); }
.info-content h3{ display:flex; align-items:center; justify-content:center; width:100%; font-size:1.8em; line-height:1.4; margin:.4em 0; color:var(--c02); transition-delay:.2s; }
.info-content h3::before, .info-content h3::after{ content:''; flex-shrink:0; width:1em; height:1.2em; background:url(../images/h3b.svg) no-repeat center center; background-size:auto 100%; }
.info-content h3::before{ margin-right:.1rem; }
.info-content h3::after{ margin-left:.1rem; transform:scaleX(-1); }
.info-content .t01{ font-size:1em; }




/** BackToTop **/
#backToTop{ position: fixed; width: 0.7rem; height: 0.7rem; border-radius: 50%; text-indent: -9999px; bottom: 0.6rem; right: 0.3rem; background: var(--c01) url(../images/icon-go.svg); background-size: 90% 90%; background-repeat: no-repeat; background-position: center; cursor: pointer; transition: opacity .5s ease; opacity: 0; pointer-events: none; transition: all .6s ease; }
#backToTop.show{ opacity:1; pointer-events:auto; }
#backToTop.show:hover{ background-color: var(--c01); }


/*********** footer ***********/
footer{ background-color: var(--c03); color: var(--c06); height: 1rem; font-size: 0.8em; display: flex; justify-content: center; align-items: center; }


/*********** OD-Modal ***********/
#overlay{ position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 20px; touch-action: pan-y; }
#overlay.active{ display: flex; }
#modalContent{ display: none; pointer-events: none; }
#modalContent.local-mode{ pointer-events: auto; max-width: 980px; }
#modalCloseBtn{ position: fixed; top: 30px; right: 30px; z-index: 10000; width: 24px; height: 24px; border: none; background: none; cursor: pointer; text-indent: -9999px; display: flex; align-items: center; justify-content: center; transition: transform .2s; }
#modalCloseBtn::before, #modalCloseBtn::after{ content: ''; position: absolute; width: 3px; height: 28px; background: #fff; border-radius: 2px; }
#modalCloseBtn::before{ transform: rotate(45deg); }
#modalCloseBtn::after{ transform: rotate(-45deg); }
#modalCloseBtn:hover{ transform: scale(1.4); }
.modal-image-zoom-hint{ position: fixed; top: 25px; right: 66px; width: 36px; height: 36px; background: none; border: none; color: #fff; display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 10000; padding: 0; transition: transform .2s; -webkit-tap-highlight-color: transparent; }
.modal-image-zoom-hint.is-visible{ display: flex; }
.modal-image-zoom-hint:hover{ transform: scale(1.4); }
.modal-image-zoom-hint svg{ width: 36px; height: 36px; display: block; }
.modal-image-zoom-hint .icon-zoom-out{ display: none; }
.modal-image-zoom-hint.is-zoomed .icon-zoom-in{ display: none; }
.modal-image-zoom-hint.is-zoomed .icon-zoom-out{ display: block; }
.modal-gallery-loader{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255, 255, 255, 0.75); font-size: 13px; white-space: nowrap; pointer-events: none; }
#overlay.active{ display: flex; animation: overlayFadeIn .28s ease both; }
#modalCloseBtn{ animation: overlayFadeIn .3s ease both; animation-delay: .12s; }
.modal-image-zoom-hint.is-visible{ animation: overlayFadeIn .3s ease both; animation-delay: .15s; }
@keyframes overlayFadeIn{ from{ opacity: 0; } to{ opacity: 1; } }
.modal-gallery, #modalContent.local-mode{ animation: modalZoomIn .42s cubic-bezier(.22, .61, .36, 1) both; animation-delay: .05s; transform-origin: center center; }
@keyframes modalZoomIn{ from{ opacity: 0; transform: scale(.86) translateY(22px); } to{ opacity: 1; transform: scale(1) translateY(0); } }

.modal-gallery{ display: flex; flex-direction: column; align-items: center; gap: 14px; pointer-events: none; }
.modal-image-stage{ position: relative; overflow: hidden; pointer-events: auto; -webkit-user-select: none; user-select: none; touch-action: none; -webkit-tap-highlight-color: transparent; transition: width .3s ease, height .3s ease; cursor: default; min-width: 40px; min-height: 30px; }
.modal-image-stage.is-zoomable{ cursor: zoom-in; }
.modal-image-stage.is-zoomed{ cursor: grab; }
.modal-image-stage.is-dragging{ cursor: grabbing; }
.modal-image-stage > .modal-image{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; opacity: 0; transition: opacity .35s ease, transform .25s ease; -webkit-user-drag: none; user-select: none; pointer-events: none; will-change: transform, opacity; }
.modal-image-stage > .modal-image.is-active{ opacity: 1; }
.modal-image-stage > .modal-image.is-dragging{ transition: opacity .35s ease; }
.modal-image-stage > .modal-image.is-zoomed{ max-width: none; max-height: none; }
.modal-gallery-bar{ display: flex; align-items: center; gap: 18px; pointer-events: auto; --fc: rgba(255, 255, 255, 0.8); }
.modal-nav{ width: 42px; height: 42px; border-radius: 50%; border: none; background: none; color: var(--fc); font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, transform .15s; -webkit-tap-highlight-color: transparent; }
.modal-nav:hover{ background: rgba(255, 255, 255, 0.2); transform: scale(1.2); }
.modal-counter{ color: var(--fc); font-size: 13px; letter-spacing: .08em; min-width: 58px; text-align: center; font-variant-numeric: tabular-nums; }
.modal-image-caption{ color: rgba(255, 255, 255, 0.8); font-size: 14px; line-height: 1.6; text-align: center; max-width: 88vw; pointer-events: auto; }



@media screen and (min-width:1920px){
  :root{ --w-width: 1728px; }
}


/*********** small screen ***********/
@media screen and (max-width:1920px){
  .carousel-wrapper{ --imgsl: 620px; }
}


@media screen and (max-width:1440px){
  .artist-module{ grid-template-columns: repeat(3, 1fr); gap: 0.2rem; }
  .modal{ width: 90%; }
  
  footer{ height: 1.2rem; }
}


@media screen and (max-width:1280px){
  :root{ --hf:8.333vw; --bf: 0.24rem; --w-width: 90%; }
  * { -webkit-tap-highlight-color: transparent; }

  header{ height: 1.4rem; }
  .logo{ width: 3rem; }

  .wrap{ padding-top: 56vw; }

  .youtube{ width: 78%; }

  h2{ width: 100%; font-size: 2em; letter-spacing: 0.1em; text-indent: 0.1em; }
  h2::before,h2::after{ width: 2rem; }

  .story{ width: 90%; padding: 0 5%; }
  .story::before{ background-size: 160%; }
  .story p{ width: 100%; font-size: 0.75em; }
  .story .circle{ display: none; }

  .artist-content .a-info h3{ font-size: 1.6em; }
  .artist-content .a-info p{ font-size: 0.75em; }

  .carousel-wrapper{ --imgsl: 480px; }
  .info-content h3{ font-size: 1.7em; }
  .info-content .t01{ font-size: 0.9em; }

  footer{ height: 1rem; }
}


@media screen and (max-width:768px){
  :root{ --hf: 13vw; --bf: 0.26rem;}

  .logo{ width: 40%; }

  .wrap{ padding-top: 76vw; background-size: 110% auto, auto; }

  .youtube{ width: 84%; }
  .ytb2{ margin: 0.6rem auto; }

  h2{ font-size: 1.4em; background-size: 140% auto; }
  header::before{ background-size: 80%; }

  .ytb_play{ width: 1rem; height: 1rem; }

  .story{ margin: 0.7rem auto 0; }

  .explanation{ margin: 0.7rem auto 0; }

  .artist{ margin: 0.6rem auto 0; }
  .artist-item h3 { font-size: 1em; }
  .modal{ width: 70%; --bbp: 18px; outline: 1px solid #000; outline-offset: calc(-1 * (var(--bbp) + 1px)); }
  .b_tl,.b_tr,.b_bl,.b_br{ width: 37px; height: 25px; }
  .artist-box{ overflow: hidden; --bbp: 20px; max-height: 84vh; max-width: 84vw; }
  .artist-content{ display: block; margin: calc(var(--bbp) + 2px) 2%; padding: 0 4%; overflow-y: auto; }
  .artist-content .a-ph{ width: 100%; padding: 0.1rem 0 0 0; }
  .artist-content .a-info{ width: 90%; padding: 0 5% 5% 5%; margin-right: 0; overflow: hidden; }
  .artist-content .a-info h3{ font-size: 1.4em; background-size: 0.8em auto; padding-left: 1em; }
  .artist-content .a-info p{ font-size: 0.6em; }

  .info{ margin: 0.8rem auto 0.3rem; }

  .card.active{ box-shadow: 0 0 0 0.1rem rgb(255 255 255 / 50%), 0 0.2rem 0.2rem rgb(0 0 0 / 35%);}
  .info-content h3{ font-size: 1.3em; }
  
  footer{ font-size: 0.7em; }
}


@media screen and (max-width:480px){
  :root{ --hf: 22vw; --bf: 0.22rem; }

  .pc_none{display: block; }
  .sp_none{display: none;}

  header{ height: 1.2rem; }
  .logo{ width: 60%; }

  .wrap{ padding-top: 88vw; background-size: 126% auto, auto; }

  h2{ font-size: 1.5em; margin: 0 auto 0.32rem; padding-bottom: 0.26rem; background-size: 200% auto; }
  h2::before,h2::after{ display: none; }

  .ytb2{ margin: 0.4rem auto; }
  .ytb_play{ width: 0.8rem; height: 0.8rem; }

  .artist-module{ grid-template-columns: repeat(2, 1fr); gap: 0.15rem 0.1rem; }
  .artist-item h3 { font-size: 1em; }
  .artist-box{ --bbp: 12px; }
  .artist-content .a-info h3{ font-size: 1.3em; }
  .artist-content .a-info p{ font-size: 0.7em; }

  .carousel-wrapper{ --imgsl: 300px; padding-top: 0.06rem; }
  .info-content h3{ font-size: 1.1em; }
  .info-content .t01{ font-size: 0.8em; }
  .card.active{ box-shadow: 0 0 0 0.06rem rgb(255 255 255 / 50%), 0 0.1rem 0.1rem rgb(0 0 0 / 35%);}
  .info-display{ margin-top: 0.1rem; }
  .indicators{ margin-top: 0.4rem; }
}

/*********** animation ***********/
.fadeIn{ opacity: 0; }
.fadeIn.visible{ animation: fadeIn 1s forwards; }

.fadeInUp{ opacity: 0; }
.fadeInUp.visible{ animation: fadeInUp 1s forwards; }

.fadeInLeft{ opacity: 0; }
.fadeInLeft.visible{ animation: fadeInLeft 1s forwards; }

.fadeInRight{ opacity: 0; }
.fadeInRight.visible{ animation: fadeInRight 1s forwards; }

.fade-in-blur{ opacity: 0; }
.fade-in-blur.visible{ animation: fadeInBlur 1s forwards; }

@keyframes fadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
@keyframes fadeOut{
  from{ opacity: 1; }
  to{ opacity: 0; }
}
@keyframes fadeInUp{
  from{ opacity: 0; transform: translateY(0.6rem); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft{
  from{ opacity: 0; transform: translateX(1rem); }
  to{ opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight{
  from{ opacity: 0; transform: translateX(-1rem); }
  to{ opacity: 1; transform: translateX(0); }
}
@keyframes fadeInBlur{
  from{ opacity: 0; filter: blur(16px); -webkit-filter: blur(16px); }
  to{ opacity: 1; filter: blur(0); -webkit-filter: blur(0); }
}

.visible.a-d04s{ animation-delay:0.4s; }
.visible.a-d06s{ animation-delay:0.6s; }
.visible.a-d08s{ animation-delay:0.8s; }
.visible.a-d1s{ animation-delay:1s; }
.visible.a-d2s{ animation-delay:2s; }