@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Averia+Serif+Libre:400,700|Noto+Sans+JP:100,400,500,700&subset=japanese');
body {
  background: #000;
}
h2 {
  font-family: "balboa-condensed";
  font-size: 20vw;
}



#load {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background: #000;
}
#wrapper {
  display: none;
}
.sk-cube-grid {
  width: 100px;
  height: 100px;
  margin: auto;
}
.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #333;
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}
.sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}
@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}
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, font, 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 {

  border: 0;
  margin: 0;
  padding: 0;
}
img {
  vertical-align: bottom;
}

h1, h2, h3, h4, h5, h6, th {
  font-weight: normal;
}
ol, ul {
  list-style: none;
}
blockquote {
  quotes: none;
}
blockquote:before, blockquote:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a img {
  border: none;
}
.clear:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.clear {
  min-height: 1px;
}
* html .clear {
  height: 1px; /*\*/ /*/height: auto;overflow: hidden;/**/
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
address {
  font-style: normal;
}
hr {
  margin: 0;
}
html, body {
  height: 100%;
}
body, input, textarea {
  
  font-size: 1rem;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
}
a {
  text-decoration: none;
}
a:link, a:visited {
  color: inherit;
}
html {
  position: relative;
  height: auto !important;
  height: 100%;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}


.btn-feat {
  position: fixed;
  width: auto;
  height: auto;
  right: 20px;
  top: 20px;
  z-index: 99999;
}
.btn-feat li {
  margin-bottom: 5px;
}






.flexslider {
  position: relative;
  z-index: 0;
  margin-bottom: 0;
  border: none;
  overflow: hidden;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: ''none;
  -o-box-shadow: ''none;
  box-shadow: ''none;
}
.flexslider:after {
  content: "";
  position: absolute;
  z-index: 2;
  display: block;
  width: 368px;
  height: 279px;
  top: calc(50% - 140px);
  left: calc(50% - 184px);
  background: url("../img/logo.png") no-repeat 50% 50%;
  background-size: cover;
}
.flexslider img {
  max-height: 800px;
  object-fit: cover;
}



.fa-brands {
  font-size:max(4vw,2em);
	text-shadow:#000 10 0 10px;
}





#about .lead + .lead, #access .lead + .lead {
  margin-top: 1em;
	line-height: 5rem;
}



.inner{margin: 0 10%;}



#header {
  width: 100%;
  height: 110vh;
  overflow-x: hidden; /*はみ出しているところを隠す*/
  overflow-x: clip; /*はみ出しているところを隠す*/
}
.background {
  position: relative;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: url(http://shimbashi-hachi.com/wp-content/uploads/2022/09/logo2.svg) center no-repeat, url(http://shimbashi-hachi.com/wp-content/uploads/2022/09/background.svg) center no-repeat #000;
}

.bg01 {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow-x: hidden; /*はみ出しているところを隠す*/
  overflow-x: clip; /*はみ出しているところを隠す*/
  transform: skewY(10deg);
  background-repeat: no-repeat;
  background-position: top center;
  background-image: url(http://shimbashi-hachi.com/images/gallery/01h.webp);
	 background-size:cover;
  z-index: 3;	
	margin-top:0vh;
}
.bg02 {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow-x: hidden; /*はみ出しているところを隠す*/
  overflow-x: clip; /*はみ出しているところを隠す*/
  transform: skewY(10deg);
  background-repeat: no-repeat;
  background-position: top right;
  background-image: url(http://shimbashi-hachi.com/images/gallery/02h.webp);
	 background-size:cover;
  z-index: 5;
	margin-top:0vh;;
}


@media (max-width:415px) {
  .bg01 {
    background-image: url(http://shimbashi-hachi.com/images/gallery/01v.webp);
    background-position: center center;
    height: 100vh;
  }
  .bg02 {
    background-image: url(http://shimbashi-hachi.com/images/gallery/02v.webp);
    background-position: center center;
    height: 100vh;
  }
	.telephone{
		position: absolute;
		bottom:30px;
		height: :30px;
		width:90%;
		background-color: #FFFFFF;
		color: :#000000;
		border-radius: 5px 5px 0 0 ;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size:16px;
	}
}
#about {
  width: 100%;
  height: auto;
  min-height: 600px;
  background: #FF0;
	color:#333;
  position: relative;
	margin-top:10vh;
	padding-bottom:10vh;
  /*clip-path: polygon(0 5vh, 100% 0%, 100% 100%, 0 100%);*/
 transform: skewY(-10deg);
  z-index: 2;
	background-image:url("http://shimbashi-hachi.com/wp-content/uploads/2022/12/pattern.svg");
	background-size: 10%;
}
#about .inner {
  text-align: center;
	position: relative;
	top: 30px;
}
#about .inner h2 {
  letter-spacing: 0.1em;
  margin: 30px 0;
	text-shadow: #FFF 1vw 1vw;
}

#about .button{
	border-radius:30px;background-color:#000;color:#FFF;margin:20px auto 50px auto; padding:10px;width:34%;min-width:200px; display: block;cursor: pointer;
}
#about .button:hover{
	background-color:#FFF;color:#000;
}

