/* font-family: "source-han-sans-japanese", sans-serif; */
/* font-weight: 100 200 300 400 500 700 900; */
/* font-family: flood-std, sans-serif; */


html{
  scroll-behavior: smooth;
  overflow-x: hidden;
	margin: 0;
	height: 100%;
}

:root{
  --font-xxl:60px;
  --font-xl:40px;
  --font-l:30px;
  --font-m:20px;
  --font-s:16px;
  --font-xs:14px;
  --color-wh:#fefefe;
  --color-rd:#e50111;
	--color-bk:#111;
	--color-gr:#727171;
	--color-KRBbl:#5973E4;
}

body{	
  width: 100%;
	scroll-snap-type: y mandatory;
	overflow-y: scroll;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
	font-family: "source-han-sans-japanese", sans-serif;
  line-height: 1.6;
  color: var(--color-bk);
	background: var(--color-wh);
}

/* ===common==== */

a{
  text-decoration: none;
	color: var(--color-bk);
}

p{
  word-break: auto-phrase;
  overflow-wrap: break-word;
  line-break: strict;
	font-size: var(--font-s);
}

@media screen and (min-width:576px) {
	p{
		font-size: 16px;
	}
}

@media screen and (min-width:768px) {
	p{
		font-size: 18px;
	}
}

@media screen and (min-width:992px) {
	p{
		font-size: 20px;
	}
}

@media screen and (min-width:1200px) {
	p{
		font-size: 22px;
	}
}

@media screen and (min-width:1600px) {
	p{
		font-size: 26px;
	}
}

ul{
  margin: 0;
  padding: 0;
}

li{
  list-style: none;
}

.wn{
	white-space: nowrap;
}

.larger{
	font-size: larger;
}

.smaller{
	font-size: smaller;
}

section{
	width: 100%;
	height: 100vh;
	position: relative;
	scroll-snap-align: start;
	overflow: hidden;
}

.mark_wh{
	padding: 0;
background: rgba(255, 255, 255, .5) !important;
}

.mark_bk{
	color: #fff;
	padding: 0;
	background: rgba(0, 0, 0, .2) !important;
}

.IT,
.KAIRANBAN,
.INSTANTOUCH,
.SHOCKPROJECT,
.MIYAKOSHOCK,
.BAR{
	height: auto;
}

/* @media screen and (min-width:576px){ */
/* @media screen and (min-width:992px){
	.IT,
	.KAIRANBAN,
	.INSTANTOUCH,
	.SHOCKPROJECT,
	.MIYAKOSHOCK,
	.BAR{
		height: 100vh;
	}
} */

.section_title{
  color: var(--color-rd);
  background: var(--color-wh);
	z-index: 20;
	border: #000 solid 1px;
	box-shadow: 2px 2px 4px inset gray;
}

h1{
	padding: 10px;
	font-weight: 800;
	/* padding-left: 5.4em; */
	font-size: 24px;
	margin: 0;
}

h1>span{
	font-weight: 600;
	font-size: 16px;
	padding-right: .1em;
}

@media screen and (min-width:992px){
	h1{
		padding: 15px;
		/* padding-left: 5.4em; */
		font-size: 30px;
	}
	h1>span{
		font-size: 18px;
	}
	/* h1::before{
		bottom: 5%;
		left: 0;
		transform: translate(0,-50%);
		width: 6em;
	} */
	}

h2{
	font-size: 22px;
	font-weight: 800;
	margin: 1em 0;
}

.section_wrap{
	width: 95%;
	max-width: 1200px;
	margin: 0 auto;
	z-index: 15;
}

@media screen and (min-width:992px) {
	.section_wrap{
		margin: 0 0 0 3em;
	}
	h2{
		font-size: var(--font-xl);
	}
}

.shadow_bk{
	text-shadow: #000 0 0 5px;
}

.shadow_wh{
	text-shadow: #fff 0 0 5px;
}

.shadow_neon{
	animation: neontext infinite 2s;
}

