/*============ 共通項目 ==============*/

@media only screen and (min-width:1000px){*.sp{display:none !important;}}
@media only screen and (max-width:1000px){*.pc{display:none !important;}}

/*============ header 調整用　==============*/
header {
	width: 100%;
	padding: 0;
	display: flex;
	justify-content: space-between;
	z-index: 12;
	position: relative;
}

header h1 {
	position: absolute;
	width: 120rem;
	top: 25rem;
	left: 10rem;
}
header nav {
	position: absolute;
	right: 7rem;
}
header nav ul li{}
header nav ul li a{position:relative;}
header nav ul li a::before {
	content: "";
	background: #fff;
	height: .3rem;
	width: 0;
	position: absolute;
	right: 0;
	bottom: -2rem;
	transition: .3s ease-in;
}
header nav ul li a:hover:before{width:100%; left:0; right:auto;}
header nav ul li + li{}

nav.fixed {
	position: fixed;
	right: 0;
	top: 20rem;
	z-index: 10;
	background: #792e41;
	padding: 2rem;
	border-radius: 1rem 0 0 1rem;
}
nav.fixed ul{}
nav.fixed ul li{}
nav.fixed ul li a {
	color: #fff;
	padding: 1rem 0;
	display: block;
	line-height: 5rem;
}
nav.fixed ul li a img{}

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

header h1 {
	position: absolute;
	width: 70vw;
	top: 7vw;
	left: 3vw;
}

header nav {
	position: fixed;
	right: 0;
	width: 100%;
	top: 0;
	padding-top: 20rem;
	background: #792e41;
	transform: translate(0,-100%);
	transition: .4s ease-out;
	height: 100vh;
}

.open header nav {transform: translate(0,0);}

header nav ul li {
	width: 100%;
	height: 13vw;
	line-height: 8vw;
}
header nav ul li a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding-left: 4vw;
}

header nav ul li a img {
	width: min(20vw , 80px);
}

header nav ul li + li {border-top:1px solid #fff;}

nav.fixed {
	position: fixed;
	right: 2rem;
	top: 83vw;
	z-index: 12;
	width: 100%;
	transform: translate(-100%,0);
	transition: .4s ease-in;
}

.open nav.fixed {transform: translate(0,0);}

nav.fixed ul li {
	width: 100%;
	border-top: 1px solid #fff;
	text-orientation: initial;
	writing-mode: initial;
}

nav.fixed ul li a {
	color: #fff;
	padding: 1rem 0;
	display: flex;
	line-height: 5rem;
	text-orientation: initial;
	writing-mode: initial;
	width: 100%;
	align-items: center;
	padding: 3vw 0 0 5vw;
}
nav.fixed ul li a img {
	width: 8vw;
}
header div.menu {
	width: 13rem;
	height: 12rem;
	position: fixed;
	right: 0;
	top: 0;
}

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

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: #fff;
	-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:6rem;
	content: "";
}

header div.menu #menuButton:after{
	z-index: 2;
	transform:rotate(0deg);
	top:-6rem;
	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;
}


}


@media only screen and (max-width:1000px) and (max-height:600px){
header nav {
	padding-top: 15vh;
	height: 100vh;
}

header nav ul li {
	width: 100%;
	height: 13vh;
	line-height: 8vh;
}

nav.fixed {
	position: fixed;
	right: 2rem;
	top: 80vh;
	z-index: 12;
	width: 100%;
	transform: translate(-100%,0);
	transition: .4s ease-in;
}

nav.fixed ul li a {
	color: #fff;
	padding: 1rem 0;
	display: flex;
	line-height: 8vh;
	text-orientation: initial;
	writing-mode: initial;
	width: 100%;
	align-items: center;
	padding: 3vh 0 0 5vh;
}

nav.fixed ul li a img {
	width: 8vh;
}

}


/*============ footer 調整用　==============*/

footer {
	padding: 7rem 0;
	background: #792e41;
}

