@charset "UTF-8";

html{
scroll-behavior:smooth;
}

body{
font-size:100%;
margin:0%;
padding:0%;
}

.insertimg{
position:relative;
width:100%;
aspect-ratio:16/5;
margin:0% 0% 0% 0%;
object-fit:cover;
object-position:center center;
overflow:hidden;
}

.insertimg img{
width:100%;
vertical-align:top;
opacity:0.9;
}

.insertmargin{
margin:6% 0% 0% 0%;
}

.logo{
position:relative;
width:100%;
aspect-ratio:16/5;
margin:0% 0% 0% 0%;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
}

.logo img{
width:70%;
vertical-align:bottom;
}

.indexctr{
width:96%;
height:auto;
margin:0% 2% 0% 2%;
display:flex;
flex-diretion:row;
flex-wrap:wrap;
justify-content:space-around;
align-items:flex-start; 
align-content:flex-start;
}

.indexsection{
position:relative;
width:48%;
height:auto;
margin:1% 1% 1% 1%;
white-space: nowrap;
padding:1% 0% 1% 0%;
font-family: 'Zen Kaku Gothic New', sans-serif;
border-radius:8px;
border: 1px solid #c0c0c0;
box-sizing: border-box;
background-color:rgba(240,240,240,0.8);
box-shadow: 1px 1px 2px #e6e6e6;
}

.indexname{
width:80%;
height:auto;
padding:0% 10% 0% 10%;
text-align:center;
font-size:3.2vw;
font-weight:bolder;
text-shadow: 1px 1px 2px silver;
}

.indexinfo{
width:80%;
height:auto;
padding:0% 10% 0% 10%;
text-align:center;
font-size:2vw;
}



.indexlink{
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:11;
}





.section{
position:relative;
width:90%;
height:auto;
overflow:hidden;
margin:10% 5% 0% 5%;
padding:4% 0% 4% 0%;
z-index:1;
}


.section:before {
position:absolute;
content:"";
width:98%;
height:20%;
display:block;
bottom:20%;
left:1%;
background-color:rgba(246,244,244,0.8);
 box-shadow: 0px 0px 3px 1px rgba(230,230,230,0.5);
z-index:2;
}

.sectionname{
position:relative;
width:100%;
height:auto;
margin:0% 0% 0% 0%;
padding:0% 0% 0% 0%;
color:#696969;
font-family: 'Zen Kaku Gothic New', sans-serif;
font-size:0vw;
z-index:5;
}


.sectiontitle{
position:relative;
width:45%;
hight:auto;
padding:0% 0% 0% 5%;
display:inline-block;
font-size:4vw;
font-weight:bolder;
text-align:center;
text-shadow: 2px 2px 2px #dcdcdc;
z-index:6;
}

.sectiondetail{
position:relative;
width:45%;
hight:auto;
padding:0% 5% 0% 0%;
display:inline-block;
font-size:2vw;
text-align:center;
z-index:6;
}

.sectionbg{
position:absolute;
height:100%;
overflow:hidden;
z-index:3;
}

.sectionbg:before {
position:absolute;
content:"";
width:45%;
height:20%;
display:block;
top:31%;
left:5%;
border-radius:0% 100% 0% 100% / 0% 0% 0% 100%;
transform: rotate(-10deg);
transform-origin:bottom right; 
border-bottom: 1px solid silver;
box-sizing: border-box;
z-index:4;
}

.sectionbg:after {
position:absolute;
content:"";
width:45%;
height:20%;
display:block;
top:29%;
left:5%;
border-radius:0% 100% 0% 100% / 0% 0% 0% 100%;
transform: rotate(-190deg);
transform-origin:bottom right; 
border-bottom: 1px solid silver;
box-sizing: border-box;
z-index:4;
}

.sectionout{
left:100%;
top:-50%;
}

.sectionin{
animation-name:sectionanime;
animation-fill-mode:forwards;
animation-duration:0.5s;
animation-iteration-count:1;
animation-timing-function:ease-out;
animation-delay:1.2s
animation-direction:normal;
}

@keyframes sectionanime{
0%{
width:0%;
height:0%;
left:100%;
top:0%;
}
100%{
width:100%;
height:100%;
left:0%;
top:0%;
}
}

.sectionline{
position:absolute;
width:1px;
height:80%;
top:10%;
left:50%;
overflow:hidden;
background-color:silver;
transform: rotate(20deg);
transform-origin:center center;
z-index:4;
}

