@charset 'utf-8';
html { font-size: 2.2vw;  }
body { background: #DEF0EB; color: #72368C; line-height: 1.8; position: relative; font-weight: bold; letter-spacing: .1em; }
.wrapper { width: 100%; overflow-x: hidden;}
img { max-width: 100%; }

.sp-only { display: none;}
.t-small { font-size: .8em;}
@media screen and (max-width: 768px) {
  .sp-only { display: block; }
}

.contents-width { width: 85%; margin: 0 auto; position: relative; z-index: 3; }
.main-info { width: 40%; position: relative; z-index: 3; }
.main-info img { width: 100%; }
@media screen and (max-width: 768px) {
  html { font-size: 4vw;  }
  .contents-width { width: 85%; }
  .main-info { width: 80%; }
}


.inviewConts { clip-path: inset(0 100%  0 0); }
.inviewConts.inview { clip-path: inset(0 0 0 0); transition: clip-path 1s .2s; }

.main-logo { width: 2.2rem; height: auto;  margin: 20vw 0 20vw auto; }


@-webkit-keyframes changeColor {
  0% { fill: hsl(240,100%,50%); }
  33% { fill: hsl(268,100%,70%); }
  66% { fill: hsl(115,100%,64%); }
  100% { fill: hsl(240,100%,50%); }
  
}
@keyframes changeColor {
  0% { fill: hsl(240,100%,50%); }
  33% { fill: hsl(268,100%,70%); }
  66% { fill: hsl(115,100%,64%); }
  100% { fill: hsl(240,100%,50%); }
}

@media screen and (max-width: 768px) {
  .main-logo { width: 4rem; margi: 30vw 0 30vw auto; }
}


.mainvisual { position: relative; width: 65%; height: calc(140vw * 0.65);  margin: 5vw auto 15vw; }

@media screen and (max-width: 768px) {
  .mainvisual  { width: 90%; height: 280vw;  }
  
}

.mainvisual .kojima-kanji { position: absolute; margin: auto; width: 32%; left: 22%; top: 5%; -webkit-animation: roll_kojima 2.5s cubic-bezier(1,1.85,.9,.33) alternate infinite; animation: roll_kojima 2.5s cubic-bezier(1,1.85,.9,.33) alternate infinite; }
.mainvisual .kojima-en { position: absolute; margin: auto; width: 18%; top: 32%; left: 10%; 
-webkit-animation: roll_all 3s linear infinite; animation: roll_all 3s linear infinite;  }
.mainvisual .nagata-kanji { position: absolute; margin: auto; width: 46%; left: 45%; top: 55%; -webkit-animation: roll_nagata 3s cubic-bezier(0.57,1.67,0.79,0.47) alternate infinite; animation: roll_nagata 3s cubic-bezier(0.57,1.67,0.79,0.47) alternate infinite;}
.mainvisual .nagata-en { position: absolute; margin: auto; width: 25%; top: 95%; left: 67%; -webkit-animation: roll_nagata_en 1s alternate infinite; animation: roll_nagata_en 1s alternate infinite; }

.mainvisual .circle-pos { position: absolute; margin: auto; width: 11%; top: 30%; left: 89%; -webkit-animation: sizeup 20s .05s steps(100) infinite;animation: sizeup 20s .05s steps(100) infinite; transform-origin: right top;  }
.mainvisual .circle-pos .circle {  width: 100%; transform-origin: left bottom;   -webkit-animation: roll 2s cubic-bezier(0.57,1.67,0.79,0.47) alternate infinite; animation: roll 2s cubic-bezier(0.57,1.67,0.79,0.47) alternate infinite; display: block; }

.mainvisual .knife-and-fork { width: 100%; -webkit-animation: strech 5s ease-out alternate infinite; animation: strech 2s ease-out alternate infinite; transform-origin: left center; display: block; }
.mainvisual .free { width: 1%; top: 10%; left: 0; margin: auto; position: absolute; }
.mainvisual .lead {position: absolute;  width: 27%; right: 10%; top: 10%; -webkit-animation: downdown 3s steps(10) infinite; animation: downdown 3s steps(10) infinite; }
.mainvisual .event-info { width: 42%; position: absolute; left: 0; bottom: 0%; margin: auto; -webkit-animation: downdown 1s steps(8) alternate infinite; animation: downdown 1s steps(8) alternate infinite;}
.mainvisual .qr { position: absolute; width: 10%; left: 0; bottom: 0; margin: auto; }

.mainvisual .exbition { position: absolute; right: 0%; bottom: 5%; width: 5%;  -webkit-animation: strech 3s steps(4) alternate infinite; animation: strech 3s steps(4) alternate infinite; }

@media screen and (max-width: 768px) {
  
  .mainvisual .kojima-kanji { top: 10vw; width: 35%;  }
  .mainvisual .kojima-en { top: 55vw; }
  .mainvisual .nagata-kanji { top: 40vw; }
  .mainvisual .nagata-en { top: 90vw; }

  .mainvisual .circle { top: 15vw; left: auto; right: 0;}
  .mainvisual .knife-and-fork {  }
  .mainvisual .free { top: 10vw; width: 2%;  }
  .mainvisual .qr { width: 20vw; right: 0; top: 160vw; left: auto; bottom: auto; }
  .mainvisual .exbition { width: 5vw; top: 100vw; left: 80%; }
  
  .mainvisual .lead  { width: 40%; left: 0; right: 0; margin: auto; top:200vw; -webkit-animation: downrotate 3s steps(10) infinite; animation: downrotate 3s steps(20) infinite; }
  .mainvisual .event-info { width: 60%; top: 100vw; bottom: auto; left: 0; }
}




@-webkit-keyframes strech {
  0% { transform: translateX(0); }
  100% { transform: translateX(17vw); }
  
}
@keyframes strech {
  0% { transform: translateX(0); }
  100% { transform: translateX(17vw); }
}

@-webkit-keyframes roll {
  0% { transform: rotate(0); }
  100% { transform:rotate(90deg); }
}
@keyframes roll {
  0% { transform: rotate(0); }
  100% { transform:rotate(90deg); }
}

@-webkit-keyframes roll_kojima {
  0% { transform: rotate(0) }
  100% { transform:rotate(-30deg); }
}
@keyframes roll_kojima {
  0% { transform: rotate(0); }
  100% { transform:rotate(-30deg); }
}

@-webkit-keyframes roll_nagata {
  0% {transform:rotate(-10deg); }
  100% {  transform: rotate(0); }
}
@keyframes roll_nagata {
  0% {transform:rotate(-10deg); }
  100% {  transform: rotate(0); }
}

@-webkit-keyframes roll_nagata_en {
  0%   { transform: translateY(0%); } 
  2%   { transform: translateY(-0.77%); } 
  4%   { transform: translateY(-0.33%); } 
  10%  { transform: translateY(-3%); } 
  14%  { transform: translateY(-0.98%); } 
  22%  { transform: translateY(-12.42%); } 
  32%  { transform: translateY(-1%); } 
  42%  { transform: translateY(-40.32%); }
  50%  { transform: translateY(-50%); } 
  58%  { transform: translateY(-59.68%); } 
  68%  { transform: translateY(-99.01%); }
  78%  { transform: translateY(-87.58%); }
  86%  { transform: translateY(-99.02%) }
  90%  { transform: translateY(-97%); }
  96%  { transform: translateY(-99.67%) }
  98%  { transform: translateY(-99.23%) }
  100% { transform: translateY(-100%) }}
}
@keyframes roll_nagata_en {
  0%   { transform: translateY(0%); } 
  2%   { transform: translateY(-0.77%); } 
  4%   { transform: translateY(-0.33%); } 
  10%  { transform: translateY(-3%); } 
  14%  { transform: translateY(-0.98%); } 
  22%  { transform: translateY(-12.42%); } 
  32%  { transform: translateY(-1%); } 
  42%  { transform: translateY(-40.32%); }
  50%  { transform: translateY(-50%); } 
  58%  { transform: translateY(-59.68%); } 
  68%  { transform: translateY(-99.01%); }
  78%  { transform: translateY(-87.58%); }
  86%  { transform: translateY(-99.02%) }
  90%  { transform: translateY(-97%); }
  96%  { transform: translateY(-99.67%) }
  98%  { transform: translateY(-99.23%) }
  100% { transform: translateY(-100%) }
}


