*{
	font-family: sans-serif;
	font-size: 13pt;
	font-weight: 400;
	line-height: 1.6;
	word-break: keep-all;
}
body{
	margin: 3vw;
	width: 90%;
	height: auto;
}


a{
	text-decoration: underline;
	text-decoration-thickness: 2px; 
	color: inherit;
}
a:visited{
	color: inherit;
}
a:hover{
	color: rgba(255,255,255,0);
}

article{
	position: absolute;
	top: 3vw;
	left: 35vw;
	width: 60vw;
}
nav{
	position: fixed;
	top: 3vw;
	width: 30vw;
	height: 85vh;
	z-index: 999;
	margin: 0;
	overflow: auto;
}

nav .address{
	position: fixed;
	bottom: 3vw;
	margin-top: 60vh;
	width: 20vw;
	min-width: 300px;
}

nav .hidden{
	opacity: 40%;
}

article small{
	font-size: 80%;
	opacity: 80%;
}
article small a{
	font-size: 100%;
	text-decoration: underline;
	text-decoration-thickness: 1.3px;
}


.blink{
	animation: blink 1.5s infinite alternate;
}
@keyframes blink{
	0%{opacity: 100%;}
	100%{opacity: 0%}
}

sup{
	font-size: 90%;
	text-decoration: none;
	color: inherit;
}

iframe{
	border: 2px solid black;
}

br{
	line-height: 1,5;
}


.top{
	position: fixed;
	bottom: 1vw;
	font-size: 40pt;
	text-decoration: none;
	line-height: 2;
}

.back{
	position: fixed;
	bottom: 1vw;
	font-size: 40pt;
	text-decoration: none;
	line-height: 2;
}

.index nav{
	width: 50vw;
}
.hhss_1 a{
	text-decoration: none;
	color: whitesmoke;
}

.hhss_1 .column2{
	width: 60vw;
}

.column2{
	width: 60vw;
	display: inline-block;
}

.column2 ol{
	width: 60vw;
	list-style-type: none;
	margin: 0 10px 10px 0px;
	padding-left: 0;
}
.column2 li{
	margin-bottom: 8px;
	border-bottom: solid whitesmoke 1.3pt;
}
.column2 a li:hover{
	color: rgba(255,255,255,0);
}

.column2 p{
	margin-top: 0;
}
.image{
	width: 48vw;
	height: auto;
	position: absolute;
	left: 21vw;
	overflow-y: scroll;
}

.image img{
	height: auto;
	width: 11vw;
	margin-bottom: 0.3vh;
	margin-right: 0.3vh;
}

.hhss_1 h1{
	margin-bottom: 20px;
	margin-top:0;
}

.hhss_1 address{
	margin-top: 20px;
}
.hhss_1 address a:hover{ 
	color: rgba(255,255,255,0);
}

.hhss_1 address .underline{
	text-decoration: underline;
	text-decoration-thickness: 1.5px; 
}

.hhss_1_1 {
	animation: green 20s infinite alternate;
	color: whitesmoke;
}

.column2 .image{
	width: 60vw;
	height: 70vh;
	position: absolute;
	left: 0;
}

@keyframes green{
	0%{background: limegreen;}
	50%{background: black}
	100%{background: limegreen;}
}

.hhss_1_2 .image img{
	width: 60vw;
	height: auto;
	margin-bottom: 1vw;
}


.hhss_1_3{
	background: rgb(50,50,50);
	color: whitesmoke;
}

.hhss_1_3 .image{
	text-align: center;
	height: 85vh;
	width: 60vw;
}
.hhss_1_3 .image img{
	width: auto;
	height: 22vw;
	margin-right: 7vw;
	margin-bottom: 5vw;
}

.hhss_1_4{
	background: rgb(50,50,50);
	color: whitesmoke;
}


.hhss_1_5{
	background: rgb(50,50,50);
	color: whitesmoke;
}
.hhss_1_5 .image{
	width: 60vw;
	overflow-x: hidden;
}
.hhss_1_5 .image img{
	height: 70vh;
	width: auto;
	margin-bottom: 20px;
	margin-right: 20px;
}

.hhss_1_6{
	background: rgb(50,50,50);
	color: whitesmoke;
}

.hhss_1_6 .image img{
	width: 19vw;
}


.hhss_2{
	z-index: 888;
	display: block;
	color: darkgray;
	overflow-x: hidden;
}

.hhss_2 .hidden{
	opacity: 70%;
}

.hhss_2 .sale{
	color: black;
	position: absolute;
	top: 60vh;
	right: 0;
	z-index: 9999;
	padding: 10px;
/*	width: 250px;
	height: 150px;*/
	line-height: 1.1;
	transform: rotate(12deg);
	box-shadow: 0px 0px 10px rgb(50,50,50);
}

.hhss_2 nav .top{
	color: darkgray;
}

.hhss_2 article{
	position: absolute;
	top: 3vw;
	width: 68vw;
}