.eventflex{
width:100%;
height:auto;
margin:0% 0% 0% 0%;
display:flex;
flex-diretion:columm;
flex-wrap:wrap;
justify-content:center;
z-index:1;
}

.eventwrapper{
position:relative;
width:90%;
margin:6% 5% 0% 5%;
font-family: 'Zen Kaku Gothic New', sans-serif;
aspect-ratio:16/10;
display:flex;
flex-diretion:row;
flex-wrap:nowrap;
justify-content:flex-start;
align-items:center;
border:1px solid #999999;
box-sizing:border-box;
border-radius:8px;
box-shadow:1px 1px 2px #e6e6e6;
z-index:2;
}

.eventimg{
width:35.5%;
height:94%;
margin:0% 0% 0% 2%;
border-radius:8px;
box-shadow:2px 0px 4px silver;
z-index:3;
}

.eventimg img{
width:100%;
height:100%;
object-fit:cover;
opacity:0.9;
z-index:4;
}

.eventinformation{
width:62.5%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
z-index:3;
}

.eventdetail{
width:100%;
height:auto;
margin:8% 0% 0% 0%;
z-index:4;
}

.eventschedule{
width:92%;
height:auto;
margin:0% 8% 0% 0%;
text-align:right;
font-size:3vw;
z-index:5;
}

.eventforename{
position:relative;
width:84%;
height:auto;
margin:0% 8% 0% 8%;
padding:3% 0% 3% 0%;
z-index:6;
font-size:4vw;
font-weight:bolder;
text-shadow: 2px 2px 2px #dcdcdc;
overflow:hidden;
white-space:nowrap;
text-align:center;
z-index:5;
background: linear-gradient(transparent 50%, rgba(240,240,240,0.8) 80%, transparent 80%);
}

.eventguide{
position:relative;
width:84%;
margin:0% 8% 0% 8%;
font-size:3vw;
text-align:left;
height: calc( 1.2em * 2);
line-height: 1.2;
overflow:hidden;
z-index:5;
word-break:break-all;
}

.eventguide:before {
position:absolute;
content:"";
width:40%;
height:50%;
display:inline-block;
top:50%;
right:0%;
background:linear-gradient(to right,rgba(255,255,255,0.0),rgba(255,255,255,1.0));
z-index:6;
}

.eventandmore{
width:92%;
height:auto;
margin:0% 8% 0% 0%;
text-align:right;
z-index:5;
}

.eventandmorebtn{
position:relative;
 display: inline-block;
height:auto;
font-size:2vw;
margin:3% 0% 0% 0%;
padding:1% 3% 1% 3%;
border-radius:4px;
border: 1px solid #E6E6E6;
box-sizing: border-box;
background-color:rgba(240,240,240,0.8);
box-shadow: 1px 1px 2px #e6e6e6;
white-space: nowrap;
z-index:6;
}

.btnlink{
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:7;
}

.eventtag{
position:absolute;
display:inline-block;
background-color:rgba(240,240,240,0.9);
top:6%;
left:0%;
padding:2% 5% 2% 5%;
font-size:3vw;
z-index:8;
}







.linkpage{
width:90%;
height:auto;
margin:4% 5% 0% 5%;
text-align:right;
}

.linkpagebtn{
position:relative;
display:inline-block;
height:auto;
margin:0% 0% 0% 0%;
padding:2% 5% 2% 5%;
background-color:rgba(224,230,236,0.8);
border-radius:10px;
font-family: 'Zen Kaku Gothic New', sans-serif;
font-size:2vw;
box-shadow: 2px 2px 3px #c0c0c0;
}

.story{
position:relative;
width:80%;
height:auto;
margin:6% 5% 0% 5%;
padding:0% 5% 6% 5%;
font-family: 'Zen Kaku Gothic New', sans-serif;
font-size:3.4vw;
z-index:1;
}

.story:before {
position:absolute;
content:"";
width:60%;
height:1px;
display:inline-block;
bottom:0%;
right:0%;
background-color:silver;
z-index:2;
}

.bldgctr{
position:relative;
width:100%;
margin:15% 0% 0% 0%;
height:auto;
z-index:1;
}

.bldgbg01:before {
position:absolute;
content:"";
width:75%;
height:90%;
display:inline-block;
top:5%;
right:0%;
background-color:rgba(246,244,244,0.8);
z-index:2;
}

.bldgbg02:before {
position:absolute;
content:"";
width:75%;
height:90%;
display:inline-block;
top:5%;
left:0%;
background-color:rgba(246,244,244,0.8);
z-index:2;
}