@-webkit-keyframes roll_all {
  0% { transform: rotate(0); }
  100% { transform:rotate(360deg); }
}
@keyframes roll_all {
  0% { transform: rotate(0); }
  100% { transform:rotate(360deg); }
}

@-webkit-keyframes turn {
  0% { transform: rotateX(0); }
  100% { transform:rotateX(360deg); }
}
@keyframes turn {
  0% { transform: rotateX(0); }
  100% { transform:rotateX(360deg); }
}

@-webkit-keyframes downdown {
  0% { transform: translateY(0); }
  100% { transform:translateY(30px); }
}
@keyframes downdown {
  0% { transform: translateY(0); }
  100% { transform:translateY(30px); }
}


@-webkit-keyframes downrotate {
  0% { transform: translateY(0) rotate(90deg) ; }
  100% { transform: translateY(30px) rotate(90deg) ; }
}
@keyframes downrotate {
  0% { transform: translateY(0) rotate(90deg) ; }
  100% { transform: translateY(30px) rotate(90deg) ; }
}


@-webkit-keyframes sizeup {
  0% { transform: scale(1) ; }
  99%  { transform: scale(1) ; }
  99.5%  { transform: scale(2) ; }
  100% { transform: scale(2) ; }
}
@keyframes sizeup {
  0% { transform: scale(1) ; }
  99%  { transform: scale(1) ; }
  99.5%  { transform: scale(2) ; }
  100% { transform: scale(2) ; }
}


