/*-------- header調整用 --------------*/
header {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
header div.hSteats h1 {
	width: 40rem;
	margin: 1rem 0 1rem;
}
header div.hSteats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: min(100% , 150rem);
	gap: 5rem;
	margin: auto;
}
header div.hSteats > h1 + div.inqWrap {
	width: calc(calc(min(100% , 150rem) - calc(5rem * 2)) - 80rem);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 2rem 2rem;
	padding: 2rem 0;
	text-align: center;
}
header div.hSteats > h1 + div.inqWrap > span:nth-of-type(1) {
	text-align: right;
	width: 27rem;
}
header div.hSteats > h1 + div.inqWrap > span:nth-of-type(1) img {
	width: auto;
	vertical-align: middle;
}
header div.hSteats > h1 + div.inqWrap > span:nth-of-type(2) {
	background: #ca2051;
	border-radius: 100px;
	text-align: center;
	color: #fff;
	position: relative;
	display: block;
	font-size: 2.5rem;
	font-weight: 800;
	width: 28rem;
	padding-left: 7rem;
}
header div.hSteats > h1 + div.inqWrap > span:nth-of-type(2)::before {
	content: "";
	background: url(https://garlic-musume.com/site/wp-content/themes/garlic/assets/images/h-sendfree.png) no-repeat center / 100%;
	width: 9rem;
	height: 7rem;
	position: absolute;
	left: -1rem;
	top: 0;
	bottom: 0;
	margin: auto;
}
header div.hSteats > h1 + div.inqWrap > span:nth-of-type(3){width: 100%;}
header div.hSteats > h1 + div.inqWrap > span:nth-of-type(3) a {
	position: relative;
	display: block;
	font-size: 4rem;
	font-weight: 700;
	color: #258038;
	padding-left: 6rem;
	line-height: 1;
}
header div.hSteats > h1 + div.inqWrap > span:nth-of-type(3) a::before {
	content: "";
	background: url(https://garlic-musume.com/site/wp-content/themes/garlic/assets/images/h-tel.png) no-repeat center / 100%;
	width: 6rem;
	height: 6rem;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 3rem;
	margin: auto;
}
header div.hSteats > h1 + div.inqWrap > span:nth-of-type(3) a > span {
	font-size: 2rem;
	color: #333;
	margin-left: 2rem;
}
header div.hSteats > a {
	display: block;
	border: #6ba856 1px solid;
	border-radius: 1rem;
	padding: 1rem 0;
	position: relative;
	transition: .4s ease-out;
	overflow: hidden;
	background: #6ba856;
	text-align: center;
	width: 40rem;
}
header div.hSteats > a::before {
	content: "";
	background: #87c472;
	height: 120%;
	width: 0;
	display: block;
	position: absolute;
	right: -30%;
	transform: skewX(60deg);
	top: -10%;
	transition: .4s ease-out;
}
header div.hSteats > a:hover:before{width:160%; left:-30%; right:auto;}
header div.hSteats > a span {
	width: 100%;
	height: 100%;
	display: block;
	color: #fff;
	position: relative;
}
header div.hSteats > a:hover span {color:#fff;}
header div.hSteats > a:hover span:before {color:#fff;}
header nav {
	width: 100%;
	background: #e9fdef;
}
header nav ul {
	width: 100%;
	display: flex;
	margin: 3rem auto;
	justify-content: center;
	align-items: center;
	gap: 2rem;
}
header nav ul li{}
header nav ul li a {
	display: block;
	border: #d68c34 1px solid;
	border-radius: 100px;
	padding: 0 min(5vw , 50px) 0 min(3vw , 30px);
	position: relative;
	transition: .4s ease-out;
	overflow: hidden;
}
header nav ul li a::before {
	content: "";
	background: #d68c34;
	height: 120%;
	width:0;
	display: block;
	position: absolute;
	right: -30%;
	transform: skewX(60deg);
	top: -10%;
	transition: .4s ease-out;
}
header nav ul li a:hover:before{width:160%; left:-30%; right:auto;}
header nav ul li a span {
	width: 100%;
	height: 100%;
	display: block;
	color: #000;
	position: relative;
	font-size: 2rem;
}
header nav ul li a span::before {
	content: "▼";
	font-size: 72%;
	color: #d68c34;
	position: absolute;
	right: max(-2vw , -30px);
	height: 2em;
	top: 0;
	bottom: 0;
	margin: auto;
	transition: .4s ease-out;
}
header nav ul li a:hover span {color:#fff;}
header nav ul li a:hover span:before {color:#fff;}




/*-------- footer調整用 --------------*/

footer{}
footer section.contentWrap.contentWrap01{}
footer section.contentWrap.contentWrap01 ul {
	display: flex;
	flex-wrap: wrap;
}
footer section.contentWrap.contentWrap01 ul li{width:25%;}
footer h1 {
	width: 40rem;
	margin: 5rem auto;
}
footer nav {
	width: 100%;
}
footer nav ul {
	width: 180rem;
	display: flex;
	margin: 5rem auto;
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: wrap;
}
footer nav ul li {
	width: calc(100% / 5);
}
footer nav ul li a {
	display: block;
	padding: 0 min(3vw , 30px);
	position: relative;
	transition: .4s ease-out;
	overflow: hidden;
	border-right: #d68c34 1px solid;
	margin-bottom: 2rem;
	text-align: center;
}
footer nav ul li:nth-of-type(5n+5) a {border-right: none;}
footer nav ul li a::before {
	content: "";
	background: #d68c34;
	height: 120%;
	width:0;
	display: block;
	position: absolute;
	right: -30%;
	transform: skewX(60deg);
	top: -10%;
	transition: .4s ease-out;
}
footer nav ul li a:hover:before{width:160%; left:-30%; right:auto;}
footer nav ul li a span {
	width: 100%;
	height: 100%;
	display: block;
	color: #000;
	position: relative;
	font-size: 2rem;
}
footer nav ul li a:hover span {color:#fff;}
footer nav ul li a:hover span:before {color:#fff;}
footer small {
	display: block;
	text-align: center;
	margin-bottom: 5rem;
}
footer small a {
	color: #000;
	font-size: 100%;
}





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

/*-------- header調整用 --------------*/

header div.hSteats {
	justify-content: flex-end;
	gap: 2rem;
}

header div.hSteats h1 {
	width: 33vw;
	margin: 1rem 0;
	z-index: 12;
}
.open header div.hSteats h1 {
	position: fixed;
	left: 0;
}
header .bbc {
	background: rgba(255 , 255 , 255 , .9);
	height: 0;
	width: 100vw;
	position: fixed;
	top: 0;
	left: 0;
	transition: .2s ease-in;
	z-index: 10;
}
.open header .bbc {height: 150vh;}

header div.hSteats > h1 + div.inqWrap {
	width: calc(67vw - 2rem);
	padding: 1vw 15vw 1vw 0;
	text-align: center;
}
header div.hSteats > h1 + div.inqWrap > span:nth-of-type(1) {
	display: none;
}
header div.hSteats > h1 + div.inqWrap > span:nth-of-type(2) {
	font-size: 3vw;
	font-weight: 800;
	width: 100%;
	padding-left: 7rem;
}
header div.hSteats > h1 + div.inqWrap > span:nth-of-type(2)::before {
	content: "";
	background: url(https://garlic-musume.com/site/wp-content/themes/garlic/assets/images/h-sendfree.png) no-repeat center / 100%;
	width: 9rem;
	height: 7rem;
	position: absolute;
	left: 3vw;
	top: 0;
	bottom: 0;
	margin: auto;
}
header div.hSteats > h1 + div.inqWrap > span:nth-of-type(3) a {
	line-height: 0.7;
}
header div.hSteats > h1 + div.inqWrap > span:nth-of-type(3) a > span {
	font-size: 2rem;
	color: #333;
	margin: 0 4vw 0 0;
	text-align: right;
	display: block;
}
header div.hSteats > h1 + div.inqWrap > span:nth-of-type(3) a::before {
	bottom: initial;
	left: 0;
	margin: auto;
}
header div.hSteats > a {
	display: block;
	border: #6ba856 1px solid;
	border-radius: 1rem;
	padding: 1rem 6rem;
	overflow: hidden;
	background: #6ba856;
	text-align: center;
	position: fixed;
	z-index: 11;
	top: 130vw;
	width: 90%;
	transition: .4s ease-in;
	transform: translate(-100vw , 0);
	left: 5%;
}
header nav {
	width: 100%;
	background: none;
	position: fixed;
	z-index: 11;
	padding-top: 20rem;
	transition: .4s ease-out;
	transform: translate(100vw , 0);
}
.open header nav,
.open header  div.hSteats > a{transform: translate(0vw , 0);}
header nav ul {
	width: 100%;
	display: flex;
	margin: 3rem auto;
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: wrap;
}
header nav ul li {
	width: 100%;
}
header nav ul li a {
	display: block;
	border: none;
	border-radius: 0;
	padding: 0 min(5vw , 50px) 0 min(3vw , 30px);
	position: relative;
	transition: .4s ease-out;
	overflow: hidden;
	height: 12vw;
}
header nav ul li + li a {border-top: #d68c34 1px solid;}
header nav ul li a span {
	position: relative;
	line-height: 12vw;
	font-size: 3.5vw;
}
header nav ul li a span::before {
	transition: .4s ease-out;
	line-height: 5vw;
}
header div.menu {
	width: 10rem;
	height: 10rem;
	position: fixed;
	right: 0;
	top: 4vw;
	z-index: 11;
	background: rgba(255,255,255,.8);
}

header div.menu #menuButton {
	overflow: hidden;
	display: block;
	position: relative;
	z-index: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

header div.menu #menuButton span,
header div.menu #menuButton:before,
header div.menu #menuButton:after{
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 55%;
	height: 2px;
	margin: auto;
	background: #000;
	-webkit-transition: .1s ease-in-out;
	transition: all 1s;
}

header div.menu #menuButton span{
	overflow: hidden;
	z-index: 1;
	color: #fff;
}

header div.menu #menuButton:before{
	z-index: 2;
	transform:rotate(0deg);
	top:5rem;
	content: "";
}

header div.menu #menuButton:after{
	z-index: 2;
	transform:rotate(0deg);
	top:-5rem;
	content: "";
}

header div.menu #menuButton span{
	transform:rotate(0deg) translateX(0px);
}

header div.menu #menuButton:before,
header div.menu #menuButton:after{
	transition: transform 500ms;
}

header div.menu.active #menuButton span{
	transform:translateX(-100px);
	top:0;
}

header div.menu.active #menuButton::before {
	transform: rotate(-225deg);
	top: 0;
}

header div.menu.active #menuButton::after {
	transform: rotate(45deg);
	top: 0;
}



/*-------- footer調整用 --------------*/

footer section.contentWrap.contentWrap01 ul li {
	width: 100%;
	margin: auto;
}
footer nav ul {
	width: 100%;
}
footer nav ul li {
	width: calc(100% / 2);
}
footer nav ul li a {
	display: block;
	padding: 0 min(3vw , 30px);
	position: relative;
	transition: .4s ease-out;
	overflow: hidden;
	border-right: #d68c34 1px solid;
	margin-bottom: 0;
	text-align: left;
	height: 12vw;
}
footer nav ul li:nth-of-type(5n+5) a {
	border-right: #d68c34 1px solid;
}
footer nav ul li:nth-of-type(n+3) a {
	border-top: #d68c34 1px solid;
}
footer nav ul li a span {
	width: 100%;
	height: 100%;
	display: block;
	color: #000;
	position: relative;
	font-size: 3vw;
	line-height: 12vw;
}

}