@charset "UTF-8";

.container {
  overflow: hidden;
}

/*==========================
Loading
==========================*/

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: var(--primary-gray);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
}

.contents_loading {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 width: 60.7rem;
}

.text_loading {
  font-family: "pf-videotext";
  color: var(--primary-white);
  font-size: 6.4rem; 
  font-weight: 700;
  letter-spacing: -0.096rem;
  clip-path: inset(0 3ch 0 0);
  animation: l4 1s steps(4) infinite;
  margin-bottom: 3rem;
}
 
.text_loading:before{
  content: "Now Ticketting…";
}

@keyframes l4 {to{clip-path: inset(0 -1ch 0 0)}}

.ticket_loading_pc {
  animation: katakata 1.5s  infinite;
}

@keyframes katakata {
  0% {transform: translate(0px, 0px) rotateZ(0deg)}
  25% {transform: translate(1px, 1px) rotateZ(1deg)}
  50% {transform: translate(0px, 1px) rotateZ(0deg)}
  75% {transform: translate(1px, 0px) rotateZ(-1deg)}
  100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

.ticket_loading_sp {
  display: none;
}

/* Loading sp */
@media screen and (max-width: 768px) {

  .text_loading {
  font-size: 4rem; 
  margin-bottom: 3rem;
}

.ticket_loading_pc {
  display: none;
}

.ticket_loading_sp {
  display: block;
  width: 13.6rem;
  height: 39.2rem;
}

.ticket_loading_sp img {
  width: 100%;
}

}
/* sp 768px */

/*==========================
Loaded
==========================*/

.loaded {
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: var(--primary-gray);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1999;
  overflow: hidden;
}

.contents_loaded {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 width: 70rem;
}

.text_loaded {
  font-family: "pf-videotext";
  color: var(--primary-white);
  font-size: 6.4rem; 
  font-weight: 700;
  letter-spacing: -0.096rem;
  margin-bottom: 3rem;
}
 
.text_loaded:before{
  content: "Welcome!";
}

.ticket_loaded_sp {
  display: none;
}

/* 円形クロージングアニメーション用 */
.circle-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2001;
  pointer-events: none;
  display: none;
}

.circle-transition.active {
  display: block;
}

.circle-transition svg {
  width: 100%;
  height: 100%;
}

.circle-transition.closing {
  animation: none;
}

.circle-transition.opening {
  animation: none;
}

/* Loaded sp */
@media screen and (max-width: 768px) {

  .loaded {
    z-index: 3000;
  }

  .contents_loaded {
    margin-top: 1rem;
  }

  .text_loaded {
  font-size: 4rem; 
  letter-spacing: -0.264rem;
  margin-bottom: 3rem;
}

.ticket_loaded_pc {
  display: none;
}

.ticket_loaded_sp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  width: 13.6rem;
}

.ticket_loaded_sp img {
  width: 100%;
}

.ticket_loaded_sp img:nth-of-type(2){
  transform: rotate(-6deg);
  margin-left: 1rem;
}
}
/* sp 768px */

/* MENU sp */
@media screen and (max-width: 768px) {

 .contents_loading {
    width: 100%;
  }
  
 .contents_loaded {
    width: 100%;
  }
  
}
/* sp 768px */

/*==========================
Ticket Frame
==========================*/

.fv {
  position: relative;
  opacity: 0; 
  transition: opacity 0.5s ease;
}

.fv_ticket {
 display: flex;
 background-image: url(../image/TOP/BG_TOP.jpg);
 background-repeat: repeat;
 background-size: 15rem 15rem;
 position: relative;
 overflow-x: clip;
 min-height: calc(100vh - 16rem);
}

.fv_ticket::after {
  content: "";
  display: block;
  width: 1.9rem;
  height: 100%;
  background: url(../image/TOP/Gizagiza.png) repeat;
  background-repeat: repeat-y;
  position: absolute;
  background-size: 100%;
  right: 0px;
}

/* Ticket Frame sp */
@media screen and (max-width: 768px) {

  .fv_ticket {
    display: block;
  }

  .fv_ticket::after {
    background: url(../image/TOP/Gizagiza_SP.png)repeat;
    background-repeat: repeat-x;
    background-position: center;
    width: 100%;
    height: 2.5rem;
    bottom: -1.3rem;
    left: 0rem;
  }

}
/* sp 768px */

/*==========================
MV
==========================*/