.message{
position:relative;
width:100%;
height:auto;
font-family: 'Zen Kaku Gothic New', sans-serif;
z-index:3;
}

.messageanime{
position:relative;
width:100%;
height:auto;
animation-name:fadeUpAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
font-family: 'Zen Kaku Gothic New', sans-serif;
z-index:3;
}

@keyframes fadeUpAnime{
0%{
opacity:0;
transform:translateY(10px);
}
100%{
opacity:1;
transform: translateY(0);
}
}

.msgjapanese{
width:76%;
height:auto;
margin:0% 12% 0% 12%;
font-size:4vw;
line-height:1.4em;
letter-spacing: 0.05em;
font-weight:bolder;
}

.messageleft{
text-align:left;
}

.messageright{
text-align:right;
}

.msgtext{
width:86%;
height:auto;
margin:2% 7% 0% 7%;
font-size:3vw;
text-align:left;
line-height:1.4em;
letter-spacing: 0.03em;
}

.messagectr{
position:relative;
width:100%;
height:auto;
z-index:5;
}

.alphabet{
width:100%;
height:auto;
background-color:white;
padding:0% 0% 2% 0%;
font-family: 'Zen Kaku Gothic New', sans-serif;
font-weight:bolder;
color:rgba(205,200,200,1.0);
display:flex;
flex-diretion: row;
flex-wrap:nowrap;
justify-content:center;
align-items: center;
}

.alphabetleft{
diplay:inline-block;
font-size:3.5vw;
padding:0% 4% 0% 0%;
}

.alphabetright{
diplay:inline-block;
font-size:3vw;
}




.bldgimgctr{
position:relative;
width:90%;
height:auto;
margin:6% 5% 0% 5%;
z-index:6;
}

.bldgimgctr:before{
content:"";
display:block;
padding-top:80%;
}

.bldgimg{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
}

.bldgimgup{
position:absolute;
height:60%;
top:0.5%;
left:0%;
overflow:hidden;
}

.bldgimgup img{
width:100%
height:100%;
}

.bldgimgunder{
position:absolute;
height:38%;
bottom:0%;
left:0%;
background-color:silver;
overflow:hidden;
}

.bldgimgunder img{
position:absolute;
height:100%;
}

.is-target{
width:0%;
z-index:7;
}

.is-animation{
animation: wide 1s linear;
animation-delay:0s;
animation-fill-mode: forwards;
z-index:8;
}

@keyframes wide{
0%{
width:0%;
}
100%{
width:100%;
}
}


.building{
position:relative;
width:90%;
height:auto;
margin:6% 5% 0% 5%;
display:flex;
flex-diretion:row;
flex-wrap:nowrap;
justify-content:space-around;
align-items: center;
z-index:8;
}

.numberctr{
position:relative;
width:30%;
z-index:4;
}

.numberctr:before {
content:"";
display:block;
padding-top:100%;
}

.number{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
overflow:hidden;
background-color:rgba(255,255,255,0.8);
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
border:thin solid #696969;
 box-sizing: border-box;
font-weight:bolder;
}

.bldginfo{
width:100%;
height:auto;
font-family:'Zen Kaku Gothic New', sans-serif;
color:#696969;
}

.japanese{
width:100%;
height:auto;
font-size:3vw;
text-align:center;
}

.direction{
width:100%;
height:auto;
font-size:2vw;
text-align:center;
}

.names{
position:relative;
width:65%;
height:calc( 1.4em * 4);
line-height:1.4;
padding:0% 0% 2% 0%;
font-family: 'Zen Kaku Gothic New', sans-serif;
font-size:3vw;
color:#696969;
text-align:left;
z-index:4;
font-weight:bolder;
}

.names:before {
position:absolute;
content:"";
width:100%;
height:1px;
display:inline-block;
bottom:0%;
right:0%;
background-color:#696969;
z-index:5;
}

.names:after{
position:absolute;
content:"";
width:5%;
height:1px;
display:inline-block;
bottom:0%;
right:0%;
background-color:#696969;
transform:rotate(45deg);
transform-origin:right bottom;
z-index:5;
}

.shopwrapper{
width:100%;
height;auto;
margin:6% 0% 0% 0%;
padding:12% 0% 12% 0%;
background-color:rgba(246,244,244,0.8);
font-family: 'Zen Kaku Gothic New', sans-serif;
}