.hhss_2 nav .top:hover{
	position: fixed;
	bottom: 2vw;
	left: 3.3vw;
	font-size: 4vw;
	text-decoration: none;
	color: rgba(255,255,255,0);
}

.hhss_2 article h1{
	margin-bottom: 20px;
	margin-top: 0;
}
.instagram{
	position: fixed;
	text-align: center;
	top: 3vw;
	right: 3vw;
	width: 10vh;
	background: white;
	z-index: 999;
	box-shadow: 3px 3px 10px silver;
}

.hhss_2 .grad{
	position: absolute;
	left: 0;
	height: 300vh;
	width: 40vw;
	background-image:
	linear-gradient(
	to bottom, #F1F8EC,#EAEFE5,#EAF3E6,#E1EFDD,#E3EFDD,#E9F3E1,#e3f6e5,#E0E8DB,#E6E9BF,#D7E7CD,#e1dfd1,#e0dfd7,#e1f0e4,#DCECDC,#d8f5ec,#cbf0d2,#b8eee1,#bbecd6,#abe6cd,#a6e3b5,#8BE0BA,#86decd,#a4dcc1,#a8ddcf,#9FE4AA,#c8e3d2,#d6dec9,#CEE1C8,#C6DCC7,#D7DFD9,#DBE0D4,#CAD6C4,#BFD5B3,#C2D8BA,#CADBCD,#cad7b9,#C5CDB0,#c1d7bf,#bcd5be,#c3d9bd,#c9e2c5,#c0debf,#c3dbb9,#c5d5b7,#b2d0b0,#B5D5B0,#cad7c0,#d3dba1,#bfcbad,#B3CDAC,#9ECCA7,#A7D3B7,#a8d5ba,#a9d2ba,#a1dfc5,#86d2b2,#75DBC1,#5CCD97,#56cbb3,#9dcdb3,#38C6A1,#7accb8,#75c8a2,#48c1aa,#7bb5a3,#76c692,#8bc982,#6CCC7B,#9ABF8D,#b7c9b1,#a9b595,#9bc2b1,#aad0ac,#a9cbb0,#A8C3AA,#9ECCA7,#7fb37f,#7FB383,#98B489,#7dcdb6,#68c8a4,#5ab990,#8dba8e,#76bf98,#5bc1a9,#6ab7a7,#88BB95,#81B39C,#8aab98,#8AA786,#7aac7a,#7E9C6F,#679B6A,#63a491,#7FA771,#71ad87,#41B45C,#3ab0a2,#00A466,#1A9D49,#8AA786,#6CA178,#69905B,#75957d,#708D6C,#69865B,#5a8e5e,#578758,#31976b,#009A70,#008A51,#007F59,#558961,#5D7759,#64806c,
	#4d7256
	)
}
.list{
	position: absolute;
	left: 40vw;
	width: 40vw;
	font-size: 2vh;
	padding: 0;
/*	margin-top: 1vw;*/
	margin-left: 2vw;
	line-height: 2.6vh;
}

.ok_left_column{
	position: absolute;
	top: 310vh;
	width: 35vw;
	height: 100vh;
	margin: 0;
	text-align: center;
} 

.ok_left_column div.paint {
	width: 35vw;
	height: auto;
	padding: 0;
	z-index: 0;
	text-align: left;

}

.ok_left_column .paint p{
	width: 16.5vw;
	height: auto;
	z-index: 0;
	text-align: left;
	font-size: 80%;
	display: inline-block;
	vertical-align: top;
	margin-right: 5px;
}

.ok_left_column div.paint img{
	width: 10vw;
	height: auto;
	padding: 0;
	z-index: 0;
	text-align: left;
	margin:0;
	margin-right: 30px;
	margin-bottom: 20px;
}
.ok_left_column img{
	width: 15vw;
	filter: grayscale(100%);
	text-align: center;
	margin: 3vw;
}

.ok_left_column p{
	width: 35vw;
	height: auto;
	margin: 0;
	margin-bottom: 2vh;
	font-size: 26pt;
	text-align: center;
}

.ok_left_column div.color{
	width: 35vw;
	height: 10vw;
	margin-bottom: 20px;

}

.ok_right_column{
	position: absolute;
	left: 40vw;
	top: 310vh;
	width: 40vw;
	height: auto;
	display: inline-block;
	margin: 0;
}

.ok_right_column img{
	width: 25vw;
	height: auto;
	margin-bottom: 4vh;
	padding: 0;
	z-index: 0;
	filter: grayscale(100%);
}

.ok_right_column img:hover{
	filter: grayscale(0%);
}

.ok_right_column .shadow{
	box-shadow: 8px 8px 10px silver;
}



.hhss_3{
	overflow-y: hidden;
	margin:0;
}


.hhss_3 .sale{
	position: fixed;
	top: 30vw;
	left: 50vw;
	z-index: 999;
	background: yellow;
	transform: rotate(12deg);
	box-shadow: 0px 0px 7px black;
	line-height: 1.1;
	padding: 5px;
}