.mainVisual {
  width: 60.5rem;
  height: auto;
  overflow: hidden;
}

.mainVisual_wrapper {
  height: 100%;
}

.mainVisual_slide {
  width: 100%;
  height: 100%;
}

.mainVisual_slide img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

/* MV sp */
@media screen and (max-width: 768px) {

  .mainVisual {
    width: 100%;
    height: 30.4rem;
  }

  .mainVisual_slide img:first-child {
    width: 100%;
    object-position: bottom;
  }

  .mainVisual_slide img:last-child {
    width: 100%;
    object-position: top;
  }

}

/* sp 768px */

/*==========================
Contents
==========================*/

.mainContents {
 width: calc(100vw - 60.5rem);
 padding: 7.1rem 8.4rem 7.1rem 5rem  ;
 max-width: 100%;
 display: flex;
 align-items: center;
}

.mainContents::after {
  content: "";
  display: block;
  width: 38.7rem;
  height: 39.1rem;
  background: url(../image/TOP/Stamp.png) no-repeat center / cover;
  position: absolute;
  right: -1rem;
  bottom: -10rem;
  transform: rotate(10deg);
  opacity: 0.2;
  z-index: 0.1;
  animation: 25s linear infinite rotation;
}

@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

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

.line_logo {
 display: block;
 width: 100%;
 height: 0.2rem;
 background-color: var(--primary-black);
 margin-top: 2.3rem;
}

.title {
 font-size: 5.6rem;
 font-weight: 700;
 letter-spacing: -0.392rem;
 line-height: normal;
 color: var(--primary-black);
}

/* mainContents sp */
@media screen and (max-width: 768px) {

  .mainContents {
    width: 100%;
    padding: 2rem 2.8rem 4.2rem 2.8rem;
  }

  .mainContents::after {
    width: 20rem;
    height: 20.2rem;
    background: url(../image/TOP/Stamp.png) no-repeat center / cover;
    position: absolute;
    left: -3rem;
    bottom: -4.5rem;
    transform: rotate(10deg);
  }

  .line_logo {
    height: 0.1rem;
    margin-top: 1.045rem;
  }

  .title {
    margin-top: 1rem;
    font-size: 3.2rem;
    letter-spacing: -0.16rem;
    color: var(--primary-black);
  }
}
/* sp 768px */

/* MENU */
.menu {
  width: 100%;
}

.menu_1 {
 display: flex;
 width: 100%;
}

.menu_2 {
  display: none;
}

/* MENU sp */
@media screen and (max-width: 768px) {

  .menu {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .menu_1 {
  gap:calc(8/312*100vw);
  margin-top: 1rem;
  }
  
}
/* sp 768px */

/* GALLERY */

.btn_gallery {
  flex: 1;
  height: 6.5rem; 
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--primary-white);
  -webkit-text-stroke-width: 0.2rem;
  -webkit-text-stroke-color: var(--primary-black);
  text-shadow: 0.3rem 0.3rem 0 var(--primary-black);
  font-size: 4rem; 
  font-weight: 900;
  letter-spacing: -0.2rem;
  border: 0.2rem solid var(--primary-black);
  overflow: hidden;
  position: relative;
  z-index: 1;
  flex-direction: row-reverse;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}

.btn_gallery::before {
  content: "";
  width: 1.95rem;
  height: 2.6rem;
  background: url(../image/TOP/Button_Arrow.svg) no-repeat center / cover;
  margin-left: 1rem;
}

.btn_gallery::after {
  background: var(--primary-black);
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}

.btn_gallery:hover {
  color: var(--primary-black);
  -webkit-text-stroke-color: var(--primary-white); 
  -webkit-text-stroke-width: 0.2rem;
  text-shadow: 0.4rem 0.4rem 0 var(--primary-white);
}

.btn_gallery:hover::after {
 transform: scale(1,1);
}

/* GALLERY sp */
@media screen and (max-width: 768px) {

  .btn_gallery {
  height: 4rem; 
  font-size: 2.6rem; 
  font-weight: 900;
  background-color: var(--primary-gray);
  color: var(--primary-white);
  -webkit-text-stroke-color: var(--primary-black); 
  -webkit-text-stroke-width: 0.1rem;
  text-shadow: 0.3rem 0 0 var(--primary-black);
  border: 0.2rem solid var(--primary-black);
  box-shadow: 0.3rem 0.3rem 0 0 var(--primary-black);
  }

  .btn_gallery::before {
  content: "";
  width: 1.3rem;
  height: 1.73rem;
}

.btn_gallery::after {
  transition: unset
}

.btn_gallery:hover {
  -webkit-text-stroke-width: 0.1rem;
  text-shadow: 0.25rem 0rem 0 var(--primary-white);
}

}
/* sp 768px */

