@charset "UTF-8";

/*
    Theme Name:HIZU
    Description:HIZU-OFFICIAL WEBSITE テンプレート
    Version:1.17
    Author:myulina
    */

.klee-one-regular {
	font-family: "Klee One", cursive;
	font-style: normal;
	font-weight: 400;
	}

body{
	background-attachment: fixed;
	background-image: url("./image/about.laptop.png;_");
	background-position: center;
	background-size: cover;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto 1fr auto;
	max-height: 100%;
	max-width: 100vw;
	}

main{
	backdrop-filter: blur(5px);
}

/*.concept{
	color: rgba(255, 255, 255, 0.8);
	font-family: "Klee One";
	font-size: 50px;
	letter-spacing: 10px;
	padding: 10px;
	position: absolute;
	right: 3%;
	top: 20%;
	-ms-writing-mode: tb-rl;
	    writing-mode: vertical-rl;
	z-index: 10;
	}*/

.mainWrapper{
	margin: 1rem;
	max-width: 1600px;
	padding: 1rem;
	justify-content: center;
	}

h1{
	color: seagreen;
	font-family: sans-serif;
	font-size: clamp(2.4rem, calc(2.2rem + 0.625vw), 2.9rem);
	}

h2{
	color:magenta;
	font-family: "Courier New", Courier, monospace;
	font-size: clamp(1.2rem, calc(1rem + 00.625vw), 1.7rem);
	}

h3{
	color: saddlebrown;
	font-family: "Courier New", Courier, monospace;
	font-size: clamp(0.9rem, calc(1rem + 00.625vw), 1.6rem);
	}

h4{
	color:yellowgreen;
	font-family:"Courier New", Courier, monospace;
	/*writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;*/
	font-size: clamp(1.2rem, calc(1rem + 00.625vw), 1.7rem);
	/*line-height: 3rem;*/
	}

h5{
	color: teal;
	font-family: "Courier New", Courier, monospace;
	font-size: clamp(0.9rem, calc(1rem + 00.625vw), 1.6rem);
	}

.footerTop{
	color: #000;
	margin-left: 1rem;
}

h6{
	color: rgba(255, 255, 255, 0.8);
	font-family:"Times New Roman", Times, serif;
	font-size: 200px;
	letter-spacing: 30%;
	text-align: center;
	text-transform: uppercase;
	z-index: 5;
	}

p{
	color: #000;
	font-family:"Courier New", Courier, monospace;
	text-align: center;
	font-size: clamp(0.9rem, calc(1rem + 00.625vw), 1.6rem);
	}

strong{
	color: blueviolet;
	font-size: x-large;;
	}

header{
	position: sticky;
	}

footer{
	background-color: antiquewhite;
	position: sticky;
	}

.page-title{
	color: yellowgreen;
	font-family: fantasy;
	text-align: center;
	}

a{
	color: #000;
	font-family: "Courier New", Courier, monospace;
	}

a:link{
	color: brown;
	}

a:hover{
	color: chartreuse;
	}

a:visited{
	color: teal;
	}

iframe{
	height: 480px;
	width: 320px;
	}

.privacy-wrapper {
	backdrop-filter: blur(10px);
	/*font-size: 0.9375rem;
	margin: 0 auto;
	max-width: 70%;*/
	}
/*.privacy-wrapper > * {
	margin-bottom: 1.8em;
	}
.privacy-wrapper h2 {
	font-size: 1.25rem;
	margin-bottom: 1.35em;
	}
@media screen and (max-width: 768px) {
	.privacy-wrapper h2 {
		font-size: 1.125rem;
		}
	}*/

/*.news-wrapper{
	backdrop-filter: blur(10px);
}*/

ol{
	list-style: none;
	}

/*.inner {
	margin: 0 auto;
	max-width: 90%;
	padding-left: 4%;
	padding-right: 4%;
	}

/*.inner.is-small {
	max-width: calc(1160px + 8%);
	}

.inner {
	margin: 0 auto;
	max-width: calc(1280px + 8%);
	padding-left: 4%;
	padding-right: 4%;
	}
.inner.is-small {
	max-width: calc(1160px + 8%);
	}*/

.c-breadcrumbs {
	color: #6C6C6C;
	display: flex;
	flex-wrap: wrap;
	font-size: 0.875rem;
	line-height: 3.2;
	}
