/* ------------------------------
　　--TOP header nav--
------------------------------ */
#head_fix {
    background: none;
		position: relative;
		height: 0;
	}
	#head_fix #nav02 li:nth-child(1) a,	#head_fix #nav02 li:nth-child(2) a ,	#head_fix #nav02 li:nth-child(3) a ,	#head_fix #nav02 li:nth-child(4) a  {
	    color: #333;
	}
	#head_fix #nav02 li:nth-child(1) a::before {
	    background: #333 url(../images/common/icon_wa.svg)no-repeat center center;
			background-size: 68%;
		}
		#head_fix #nav02 li:nth-child(2) a::before {
	    background: #333 url(../images/common/icon_tel.svg)no-repeat center center;
			background-size: 68%;
		}

#head_fix #nav02 li:nth-child(3) a::before {
    background: #333 url(../images/common/icon_book.svg)no-repeat center center;
		background-size: 68%;
	}
	#head_fix #nav02 li:nth-child(4) a::before {
    background: #333 url(../images/common/icon_mail.svg)no-repeat center center;
		background-size: 68%;
	}
#head_fix #nav li a{
	color:#fff;
}
#head_fix .logo {
    position: fixed;
}
#head_fix .inner {
    align-items: normal;
	}
	#head_fix #nav {
padding: 53.2% 0 0 18%;
    width: 100%;
	}
	#head_fix #nav li {
	    font-size: 1.1rem;
	    margin: 3% 1.5%;
	}
  #nav02 {
      margin-top: 2%;
      position: fixed;
      right: 5%;
	}

@media screen and (max-width: 1590px) {
#head_fix #nav {
    padding-top: 55.2%;
}

}
@media screen and (max-width: 1530px) {
#head_fix #nav {
    padding-top: 56.5%;
}

}
@media screen and (max-width: 1500px) {
  #main .inner {
    padding-bottom: 5%;

}
.top #main {
    padding: 53.2% 0 0 0;
    height: 0;
    background: url("../images/top/main.jpg")no-repeat;
    background-size: contain;
}
#head_fix #nav li {
  font-size: 1rem;
    margin: 8% 1.5%;
}

#main h1 {
    width: 40%;
    position: absolute;
    right: 8%;
    top: -680%;
}
	}

@media screen and (max-width: 1350px) {
  #head_fix #nav {
      padding-left: 15%;
  }

  }
@media screen and (max-width: 1200px) {
  #head_fix #nav {
    padding-left: 10%;
}
}
@media screen and (max-width: 1100px) {
#head_fix #nav {
    padding-left: 5%;
}
}
@media screen and (max-width: 1024px) {
#head_fix #nav {
    padding-left: 1%;
}
}
@media screen and (max-width: 980px) {
  #head_fix .logo {
      position: unset;
  }
  #nav02 {
    position: unset;
    right: 0;
    display: block;
}
	#head_fix #nav02 li:nth-child(1) a::before {
	background: #f26576 url(../images/common/icon_wa.svg)no-repeat center center;
	border-radius: 50%;
	background-size: 68%;
	}
	#head_fix #nav02 li:nth-child(1) a {
	    color:#f26576;
	}
	#head_fix #nav02 li:nth-child(2) a::before {
	background: #ffb14a url(../images/common/icon_tel.svg)no-repeat center center;
	border-radius: 50%;
	background-size: 68%;
	}
	#head_fix #nav02 li:nth-child(2) a {
	    color:#ffb14a;
	}
	#head_fix #nav02 li:nth-child(3) a::before {
	background: #34bdd7 url(../images/common/icon_book.svg)no-repeat center center;
	border-radius: 50%;
	background-size: 68%;
	}
	#head_fix #nav02 li:nth-child(3) a {
	    color:#34bdd7;
	}
	#head_fix #nav02 li:nth-child(4) a::before {
	background: #6684f1 url(../images/common/icon_mail.svg)no-repeat center center;
	border-radius: 50%;
	background-size: 68%;
	}
	#head_fix #nav02 li:nth-child(4) a {
	    color:#6684f1;
	}
	#head_fix {
	    background: rgba(256,256,256,.85);
			height: 4.5em;
			position: fixed;
		}
		#nav02 {
    margin-top: 0;
}


}

@media screen and (max-width: 768px) {
.top #main {
    padding: 30% 0 0 0;
    height: 450px;
    background: url("../images/top/main.jpg")70% center no-repeat;
    background-size: cover;
    margin-top: 4.5em;
}
#main h1 {
    width: 50%;
    position: absolute;
    right: 0;
    top: -180%;
}




    }


@media screen and (max-width: 580px) {
.top #main {
    height: 370px;
    background: url("../images/top/main.jpg")60% center no-repeat;
    background-size: cover;
}
#main h1 {
    width: 60%;
    top: -100%;
}
#info li {
    width: 100%;
  }


}


@media screen and (max-width: 480px) {
.top #main {
background: url("../images/top/main.jpg")20% center no-repeat;
background-size: cover;
}
#main h1 {
top: 400%;
left: 20%;
}
#main h1 img {
    filter: drop-shadow(2px 2px 2px rgba(57, 57, 57, 0.8));
}

    }



@media screen and (max-width: 414px) {
.top #main {
background: url("../images/top/main.jpg")25% 85% no-repeat;
background-size: cover;
margin-top: 3.5em;
padding: 0;
}
#main h1 {
    top: 1100%;
    left: 10%;
    width: 80%;

}
#head_fix {
    height: 3.5em;
  }
 }



@media screen and (max-width: 375px) {
.top #main {

    background: url("../images/top/main.jpg")25% 100% no-repeat;
    background-size: cover;
    height: 350px;

}
#main h1 {
    top: 1150%;

}
}

@media screen and (max-width: 320px) {
.top #main {
    background: url("../images/top/main.jpg")40% center no-repeat;
    background-size: cover;
    height: 350px;

}
#main h1 {

    top: 1450%;

}
}