/* GOODS */

.btn_goods {
  flex: 1;
  height: 6.5rem; 
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--primary-white);
  -webkit-text-stroke-width: 0.2rem;
  -webkit-text-stroke-color: var(--primary-black);
  text-shadow: 0.3rem 0.3rem 0 var(--primary-black);
  font-size: 4rem; 
  font-weight: 900;
  letter-spacing: -0.2rem;
  border-top: 0.2rem solid var(--primary-black);
  border-right: 0.2rem solid var(--primary-black);
  border-bottom: 0.2rem solid var(--primary-black);
  overflow: hidden;
  position: relative;
  z-index: 1;
  flex-direction: row-reverse;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}

.btn_goods::before {
  content: "";
  width: 1.95rem;
  height: 2.6rem;
  background: url(../image/TOP/Button_Arrow.svg) no-repeat center / cover;
  margin-left: 1rem;
}

.btn_goods::after {
  background: var(--primary-black);
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}

.btn_goods:hover {
  color: var(--primary-black);
  -webkit-text-stroke-color: var(--primary-white); 
  -webkit-text-stroke-width: 0.2rem;
  text-shadow: 0.4rem 0.4rem 0 var(--primary-white);
}

.btn_goods:hover::after {
  transform: scale(1,1);
}

/* GOODS sp */
@media screen and (max-width: 768px) {

  .btn_goods {
  height: 4rem; 
  font-size: 2.6rem; 
  font-weight: 900;
  background-color: var(--primary-gray);
  color: var(--primary-white);
  -webkit-text-stroke-color: var(--primary-black); 
  -webkit-text-stroke-width: 0.1rem;
  text-shadow: 0.3rem 0 0 var(--primary-black);
  border: 0.2rem solid var(--primary-black);
  box-shadow: 0.3rem 0.3rem 0 0 var(--primary-black);
  }

  .btn_goods::before {
  content: "";
  width: 1.3rem;
  height: 1.73rem;
}

.btn_goods::after {
  transition: unset
}

.btn_goods:hover {
  -webkit-text-stroke-width: 0.1rem;
  text-shadow: 0.25rem 0rem 0 var(--primary-white);
}

}
/* sp 768px */

/* ABOUT sp */
@media screen and (max-width: 768px) {

  .menu_2 {
    display: block;
    margin-top: 2rem;
  }

  .about_sp {
    justify-content: center;
    position: relative;
    width: fit-content;
    margin: 0 auto;
  }

  .btn_about_sp {
    position: absolute;
    inset: 0;
    width: calc(230/375*100vw);
    height: 3.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.8rem; 
    font-weight: 900;
    color: var(--primary-white);
    -webkit-text-stroke-color: var(--primary-black); 
    -webkit-text-stroke-width: 0.1rem;
    text-shadow: 0.3rem 0 0 var(--primary-black);
  }

 .btn_about_sp::after {
  content: "";
  width: 1.3rem;
  height: 1.73rem;
  background: url(../image/TOP/Button_Arrow.svg) no-repeat center / cover;
  margin-left: 1rem;
}

.btn_about_sp:hover {
  color: var(--primary-black);
  -webkit-text-stroke-color: var(--primary-white); 
  -webkit-text-stroke-width: 0.1rem;
  text-shadow: 0.25rem 0rem 0 var(--primary-gray);
}

.barcode_about_sp {
  width: 23rem;
}

.barcode_about_sp img {
  width: 100%;
}

}
/* sp 768px */


/* Information */

.contents_under {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 3.7rem;
}

.contents_information {
  flex: 1;
  width: 35rem;
  position: relative;
}

.decolation_1 {
 font-family: "pf-videotext";
 font-size: 2.4rem;
 font-weight: 400;
 line-height: 1;
 color: var(--primary-gray);
 letter-spacing: -0.168rem;
}

.news {
 margin-top: 0.7rem;
 display: flex;
 width: 100%;
 height: 8.8rem;
}

.title_news {
  background-color: var(--primary-black);
  width: 4.4rem;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  display: flex;
  justify-content: center;
  align-items: center;
}

