*, *:before, *:after {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	color: #000;
	letter-spacing: .4px;
	line-height: 1.9;
	font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN",YuGothic,"Yu Gothic",Verdana,Meiryo,sans-serif;
}

a:link {
	color: black;
	text-decoration: none;
}

a:visited {
	color: black;
}


.container {
	max-width: 1080px;
	margin: 0 auto;
	text-align: center;
}

h1 {
	font-size: medium;
	text-align: center;
	margin-top: 30px;
}

/*
h2 {
	border: 3px solid #000;
	border-radius: 10px;
	display: block;
	padding: 20px;
}
*/

h2 {
	margin: 0;
	background: linear-gradient(transparent 70%, rgba(190, 88, 57, 0.6) 70%);
	display: inline;
}

ol, ul {
	list-style: none;
	margin: 0;
}

.bg_white {
	background-color: white;
}


/* header */

.header {
	height: auto;
	padding-bottom: 20px;
	position: relative;
	z-index: 101;
	background-color: white;
}

.header_inner {
	display: flex;
	justify-content: space-between;
	padding: 10px 10px 0 10px;
}

.header-inner-logo {
	margin-left: 10px;
}

.language-menu ul {
	display: flex;
	font-size: 12px;
	font-weight: 700;
}

.language-menu ul li {
	margin: 15px;
	margin-bottom: 3px;
	margin-top: 0;
}

.language-menu ul li:last-child {
	border-left: 1px solid black;
	padding-left: 15px;
	margin-left: 0px;
}

.language-menu .en {
	border-bottom: 4px solid #BE5839;
}

.header-logo {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.header-logo img {
	margin: 15px;
}

.bounce {
  animation: bounce_4844 2.6s ease infinite;
  transform-origin: 50% 50%;
}

@keyframes bounce_4844 {
  0% { transform:translateY(0) }
  7.69231% { transform:translateY(0) }
  15.38462% { transform:translateY(0) }
  30.76923% { transform:translateY(-15px) }
  38.46154% { transform:translateY(0) }
  46.15385% { transform:translateY(-15px) }
  61.53846% { transform:translateY(0) }
  100% { transform:translateY(0) }
}


/* map */

.read {
	font-size: 16px;
}

.map img {
	width: 100%;
}

#map {
	width: 100%;
	height: auto;
	position: relative;
	z-index: 1;
}

#cat {
	bottom: 40%;
	left: 47%;
	position: fixed;
	z-index: 10;
	line-height: 0;
	min-height: 105px;
}

#cat-img {
	background: transparent url(img/cat.png) no-repeat;
	width: 50px;
	height: 95px;
	position: absolute;
	bottom: 0;
/* 	animation: smile 2s steps(2) infinite; */
}
/*
@keyframes smile {
  to {
    background-position: -166px 0;
  }
}
*/