footer div.fWrap {
	width: min(94% , 200rem);
	margin: 5rem auto 0;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
footer div.fWrap.fWrap01 {
	padding: 0 17rem;
}
footer div.fWrap.fWrap01 h2 {
	width: 30rem;
}
footer div.fWrap.fWrap01 a {
	display: block;
	overflow: hidden;
	position: relative;
	text-align: center;
	height: 10rem;
	margin: 0;
	line-height: 9rem;
	width: 105rem;
	border: #fff solid 2px;
}

footer div.fWrap.fWrap01 a span {
	position: relative;
	z-index: 3;
	font-size: 2.5rem;
	color: #fff;
	transition: .4s ease-in-out;
}

footer div.fWrap.fWrap01 a:after {
	content: '';
	display: block;
	height: 100%;
	width: 0%;
	background: #fff;
	margin: 0 auto;
	transition: 0.6s;
	position: absolute;
	bottom: 0;
	right: -30%;
	z-index: 2;
	transform: skewX(40deg);
}

footer div.fWrap.fWrap01 a:hover:after{width:calc(140%); right:auto; left:-30%;}
footer div.fWrap.fWrap01 a:hover span{color:#792e41;}
footer div.fWrap.fWrap01 a span::before {
	content: "";
	background: url(https://myff.link/flat/wp-content/themes/waon-flat/assets/images/h-icon_02.png) no-repeat center / 100%;
	width: 5rem;
	height: 5rem;
	position: absolute;
	left: -9rem;
	top: 0;
	bottom: 0;
	margin: auto;
}
footer div.fWrap.fWrap01 a span::after {
	content: ">";
	padding-left: 5rem;
}
footer div.fWrap.fWrap02 {
	padding-top: 7rem;
	border-top: .3rem solid #fff;
	margin-top: 7rem;
}
footer div.fWrap.fWrap02 h1 {
	width: 35rem;
	margin-bottom: 2rem;
}
footer div.fWrap.fWrap02 address {
	color: #fff;
}
footer nav{}
footer nav ul li{}
footer nav ul li:last-of-type {
	margin-left: 3rem;
}
footer nav ul li:not(:last-of-type) a{position:relative;}
footer nav ul li:not(:last-of-type) a:before {
	content: "";
	background: #fff;
	height: .3rem;
	width: 0;
	position: absolute;
	right: 0;
	bottom: -2rem;
	transition: .3s ease-in;
}
footer nav ul li:not(:last-of-type) a:hover:before{width:100%; left:0; right:auto;}

footer small {
	color: #fff;
	font-size: 2rem;
	display: block;
	text-align: right;
	width: min(94% , 200rem);
	margin: 2rem auto 0;
}
footer small a {
	color: #fff;
	font-size: 2rem;
}


/*============ スマホページ 調整用　==============*/

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

footer div.fWrap {
	width: min(94% , 200rem);
	margin: 5rem auto 0;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
footer div.fWrap.fWrap01 {
	padding: 0 5vw;
}
footer div.fWrap.fWrap01 h2 {
	width: 40vw;
}
footer div.fWrap.fWrap01 a {
	display: block;
	overflow: hidden;
	position: relative;
	text-align: center;
	height: 10vw;
	margin: 7vw auto 0;
	line-height: 9vw;
	width: 100%;
	border: #fff solid 2px;
}

footer div.fWrap.fWrap01 a span {
	position: relative;
	z-index: 3;
	font-size: 3vw;
	color: #fff;
	transition: .4s ease-in-out;
}
footer div.fWrap.fWrap02 {
	padding-top: 7rem;
	border-top: .3rem solid #fff;
	margin-top: 7rem;
	width: 100%;
}
footer div.fWrap.fWrap02 h1 {
	width: 35vw;
	margin: 0 3vw 3vw;
}
footer nav {
	width: 100%;
}
footer nav ul{
	width: 100%;
	border-top: 1px #fff solid;
	margin-top: 5vw;
}
footer nav ul li {
	width: 50%;
	height: 12vw;
	line-height: 8vw;
	border-bottom: 1px #fff solid;
}
footer nav ul li:last-of-type {
	margin-left: 0;
}
footer nav ul li img{
	width: min(20vw , 80px);
}
footer nav ul li:last-of-type img {
	width: 7vw;
	margin: 2.5vw;
}
footer nav ul li:nth-of-type(2n+1) {border-right:1px #fff solid;}
footer nav ul li a {
	display: block;
	width: 100%;
	height: 100%;
}
footer small,
footer small a{
	font-size: 3vw;
}

}