@charset "utf-8";

div.container {
max-width: 700px;
margin: 0px auto;
}

div.parallax {
width: 100%;
max-width: 700px;
height: 100vh;
position: fixed;
top: 0px;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
background: rgb(0, 0, 0);
z-index: -1
}

video.top_movie{
width: 100%;
height: 100%;
object-fit: cover
}

header.header {
position: relative;
height: 100vh;
background:
linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.2) 50%),
linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0.2) 50%);
z-index: 2;
text-align: center;
}

div.header_inner{
width: 100%;
position: absolute;
top:47%;
transform: translateY(-50%)
}

article.header_inner {
  width: 100%;
  margin: 0 auto 40px auto;
  padding: 5px 0;
  overflow: hidden;
  position: relative;
  background: linear-gradient(
    to right,
    #e0c88a,  /* やや濃いシャンパンゴールド */
    #f0d98c,  /* 少し黄色寄り */
    #fff2b2,  /* 明るめの金 */
    #f0d98c,
    #e0c88a
  );
  
  
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
}

h3.hours {
color: #000;
margin: 0px auto;
line-height: 1.5;
font-size: 14px;
display: inline-block;
white-space: nowrap;
animation: marquee 20s linear infinite;
}

h3.hours a{

margin: 0px 5px;
color: #000;
}

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

img.record{
width: 84%;
max-width: 500px;
margin: 0px auto;
}

img.header_inner_logo{
width: 96%;
max-width: 600px;
margin: 0px auto 20px auto;
}

h1.header{
font-size:15px;
margin-bottom: 40px
}

article.section-wrapper {
width: max-content;
position: relative;
margin: 0px auto 20px auto;
font-size: 18px;
line-height: 1;
text-align: center;
padding: 0px 10px
}

.event-top {
clip-path: inset(0 0 50% 0); 
position: relative;
z-index: 2;
}

.event-bottom {
clip-path: inset(50% 0 0 0); 
transform: translateX(3px);
position: relative;
z-index: 2;
}

h4.flee{
font-size:20px;
margin-bottom: 10px;
}

h3.flee{
font-size:34px;
margin-bottom: 15px
}

h3.flee {
  font-size: 34px;
  margin-bottom: 15px;
  animation: fadeBlink 1.5s ease-in-out infinite;
}

@keyframes fadeBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

h5.flee{
width: max-content;
font-size: 16px;
padding: 8px 15px;
border-radius: 3px;
margin: 0px auto;
background: #f97cfa;
margin-bottom: 30px
}

h3.flee strong{
font-size:52px;
color: #f97cfa;
position: relative;
top:3px;
margin: 0px 2px
}

.divider {
display: block;
height: 1px;
background: #666;
width: 100%;
position: relative;
margin: -12px 0;
z-index: 1;
}

h3.header{
font-size:12px;
text-align: center;
line-height: 1.6;
margin-bottom: 30px
}

div.small_tab{
width: 100%;
padding: 0px 3%;
display: flex;
align-items: center;
color: #fff;
}

div.scroll {
margin-inline: auto;
position: absolute;
width: fit-content;
margin-bottom: 20px;
bottom: 0px;
left:50%;
transform: translateX(-50%)
}

div.scroll::before {
animation: 2s scroll infinite;
background: #fff;
border-radius: 3px;
content: "";
height: 10px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 2px;
}

div.scroll::after {
border: 1px solid #fff;
border-radius: 20px;
content: "";
display: block;
height: 50px;
margin-inline: auto;
margin-top: 10px;
width: 30px;
}

@keyframes scroll {
0% {
opacity: 0;
top: 40%;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
top: 70%;
}
}

/*--------------------nav--------------------*/

nav.nav{
width: 100%;
max-width: 700px;
position: fixed;
top:0px;
left:50%;
transform: translateX(-50%);
z-index: 11;
background: rgba(0,0,0,0.8);
padding-bottom: 10px
}

ul.nav{
width: 90%;
margin: 0px auto;
display: flex;
align-items: center;
justify-content: space-between
}

ul.nav li{
width: 50%;
display: flex;
align-items: center;
padding: 20px 0px 0px 0px
}

a.nav{
width: max-content;
padding: 0px 28px;
height: 38px;
line-height: 34px;
font-size:14px;
font-family: "Murecho", sans-serif;
font-weight: 500;
font-style: normal;
color: #fff;
border:solid 1px #fff;
border-radius: 19px;
margin-right: 12px
}

p.nav{
font-size:14px;
line-height: 1.2;
}

li.nav_right{
justify-content: right
}

p.menu{
font-size:15px;
font-family: "Murecho", sans-serif;
font-weight: 600;
font-style: normal;
margin-right: 20px
}

/*--------------------menu-trigger--------------------*/

a.menu-trigger,
a.menu-trigger span {
display: inline-block;
transition: all .4s;
position: relative;
}

a.menu-trigger {
width: 40px;
height: 20px;
}

a.menu-trigger span {
position: absolute;
right:0px;
width: 100%;
height: 1px;
background: #fff;
}