.shopflexctr{
width:100%;
height:auto;
padding:1% 0% 1% 0%;
display:flex; 
flex-diretion:row;
flex-wrap:nowrap;
justify-content:flex-start;
align-items:stretch; 
}

.shopalphabet{
position:relative;
width:10%;
height:auto;
overflow:hidden;
font-size:4vw;
text-align:center;
color:#696969;
}

.shopalphabet:before{
position:absolute;
content:"";
width:1px;
height:100%;
display:inline-block;
top:0%;
right:0%;
background-color:#a9a9a9;
z-index:3;
}

.shopflexlist{
display:flex;
flex-diretion:row;
flex-wrap:wrap;
justify-content:flex-start; 
align-items:flex-start;
align-content:flex-start;
width:86%;
margin:0% 0% 0% 0%;
padding:0% 2% 0% 2%;
}

.shopeachbox{
width:calc(100% / 3);
margin:0% 0% 0% 0%;
padding:2% 0% 2% 0%;
height:auto;
}

.shopgenre{
width:96%;
padding:0% 0% 2% 4%;
font-size:1.8vw;
}

.shoplogoctr{
position:relative;
width:96%;
margin:0% 2% 0% 2%;
}

.shoplogoctr:before{
content:"";
display:block;
padding-top:80%;
}

.shoplogoimg{
position:absolute;
overflow:hidden;
top:0;
left:0;
bottom:0;
right:0;
border: thin solid silver;
box-sizing:border-box;
background-color:rgba(255,255,255,0.8);
display:flex;
justify-content:center;
align-items:center;
box-shadow:1px 1px 2px #e6e6e6;
}

.shoplogonarrow img{
width:50%;
vertical-align:bottom;
}

.shoplogowide img{
width:65%;
vertical-align:bottom;
}

.shoplogoportrait img{
width:40%;
vertical-align:bottom;
}



.facilityinformation{
width:100%;
height:auto;
margin:6% 0% 0% 0%;
}

.map{
width:80%;
height:auto;
margin:2% 10% 0% 10%;
background-color:#d3d3d3;
}

.map img{
width:100%;
vertical-align:bottom;
}

.address{
width:80%;
margin:4% 10% 0% 10%;
height:auto;
text-align:right;
white-space:nowrap;
}

.addressname{
width:100%;
height:auto;
font-family: 'Zen Kaku Gothic New', sans-serif;
font-size:3.4vw;
text-align:initial;
}

.addressdetail{
width:100%;
height:auto;
font-family: 'Zen Kaku Gothic New', sans-serif;
font-size:3vw;
text-align:initial;
}

.addressgoogle{
position:relative;
display:inline-block;
height:auto;
margin:2% 0% 0% 0%;
padding:2% 5% 2% 5%;
background-color:rgba(224,230,236,0.8);
border-radius:10px;
font-family: 'Zen Kaku Gothic New', sans-serif;
font-size:2vw;
box-shadow: 2px 2px 3px #c0c0c0;
}

.landlord{
width:100%;
height:auto;
margin:6% 0% 0% 0%;
}

.landlordname{
width:100%;
height:auto;
font-family: 'Zen Kaku Gothic New', sans-serif;
font-size:3vw;
text-align:center;
}

.landloadlarger{
font-size:5vw;
}

.landlordlogo{
position:relative;
width:80%;
height:auto;
margin:2% 10% 0% 10%;
background-color:white;
border: 1px solid silver;
box-sizing: border-box;
box-shadow: 1px 1px 2px #e6e6e6;
}

.landlordlogo img{
width:60%;
padding:5% 20% 5% 20%;
vertical-align:bottom;
}

.footer{
position:relative;
width:100%;
height:auto;
margin:6% 0% 0% 0%;
padding:6% 0% 8% 0%;
text-align:center;
font-family: 'Zen Kaku Gothic New', sans-serif;
font-size:2.8vw;
white-space:nowrap;
background-color:rgba(246,244,244,0.8);
}

.fixed{
position:fixed;
display:inline-block;
padding:2% 5% 2% 5%;
background-color:rgba(250,250,250,1.0);
bottom:5%;
right:5%;
font-family: 'Zen Kaku Gothic New', sans-serif;
font-size:3vw;
font-weight:bold;
border:thin solid black;
box-sizing:border-box;
border-radius:10px;
z-index:20;
white-space:nowrap;
}

.fixedbtn{
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:21;
}


a{
text-decoration:none;
}

a:link, a:visited, a:hover, a:active{
color:black;
}