@media screen and (max-width: 768px) {
	.c-breadcrumbs {
		font-size: 0.8125rem;
		}
	}
.c-breadcrumbs > li {
	display: inline-block;
	position: relative;
	}
.c-breadcrumbs > li:not(:last-of-type)::after {
	content: ">";
	display: inline-block;
	margin-left: 0.5em;
	margin-right: 0.5em;
	}

ul{
	list-style: none;
	}

.naviList{
	display: flex;
	justify-content: space-around;
	margin: 0 auto;
	}

.naviList li{
	align-items: center;
	background-color: antiquewhite;
	border: 1px solid bisque;
	height: auto;
	margin-left: 2px;
	margin-right: 2px;
	margin-top: 0;
	opacity: 0.7;
	padding: 2px;
	text-align: center;
	width: 10%;
	}

.naviLinks{
	padding-top: 1rem;
	}

.mobileNav{
	display: none;
}

.naviMobile{
	display: none;
}

.topTitle{
	padding-left: 1rem;
	padding-right: 1rem;
	}

.topTitle{
	animation: 5s topTitle_anime ease-in forwards;
	opacity: 0;
	}

@keyframes topTitle_anime {
	0%{
		opacity: 0;
		}
	100%{
		opacity: 0.7;
		}
	}

.concept{
	display: none;
	}


.topMainWrapper{
	backdrop-filter: none;
	}

.aboutContent{
	display: flex;
	justify-content: center;
	}

.aboutTextContent span{
	display: block;
	opacity: 0;
	transform: translateY(-1rem);
	transition: 2s;
	}

.AboutText{
	color: darkorange;
	font-family: sans-serif;
	text-align: center;
}

.prof h4{
	color: aquamarine;
	text-align: center;
	justify-content: center;
	}

.profText{
	justify-content: center;
	text-align: center;
}

.gallerySmallList{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	}

.smallList img{
	border-color: coral;
	border-radius: 45%;
	}

.galleryTitle{
	border-color: yellow;
	border-style: dotted;
	color: tomato;
	font-size: x-large;
	font-weight: bold;
	text-align: center;
	}

.shopList{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	justify-content: center;
	}

	.wp-block-contact-form-7-contact-form-selector{
		justify-content: center;
		text-align: center;
	}

	.wp-block-contact-form-7-contact-form-selector p{
		justify-content: center;
		text-align: center;
	}

	.wp-block-contact-form-7-contact-form-selector input{
		text-align: center;
		justify-content: center;
	}

ul.shopList li{
	position: relative;
}

	span.newIcon{
	background-color: #fdc2b6;
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: -20px;
	left: -20px;
}


@media  screen and (max-width: 959px) {

	body{
		background-attachment: fixed;
		background-image: url("./image/about.tablet.png;_");
		max-width: 100vw;
		max-height: 100vh;
		}

		.mainWrapper{
			max-width: 940px;
			width: 100vw;
			}
	
			.naviLinks{
				font-size: 80%;
			}

	.gallerySmallList{
		grid-template-columns: 1fr 1fr 1fr;
		}

	iframe{
		max-height: 380px;
		max-width: 220px;
		}

	.shopList{
		display: grid;
		justify-content: center;
		grid-template-columns: 1fr 1fr 1fr;
		}

		.shopList li{
			max-width: 220px;
			max-height: 380px;
		}

	

		

	}

	@media  screen and (max-width: 480px){

		body{
			background-attachment: fixed;
			background-image: url("./image/about.mobile.png;_");
			font-size: 70%;
			max-width: 100vw;
			max-height: 100vh;
			}
	
		.mainWrapper{
			max-width: 460px;
			}
	
		.naviLinks{
			display: none;
		}
	
		.mobileNav{
			display: block;
		}
	
		.mobileNav:hover{
			.naviMobile{
			display: block;
			}
		.mobileNavi{
			display: none;
			}
		}

		.gallerySmallList{
			grid-template-columns: 1fr 1fr;
			}
	
		iframe{
			max-height: 220px;
			max-width: 160px;
			}
	
		.shopList{
			display: grid;
			justify-content: center;
			grid-template-columns: 1fr 1fr;
			}
		.shoplist li{
			max-width: 160px;
			max-height: 220px;
			}
	
		.AboutText{
			font-size: 80%;
		}
	
		h5{
			font-size: 80%;
		}
		}