/*
Theme Name: ビューティーライフ
Requires PHP: 7.4
Version: 2024.2
*/

/* common --------------------------------------*/
html {
	font-size: 62.5%;
	box-sizing: border-box;
}
*, *::before, *::after {
	box-sizing: inherit;
}
html, body {
	height: 100%;
	margin: 0;
}
.entry-content{
	padding: 3rem 0 0;
}
/* header -------------------------------------*/
#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
}
#header .header-inner {
	background-color: transparent;
	padding: 1.5rem 2rem;
	align-items: center;
}
#header .site_logo {
	max-width: 24vw;
	width: 100%;
	line-height: 0;
}
#header .site_logo-sp{
	display: none;
}
#menu-g-nabi a {
	color: #000;
	font-weight: 600;
	padding: 0.5rem 0;
}
#menu-g-nabi a:hover {
	color: #000;
}
#menu-g-nabi .menu-item-has-children {
	position: relative;
	display: inline-flex;
	align-items: center;
}
#menu-g-nabi .menu-item-has-children::after {
	content: "";
	display: inline-block;
	background-color: transparent;
	border: 2px solid;
	border-color: #000 #000 transparent transparent;
	transform: rotate(135deg);
	width: 8px;
	height: 8px;
	box-sizing: border-box;
	margin-right: 6px;
	position: absolute;
	right: 2px;
}
@media screen and (min-width: 769px) {
	#header .header-inner {
		padding: 2.5rem 3rem;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		gap: 4rem;
	}
	#header {
		transition: 1s ease;
	}
	#header.scrolled {
		background: rgba(255, 255, 255, 0.6);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		transition: background 0.5s ease, backdrop-filter 0.3s ease;
	}
	#header .site_logo h1 {
		margin: 0;
		padding: 0;
		line-height: 0;
	}
	#menu-g-nabi {
		display: flex;
		align-items: center;
		gap: 3rem;
	}
	#menu-g-nabi a {
		font-size: clamp(1.1rem, 1.5vw, 1.8rem);
	}
	#menu-g-nabi ul li a {
		margin: 0;
		padding: 1rem;
	}
	#menu-g-nabi .sub-menu {
		display: none;
		position: absolute;
		bottom: -5rem;
		background-color: #fff;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding-bottom: 1.5rem;
	}
	#menu-g-nabi ul li {
		position: relative;
	}
	#menu-g-nabi .has-child_2 .sub-menu {
		display: none;
		position: absolute;
		bottom: -5rem;
		background-color: #fff;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding-bottom: 1.5rem;
	}
	#menu-g-nabi .has-child_2 ul li {
		position: relative;
	}
	#menu-g-nabi .menu-item-has-children::before {
		display: block;
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		bottom: -15px;
		z-index: -1;
	}
	#menu-g-nabi .menu-item-has-children:hover .sub-menu {
		display: inline-flex;
		transition: all 0.4s ease-in-out;
	}
	#menu-g-nabi .menu-item-has-children:hover .sub-menu li a {
		font-size: 1.5rem;
		display: inline-block;
		width: 100%;
		box-sizing: border-box;
	}
	.sp_nav.hamburger,
	.SP-Follow-Nav {
		display: none;
	}
	/* nav contact -----*/
	#menu-g-nabi .nav_contact a {
		padding: 1rem 2.5rem 1rem 5.5rem;
		color: #fff;
		background-color: #000;
		position: relative;
	}
	#menu-g-nabi .nav_contact a::before{
		content: "";
		width: 2.5rem;
		height: 1.7rem;
		position: absolute;
		left: 2rem;
		top: 50%;
		transform: translateY(-50%);
		background: center center/contain no-repeat url(https://webmedia.sakura.ne.jp/beauty-life/wp-content/uploads/2025/09/icon-nav-mail.png);

	}
	body:not(.home) #content{
		margin-top: 130px;
	}
	body:not(.home) #header .header-inner{
		background: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		transition: background 0.5s ease, backdrop-filter 0.3s ease;
	}
}
@media screen and (min-width: 1301px) and (max-width: 1400px) {
	#menu-g-nabi{
		gap: 2rem;
	}
	#menu-g-nabi a {
		font-size: clamp(1.1rem, 1.5vw, 1.6rem);
	}
}
@media screen and (min-width: 769px) and (max-width: 1300px) {
	#header .header-inner {
		padding: 2.5rem 1.5rem;
	}
	#menu-g-nabi {
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 0 1.25rem;
	}
	#menu-g-nabi a {
		font-size: clamp(1.1rem, 1.5vw, 1.6rem);
	}
}

