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

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

/*============ header 調整用　==============*/
header.topHeader {
	width: 100%;
	padding: 0;
	margin: auto;
	position: relative;
	border-radius: 0;
	height: 100vh;
	background: no-repeat left center / cover;
}

header.topHeader .ecWrap {
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(255,255,255,.7);
	width: 100%;
	height: 6rem;
	z-index: 5;
}
header.topHeader .ecWrap a {
	width: min(24rem , 168px);
	display: block;
	position: absolute;
	right: 2rem;
	top: 0;
	bottom: 0;
	margin: auto;
	height: 5rem;
}
header.topHeader .ecWrap a img{width:100%; height:100%;}

header.topHeader h1 {
	margin: auto;
	position: absolute;
	width: min(13rem , 110px);
	left: 40rem;
	bottom: 50rem;
}

header.topHeader h1 a{}
header.topHeader h1 a img {
	align-items: center;
	display: flex;
}

header.topHeader nav {}

header.topHeader nav ul {
	position: absolute;
	left: 35rem;
	bottom: 5rem;
	border-top: 1px solid #000;
	width: 60rem;
	padding: 2.5rem 5rem;
	z-index: 2;
}

header.topHeader nav ul > li {
	position: relative;
	overflow: hidden;
}
header.topHeader nav ul > li::before {
	content: "";
	background: rgba(255,255,255,.3);
	height: 100%;
	width: 0;
	position: absolute;
	transform: skewX(45deg);
	right: -30%;
	top: 0;
	transition: .7s cubic-bezier(0.37, 0, 0.63, 1);
}
header.topHeader nav ul > li:hover{}
header.topHeader nav ul > li:hover:before{width:140%; right:auto; left:-30%;}
header.topHeader nav ul > li > a {
	position: relative;
	padding: 0;
	transition: .7s cubic-bezier(0.37, 0, 0.63, 1);
	display: block;
	padding: .5rem 0;
}
header.topHeader nav ul > li > a::before {
	content: "●";
	transform: scale(0,0);
	transition: .4s cubic-bezier(0.37, 0, 0.63, 1);
	transition-delay: .5s;
}
header.topHeader nav ul > li:hover > a {padding-left:2rem;}
header.topHeader nav ul > li:hover > a:before {transform:scale(1,1);}
header.topHeader div.toLink {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	width: 15rem;
	text-align: center;
	height: 5rem;
	bottom: 2rem;
	z-index: 2;
	text-shadow: 0 0 2rem #000 ,0 0 2rem #000 ,0 0 2rem #000 ,0 0 2rem #000;
}
header.topHeader div.toLink::before {
	content: "↓";
	color: #fff;
	font-size: 4rem;
	position: absolute;
	top: -7rem;
	left: 0;
	display: block;
	right: 0;
	transition: .5s ease-out;
	opacity: 0;
	transform: translate(0,3rem);
}
header.topHeader div.toLink:hover:before{
	opacity:1;
	transform:translate(0,1rem);
	}