.knife { width: 40vh; height: 100vh; position: fixed; top: 0; right: 48%; bottom: 0; margin: auto; fill: none; stroke: #E60012;stroke-width: 2; z-index: -1; object-fit: contain;  }
.fork { width: 40vh; height: 100vh; position: fixed; top: 0; left: 48%; bottom: 0; margin: auto; fill: none; stroke: #E60012; stroke-width: 2; z-index: -1; object-fit: contain; }

@media screen and (max-width: 900px) {
  .knife { width: 28vh; height: 44vh; }
  .fork { width: 22vh; height: 60vh; }
}

.conts-event { padding-top: 15vw;  }
.lead-title { margin-bottom: 1em; }
.conts-event .note { font-size: .5em; margin-top: 4em; }

.title-dashline {  display: flex; align-items: center; white-space: nowrap; margin-bottom: 1em; }
.title-dashline span { white-space: nowrap; flex-shrink: 0; }
.title-dashline::before,
.title-dashline::after { content: '//////////////////////////////////'; width: 100%; height: 1em;  display: block; flex-shrink: 1; overflow: hidden; line-height: 1;  }
.title-dashline::before { margin-right: .5em; }
.title-dashline::after { margin-left: .5em; }


.profile { margin-top: 7vw; text-align: justify; }
.profile .head { display: flex; margin-bottom: 1em;  align-items: center; }
.profile .name { white-space: nowrap; }
.profile .head .photo { border-radius: 50%; border: 1px solid currentColor; width: 2.5rem; height: auto; margin-left: .5em;  }
.profile .text{ font-size: .8em; }
.profile .site { margin-top: 1em; text-decoration: underline; display: inline-block; font-size: .8em; }

.-wrap { padding-top: 1rem; }
.deadpeople { width: 13em; margin: 2em auto; position: relative;  text-align: center; }
.deadpeople img { width: 100%; }


.conts-gallery { border-top: 1px dashed; padding-top: 7vw; margin-top: 7vw; text-align: center; }
.conts-gallery .check { margin: 2em 0; }
.conts-gallery .btn { width: 10em; height: 4em; text-align: center; display: block; margin:  1em auto; border-radius: 50%; border: 2px solid; line-height: 4; }

.conts-support { padding: 10vw 0 12vw; text-align: center; }
.ph-d-ahue { background: #72368C; color: #FFF; width: 25%; aspect-ratio: 1 / 1.5; display: flex; align-items: center; justify-content: center; font-size: .5rem; margin: 6vw auto 0; }

.gallery-schedule { display: flex; }
.gallery-schedule > li { width: 50%; }
.gallery-schedule .name { width: 4.5em; height: 2.5em; text-align: center; line-height: 2.5; border-radius: 50%; border: 1px solid; margin: .5em 0; }


.footer { padding-bottom: 15vw; }
.copyright { text-align: center; }