/* main-visual --------------------------------*/
.mv-inner.flex{
	width: 100%;
	align-items: flex-end;
	position: relative;
}
.mv_left {
	width: 40%;
	z-index: 10;
}
.mv_left > img{
	animation-name: fadeIn_2;
	animation-duration: 3s;
	animation-fill-mode: forwards;
	opacity: 0;
}
.mv_right {
	width: 60%;
	animation-name: fadeIn_2;
	animation-duration: 4s;
	animation-fill-mode: forwards;
	opacity: 0;
}
.mv_txt p {
	max-width: 30vw;
	width: 100%;
	position: absolute;
	top: 10vw;
	left: 3vw;
	z-index: 1;
	animation-name: fadeIn_2;
	animation-duration: 6s;
	animation-fill-mode: forwards;
	opacity: 0;
	margin: 0;
}
@keyframes fadeIn_2 {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@media screen and (max-width:480px){
	.mv-inner.flex {
		flex-direction: column-reverse;
	}
	.mv_right {
		width: 100%;
	}
	.mv_txt p{
		max-width: 80vw;
		background-color: rgba(255, 255, 255, 0.9);
		padding: 3.5rem 3rem;
		top: 15vw;
	}
	.mv_left.mv_txt > img {
		position: absolute;
		right: 0;
		bottom: -100px;
		max-width: 80%;
	}
}

/* Sub main-visual ----------------------------*/
.subpage-head-content {
	position: relative;
	z-index: 5;	
}
.subpage-head-content h1 {
	font-size: clamp(2.8rem, 7vw, 3rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 2px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #000;
}
.breadcrumb {
	font-size: 0.75em;
	margin-top: 0.5rem;
}
.breadcrumb a{
	display: inline-block;
	color: #a5a5a5 !important;
}
.subpage-head-content .breadcrumb, .breadcrumb .home {
	color: #a5a5a5;
}
.subpage-header {
	display: flex;
	align-items: center;
	position: relative;
	height: 300px;
	background-color: #fff;
	border-bottom: 1px solid #ddd;
	box-sizing: border-box;
}
body:not(.home) .subpage-header{
	margin-top: 135px;
}
/*.subpage-header::after {
content: "";
background-color: #eee;
width: 75%;
position: absolute;
right: 0;
height: 100%;
z-index: 0;
}*/
.subpage-header::after {
	content: "";
	background: center right/cover no-repeat url(https://webmedia.sakura.ne.jp/beauty-life/wp-content/uploads/2025/12/subpage-header.png);
	width: 75%;
	position: absolute;
	right: 0;
	height: 100%;
	z-index: 0;
}
.subpage-header::before {
	position: absolute;
	content: "";
	width: 75%;
	height: 100%;
	background: linear-gradient(90deg,rgb(255, 255, 255),rgba(255, 255, 255, 0.9),rgba(255, 255, 255, 0.8),transparent);
	z-index: 1;
	right: 0;
}
@media screen and (max-width: 768px){
	body:not(.home) .subpage-header {
		margin-top: 0;
	}
	.breadcrumb {
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
		line-height: 1.2;
	}
}
/* sp-menu ------------------------------------*/
.sp_nav {
	width: 4rem;
	height: 100%;
}
.hamburger {
	background-color: transparent;
	border-color: transparent;
	z-index: 99;
	position: absolute;
	top: 0;
	right: 1.5rem;
	cursor: pointer;
}
@media screen and (max-width: 768px){
	#header {
		top: unset;
		bottom: 0;
	}
	#content{
		margin: 0;
	}
	.menu-g-nabi-container {
		padding-bottom: 5rem;
	}
	.nav_contact a {
		background-color: #000;
		color: #fff !important;
		padding: 1.75rem 2rem 1.75rem 6rem !important;
		display: flex;
		align-items: center;
		position: relative;
	}
	.nav_contact a::before {
		content: "";
		width: 2.5rem;
		height: 1.7rem;
		display: inline-block;
		position: absolute;
		top: 50%;
		left: 2rem;
		transform: translateY(-50%);
		background: center center/contain no-repeat url(https://webmedia.sakura.ne.jp/beauty-life/wp-content/uploads/2025/09/icon-nav-mail.png);
	}
}
/* sp-menu line --------*/
.hamburger span {
	width: 100%;
	height: 3px;
	background-color: #292929;
	position: relative;
	transition: all 0.4s ease-in-out;
	display: block;
	border-radius: 30px;
}
.hamburger span:nth-child(1) {
	top: 0;
}
.hamburger span:nth-child(2) {
	margin: 6px 0;
}
.hamburger span:nth-child(3) {
	top: 0;
}

/* sp-menu open --------*/
#menu.active {
	transform: translatey(0);
	display: block;
}
.hamburger.active span:nth-child(1) {
	top: 10px;
	transform: rotate(45deg);
}
.hamburger.active span:nth-child(2) {
	opacity: 0;
}
.hamburger.active span:nth-child(3) {
	top: -8px;
	transform: rotate(-45deg);
}
.no-scroll {
	overflow: hidden;
	height: 100%;
}
@media screen and (max-width: 768px){
	#header .header-inner {
		height: unset;
		padding: 0;
		background-color: #fff;
	}
	#header .site_logo {
		display: none;
	}
	#header .site_logo-sp {
		display: block;
		max-width: 300px;
		width: 100%;
		margin: 2rem auto;
		padding: 0 1rem;
	}
	#header .site_logo-sp h1,
	#header .site_logo-sp p{
		margin: 0;
		line-height: 0;
		display: block;
	}
	#header .SP-Follow-Nav{
		display: block;
		width: calc(100% - 6.5rem);
	}
	#header .SP-Follow-Nav ul{
		display: flex;
	}
	#header .SP-Follow-Nav ul li{
		width: calc(100% / 2);
	}
	#header .SP-Follow-Nav ul li a {
		color: #fff;
		display: block;
		padding: 1.25rem 0;
		font-size: 1.15rem;
	}
	.Follow-mail.center {
		background-color: #000;
	}
	.Follow-tel.center {
		background-color: #1477bc;
	}
	.SP-Follow-Nav a figure{
		align-items: center;
		justify-content: center;
		gap: 1rem;
	}
	#header .SP-Follow-Nav ul li a figcaption{
		text-align: left;
	}
	.SP-Follow-Nav a img {
		max-width: 25px;
		height: 25px;
		object-fit: contain;
	}
	#menu {
		/*display: none;*/
		position: fixed;
		right: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		transform: translateY(100%);
		background-color: #fff;
		transition: all 0.4s ease-in-out;
		z-index: -1;
		overflow: scroll;
		padding-bottom: 55px;
		box-sizing: border-box;
	}
	#menu-g-nabi .sub-menu {
		display: none;
	}
	#menu-g-nabi .has-child .sub-menu.active, #menu-g-nabi .has-child_2 .sub-menu.active {
		display: block;
	}
	#menu-g-nabi {
		flex-direction: column;
		display: flex;
		align-items: flex-start;
		border-top: 1px solid #ddd;
	}
	#menu-g-nabi li {
		width: 96%;
		margin: 0 auto;
	}
	#menu-g-nabi a {
		font-size: 1.4rem;
		width: 100%;
		margin: 0 auto;
		padding: 1.25rem 2rem;
		box-sizing: border-box;
		display: block;
		border-bottom: 1px solid #ddd;
	}
	#menu-g-nabi .sub-menu.active li,
	#menu-g-nabi .sub-menu.active a{
		width: 100%;
	}
	#menu-g-nabi .has-child, #menu-g-nabi .has-child_2 {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		max-width: 96%;
		margin: 0 auto;
	}
	#menu-g-nabi .menu-item-has-children::after {
		top: 2rem;
		right: 2rem;
		transition: all 0.4s ease-in-out;
	}
	#menu-g-nabi .menu-item-has-children.active::after {
		transform: rotate(315deg);
		transition: all 0.4s ease-in-out;
		top: 2.5rem;
	}
	.sub-menu.active {
		width: 100%;
		background-color: #f9f9f9;
	}
	.sub-menu.active li:last-child {
		border-bottom: none !important;
	}
	.nav_contact.gr a {
		background-color: #00B39F;
		color: #fff !important;
		position: relative;
	}
	.nav_contact.gr a::after {
		content: "";
		width: 1.2rem;
		height: 1.2rem;
		position: absolute;
		right: 2rem;
		top: 50%;
		box-shadow: 3px 3px 0 #fff;
		transform: translateY(-50%) rotate(-45deg);
	}
}