#access {
  width: 100%;
  height: 150vh;
  min-height: 600px;
  position: relative;
  margin-top:-10vh;
  background: #333;
  color: #000;
  transform: skewY(-10deg);
  z-index: 4;	
	background-image:url("http://shimbashi-hachi.com/wp-content/uploads/2022/12/pattern2.svg");
	background-size: 10%;
}
#access .inner {
	text-align: center;
  position: relative;
  top: 30px;
}

#access .inner p{
color:#FFF;
}

#access .inner h2 {
  letter-spacing: 0.1em;
    margin: 30px 0;
	text-shadow: #FF0 1vw 1vw;
}

#access .button{
	border-radius:30px;background-color:#FFF;color:#000;margin:20px auto 50px auto; padding:10px;width:34%;min-width:200px; display: block;cursor: pointer;
}
#access .button:hover{
	background-color:#000;color:#FFF;
}


#gallery {
  width: 100%;
  height: auto;
  min-height: 600px;
  background: #FF0;
	color:#333;
  position: relative;
	margin-top:-10vh;
	padding-bottom:70vh;
  /*clip-path: polygon(0 5vh, 100% 0%, 100% 100%, 0 100%);*/
 transform: skewY(-10deg);
  z-index:5;
	background-image:url("http://shimbashi-hachi.com/wp-content/uploads/2022/12/pattern.svg");
	background-size: 10%;
}
#gallery .inner {
  text-align: center;
	position: relative;
	top: 30px;
}
#gallery .inner h2 {
  letter-spacing: 0.1em;
  margin: 30px 0;
	text-shadow: #FFF 1vw 1vw;
}

#footer {
  width: 100%;
  height: 110vh;
  position: relative;
  background: #000;
  top: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 1;
}
#footer .inner {
  text-align: center;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
	flex-flow: column;
}
#footer .inner .btn {
	width: 15vw;  
  min-width: 150px;
  height: 15vw;	
  min-height: 150px;
  background-image: url(http://shimbashi-hachi.com/wp-content/uploads/2023/01/Hachi_Logo.png);
	background-size: contain;
background-repeat: no-repeat;
	background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
	-webkit-transition: 2s ;
	transition: 2s ;
}

#footer .inner .btn:hover{
	background-image: url(http://shimbashi-hachi.com/wp-content/uploads/2023/01/Hachi_Logo2.png);
  }










.fade {
  opacity: 0;
  transform: translate(0, 0);
  transition: all 1.5s;
}
.fadein {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}
.fadeout {
  opacity: 0 !important;
}
.slide {
  opacity: 0;
  transform: translate(0, 0);
  transition: all 0.5s;
	transition-delay: 0.2s;
	transition-timing-function: ease-in-out;
}
.slide-left {
  transform: translate(-100vw, 0);
}
.slide-right {
  transform: translate(150px, 0);
}
.slide-up {
  transform: translate(0, -150px);
}
.slide-bottom {
  transform: translate(0, 150px);
}
.slidein {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}
.slideout {
  opacity: 0 !important;
}

.cont{display: flex; justify-content: center;align-items: center;margin-top: 5%; width:100%;flex-wrap: wrap;}

.info{margin: 5% 1%; width:30%;height:33vw;display: block;animation: 3s info infinite;background-size: contain;background-repeat: no-repeat;}

.price{margin: -2% 1%; width:100%; height:33vw;display: block;animation: 3s info infinite;background-size: contain;background-repeat: no-repeat;background-image: url("http://shimbashi-hachi.com/wp-content/uploads/2023/10/price20250825.svg")}

.livedam{background-image: url("https://shimbashi-hachi.com/wp-content/uploads/2022/12/livedam.svg");}

.bose{background-image: url("https://shimbashi-hachi.com/wp-content/uploads/2022/12/bose.svg");}

.monitor{background-image: url("https://shimbashi-hachi.com/wp-content/uploads/2022/12/monitor.svg")}

.cont-gallery{display:block;margin-top: 5%;}

.cont-gallery .left{width:57.5%;height:57.5vw;}
.cont-gallery .right{width:57.5%;height:57.5vw;margin:-40vw 0 -40vw 36vw;}

.gallery{margin: 5% 1% 5% 0%; display: block;cursor: pointer;}

.gallery img{transition: transform .6s ease;}
.gallery:hover img{transform: scale(1.1);}


.gallery-bg{width:100%;height:45vw;clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);}



@media (max-width:415px) {
	.cont{display:block;margin-top: 5%;}

.cont .left{width:57.5%;height:57.5vw;margin-left:-3vw;}
.cont .right{width:57.5%;height:57.5vw;margin:-40vw 0 -40vw 35vw;}
	.gallery{margin: 5% 1% 5% 0%;display: block;}
	.gallery-bg{width:100%;height:44vw;clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);}
}

@keyframes info{
0% { transform: skewX(-5deg); }
  1% { transform: skewY(5deg);transform: scale(1.1,1.1); }
  2% { transform: skewX(-5deg);transform: scale(1.2,1.1); }
  3% { transform: skewY(5deg);transform: scale(1.1,1.2); }
  4% { transform: skewX(0deg);transform: scale(1.1,1.1); }
  100% { transform: skewX(0deg); }   
}