.titleText_news {
  color: var(--primary-white);
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: -0.14rem;
}

.text_news {
 width: 100%;
 display: flex;
 flex-direction: column;
 justify-content: center;
 padding: 2rem;
 border: 0.2rem solid var(--primary-black);
}

.date_news {
 font-family: "pf-videotext";
 color: var(--primary-black);
 font-size: 2rem;
 font-weight: 400;
 line-height: 2.1rem  
}

.text_news_jp {
 display: flex;
 margin-top: 0.5rem;
 font-family: "zen-kaku-gothic-new";
 font-size: 1.6rem;
 font-weight: 400;
 line-height: 2.1rem;
 letter-spacing: -0.064rem;
 color: var(--primary-black);
}

.event_news {
 text-decoration-line: underline;
 text-decoration-style: solid;
 text-decoration-skip-ink: auto;
 text-decoration-thickness: 5%;
 text-underline-offset: 17%;
 text-underline-position: from-font;
}

.maintext_news {
 margin-left: 0.3rem;
}

.btn_link {
 margin-top: 2.5rem;
 display: flex;
 justify-content: flex-start;
 align-items: center;
 gap: 1.5rem;
}

.btn_contact {
  width: 20.8rem;
  height: 5.7rem;
  transition-duration: .4s;
}

.btn_contact_sp {
  display: none;
}

.btn_contact:hover {
  transform: scale(1.08);
}

.btn_contact img {
  width: 100%;
}

.btn_x {
  width: 5.7rem;
  height: 5.7rem;
  transition-duration: .4s;
}

.btn_x:hover {
  transform: scale(1.08);
}

.btn_x img {
  width: 100%;
}

.btn_instagram {
  width: 5.7rem;
  height: 5.7rem;
  transition-duration: .4s;
}

.btn_instagram:hover {
  transform: scale(1.08);
}

.btn_instagram img {
  width: 100%;
}

.btn_decolation {
  display: none;
}

.decolation_2 {
 margin-top: 1.8rem;
 position: relative;
}

.decoText_a {
  color: var(--primary-gray);
  font-family: "pf-videotext";
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2rem;
  letter-spacing: -0.008rem;
}

.decoText_b {
  color: var(--primary-gray);
  font-family: "pf-videotext";
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 2rem;
  letter-spacing: -0.05rem;
}

.line_decoText {
  margin-top: 1.6rem;
  display: flex;
  width: 100%;
  height: 0.2rem;
  background-color: var(--primary-gray);
}

.decoText_c {
  margin-top: 1.4rem;
  color: var(--primary-gray);
  font-family: "pf-videotext";
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.6rem;
  letter-spacing: -0.024rem;
}

.decolation_2::after {
  content: "";
  display: block;
  width: 6.8rem;
  height: 3.9rem;
  background: url(../image/TOP/Emoji_NURUNURU.png) no-repeat center / cover;
  position: absolute;
  right: 0;
  top: 5px;
  animation:jump 4s infinite;
  -webkit-animation:jump 4s infinite;
  -moz-animation:jump 4s infinite;
}
@keyframes jump{
  0%{transform:translate(0,0px);}
  3%{transform:translate(0,-1rem);}
  5%{transform:translate(0,0px);}
  6%{transform:translate(0,-0.5rem);}
  7%{transform:translate(0,0px);}
  100%{transform:translate(0,0px);}
}
@-webkit-keyframes jump{
  0%{-webkit-transform:translate(0,0px);}
  3%{-webkit-transform:translate(0,-1rem);}
  5%{-webkit-transform:translate(0,0px);}
  6%{-webkit-transform:translate(0,-0.5rem);}
  7%{-webkit-transform:translate(0,0px);}
  100%{-webkit-transform:translate(0,0px);}
}
@-moz-keyframes jump{
  0%{-moz-transform:translate(0,0px);}
  3%{-moz-transform:translate(0,-1rem);}
  5%{-moz-transform:translate(0,0px);}
  6%{-moz-transform:translate(0,-0.5rem);}
  7%{-moz-transform:translate(0,0px);}
  100%{-moz-transform:translate(0,0px);}
}