.float {
  animation: float_1309 3s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes float_1309 {
  0% { transform: translateY(0) }
  33.33333% { transform: translateY(-6px) }
  66.66667% { transform: translateY(0) }
  100% { transform: translateY(0) }
}

.gradient {
  background: -moz-linear-gradient(top, white 60%, rgba(255,255,255,0));
  background: -webkit-linear-gradient(top, white 60%, rgba(255,255,255,0));
  background: linear-gradient(to bottom, white 60%, rgba(255,255,255,0));
  position: relative;
  z-index: 102;
  height: 180px;
}

.fadein {
	opacity: 0;
	transform : translate(0, 50px);
	transition : all 1500ms;
}

.fadein.scrollin{
	opacity: 1;
	transform: translate(0, 0);
}

i {
	height: 100px;
	padding: 20px;
	font-size: 100px;
	transition: .2s;
} 

.effect div {
	margin: auto;
	transition: .2s;
	transition-delay: .2s;
	padding: 15px;
}

/* 左店舗 */

.position01 {
	position: absolute;
	left: 19%;
	bottom: 97%;
}

.position02 {
	position: absolute;
	left: 19%;
	bottom: 99%;
}

.position03 {
	position: absolute;
	left: 19%;
	bottom: 93%;
}

.position04 {
	position: absolute;
	left: 19%;
	bottom: 91%;
}

.position05 {
	position: absolute;
	left: 19%;
	bottom: 88%;
}

.position06 {
	position: absolute;
	left: 2%;
	bottom: 83%;
}

.position07 {
	position: absolute;
	left: 17%;
	bottom: 66%;
}

.position08 {
	position: absolute;
	left: 17%;
	bottom: 64%;
}

.position09 {
	position: absolute;
	left: 17%;
	bottom: 63%;
}

.position10 {
	position: absolute;
	left: 17%;
	bottom: 60%;
}

.position11 {
	position: absolute;
	left: 17%;
	bottom: 52%;
}

.position12 {
	position: absolute;
	left: 17%;
	bottom: 47%;
}

.position13 {
	position: absolute;
	left: 17%;
	bottom: 40%;
}

/* 右店舗 */

.position01_r {
	position: absolute;
	right: 17%;
	bottom: 97%;
}

.position02_r {
	position: absolute;
	right: 15%;
	bottom: 94%;
}

.position03_r {
	position: absolute;
	right: 18%;
	bottom: 91.5%;
}

.position04_r {
	position: absolute;
	right: 18%;
	bottom: 89.5%;
}

.position05_r {
	position: absolute;
	right: 18%;
	bottom: 87%;
}

.position06_r {
	position: absolute;
	right: 18%;
	bottom: 85%;
}

.position07_r {
	position: absolute;
	right: 2%;
	bottom: 86%;
}

.position08_r {
	position: absolute;
	right: 18%;
	bottom: 80%;
}

.position09_r {
	position: absolute;
	right: 18%;
	bottom: 73%;
}

.position10_r {
	position: absolute;
	right: 18%;
	bottom: 68%;
}

.position11_r {
	position: absolute;
	right: 18%;
	bottom: 64%;
}

.position12_r {
	position: absolute;
	right: 18%;
	bottom: 47.5%;
}

.position13_r {
	position: absolute;
	right: 17%;
	bottom: 46%;
}

.position14_r {
	position: absolute;
	right: 18%;
	bottom: 15%;
}

.position15_r {
	position: absolute;
	right: 18%;
	bottom: 10.5%;
}

.position16_r {
	position: absolute;
	right: 18%;
	bottom: 9%;
}

.balloon1 {
	position: relative;
	display: inline-block;
	margin: 1.5em 0;
	padding: 5px 5px;
	max-width: 100%;
	color: #fff;
	font-size: 16px;
	background-color: rgba(190, 88, 57, 0.7);
	transition: 2s;
}

.balloon1:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid rgba(190, 88, 57, 0.7);
}

.balloon1 p {
	margin: 0;
	padding: 0;
}

/* 非組合員 */

.position_h01 {
	position: absolute;
	left: 14%;
	bottom: 78%;
}

.position_h02 {
	position: absolute;
	left: 17%;
	bottom: 58%;
}

.position_h03 {
	position: absolute;
	left: 17%;
	bottom: 56%;
}

.position_h04 {
	position: absolute;
	right: 10%;
	bottom: 40%;
}

.position_h05 {
	position: absolute;
	right: 18%;
	bottom: 28%;
}

.position_h06 {
	position: absolute;
	left: 35%;
	bottom: 56.5%;
}

.position_h07 {
	position: absolute;
	left: 35%;
	bottom: 7.5%;
}

.balloon2 {
	position: relative;
	display: inline-block;
	margin: 1.5em 0;
	padding: 5px 5px;
	max-width: 100%;
	color: #fff;
	font-size: 16px;
	background-color: rgba(59, 135, 50, 0.7);
	transition: 2s;
}

.balloon2:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid rgba(59, 135, 50, 0.7);
}

.balloon2 p {
	margin: 0;
	padding: 0;
}


/* タペストリー */

.position1-t {
	position: absolute;
	right: 42%;
	bottom: 94%;	
}

.position2-t {
	position: absolute;
	left: 40%;
	bottom: 89%;	
}

.position3-t {
	position: absolute;
	right: 42%;
	bottom: 86%;	
}

.position4-t {
	position: absolute;
	left: 40%;
	bottom: 80%;	
}

.position5-t {
	position: absolute;
	right: 42%;
	bottom: 72%;	
}

.position6-t {
	position: absolute;
	left: 40%;
	bottom: 69%;	
}

.position7-t {
	position: absolute;
	right: 42%;
	bottom: 60%;	
}

.position8-t {
	position: absolute;
	left: 40%;
	bottom: 54%;	
}

