/*ヘッダー*/
ul.navbar-nav li a,
.socialBtn a {
  font-family: "futura-pt", sans-serif;
	color: #fdfdfd;
	font-size: 1.5rem;
	font-weight: 400;
  text-decoration: none;
  margin-left: 1.5rem;
  position: relative;
}
.socialBtn a.nav-link:hover {
  color: #9cbb1c !important;
  transition: 800ms !important;
}

/*header-navのhover時の下線表示*/
ul.navbar-nav li a::after {
	position: absolute;
	content: '';
	left: 10px;
	bottom: 0;
	width: 0%;
	height: 2.5px;
	transition: all 500ms ease;
}
ul.navbar-nav li a:hover::after {
	width: 60%;
}
.navbar-trans a:hover::after {
	background-color: #fdfdfd;
}
.navbar-white a:hover::after {
	background-color: #9cbb1c;
}

/*scrollすると色が変わるheader-nav*/
.navbar-trans {
	background: transparent;
	transition: background 800ms;
}
.navbar-trans a {
	color: #fdfdfd;
}
.navbar-white {
	background: #fdfdfd;
	transition: background 800ms;
}
.navbar-white a,
.navbar-white span.logo {
	color: #4A3931 !important;
}
.navbar-trans .navbar-nav a,
.navbar-white .navbar-nav a {
	font-size: 1.1rem;
	transition: color 800ms;
}

.pp-hero {
	background: url(img/privacy.png);
	background-size: cover;
	background-position: 50% 80%;
	height: 15rem;
}
.overlay {
	content: '';
	top: 0px;
	left: 0px;
	padding: 0;
	width: 100%;
	height: 100%;
	background: rgba(59, 59, 59, 0.7);
}
.about-hero h1 {
	font-size: 2.5rem;
	font-family: "futura-pt", sans-serif;
	padding-top:2.5rem;
}
.about-hero h1::after {
	content: "Privacy policy";
}

#web.container {
	margin: 4rem 0;
}
.service-desc {
	margin-bottom: 4rem;
}
.s-title {
	margin-top: 4rem;
	margin-bottom: 2rem;
}
.s-title h4 {
	font-weight: bold !important;
	color: #9cbb1c !important;
}
.web-plan h5 {
	font-size: 1.5rem;
	font-weight: bold;
}

.fix-page i {
	color: #9cbb1c !important;
}

br.br {
	display: block;
}
br.sp-only {
	display: none;
}

@media only screen and (max-width:768px) {
.web-hero h1 {
	font-size: 2rem;
}
#headernav .active::before{
	width: 25% !important;
}
#headernav .nav-item-work {
	margin-top: 13rem;
}
.sub-menu {
	display: block;
	left: 1rem;
}
#headernav .collapse a::after {
	left: 0;
}
#headernav .collapse a:hover::after {
	width: 3.5em;
}
#headernav .nav-link::before {
	width: 1.6em;
}

}

@media only screen and (max-width:525px) {
.web-plan h5 {
	margin-top: 4rem;
}
.sp-reverse {
	flex-direction: column-reverse;
}
p {
	font-size: 0.9rem;
}
.attention p {
	font-size: 0.8rem;
}
br.br {
	display: none;
}
br.sp-only {
	display: block;
}
}