/* Information sp */
@media screen and (max-width: 768px) {
  
 .line_menu {
 display: block;
 width: 100%;
 height: 1rem;
 border-bottom: 0.1rem dashed var(--primary-gray);
 margin-top: 1.5rem;
}

.contents_under {
  margin-top: 1.5rem;
}

.contents_information {
  width: 100%;
}

.decolation_1 {
 display: none
}

.news {
 height: 6.1rem;
}

.title_news {
  width: 2.3rem;
}

.titleText_news {
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: -0.126rem;
}

.text_news {
  border: 0.15rem solid var(--primary-black);
}

.date_news {
 font-size: 1.4rem; 
 font-weight: 400;
 letter-spacing: -0.07rem;
 line-height: 1;
}

.text_news_jp {
 display: flex;
 font-size: 1.2rem; 
 margin-top: 0.3rem;
 line-height: 2.1rem;
 letter-spacing: -0.08rem;
 line-height: 1;
}

.event_news {
 text-decoration-thickness: 4%;
 text-underline-offset: 20%;
}

.btn_link {
  margin-top: 2rem ;
  width: 100%;
  height: 3.7rem;
  gap: 0.7rem;
  align-items: center;
}

.btn_contact {
  display: none;
}

.btn_contact_sp {
  display: block;
  width: 13.6rem;
}

.btn_contact_sp img {
  width: 100%;
}

.btn_x {
  width: 3.7rem;
  height: auto;
}

.btn_x img {
  width: 100%;
}

.btn_instagram {
  width: 3.7rem;
  height: auto;
}

.btn_instagram img {
  width: 100%;
}

.btn_decolation {
  display: flex;
  width: 8.2rem;
  font-family: "pf-videotext";
  color: var(--primary-gray);
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: -0.056rem;
  text-align: start;
}

.decolation_2::after {
  content: "";
  display: block;
  width: 5.9rem;
  height: 3.4rem;
  background: url(../image/TOP/Emoji_NURUNURU.png) no-repeat center / cover;
  position: absolute;
  right: 1.8rem;
  bottom: 6.7rem;
  animation:jump 3s infinite;
  -webkit-animation:jump 3s infinite;
  -moz-animation:jump 3s infinite;
}
@keyframes jump{
  0%{transform:translate(0,0px);}
  3%{transform:translate(0,-1rem);}
  5%{transform:translate(0,0px);}
  6%{transform:translate(0,-0.5rem);}
  7%{transform:translate(0,0px);}
  100%{transform:translate(0,0px);}
}
@-webkit-keyframes jump{
  0%{-webkit-transform:translate(0,0px);}
  3%{-webkit-transform:translate(0,-1rem);}
  5%{-webkit-transform:translate(0,0px);}
  6%{-webkit-transform:translate(0,-0.5rem);}
  7%{-webkit-transform:translate(0,0px);}
  100%{-webkit-transform:translate(0,0px);}
}
@-moz-keyframes jump{
  0%{-moz-transform:translate(0,0px);}
  3%{-moz-transform:translate(0,-1rem);}
  5%{-moz-transform:translate(0,0px);}
  6%{-moz-transform:translate(0,-0.5rem);}
  7%{-moz-transform:translate(0,0px);}
  100%{-moz-transform:translate(0,0px);}
}

.decoText_a {
  font-size: 1.3rem;
  letter-spacing: 0.0065rem;
  line-height: 1;
}

.decoText_b {
  font-size: 2rem;
  line-height: 1.8rem;
  letter-spacing: 0.0rem;
}

.line_decoText {
  margin-top: 1.2rem;
  display: flex;
  width: 100%;
  height: 2px;
}

.decoText_c {
  margin-top: 0.9rem;
  font-size:  1.1rem;
  line-height: 1.4rem;
  letter-spacing: -0.0374rem;
}
}

/* sp 768px */

/* ABOUT Barcode */

.contents_about {
  flex: 1;
}

.about {
 width: 7.5rem ;
 flex: 1;
 display: flex;
 justify-content: end;
 margin-left: auto;
 margin-top: 3rem;
 position: relative;
 z-index: 100;
 transition: transform .5s;
 animation:barcodeFuwafuwa ease-in-out 2s infinite alternate;
 -webkit-animation:barcodeFuwafuwa ease-in-out 2s infinite alternate;
 -moz-animation:barcodeFuwafuwa ease-in-out 2s infinite alternate;
}