.position9-t {
	position: absolute;
	right: 42%;
	bottom: 49%;	
}

.position10-t {
	position: absolute;
	left: 40%;
	bottom: 47%;	
}

.position11-t {
	position: absolute;
	right: 42%;
	bottom: 43%;	
}

.position12-t {
	position: absolute;
	left: 40%;
	bottom: 35%;	
}

.position13-t {
	position: absolute;
	left: 40%;
	bottom: 27%;	
}

.position14-t {
	position: absolute;
	right: 42%;
	bottom: 23%;	
}

.position15-t {
	position: absolute;
	right: 42%;
	bottom: 18%;	
}

.position16-t {
	position: absolute;
	left: 40%;
	bottom: 15%;	
}

.position17-t {
	position: absolute;
	right: 42%;
	bottom: 6%;	
}

.position18-t {
	position: absolute;
	left: 40%;
	bottom: 3%;	
}

.tapestry {
	background: #f4f3eb;
	padding: 10px;
	border: 2px solid #000;
	box-shadow: 2px 2px gray;
	border-left: 10px solid #5f5f47;
	min-height: 150px;
	width: 85px;
}


.tapestry p {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-o-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
	font-size: 14px;
	font-weight: bold;
    margin: 0;
    padding-top: 5px;
}

.text-combine {
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
}

.position {
	position: absolute;
	right: 24%;
	bottom: 2%; 
}


/* post_card */

.post_card {
  position: relative;
  z-index: 110;
}

.gradient_2 {
  background: -moz-linear-gradient(0deg, white 80%, rgba(255,255,255,0));
  background: -webkit-linear-gradient(0deg, white 80%, rgba(255,255,255,0));
  background: linear-gradient(0deg, white 80%, rgba(255,255,255,0));
  position: relative;
  z-index: 120;
  height: 150px;
  padding-top: 30px;
  text-align: center;
}

.grid {
    width: 100%;
    margin: 0 auto;
}

.grid img {
	max-width: 100%;
}

.grid-item { 
	margin: 0px;
	border: 2px solid #000;
	margin: 5px;
	padding: 5px;
	border-radius: 10px;
	background: white;
	width: 30%;
}

.grid-item p {
	margin: 5px auto;
	color: #000;
	font-weight: bold;
	text-decoration: none;
}


/* move */

.move {
	background-color: white;
	padding: 60px 0;
	position: relative;
    z-index: 200;
}

.youtube_flex {
	display: flex;
	justify-content: space-between；
}

iframe {
	margin: 20px 0;
}

.col_3 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 35px;
}

.col_3 > div {
	margin: 10px;
}

.col_3 p {
	margin: 0;
	font-weight: bold;
}

.responsive_p {
	display: none;
}

/*
.col_3{
	width: 100%;
	display: flex;
	display: -ms-flexbox; 
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; 
}
.col_3 > div{
	width: 33.33333%;
	padding: 10px;
}
*/

.lyrics {
	margin: 20px auto;
	padding: 10px;
	background: #f3f3f3;
	border-radius: 10px;
	max-width: 840px;
	border: 2px solid #000;
	text-align: center;
	font-size: 15px;
}

.home {
	background: white;
	position: relative;
    z-index: 300;
    transform:translate3d(0,0,0);
    padding-bottom: 30px;
}

.home-buton {
	display: block;
	margin: 0 auto;
	border: solid 2px black;
	width: 180px;
	border-radius: 10px;
	padding: 10px;
	text-align: center;
}

.home-buton p {
	margin: 0;
}

.home-buton:hover {
  background: #BE5839;
  color: white;
}


.home-buton i {
	padding: 0;
	padding-left: 5px;
	height: auto;
}

.f-small {
	font-size: 1.2em;
}


/* footer */

footer {
	position: relative;
    z-index: 400;
	background: #f9f9f9;
	text-align: center;
	padding: 20px;
    transform:translate3d(0,0,0);
}

footer h1 {
	font-size: larger;
}

footer h1:before {
	content: '';
	display: inline-block;
	width: 38px;
	height: 70px;
	background-image: url("img/kanazawa_omotesandou_logo.png");
	background-size: contain;
	vertical-align: middle;
	margin-right: 10px;
}

#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0.6;
  border-radius: 50%;
  z-index: 9999;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 30px;
  text-decoration: none;
}
#page_top a:before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}