.shadow_neon p:nth-child(1){
	animation: neontext infinite 3s;
}
.shadow_neon p:nth-child(2){
	animation: neontext infinite 4s;
}
.shadow_neon p:nth-child(3){
	animation: neontext infinite 5s;
}

.shadow_neon_h2{
	font-weight: 600;
	animation: neontext infinite 1.4s;
}

@keyframes neontext{
	0%{
		text-shadow: #fff 0 0 3px;
	}
	2%{
		text-shadow: #000 0 0 3px;
	}
	5%{
		text-shadow: #fff 0 0 2px;
	}
	10%{
		text-shadow: #000 0 0 3px;
	}
	82%{
		text-shadow: #fff 0 0 2px;
	}
}

.link_btn{
	position: relative;
	width: 300px;
	z-index: 30;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--font-m);
	font-weight: 900;
	text-shadow: none;
	cursor: pointer;
  overflow: hidden;
	box-shadow: 0 10px 20px -5px gray;
	padding: 47.5px 0;
	margin: 2em auto 16em;
}

.link_btn:before,
.link_btn:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.link_btn:before {
  transform: scale(1);
  transition: 0.3s ease transform;
  z-index: 1;
}

.link_btn:after {
	opacity: .5;
  z-index: 2;
}

.link_btn a {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
}

.link_btn a:before,
.link_btn a:after {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  text-align: center;
  transition: 0.3s ease all;
	padding: 19px 0;

	font-weight: 900;
	font-size: 22px;
  line-height: 2.6;
}

.link_btn a:before {
	opacity: 1;
  transform: scale(1);
}

.link_btn a:after {
	background: transparent;
	opacity: 0;
}

.link_btn:hover:before {
  transform: scale(1.3);
}

.link_btn:hover a:before {
  opacity: 0;
  transform: scale(4);
}

/* ITボタン */
.IT .link_btn{
	background: rgba(255, 255,	255, .8);
	border: solid var(--color-rd) 1px;
}
.IT .link_btn:before{
	background: url("../images/acretLOGObk.webp") center center / 60% no-repeat;
}
.IT .link_btn a:before{
	background: var(--color-rd);
  content: "アクレット ホームページへ";
	color: #fff;
}

/* KAIRANBANボタン */
.KAIRANBAN .link_btn{
	background: #fff;
	border: solid 1px var(--color-KRBbl);
}
.KAIRANBAN .link_btn:before{
	background: url("../images/KAIRANBAN_logo_BL.webp") center center / 65% no-repeat;
}
.KAIRANBAN .link_btn a:before{
	background: var(--color-KRBbl);
  content: "KAIRANBAN サイトへ";
	color: #fff;
}

/* INSTANTOUCHボタン */
.INSTANTOUCH .link_btn{
	background: #000;
	border: solid 1px #fff;
}
.INSTANTOUCH .link_btn:before{
	background: url("../images/INSTANTOUCH_LOGO_wh.webp") center 25% / 40% no-repeat;
}
.INSTANTOUCH .link_btn a:before{
	background:  rgba(0, 0, 0, .8);
  content: "INSTANTOUCH サイトへ";
	color: #fff;
}

/* 食区プロジェクトボタン */
.SHOCKPROJECT .link_btn{
	background: #000;
	border: solid 1px #fff;
}
.SHOCKPROJECT .link_btn:before{
	background: url("../images/SHOCKProject_logo.webp") center center / 60% no-repeat;
}
.SHOCKPROJECT .link_btn a:before{
	background:  rgba(0, 0, 0, .8);
  content: "食区プロジェクト! サイトへ";
	color: #fff;
}

/* 宮古食区ボタン */
.MIYAKOSHOCK .link_btn{
	background: #000;
	border: solid 1px #fff;
}
.MIYAKOSHOCK .link_btn:before{
	background: url("../images/MIYAKOSHOCK_logo.webp") center 55% / 23% no-repeat;
}
.MIYAKOSHOCK .link_btn a:before{
	background:  rgba(0, 0, 0, .8);
  content: "宮古食区 サイトへ";
	color: #fff;
}

