@charset "UTF-8";
/* CSS Document */

/* HTML5 display-role reset for older browsers
*************************************************************************************************************************/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; box-sizing: border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{ display: block;}
ol,ul{ list-style: none;}
table{ border-collapse: collapse; border-spacing: 0;}
a{ color: inherit; text-decoration: none;}
img{ max-width: 100%; height: auto;}
input,textarea,select,button{ margin: 0; padding: 0; font-family: inherit; appearance: none; outline: none; cursor: pointer;}
select::-ms-expand{ display: none;}

.c-red{ color: #FF0050;}
.text-align-center{ text-align: center;}
.text-align-right{ text-align: right;}
.display-block{ display: block;}
.hidden{ display: none !important; visibility: hidden;}
.clear{ clear: both;}
.is-fixed{ position: fixed;}

.sp-only{ display: block !important;}
.sp-only-2{ display: inline !important;}
.pc-only{ display: none !important;}
.pc-only-2{	display: none !important;}
@media screen and (min-width: 681px){
  .sp-only{ display: none !important;}
  .sp-only-2{ display: none !important;}
  .pc-only{ display: block !important;}
  .pc-only-2{ display: inline !important;}
}

.mt10{ margin-top: 10px !important;}
.mt20{ margin-top: 20px !important;}
.mt30{ margin-top: 30px !important;}
.mb10{ margin-bottom: 10px !important;}
.mb20{ margin-bottom: 20px !important;}
.mb30{ margin-bottom: 30px !important;}
/*************************************************************************************************************************/


/* html body
*************************************************************************************************************************/
html{ height: 100%; font-size: 62.5%;}
body{ width: 100%; height: 100%; font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif; font-size: 1.4rem; color: #000; line-height: 1;}
@media screen and (min-width: 681px){
  body{ min-width: 1380px;}
}


/* common
*************************************************************************************************************************/
a{ text-decoration: underline;}
.ios .site__wrapper,
.android .site__wrapper{ height: 100%; position: relative; overflow: scroll; -webkit-overflow-scrolling: touch;}
.site__wrapper-left{ display: none; height: calc(100% - 171px); background: #e5e5e6; position: relative;}
#home .site__wrapper-left{ display: block;}
.desktop .site__wrapper-left{ height: calc(100vh - 171px);}
.site__wrapper-center{ width: 100%; height: 60px; background: #000; position: fixed; left: 0; bottom: 0; z-index: 2000;}
.site__wrapper-right{ padding: 0 0 60px 0;}
section{ padding: 25px 17px; border-bottom: 1px solid #000;}
.page-title{ margin: 0 0 20px 0; font-family: "M PLUS 1p"; font-weight: 800; font-size: 2rem; line-height: 1.2;}
.sec-title{ margin: 0 0 20px 0; font-family: "M PLUS 1p"; font-weight: 800; font-size: 1.6rem; line-height: 1.2;}
.sec-title span{ font-weight: 400; font-size: 1.2rem;}
.sec-title.down{ display: flex;}
.sec-title.down::before{ display: inline-block; content: ""; width: 0; height: 0; margin: 5px 3px 0 0; border-style: solid; border-width: 7px 5px 0 5px; border-color: #000 transparent transparent transparent;}
.sec-text{ font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif; font-weight: 400; font-size: 1.4rem; line-height: 1.6; text-align: justify;}
.sec-repletion{ font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif; font-weight: 400; font-size: 1.3rem; line-height: 1.4;}
.sec-repletion li{ padding: 0 0 0 1em; text-indent: -1em;}
@media screen and (min-width: 681px){
  .site__wrapper{ display: flex; height: 100%;}
  .site__wrapper-center{ width: 79px; height: 100%; background: #fff; border-left: 1px solid #000; border-right: 1px solid #000; position: relative;}
  .site__wrapper-left{ display: block; width: calc((100% - 79px)/2); height: 100%;}
  .desktop .site__wrapper-left{ height: 100%;}
  .site__wrapper-right{ width: calc((100% - 79px)/2); height: 100%; padding: 0; overflow: scroll;}
  section{ padding: 60px 80px;}
  .page-title{ margin: 0 0 45px 0; font-size: 2.6rem;}
  .sec-title{ line-height: 1.4;}
  .sec-text{ line-height: 2;}
  .sec-repletion li{ margin: 0 0 5px 0;}
  .sec-title.down::before{ margin: 8px 5px 0 0;}
}


/* menu
*************************************************************************************************************************/
.site__menu-logo{ width: 94px; height: 18px; background: url("../img/event_logo_w.svg") no-repeat left top/cover; position: absolute; left: 22px; top: 50%; transform: translateY(-50%); text-indent: 100%; white-space: nowrap; overflow: hidden;}
.site__menu-btn{ display: block; width: 60px; height: 60px; background: #000; border: none; position: absolute; top: 0; right: 0; box-shadow: none; transition: 0.4s;}
.site__menu-btn span{ display: block; width: 24px; height: 1px; background: #fff; position: absolute; left: 17px; transition: 0.4s;}
.site__menu-btn span:nth-child(1){ top: 36%;}
.site__menu-btn span:nth-child(2){ top: 50%;}
.site__menu-btn span:nth-child(3){ top: 63%;}
.site__menu-btn.is-opend span{ width: 28px;}
.site__menu-btn.is-opend span:nth-child(1){ top: 50%; transform: rotate(45deg);}
.site__menu-btn.is-opend span:nth-child(2){ opacity: 0;}
.site__menu-btn.is-opend span:nth-child(3){ top: 50%; transform: rotate(-45deg);}
.site__menu{ display: none; width: 100%; height: calc(100% - 60px); background: #000; border-bottom: 1px solid #fff; position: fixed; left: 0; top: 0;}
.site__menu-wrap{ width: 70%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.site__menu__list{ border-top: 1px solid rgba(255,255,255,.5);}
.site__menu__list-item{ border-bottom: 1px solid rgba(255,255,255,.5);}
.site__menu__list-item a{ display: block; padding: 30px 0; background: no-repeat left center/auto 30px; text-indent: 100%; white-space: nowrap; overflow: hidden;}
.site__menu__list-item .event{ background-image: url("../img/menu01_yoko.svg");}
.site__menu__list-item .venue{ background-image: url("../img/menu02_yoko.svg");}
.site__menu__list-item .ticket{ background-image: url("../img/menu03_yoko.svg");}
.site__menu__list-item .goods{ background-image: url("../img/menu04_yoko.svg");}
.site__menu-sns{ display: flex; justify-content: center; margin: 30px 0 0;}
.site__menu-sns__item{ width: 36px; height: 36px; margin: 0 13px 0 0;}
@media screen and (min-width: 681px){
  .site__menu-btn{ display: none;}
  .site__menu-logo{ width: 37px; height: 37px; background: url("../img/event_mark.png") no-repeat left top/cover; position: absolute; left: 50%; top: 35px; transform: translate(-50%,0);}
  .site__menu{ display: block; height: 100%; background: none; position: relative;}
  .site__menu-wrap{ width: 19px;}
  .site__menu__list-item{ margin: 0 0 40px 0; border-bottom: none;}
  .site__menu__list-item a{ padding: 0; background: no-repeat left center/19px auto;}
  .site__menu__list-item .event{ height: 90px; background-image: url("../img/menu01_tate.svg");}
  .site__menu__list-item .venue{ height: 98px; background-image: url("../img/menu02_tate.svg");}
  .site__menu__list-item .ticket{ height: 59px; background-image: url("../img/menu03_tate.svg");}
  .site__menu__list-item .goods{ height: 74px; background-image: url("../img/menu04_tate.svg");}
  .site__menu-sns{ display: none;}
}


/* site title
*************************************************************************************************************************/
.site__title{ width: 80%; height: calc(80vw*0.79); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 100;}
.site__title-logo{ display: none;}
.site__title-catch{ width: 100%; height: auto;}
@media screen and (min-width: 681px){
  .site__title{ width: 517px; height: 555px;}
  .site__title-logo{ display: block; width: 269px; height: 52px; margin: 0 0 90px 0;}
  .site__title-catch{ width: 517px; height: 410px;}
}


/* site bg
*************************************************************************************************************************/
.site__bg{ width: 100%; height: 100%; position: relative; overflow: hidden; z-index: 0;}
.site__bg-item{ position: absolute;}
.site__bg-item.bg01{ width: 100px; height: 100px; top: -30px; left: -30px;}
.site__bg-item.bg02{ width: 150px; height: 150px; top: -50px; right: -50px;}
.site__bg-item.bg03{ width: 100px; height: 100px; bottom: -60px; left: 100px;}
.site__bg-item.bg04{ width: 80px; height: 80px; top: 100px; left: 0;}
.site__bg-item.bg05{ width: 50px; height: 50px; top: 130px; right: 10px; z-index: 3;}
.site__bg-item.bg06{ width: 120px; height: 120px; top: 130px; right: -80px;}
.site__bg-item.bg07{ width: 100px; height: 100px; top: 20px; left: 120px;}
.site__bg-item.bg08{ width: 80px; height: 80px; top: 240px; left: -40px;}
.site__bg-item.bg09{ width: 70px; height: 70px; top: 240px; right: 10px; z-index: 3;}
.site__bg-item.bg10{ width: 130px; height: 130px; bottom: 10px; left: -40px;}
.site__bg-item.bg11{ width: 150px; height: 150px; bottom: -50px; right: -80px;}
.site__bg-item.bg12{ width: 40px; height: 40px; bottom: 60px; left: 10px;}
.site__bg-item.bg13{ width: 100px; height: 100px; bottom: 20px; right: 110px;}
.site__bg-item.bg14{ width: 80px; height: 80px; bottom: -10px; left: 20px;}
.site__bg-item.bg15{ width: 120px; height: 120px; bottom: 100px; right: 0;}
.site__bg-item.bg01 img{ animation: 5s linear infinite rotation1;}
.site__bg-item.bg02 img{ animation: 7s linear infinite rotation1;}
.site__bg-item.bg03 img{ animation: 26s linear infinite rotation2;}
.site__bg-item.bg04 img{ animation: 13s linear infinite rotation1;}
.site__bg-item.bg05 img{ animation: 5s linear infinite rotation1;}
.site__bg-item.bg06 img{ animation: 8s linear infinite rotation2;}
.site__bg-item.bg07 img{ animation: 7s linear infinite rotation1;}
.site__bg-item.bg08 img{ animation: 5s linear infinite rotation2;}
.site__bg-item.bg09 img{ animation: 10s linear infinite rotation1;}
.site__bg-item.bg10 img{ animation: 8s linear infinite rotation1;}
.site__bg-item.bg11 img{ animation: 18s linear infinite rotation1;}
.site__bg-item.bg12 img{ animation: 25s linear infinite rotation2;}
.site__bg-item.bg13 img{ animation: 13s linear infinite rotation2;}
.site__bg-item.bg14 img{ animation: 5s linear infinite rotation1;}
.site__bg-item.bg15 img{ animation: 8s linear infinite rotation2;}
@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
@keyframes rotation2{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(-360deg); }
}
@media screen and (min-width: 681px){
  .site__bg-item.bg01{ width: 150px; height: 150px; top: -30px; left: -30px;}
  .site__bg-item.bg02{ width: 180px; height: 180px; top: -50px; right: -50px;}
  .site__bg-item.bg03{ width: 200px; height: 200px; bottom: -60px; left: 100px;}
  .site__bg-item.bg04{ width: 80px; height: 80px; top: 110px; left: 0;}
  .site__bg-item.bg05{ width: 130px; height: 130px; top: 130px; right: 210px; z-index: 3;}
  .site__bg-item.bg06{ width: 120px; height: 120px; top: 130px; right: -80px;}
  .site__bg-item.bg07{ width: 120px; height: 120px; top: 40px; left: 175px;}
  .site__bg-item.bg08{ width: 90px; height: 90px; top: 330px; left: -40px;}
  .site__bg-item.bg09{ width: 170px; height: 170px; top: 290px; right: -10px; z-index: 3;}
  .site__bg-item.bg10{ width: 130px; height: 130px; bottom: 150px; left: -40px;}
  .site__bg-item.bg11{ width: 150px; height: 150px; bottom: -50px; right: -80px;}
  .site__bg-item.bg12{ width: 80px; height: 80px; bottom: 110px; left: 300px;}
  .site__bg-item.bg13{ width: 100px; height: 100px; bottom: 20px; right: 110px;}
  .site__bg-item.bg14{ width: 80px; height: 80px; bottom: -10px; left: 20px;}
  .site__bg-item.bg15{ width: 120px; height: 120px; bottom: 140px; right: 30px;}
}


/* footer
*************************************************************************************************************************/
.share{ display: flex; align-items: center; justify-content: center; padding: 17px 0;}
.share-title{ width: 39px; height: 10px; margin: -7px 20px 0 0;}
.share-btn{ width: 32px; height: 32px; margin: 0 15px 0 0;}
.foot-menu{ padding: 35px 20px; background: #000; border-bottom: 1px solid #fff;}
.foot-menu__logo{ display: none;}
.foot-menu__list-item{ margin: 0 0 20px 0;}
.foot-menu__list-item:last-child{ margin: 0;}
.foot-menu__list-item img{ height: 20px;}
.copyright{ display: none;}
@media screen and (min-width: 681px){
  .share{ padding: 28px 0;}
  .share-title{ width: 50px; height: 15px; margin: 0 30px 0 0;}
  .share-btn{ width: 40px; height: 40px; margin: 0 20px 0 0;}
  .foot-menu{ padding: 50px 45px 40px 45px;}
  .foot-menu__logo{ display: flex; align-items: center; margin: 0 0 35px 0;}
  .foot-menu__logo img{ width: 95px; height: auto;}
  .foot-menu__logo span{ padding: 0 0 0 20px; font-family: "M PLUS 1p"; font-size: 1.2rem; font-weight: 400; color: #fff;}
  .copyright{ display: block; height: 86px; padding: 34px 0 0 45px; background: #000; position: relative;}
  .copyright-text{ font-size: 1.1rem; color: #fff;}
  .copyright-sns{ display: flex; position: absolute; right: 45px; top: 50%; transform: translateY(-50%);}
  .copyright-sns__item{ width: 36px; height: 36px; margin: 0 13px 0 0;}
  }