header.topHeader div.toLink a{color:#fff;}


/*============ 下層header 調整用　==============*/

header:not(.topHeader) {
	width: 100%;
	padding: 0;
	margin: auto;
	position: fixed;
	border-radius: 0;
	height: 15rem;
	top: 0;
	left: 0;
	z-index: 11;
	background: rgba(255,255,255,.7);
}

header:not(.topHeader) .ecWrap {
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(255,255,255,.7);
	width: 100%;
	height: 6rem;
}
header:not(.topHeader) .ecWrap a {
	width: min(24rem , 168px);
	display: block;
	position: absolute;
	right: 2rem;
	top: 0;
	bottom: 0;
	margin: auto;
	height: 5rem;
}
header:not(.topHeader) .ecWrap a img{width:100%; height:100%;}

header:not(.topHeader) h1 {
	margin: auto;
	position: absolute;
	width: min(10rem , 80px);
	left: 10rem;
	bottom: -5rem;
}

header:not(.topHeader) h1 a{}
header:not(.topHeader) h1 a img {
	align-items: center;
	display: flex;
}

header:not(.topHeader) nav {}

header:not(.topHeader) nav ul {
	position: absolute;
	left: 21rem;
	top: 6rem;
	border-top: 1px solid #000;
	width: calc(100% - 21rem);
	padding: 2.5rem 5rem;
	z-index: 2;
	display: flex;
	justify-content: space-between;
}

header:not(.topHeader) nav ul > li {
	position: relative;
	overflow: hidden;
	padding: 0 4rem 0 0;
	height: 5rem;
}
header:not(.topHeader) nav ul > li::before {
	content: "";
	background: rgba(00,00,00,.3);
	height: 50%;
	width: 0;
	position: absolute;
	transform: skewX(45deg);
	right: -30%;
	bottom: 0;
	transition: cubic-bezier(0.6, 2, 0.3, 0.8) 1s;
}
header:not(.topHeader) nav ul > li:hover{}
header:not(.topHeader) nav ul > li:hover:before{width:120%; right:auto; left:-30%;}
header:not(.topHeader) nav ul > li > a {
	position: relative;
}

header:not(.topHeader) nav ul > li > a:before {
	content: "▼";
	width: 1rem;
	height: 2rem;
	position: absolute;
	top: 0;
	bottom: 0rem;
	margin: auto;
	right: -5rem;
	z-index: 3;
	transform: rotate(30deg);
	transition: cubic-bezier(0.6, 2, 0.7, 1) 1.3s;
	font-size: 1.5rem;
}
header:not(.topHeader) nav ul > li:hover > a {transform:translate(0 , 0);}
header:not(.topHeader) nav ul > li:hover > a:before {top: 0; bottom: 0rem; right: -2rem;}


/*============ footer 調整用　==============*/
footer {
	width: min(90% , 200rem);
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 10rem auto 5rem;
}

footer > h1 {
	margin: 5rem auto;
	width: min(15rem , 110px);
}

footer > div.fWrap {
	width: 100%;
}
footer > div.fWrap nav{}
footer > div.fWrap nav ul {
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	margin: 10rem auto 3rem;
}
footer > div.fWrap nav ul li {
	position: relative;
	overflow: hidden;
	padding: 0 4rem 0 1rem;
}
footer > div.fWrap nav ul li::before {
	content: "";
	background: rgba(000,000,000,.3);
	height: 50%;
	width: 0%;
	position: absolute;
	transform: skewX(45deg);
	right: -30%;
	bottom: 0;
	transition: cubic-bezier(0.6, 2, 0.3, 0.8) 1s;
}
footer > div.fWrap nav ul li:hover:before{content:""; width:120%; right:auto; left:-30%;}
footer > div.fWrap nav ul li a{position: relative;}
footer > div.fWrap nav ul li:hover a{}
footer > div.fWrap nav ul li a::before {
	content: "▼";
	width: 1rem;
	height: 2rem;
	position: absolute;
	top: 0;
	bottom: 0rem;
	margin: auto;
	right: -5rem;
	z-index: 3;
	transform: rotate(30deg);
	transition: cubic-bezier(0.6, 2, 0.7, 1) 1.3s;
	font-size: 1.5rem;
	text-shadow: none;
}
footer > div.fWrap nav ul li:hover a::before {top: 0; bottom: 0rem; right: -2rem;}
  
footer > div.fWrap > a {
	width: min(24rem , 168px);
	display: block;
	margin: 1rem 2rem 0 auto;
}
footer > div.fWrap > a img{
	transition: cubic-bezier(0.6, 2, 0.3, 0.8) 1s;
	}
footer > div.fWrap > a:hover img{transform:rotate(-2deg) translate(0 , -10px);}


footer > small {
	color: #000;
	font-weight: normal;
	display: block;
	margin: auto 4rem;
}

footer > small a{}


.site > p.toLink {
	position: fixed;
	right: 0;
	margin: auto;
	width: 15rem;
	text-align: center;
	height: 5rem;
	bottom: 2rem;
	z-index: 2;
	text-shadow: 0 0 2rem #000 ,0 0 2rem #000 ,0 0 2rem #000 ,0 0 2rem #000;
}
.site > p.toLink::before {
	content: "↑";
	color: #fff;
	font-size: 4rem;
	position: absolute;
	top: -7rem;
	left: 0;
	display: block;
	right: 0;
	transition: .5s ease-out;
	opacity: 0;
	transform: translate(0,3rem);
}
.site > p.toLink:hover:before{
	opacity:1;
	transform:translate(0,1rem);
	}
.site > p.toLink a{color:#fff;}





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

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

/*============ header 調整用　==============*/

header.topHeader {
    height: 80vh;
    background: no-repeat left -30vw center / cover;
}
header .bbc {
	background: rgba(255,255,255,.7);
	width: 100vw;
	height: 120vh;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10;
	transform: translate(0,-200vh);
	transition: .4s ease-out;
}
.open header .bbc{transform: translate(0,0);}
header:not(.topHeader) {
	width: 100%;
	padding: 0;
	margin: auto;
	position: relative;
	border-radius: 0;
	height: 15rem;
	top: 0;
	left: 0;
	z-index: 11;
	background: none;
}
/*
header.topHeader h1 {
	width: 12vw;
	left: 2vw;
	bottom: initial;
	top: 2vw;
}
*/

header.topHeader h1,
header:not(.topHeader) h1 {
	width: 12vw;
	left: 2vw;
	bottom: initial;
	top: 1vw;
	z-index: 11;
}

header.topHeader .ecWrap,
header:not(.topHeader) .ecWrap {
	position: fixed;
	top: 0vw;
	left: initial;
	background: rgba(255,255,255,.7);
	width: 36rem;
	height: 13rem;
	transition: .4s cubic-bezier(0.37, 0, 0.63, 1);
	z-index: 11;
	right: 15rem;
	border-radius: 0 0 0 2rem;
}
header.topHeader .ecWrap a,
header:not(.topHeader) .ecWrap a {
	width: 31vw;
	display: block;
	position: absolute;
	right: 2rem;
	top: 0;
	bottom: 0;
	margin: auto;
	height: 7vw;
}

header.topHeader nav h1,
header:not(.topHeader) nav h1 {
	position: fixed;
	z-index: 11;
	left: 6vw;
	top: 5vw;
	transition: .7s cubic-bezier(0.37, 0, 0.63, 1);
	transform: translate(0 , -50vh);
	height: 20vw;
	bottom: inherit;
	margin: initial;
	width: 12vw;
}
.open header.topHeader nav h1,
.open header:not(.topHeader) nav h1{transform: translate(0 , 0);}

header.topHeader nav ul,
header:not(.topHeader) nav ul {
	position: fixed;
	left: initial;
	bottom: initial;
	border-top: 0;
	width: 100%;
	padding: 2.5rem 5rem;
	z-index: 11;
	top: 41.5vw;
	right: 0;
	background: rgba(255,255,255,.7);
	transition: .4s cubic-bezier(0.37, 0, 0.63, 1);
	transform: translate(100vw , 0);
	flex-wrap: wrap;
}

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

header:not(.topHeader) nav ul > li {
	position: relative;
	overflow: hidden;
	padding: 0 4rem 0 0;
	height: auto;
	width: 100%;
}

header.topHeader nav ul > li::before {
	top: initial;
	content: "";
	background: rgba(00,00,00,.3);
	height: 50%;
	width: 0;
	position: absolute;
	transform: skewX(45deg);
	right: -30%;
	bottom: 0;
	transition: cubic-bezier(0.6, 2, 0.3, 0.8) 1s;
	height: 1vw;
	width: 128%;
	right: -30%;
	bottom: 0;
}
header:not(.topHeader) nav ul > li::before {
	content: "";
	background: rgba(00,00,00,.3);
	height: 50%;
	width: 0;
	position: absolute;
	transform: skewX(45deg);
	right: -30%;
	bottom: 0;
	transition: cubic-bezier(0.6, 2, 0.3, 0.8) 1s;
	height: 1vw;
	width: 128%;
	right: -30%;
	bottom: 0;
}

header.topHeader nav ul > li > a,
header:not(.topHeader) nav ul > li > a {
	padding: 3vw 0;
	font-size: 3.5vw;
	display:block;
}
header:not(.topHeader) nav ul > li > a::before {
	transform: scale(1,1);
	margin: 0 2vw;
	content: "●";
	position: static;
	font-size: 3.5vw;
	width: auto;
	height: auto;
}

header.topHeader nav ul > li > a::before {
	transform: scale(1,1);
	margin: 0 2vw;
}

header.topHeader div.toLink::before {
	opacity:1;
	transform:translate(0,1rem);
}

header div.menu {
	width: 15rem;
	height: 13rem;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 11;
	display: block;
	background: rgba(255,255,255,.7);
}

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 {
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 10rem auto 5rem;
}

footer > div.fWrap nav ul {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	flex-wrap: wrap;
}

footer > div.fWrap nav ul li {
	position: relative;
	overflow: hidden;
	padding: 0;
	width: 50vw;
}
footer > div.fWrap nav ul li::before {
	content: "";
	background: rgba(000,000,000,.3);
	height: 1vw;
	width: 125%;
	right: -30%;
	bottom: 2vw;
}
footer > div.fWrap nav ul li a {
	position: relative;
	display: block;
	width: 100%;
	height: 11vw;
	line-height: 11vw;
	padding: 0 5vw 0 3vw;
}
footer > div.fWrap nav ul li a::before {
	content: "▼";
	top: -7.5vw;
	bottom: 0;
	margin: auto;
	transform: rotate(30deg);
	font-size: 1.5rem;
	right: 3vw;
}

footer > div.fWrap > a {
	width: 33vw;
	display: block;
	margin: 2vw 2rem 10vw auto;
}
.site > p.toLink::before {
	opacity:1;
	transform:translate(0,1rem);
	}
	
	
	
}