/*nav section*/

/*before*/
#head{
height: 80px;
width:100%;
display: flex;
justify-content: space-between;
position: fixed;
z-index: 999;
transition: 0.4s;
}
#head h1 a{
display: block;
margin:30px 0 0 30px;
padding:0;
width: 380px;
height: 60px;
background-image: url("../img/img_logo.svg");
background-repeat: no-repeat;
background-size:contain;
background-position: top left;
text-indent: -9999px;
transition: 0.4s;
}
#head nav ul {
list-style: none;
display: flex;
justify-content:flex-end;
}
#head nav ul li a{
font-size: 18px;
font-weight: 700;
margin: 30px 40px 0 0;
display: inline-block;
position: relative;
transition: 0.4s;
color:#000000;
text-decoration: none;
}
#head nav ul li:last-child a{
text-align: center;
height: 80px;
width: 220px;
margin: 0;
padding: 27px 0 0 0;
color:#FFFFFF;
background-color: #000000;
transition: 0.4s;
}
#head nav ul li:last-child a:hover{
background-color: #806915;
transition: 0.4s;
}
#head nav ul li:last-child a::after{
content: url("../img/img_link.svg");
vertical-align: middle;
padding: 0 0 0 10px;
}

#head nav ul li #selected{
color: #977600;
}
/*hover*/
#head nav ul li a:before{
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 2px;
background: #977600;
transform: scale(0, 1);
transition: 0.4s;
}
#head nav ul li a:hover:before {
transform: scale(1);
}
#head nav ul li:last-child a:before{
display: none;
}
/*after*/
#head.HeightMin{
position: fixed;
z-index: 999;
height:60px;
background-color: rgba(255,255,255,0.90);
box-shadow: 0 2px 4px rgb(255,255,255);
filter:alpha(opacity=30); 
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
transition: 0.4s;
}
#head.HeightMin h1 a{
margin:15px 0 0 15px;
width: 240px;
height:30px;
transition: 0.4s;
}
#head.HeightMin nav ul li a{
font-size: 14px;
margin: 20px 30px 0 0;
color:#000000;
}
#head.HeightMin nav ul li:last-child a{
text-align: center;
font-size: 14px;
height: 60px;
width: 180px;
margin: 0;
padding: 20px 0 0 0;
color:#FFFFFF;
background-color: #000000;
transition: 0.4s;
}
#head.HeightMin nav ul li:last-child a:hover{
background-color: #806915;
transition: 0.4s;
}
@media screen and (max-width: 1300px) {
/*menu*/
#head h1 a{
height:40px;
margin:20px 0 0 20px;
}
.fixed #head h1 a{
background-image: url("../img/img_logo_white.svg");
}
#head.HeightMin{
height:80px;
}
#head.HeightMin h1 a{
height:40px;
margin:20px 0 0 20px;
transition: 0.4s;
}
#head nav #pc ul{
position: fixed;
display: block;
width: 100%;
height: 100vh;
background-color: hsla(0,0%,0%,0.90);
top: 0;
right: -100%;
padding-top: 120px;
}
#head nav #pc ul.open{
right: 0px;
/*overflow-y:scroll;*/
}
#head nav #pc ul.open body{
pointer-events:none;
}
#head nav #pc ul li a{
display: block;
font-size: 24px;
font-weight: 500;
color: #FFFFFF;
padding: 30px 40px;
margin: 0 20px;
}
#head nav #pc ul li:last-child a{
display: block;
font-size: 24px;
font-weight: 500;
color: #FFFFFF;
padding: 30px 40px;
margin: 0 20px;
width: 100%;
height: auto;
text-align: left;
background-color: rgba(0,0,0,0.00);
border-bottom: 1px solid #333333;
}
#head nav #pc ul li:last-child a::after{
content: url("../img/img_link.svg");
vertical-align: unset;
padding: 0 0 0 20px;
}
#head nav #pc ul li a:before{
transform: scale(0);
}
#head nav #pc ul li+li{
border-top: 1px solid #333333;
}
#head nav #pc #selected{
pointer-events:all;
color: #FFFFFF;
}
/*btn*/
#head nav #sp{
display: inherit;
}
#head nav #sp .btn-gNav a{
position: relative;
margin:0;
padding: 20px 0 0 0;
width: 80px;
height: 60px;
background-image: none;
background-repeat: no-repeat;
background-position: 10px 10px;
color: #000000;
text-indent: 0;
text-align: center;
display: inline-block;
border-radius: 0;
}
#head h1,#head #sp,#head .closed{
z-index: 2000;
} 
/*scroll*/
#head .closed a{
display: block;
position: fixed;
top:0;
right:80px;
height: 80px;
width: 80px;
cursor: pointer;
}
#head .addbtn a{
right:0;
}    
#head nav #sp .btn-gNav span{
position: absolute;
width: 40px;
height: 2px;
background: #000000;
border-radius: 10px;
-webkit-transition: all 400ms;
transition: all 400ms;
}
#head.HeightMin nav #sp .btn-gNav span{
background: #000000;
}
#head nav #sp .btn-gNav span:nth-child(1) {
top:30px;
left:20px;
}
#head nav #sp .btn-gNav span:nth-child(2) {
top:40px;
left:20px;
}
#head nav #sp .btn-gNav span:nth-child(3) {
top:50px;
left:20px;
}
/*hover*/
#head nav #sp .btn-gNav.open span:nth-child(1){
background: #fff;
top: 40px;
-webkit-transform: rotate(-45deg);
-moz-transform   : rotate(-45deg);
transform        : rotate(-45deg);
}
#head nav #sp .btn-gNav.open span:nth-child(2),#head nav #sp .btn-gNav.open span:nth-child(3){
top: 40px;
background :#fff;
-webkit-transform: rotate(45deg);
-moz-transform   : rotate(45deg);
transform        : rotate(45deg);
}	
}


/*pagetop section*/
#page-top a{
display: flex;
justify-content:center;
align-items:center;
background:#000000;
width: 50px;
height: 50px;
border-radius: 25px;
color: #fff;
text-align: center;
text-transform: uppercase; 
text-decoration: none;
font-size:16px;
transition:all 0.3s;
}
#page-top a:hover{
background-color: #806915;
}
#page-top {
position: fixed;
right: 10px;
z-index: 300;
/*はじめは非表示*/
opacity: 0;
transform: translateY(100px);
}
#page-top.UpMove{
animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#page-top.DownMove{
animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 1;
transform: translateY(100px);
}
}