/* BARボタン3つはBARsectionに */


@media screen and (min-width:576px){
.link_btn{
	margin: 3em 0 15em;
	/* height: 100px; */
}
}

.bk{
	color: var(--color-bk);
}

/* h1::before{
	content: "";
  position: absolute;
  bottom: 5%;
	left: 0;
	transform: translate(0,-50%);
	background: url(../images/acretLOGObk.webp) center / contain no-repeat;
	width: 6em;
	height: 1em;
} */


/* ===header(MENU)=== */

header{
	position: relative;
  width: 100%;
}

.mobile-toggle {
  z-index: 1000;
  position: fixed;
  top: 25px;
  right: 25px;
	border-radius: 50%;
}

.nav-container {
	z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
	transition: all .3s ease-in-out;
  overflow: hidden;
	background: var(--color-rd);
	pointer-events: none;
}
.nav-container.active {
  height: 100%;
	pointer-events: auto;
}
.nav-container.active .nav-links li {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.nav-container .nav-links {
  position: fixed;
  top: 50%;
  left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	max-width: 17em;
	opacity: 0;
  transition: opacity .2s ease-in-out, transform 0.2s ease-in-out;
}
.nav-container .nav-links li {
  font-weight: bold;
	white-space: nowrap;
  opacity: 0;
  transform: translate3d(-50px, 0, 0);
	transition: all .2s ease-in-out;
	padding: 0 .5em;
}
.nav-container .nav-links li a {
  display: block;
	text-align: left;
	color: var(--color-wh);
	font-size: var(--font-l);
	line-height: 2.2;
	transition: all .2s ease;
}

.nav-container.active .nav-links li a:hover{
	transform: scale(1.1) translate(.5em,0);
}

.nav-container .nav-links li::before{
	content: "";
  position: absolute;
  top: 10%;
	transform: translate(0,-50%);
	color: var(--color-wh);
	font-size: var(--font-s);
	display: inline-block;
}

.nav-container .nav-links li:nth-child(1):before{
	content: "メインビジネス";
}
.nav-container .nav-links li:nth-child(2):before{
	content: "電子回覧板システム";
}
.nav-container .nav-links li:nth-child(3):before{
	content: "即シェアカード";
}
.nav-container .nav-links li:nth-child(4):before{
	content: "屋台村・横丁運営支援事業";
}
.nav-container .nav-links li:nth-child(5):before{
	content: "屋台村運営";
}
.nav-container .nav-links li:nth-child(6):before{
	content: "現在3店舗!";
}

.nav-container .nav-links li:hover:after {
  opacity: 1;
}
.nav-container .nav-links li:nth-child(1) {
  transition-delay: .3s;
}
.nav-container .nav-links li:nth-child(2) {
  transition-delay: .4s;
}
.nav-container .nav-links li:nth-child(3) {
  transition-delay: .5s;
}
.nav-container .nav-links li:nth-child(4) {
  transition-delay: .6s;
}
.nav-container .nav-links li:nth-child(5) {
  transition-delay: .7s;
}
.nav-container .nav-links li:nth-child(6) {
  transition-delay: .8s;
}

.navBG{
	width: 70%;
	height: auto;
	max-width: 500px;
	position: absolute;
	bottom: 0;
	right: 0;
	opacity: .3;
	z-index: 1000;
}

@media screen and (min-width:992px) {
	.nav-container .nav-links {
		left: 55%;
	}
	.nav-container .nav-links li::before{
		top: 50%;
		left: -1%;
		transform: translate(-100%,-50%);
		font-size: var(--font-m);
	}
	.nav-container .nav-links li a {
		font-size: var(--font-l);
		line-height: 1.4;
	}
}

/* menu button */
.mobile-toggle{
	padding-top: 6px;
	border-radius: 0;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

button.hamburger {
	border: none;
	background: none;
	outline: none;
	cursor: pointer;
	width: 55px;
	transition: all .25s ease-in-out;
	padding: 1px 6px;
	
	& > span {
		width:   100%;
		height:  4px;
		display: block;
		margin:  .5rem 0;
		background: red;
	}
}

.burgericons {
	& > span {
		transition: all .35s ease-in-out;
	}
	position: relative;
	&:before {
		content:  "";
		position: absolute;
		width:    100%;
		height:   100%;
		top:      0;
		left:     0;
		border-radius: 50%;
		border: 5px solid #fff;
		box-shadow: 0 0 10px 5px #fff, inset 0 0 10px 5px #fff;
		transform: scale( 0 );
	}
	&.hamburger-active {
		&:before {
			animation: ripple-effect .4s 0s ease-in-out 1 forwards;
		}
		& > span { background: #fff; }
		& > span:nth-child( 2 ) { opacity: 0; transform: translateX( -100% ); }
		& > span:nth-child( 1 ) { transform: translateY( 12px ) rotateZ( 135deg ); }
		& > span:nth-child( 3 ) { transform: translateY( -12px ) rotateZ( -135deg ); }
	}
}

@keyframes ripple-effect {
	from { transform: scale( 0 ); opacity: 1; }
	to   { transform: scale( 1.1 ); opacity: 0; }
}

@keyframes late-rotate-45 {
	0% { 
		transform: translateY( 0px ) rotateZ( 0deg ); 
	}
	50% {
		transform: translateY( 12px ) rotateZ( 0deg );
	}
	100% { 
		transform: translateY( 12px ) rotateZ( -45deg ); 
	}
}

@keyframes late-rotate-45-mirrored {
	0% { 
		transform: translateY( 0px ) rotateZ( 0deg ); 
	}
	50% {
		transform: translateY( -12px ) rotateZ( 0deg );
	}
	100% { 
		transform: translateY( -12px ) rotateZ( 45deg ); 
	}
}

@media screen and (min-width:992px){
	.nav-container .nav-links{
		max-width: 24em;
	}
	.nav-container .nav-links li {
		line-height: 1;
	}
	.nav-container .nav-links li a {
		font-size: var(--font-xl)
	}
	.nav-container .nav-links li a span{
		font-size: var(--font-m);
	}
}

/* ===HERO SECTION=== */

.HERO{
	background: var(--color-bk);
}

/* zoomin */

.HERO_container {
	position: fixed;
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 200vh;
	overflow: hidden;
	pointer-events: none;
}

.HERO_mask{
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0%;
  left: 50%;
  transform: translate(-50%, 0) scale(1);
	transform-origin: center;
	background: url(../images/ACRETdiversified_sp.svg) center / cover no-repeat;
	z-index: 1;
}

@media screen and (min-width:992px) {
	.HERO_mask{
		background: url(../images/ACRETdiversified_pc.svg) center / cover no-repeat;
	}
}

/* rollingtext */

.rollingtext_container {
	width: 100%;
	height: 100vh;
	position: relative;
	visibility: hidden;
	filter: blur(10px);
	transition: filter 0.3s ease, visibility 0s 0.3s;
}

.rollingtext{
	margin: 0 auto;
  position: absolute;
  transform: translate(-50%, -50%);
  overflow: hidden;

	width: 16em;
  line-height: 6vw;
  height: 6vw;
	font-size: 6vw;
	color: var(--color-wh);

	top: 51%;
  left: 40%;
}
.rollingtext_visible{
  font-weight: 600;
  overflow: hidden;
  height: 6vw;
  margin-left: 2em;
}

.rollingtext_visible p{
  display: inline;
  float: left;
  margin: 0;
	font-size: 6vw;
}
.rollingtext_visible ul{
  margin-top: 0;
  padding-left: 6em;
  text-align: left;
  list-style: none;
  text-transform: capitalize;
  animation: rollingtext_visible_change 6s;
  animation-iteration-count: infinite;
}
.rollingtext_visible ul li{
  line-height: 6vw;
	white-space: nowrap;
}
@keyframes rollingtext_visible_opacity {
  0%, 100%{
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
}
@keyframes rollingtext_visible_change {
  0%, 9%, 100%{
    transform: translateY(0);
  }
  16%, 25%{
    transform: translateY(-17%);
  }
  32%, 42%{
    transform: translateY(-33%);
  }
  49%, 59%{
    transform: translateY(-51%);
  }
  66%, 76%{
    transform: translateY(-67%);
  }
  83%, 93%{
    transform: translateY(-84%);
  }
}

/* ===DUMMY SECTION=== */

.DUMMY{
	width: 100%;
	height: 50vh;
	background: var(--color-bk);
	z-index: -100;
}


/* ===IT SECTION=== */

.IT{
	position: relative;
	background: var(--color-wh);
}

.ACRETeam {
	background: url(../images/ACRET_symbol.svg) center top / contain no-repeat;
	margin: 0 auto;
	width: 95%;
	max-width: 400px;
	height: 50%;
	max-height: 350px;
	min-height: 350px;
	position: absolute;
	left: 0;
	right: 0;
	top: auto;
	bottom: -1px;
	padding: 10px;
	transition: all .2s ease-in-out;
	/* border: solid 3px green; */
}

.Team{
	width: 100%;
	height: auto;
	position: absolute;
	bottom: 0;
}

.ACRETeam .Team .mbr1,
.ACRETeam .Team .mbr2,
.ACRETeam .Team .mbr3,
.ACRETeam .Team .mbr4,
.ACRETeam .Team .mbr5,
.ACRETeam .Team .mbr6{
	position: absolute;
	height: auto;
	object-fit: contain;
	bottom: 0;
}

.ACRETeam .Team .mbr1 {
	z-index: 9;
	width: 34%;
	right: -6%;
}
.ACRETeam .Team .mbr2 {
	z-index: 8;
	width: 31%;
	right: 10%;
}
.ACRETeam .Team .mbr3 {
	z-index: 7;
	width: 31%;
	right: 30%;
}
.ACRETeam .Team .mbr4 {
	z-index: 6;
	width: 27%;
	right: 49%;
}
.ACRETeam .Team .mbr5 {
	z-index: 5;
	width: 26%;
	right: 67%;
}
.ACRETeam .Team .mbr6 {
	z-index: 4;
	width: 24%;
	right: 82%;
}
/*.ACRETeam .Team .mbr7 {
	z-index: 3;
	width: 22%;
	right: 80%;
} */

.animate__delay-01s {
	animation-delay: calc(var(--animate-delay) * .1);
}
.animate__delay-02s {
	animation-delay: calc(var(--animate-delay) * .2);
}
.animate__delay-03s {
	animation-delay: calc(var(--animate-delay) * .3);
}
.animate__delay-04s {
	animation-delay: calc(var(--animate-delay) * .4);
}
.animate__delay-05s {
	animation-delay: calc(var(--animate-delay) * .5);
}
.animate__delay-06s {
	animation-delay: calc(var(--animate-delay) * .6);
}

@media screen and (min-width:576px){
	.ACRETeam {
		max-width: 600px;
		height: 70%;
		max-height: 600px;
	}
}

@media screen and (min-width:768px){
	.ACRETeam {
		left: auto;
		right: 3%;
	}
}

@media screen and (min-width:1200px){
	.ACRETeam {
		max-width: 700px;
		height: 80%;
		max-height: 750px;
	}
}

/* ===KAIRANBAN SECTION=== */

.KAIRANBAN{
	position: relative;
	background: rgb(240, 240, 240);
	color: var(--color-bk);
}

.devices{
	height: 100%;
	background: url(../images/BGKAIRANBAN_3devices.webp) center / 80% no-repeat;
	/* border: red 4px solid; */
}

.tablet{
	width: 90%;
	max-width: 600px;
	padding-inline: 1em;
	height: auto;
	margin: 0 auto;
	position: absolute;
	bottom: 1em;
	left: 0;
	right: 0;
}

.KAIRANBANlogo{
	width: 95%;
	max-width: 650px;
	opacity: 80%;
	padding: 1em;
	height: auto;
	margin: 0 auto;
	position: absolute;
	bottom: 4em;
	left: 0;
	right: 0;
	filter: drop-shadow(0 0 5px #fff);
}

@media screen and (min-width:576px){
	.tablet,
	.KAIRANBANlogo{
		left: auto;
		right: 5%;
	}
}

@media screen and (min-width:768px){
	.devices{
		background: url(../images/BGKAIRANBAN_3devices.webp) center / 60% no-repeat;
	}
	.tablet{
		width: 50%;
		right: 10%;
	}
	.KAIRANBANlogo{
		width: 60%;
		right: 10%;
	}
}

@media screen and (min-width:1200px){
	.devices{
		background: url(../images/BGKAIRANBAN_3devices.webp) center / 50% no-repeat;
	}
}

/* ===INSTANTOUCH SECTION=== */

.INSTANTOUCH{
	background:  linear-gradient(180deg, rgba(85, 85, 85, 1), rgba(18, 18, 18, 1));
	color: #fff;
	/* position: relative; */
}

.cards::after{
	content: "";
  position: absolute;
  top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: url(../images/BGinstantouch.webp) center 20% / contain no-repeat;
	width: 100%;
	height: 100%;
	opacity: .1;
	overflow: hidden;
}

.scanning{
	width: 100%;
	max-width: 800px;
	height: 80%;
	max-height:700px;
	margin: 0 auto;
	position: absolute;
	right: 5%;
	bottom: 0;
	/* border: solid pink 5px; */
	background: url(../images/BGINSTANTOUCH_LOGO_wh.svg) 55% bottom / 60% no-repeat;
	overflow: hidden;
}

.INSTANTOUCH_phone,
.INSTANTOUCH_card{
	position: absolute;
	bottom: -4%;
}

.INSTANTOUCH_phone{
	width: 30%;
	right: 0;
	transform: rotate(0deg);
	transform-origin: bottom right;
	transition: all 0.4s ease-in-out;
}

.INSTANTOUCH_card{
	width: 60%;
	left: 5%;
	transform: rotate(-10deg);
	transform-origin: bottom left;
}

@media screen and (min-width:768px){
	.cards::after{
		background: url(../images/BGinstantouch.webp) left center / 70% no-repeat;
	}
	.scanning{
		background: url(../images/BGINSTANTOUCH_LOGO_wh.svg) right bottom / 70% no-repeat;
		height: 700px;
	}
}

/* ===SHOCKPROJECT SECTION=== */

.SHOCKPROJECT{
	background:  linear-gradient(180deg, rgba(85, 85, 85, 1), rgba(18, 18, 18, 1));
	color: #fff;
}

.shockproj_bg{
	position: relative;
	height: 100%;
	/* border: green solid 15px; */
}

.shockproj_bg::after{
	content: "";
  position: absolute;
  top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: url(../images/BGshockproject.webp) center / cover no-repeat;
	width: 100%;
	height: 100%;
	opacity: .2;
	overflow: hidden;
	/* border: yellow solid 5px; */
}

.polaroid{
	width: 75%;
	max-width: 330px;
	height: auto;
	position: absolute;
	left: 50%;
	bottom: 3%;
	transform: translate(-50%,0) rotate(5deg);
	z-index: 10;
}

.polaroid_frame{
  position: relative;
	width: 100%;
  background-color:#eee;
  border: 10px solid #eee;
  border-bottom-width: 60px;
  box-shadow: 5px 5px 5px #000;
}

.polaroid_frame p{
	font-family: flood-std, sans-serif;
  position: absolute;
	bottom: -60px;
  width: 100%;
  text-align: center;
  left: 0px;
  color: var(--color-bk);
	font-size: 22px;
	transform: rotate(3deg);
}

.polaroid_frame img {
	filter: sepia(80%) saturate(0%) brightness(0%);
}

@media screen and (min-width:576px){
	.polaroid{
		/* width: 70%; */
		max-width: 450px;
		left: 60%;
		bottom: 0;
	}
	.polaroid_frame{
		border: 15px solid #eee;
		border-bottom-width: 80px;
	}
	.polaroid_frame p{
		bottom: -80px;
		font-size: var(--font-l);
	}
}

@media screen and (min-width:768px){
	.polaroid{
		width: 60%;
		left: 70%;
	}
}

@media screen and (min-width:992px){
	.polaroid{
		width: 50%;
		max-width: 500px;
		left: 70%;
		bottom: 10%;
	}
	.polaroid_frame{
		border-bottom-width: 100px;
	}
	.polaroid_frame p{
		bottom: -100px;
		font-size: var(--font-xl);
	}
}

@media screen and (min-width:1200px){
	.polaroid{
		left: 75%;
	}
}

/* ===MIYAKOSHOCK SECTION=== */

.MIYAKOSHOCK{
	background:  linear-gradient(180deg, rgba(85, 85, 85, 1), rgba(18, 18, 18, 1));
	color: #fff;
}

.miyakoshock_bg::after{
	content: "";
  position: absolute;
  top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: url(../images/BGmiyakoshock.webp) center / cover no-repeat;
	width: 100%;
	height: 100%;
	opacity: .2;
	overflow: hidden;
}

.sign_container{
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: 600px;
	height: auto;
	z-index: 10;
}

.sign_container img{
	animation: 3s infinite lantern ease-in-out;
}

@keyframes lantern{
	0%,100%{
		filter: brightness(1);
	}
	50%{
		filter: brightness(1.2);
	}
	80%{
		filter: brightness(.9);
	}
}

@media screen and (min-width:1200px){
	.sign_container{
		max-width: 750px;
	}
}


/* ===BAR SECTION=== */

.BAR{
	background: #000;
	color: #fff;
	overflow-x: hidden;
	/* overflow-y: scroll; */
	z-index: 11;
}

/* .BAR .shadow_neon{
	overflow-y: scroll;
} */

.BAR_bg_container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/* height: 100vh; */
	opacity: .5;
}

.BAR_bg_container img {
	position: absolute;
	object-fit: cover;
	width: 100%;
	height: 100vh;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

.BARbtn-container {
	width: 90%;
	margin: 1em auto;
	max-width: 1000px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.BARbtn {
	margin: 0 auto;
	width: 100%;
	max-width: 320px;
	height: 50px;
	text-align: center;
	cursor: pointer;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;

	background: rgba(0, 0, 0, .5);
	border: 1px #fff solid;
}

.BARbtn:last-child{
	margin-bottom: 3em;
}

/* BARボタン */
.BAR .link_btn a:before{
	background:  rgba(0, 0, 0, .8);
	color: #fff;
}

.BARbtn-STADIUM:before{
	background: url("../images/STADIUM_logo.webp") center center / 40% no-repeat;
}
.BARbtn-STADIUM a:before{
	content: "スポーツバー STADIUM へ";
}

.BARbtn-t2H:before{
	background: url("../images/t2H_logo.webp") center center / 21% no-repeat;
}
.BARbtn-t2H a:before{
	content: "泡盛Bar t2H へ";
}

.BARbtn-FirstShisha:before{
	background: url("../images/FirstShisha_logo.webp") center 10% / 33% no-repeat;
}
.BARbtn-FirstShisha a:before{
	content: "シーシャバー FirstShisha へ";
}

@media screen and (min-width:992px){
	.BARbtn-container {
		justify-content: space-around;
		flex-direction: row;
		gap: 20px;
		/* padding-top: 3em; */
	}
	.BARbtn {
		margin: 20px 0;
		width: calc(100%/3);
	}
}

/* ===footer=== */
footer{
	background: #000;
	color: var(--color-wh);
	width: 100%;
	font-size: var(--font-xs);
}