a.menu-trigger span:nth-of-type(1) {
top: 0;
}
a.menu-trigger span:nth-of-type(2) {
width: 48px;
top: 9px;
}
a.menu-trigger span:nth-of-type(3) {
bottom: 0;
}

a.menu-trigger.active span:nth-of-type(1) {
-webkit-transform: translateY(9px) rotate(-45deg);
transform: translateY(9px) rotate(-45deg);
}

a.menu-trigger.active span:nth-of-type(2) {
opacity: 0;
}

a.menu-trigger.active span:nth-of-type(3) {
-webkit-transform: translateY(-8px) rotate(45deg);
transform: translateY(-8px) rotate(45deg);
}

.menuIn {
animation-fill-mode: both;
animation-duration: 0.5s;
animation-name: slideInFromRight;
display: block !important;
position: fixed;
right: 0;
top: 0;
box-shadow: -4px 0 10px rgba(0,0,0,0.2);
z-index: 9;
}

@keyframes slideInFromRight {
0% {
transform: translateX(100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}

/*--------------------menu--------------------*/

menu.menu {
width: 100%;
height: 100%;
background: #000;
position: fixed;
top: 0;
right: 0;
z-index: 10;
transform: translateX(100%);
transition: transform 0.5s ease;
}

menu.menu.menuIn {
transform: translateX(0);
}

li.menu{
width: 100%;
position: absolute;
top:50%;
transform: translateY(-50%);
}

a.menu{
display: block;
background: #111 url(../img/icon/right.png) no-repeat center right 30px;
background-size: 12px;
border-bottom: solid 1px #444;
padding: 15px 0px 15px 25px;
color: #fff
}

a.menu_select{
text-decoration: underline;
color: #7ea5cb;
}

/*--------------------event--------------------*/

section#event{
padding: 30px 0px;
background: #000;
position: relative;
text-align: center
}

img.mama{
width: 90%;
margin: 0px auto 20px auto;
}

a.event_link{
width: 76%;
margin: 0px auto 20px auto;
background: #262e2e url(../img/icon/arrow_w.png) no-repeat center right 20px;
background-size: 30px;
height: 56px;
text-align: center;
border-radius: 28px;
display: flex;
align-items: center;
justify-content: center;
}

p.event{
position: relative;
top:-15px;
margin-bottom: 10px
}

h2.event_link{
font-size: 18px;
letter-spacing: 0.05em
}

h2.event_link i{
display: block;
font-size: 10px;
}

h3.event{
font-size: 18px;
margin-bottom: 15px
}

article.event_wrapper{
width: 80%;
margin: 0px auto 20px auto;
border-bottom: solid 1px #444;

}

a.event_banner{
display: block;
margin-bottom: 20px
}

/*--------------------welcom--------------------*/

section#welcom{
padding: 30px 0px;
position: relative;
text-align: center;
background:
linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.2) 50%),
linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0.2) 50%);
}

div.gallery{
width: 90%;
margin: 0px auto 20px auto;
display: flex;
align-items: start;
justify-content: space-between;
flex-wrap: wrap
}

a.gallery{
width: 31%;
aspect-ratio: 1 / 1;
margin-bottom: 10px
}

a.gallery img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center
}

a.banner{
width: 80%;
margin: 0px auto 20px auto;
display: block;
}

/*--------------------link--------------------*/

section#link{
padding: 30px 0px;
position: relative;
text-align: center;
background:url(../img/link/back.jpg) no-repeat center;
background-size: cover
}

/*--------------------footer nav--------------------*/

div.footer_nav{
width: 100%;
max-width: 700px;
position: fixed;
bottom:0px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: space-between;
background: #111;
z-index: 9;
padding: 10px 1% 15px 1%
}

a.footer_nav{
text-align: center;
}

a.nav_selected{
text-decoration: underline
}

img.footer_nav{
width: 28%;
max-width: 90px;
margin: 0px auto 5px auto;
}

h3.footer_nav{
color: #fff;
font-size:11px;
font-family: "Murecho", sans-serif;
font-weight: 400
}

h3.home{
color: #f97cfa
}

h3.bbs{
color: #e87c1b
}

h3.tel{
color: #51b36b
}

h3.x{
color: #6bedf9
}

h3.system{
color: #cd9bf8
}

/*--------------------footer--------------------*/

footer.footer{
position: relative;
padding: 30px 0px 80px 0px;
background:
linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.2) 50%),
linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0.2) 50%);
z-index: 1;
text-align: center;
}

img.footer_logo{
width: 40%;
margin: 0px auto 10px auto
}

h3.footer{
font-size:13px;
margin-bottom: 30px
}

h4.footer{
font-size:22px;
margin-bottom: 15px
}

iframe.google_map{
width: 100%;
height: 26vh;
margin-bottom: 15px
}

h5.footer{
font-size:16px;
margin-bottom: 15px
}

h6.footer{
font-size:12px;
line-height: 1.8;
margin-bottom: 30px
}

div.footer_link{
display: flex;
align-items: center;
gap: 20px;
justify-content: center;
margin-bottom: 30px
}

a.footer_link{
font-size:14px;
text-decoration: underline
}

p.copy{
font-size:13px
}