@keyframes barcodeFuwafuwa{
  0%   { transform:translate(0%, 0%) scale(1, 1); }
  100% { transform:translate(0%, -1.5rem) scale(1, 1); }
}
@-webkit-keyframes barcodeFuwafuwa{
  0%   { -webkit-transform:translate(0%, 0%) scale(1, 1); }
  100% { -webkit-transform:translate(0%, -1.5rem) scale(1, 1); }
}

@-moz-keyframes barcodeFuwafuwa{
  0%   { -moz-transform:translate(0%, 0%) scale(1, 1); }
  100% { -moz-transform:translate(0%, -1.5rem) scale(1, 1); }
}

.about:hover a{
  transform: rotate(270deg) scale(1.08);
  z-index: 600;
}

.about:hover div{
  transition-duration: .5s;
  transform: scale(1.08);
}

@keyframes barcodeFuwafuwaHover{
  0%   { transform:translate(0%, 0%) scale(1.08, 1.08); }
  100% { transform:translate(0%, -1.5rem) scale(1.08, 1.08); }
}
@-webkit-keyframes barcodeFuwafuwaHover{
  0%   { -webkit-transform:translate(0%, 0%) scale(1.08, 1.08); }
  100% { -webkit-transform:translate(0%, -1.5rem) scale(1.08, 1.08); }
}

@-moz-keyframes barcodeFuwafuwaHover{
  0%   { -moz-transform:translate(0%, 0%) scale(1.08, 1.08); }
  100% { -moz-transform:translate(0%, -1.5rem) scale(1.08, 1.08); }
}

.btn_about {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--primary-white);
  -webkit-text-stroke-width: 0.2rem;
  -webkit-text-stroke-color: var(--primary-black);
  text-shadow: -0.3rem 0.3rem 0 var(--primary-black);
  font-size: 4rem; 
  font-weight: 900;
  letter-spacing: -0.2rem;
  transform: rotate(270deg);
  right: -4.6rem;
  top: 35%;
  transition-duration: .4s;
}

.btn_about::after {
  content: "";
  width: 1.95rem;
  height: 2.6rem;
  background: url(../image/TOP/Button_Arrow_about.svg) no-repeat center / cover;
  margin-left: 1rem;
}

.barcode_about {
 width: 7.4rem 
}

.barcode_about img {
 width: 100%;
}

/*ABOUT Barcode sp */
@media screen and (max-width: 768px) {
  
.contents_about {
  display: none;
}

  .about {
    display: none;
  }

}
/* sp 768px */

/*==========================
Label
==========================*/

.textLabel {
 width: 100%;
 height: 16rem;
 background-color: var(--primary-black);
 display: flex;
 align-items: center;
 position: relative;
 z-index: 100;
 overflow: hidden;
}

.inner {
  display: flex;
}

.decoText_MANURU {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 10rem;
  font-weight: 700;
  overflow: hidden;
  padding-left: 2rem;
  color: var(--primary-white);
  }

  .decoText_MANURU:nth-child(odd) {
    animation: loop 90s -45s linear infinite;
  }
  
  .decoText_MANURU:nth-child(even) {
    animation: loop2 90s linear infinite;
  }

  @keyframes loop {
    0% {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
}

@keyframes loop2 {
    0% {
      transform: translateX(0);
    }
    to {
      transform: translateX(-200%);
    }
}

/*Label sp */
@media screen and (max-width: 768px) {
  
.textLabel {
  height: 8rem;
}

.decoText_MANURU {
  font-size: 5.6rem;
  padding-left: 2rem;
  }

  .decoText_MANURU:nth-child(odd) {
    animation: loop 100s -50s linear infinite;
  }
  
  .decoText_MANURU:nth-child(even) {
    animation: loop2 100s linear infinite;
  }

}
/* sp 768px */


/* Safariのみに適用する調整 */
@supports (-webkit-hyphens:none) {
  /* Safari専用 */
  .btn_gallery,
  .btn_goods,
  .btn_about {
    text-shadow: 0.2rem 0.2rem 0 var(--primary-black);
  }

  .btn_gallery:hover,
  .btn_goods:hover {
    text-shadow: 0.2rem 0.2rem 0 var(--primary-white);
  }

   @media screen and (max-width: 768px) {
      .btn_gallery,
      .btn_goods,
      .btn_about_sp {
        text-shadow: 0.22rem 0 0 var(--primary-black);
    }
      .btn_gallery:hover,
      .btn_goods:hover {
        text-shadow: 0.22rem 0 0 var(--primary-white);
    }
  }


}