.hhss_3 nav{
	top: 0;
	left: 0;
	padding: 3vw;
	width: 20vw;
}

.hhss_3 article{
	position: absolute;
	top: 1.3vw;
	left: 30vw;
	width: 70vw;
}

.hhss_3 article a{
	text-decoration: underline;
	text-decoration-thickness: 1.5px; 
	color: mediumblue;
}
.hhss_3 article a:visited{
	color: mediumblue;
}
.hhss_3 article a:hover{
	color: rgba(255,255,255,0);
}

.hhss_3 .left{
	position: absolute;
	top: 1.3vw;
	left: 0;
	width: 30vw;
	height: 90vh;
	overflow-y: scroll;
}


.hhss_3 .right{
	position: absolute;
	top: 1.3vw;
	left: 30vw;
	width: 36vw;
	height: 90vh;
	padding-left: 1vw;
	overflow-y: scroll;
	overflow-x: hidden;
/*	background: red;*/
}

.hhss_3 .right img{
	width: 17vw;
	margin-bottom: 0.7vw;
}
.hhss_3 .right p{
	width: 35vw;
}
.hhss_3 .right .full{
	width: 35vw;
	height: 90vh;
	padding: 0;
	background: white;
	margin: 0;
}

.hhss_3 .right p .underline{
	text-decoration: underline;
}

.hhss_3 .right .ingredients{
	background: white;
	height: 70vh;
	display: inline;
}
.hhss_3 .right .ingredients img{
	width: 6vw;
}

.hhss_4{
  height: 100vh;
 	width: auto;
 	margin-right:0;
 	background: black;
 }

.hhss_4 .loading{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 150px;
	height: auto;

 }

.hhss_4 nav{
	position: absolute;
	top: 3vw;
	background: whitesmoke;
	color: black;
}

.hhss_4 a:hover{
	color: rgba(0,0,0,0);
	text-shadow: none;
}

.hhss_4 article{
	position: relative;
	background: black;
	top: 100vh;
	left: 3vw;
	height: 100vh;
	margin-left: 3vw;
	display: inline;
}

.hhss_4 article.viewing{
	position: absolute;
	top: 105vh;
	left: 0;
	height: 100vh;
}

.hhss_4 article.viewing img{
	width: 23vw;
	height: 16vw;
	object-fit: cover;
	display: inline;
	margin-right: 0.5vw;
	margin-bottom: 0.5vw;
}

.hhss_5{
	background: lightgray;
}
.hhss_5 article{
	background: white;
}



.blockmobile{
	width: 90vw;
	height: 30vh;
	text-align: center;
	background: silver;
	transform: translate(-50%,-50%);
	position: fixed;
	top: 50%;
	left: 50%;
	visibility: hidden;
	z-index: 100000;
}

.blockmobile p{
	transform: translate(-50%,-50%);
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0;
}


@media screen and (max-width: 700px) {
*{
		font-size: 10pt;
		line-height: 1.6;
	}

nav{
		width: 40vw;
	}
article{
	position: absolute;
	top: 0;
	left: 48vw;
	width: 48vw;
	margin: 0;
}

nav{
	visibility: hidden;
}

article{
	visibility: hidden;
}

.blockmobile{
	visibility: visible;
}

.blockmobile p{
	transform: translate(-50%,-50%);
	position: absolute;
	width: 100vw;
	top: 50%;
	left: 50%;
}
/*.column2{
	position: absolute;
	width: 48vw;
	top: 0;
}

.column2 ol{
	width: 90%;
}

.hhss_1 .column2{
	position: absolute;
	width: 50vw;
	top: 3vw;
}
.hhss_1 .hhss_1_text{
  	width: 48vw;
 }

	.hhss_1 .column2 address{
	width: 48vw;
	}

	.hhss_1_1 .column2 .image{
		width: 50vw;
	}

  .hhss_1_1 .image img{
 	width: 50vw;
  height: auto;
  }

	.hhss_1_2 .column2 .image{
		width: 50vw;
	}
  .hhss_1_2 .column2 .image img{
  	width: 48vw;
  	height: auto;
  }


	.hhss_1_3 .column2 .image{
		width: 50vw;
	}
   .hhss_1_3 .column2 .image img{
  	width: 48vw;
  	height: auto;
  }

	.hhss_1_4 .column2 .image{
		width: 50vw;
	}
   .hhss_1_4 .column2 .image img{
  	width: 48vw;
  	height: auto;
  }

 	.hhss_1_5 .column2 .image{
		width: 50vw;
	}
   .hhss_1_5 .column2 .image img{
  	width: 48vw;
  	height: auto;
  	margin-bottom: 5px;
  }

 .hhss_1_6 .column2 .image{
		width: 50vw;
	}
   .hhss_1_6 .column2 .image img{
  	width: 48vw;
  	height: auto;
  }

  
  .ok_right_column img{
	width: 40vw;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	display: block;
	}

	.ok_left_column .ok_color img{
	width: 40vw;
	height: auto;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	display: block;
}
}







*/