/*
Theme Name: hairbliss
Author: tomo
*/


/* ------------------------------------------ reset css ------------------------------------------ */
/*
  Made by Elly Loel - https://ellyloel.com/
*/
*{margin:0;padding:0;line-height:calc(0.25rem+1em+0.25rem)}*,::before,::after{box-sizing:border-box}*:where(:not(fieldset,progress,meter)){border-width:0;border-style:solid;background-origin:border-box;background-repeat:no-repeat}
html{block-size:100%;-webkit-text-size-adjust:none}
@media(prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}
body{text-rendering:optimizeSpeed;min-block-size:100%}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,svg,video){block-size:auto;max-inline-size:100%}:where(svg){stroke:none;fill:currentColor}:where(svg):where(:not([fill])){stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}:where(svg):where(:not([width])){inline-size:5rem}:where(input,button,textarea,select),:where(input[type="file"])::-webkit-file-upload-button{color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit;word-spacing:inherit}:where(textarea){resize:vertical}
@supports(resize:block){:where(textarea){resize:block}}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}
h1{font-size:2em}:where(ul,ol){list-style-position:inside}:where(ul,ol)[role="list"]{list-style:none}
a:not([class]){text-decoration-skip-ink:auto}:where(a[href],area,button,input,label[for],select,summary,textarea,[tabindex]:not([tabindex*="-"])){cursor:pointer;touch-action:manipulation}:where(input[type="file"]){cursor:auto}:where(input[type="file"])::-webkit-file-upload-button,:where(input[type="file"])::file-selector-button{cursor:pointer}
@media(prefers-reduced-motion:no-preference){:focus-visible{transition:outline-offset 145ms cubic-bezier(0.25,0,0.4,1)}:where(:not(:active)):focus-visible{transition-duration:0.25s}}:where(:not(:active)):focus-visible{outline-offset:5px}:where(button,button[type],input[type="button"],input[type="submit"],input[type="reset"]),:where(input[type="file"])::-webkit-file-upload-button,:where(input[type="file"])::file-selector-button{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;text-align:center}:where(button,button[type],input[type="button"],input[type="submit"],input[type="reset"])[disabled]{cursor:not-allowed}

/* ------------------------------------------ // ------------------------------------------ */


/* ------------------------------------------ page 共通 ------------------------------------------ */

body {
	font-family: "Noto Sans JP", sans-serif;
}

.page-wrap {
	overflow: hidden;
    position: relative;
}

.zenhaba {
	position: relative;
	left: 50%;
	width: 100vw;
	transform: translate(-50%, 0);
}

::marker {
	margin-right: 10px;
}


.fot-ryumin {
	font-family: "a-otf-ryumin-pr6n", serif;
}

.fot-notosans {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.fot-caflisch_script {
	font-family: "caflisch-script-pro", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.lh-1 {
	line-height: 1;
}

.cr-fff {
	color: #fff;
}

.cr-171c61 {
	color: #171c61;
}

.cr-aaa {
	color: #aaaaaa;
}

.bg-f1f1f1 {
	background-color: #f1f1f1;
}

.block {
	display: block;
}

.in-block {
	display: inline-block;
}

.flex {
	display: flex;
}

.align-c {
	text-align: center;
}

.align-r {
	text-align: right;
}

.mg-auto {
	margin: auto;
}

a {
	transition: all 0.5s;
}

a:hover {
	opacity: 0.7;
}

.pc {
	display: block !important;
}

.mb {
	display: none;
}

@media screen and (max-width: 768px) {
	.pc {
		display: none !important;
	}
	
	.mb {
		display: block !important;
	}
}

/* header */
.header {
position: absolute;
z-index: 1000;
width: 100%;
height: 90px;
}

.headerScroll {
position: fixed;
opacity: 0;
}

.headerScroll.open {
animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
 
@keyframes fadeIn {
  0% {
    opacity: 0;
	background-color: transparent;
  }
  100% {
    opacity: 1;
	background-color: rgba(255,255,255,.9);
  }
}

.headerScroll .headerMenu ul li a, .headerScroll .headerMenu .menu .menu-item a::after {
color: #333 !important;
}

.headerScroll .headerMenu .menu .menu-item a::before {
background-color: #333;
}



.header__container {
height: 100%;
justify-content: space-between;
align-items: center;
}

.header__logo a img {
width: 174px;
height: auto;
margin-left: 42px;
}

.headerMenu ul {
list-style-type: none;
align-items: center;
display: flex;
margin-right: 28px;
}

.headerMenu ul li {
margin-right: 35px;
}

.headerMenu ul li:last-child {
width: 140px;
margin-right: 0;
}

.headerMenu ul li a {
text-decoration: none;
letter-spacing: 0.05em;
font-size: 16px;
color: #fff;
position: relative;
font-family: "poppins", sans-serif;
font-family: "a-otf-ryumin-pr6n", serif;
color: #fff;
font-weight: normal;
}

.headerMenu .menu .menu-item-11.menu-item a,
.footerInfo__menu .menu .menu-item:nth-of-type(5) a {
font-size: 16px;
padding: 12px 0 12px 20px;
color: #fff !important;
}

.headerMenu .menu .menu-item-11.menu-item a::before,
.footerInfo__menu .menu .menu-item:nth-of-type(5) a::before{
content: "";
background-image: url(/bliss/assets/img/mail.png);
background-size: cover;
width: 25px;
height: 18px;
position: absolute;
top: 0;
bottom: 0;
right: 20px;
left: auto;
margin: auto;
background-color: transparent;
}

.headerMenu .menu .menu-item-11.menu-item,
.footerInfo__menu .menu .menu-item:nth-of-type(5){
width: 275px;
height: 50px;
margin: 0;
background-color: #aba581;
}

.headerMenu ul li a img{
margin: auto;
margin-top: 20px;
}

.headerMenu ul li a img {
margin: 35px auto 0;
}

.headerMenu .menu .menu-item a, .footerInfo__menu .menu .menu-item a{
	color: #fff;
	text-decoration: none;
	letter-spacing: 1px;
	font-size: 14px;
    display: block;
	height: 100%;
}

.headerMenu .menu .menu-item a::after, .footerInfo__menu .menu .menu-item a::after {
	color: #fff;
	font-size: 10px;
	line-height: 1;
	display: block;
	margin-left: 20px;
	margin-top: 6px;
}

.headerMenu .menu .menu-item a::before, .footerInfo__menu .menu .menu-item a::before {
	content: "";
	background-color: #fff;
	width: 15px;
	height: 1px;
	position: absolute;
	bottom: 3px;
	left: 0;
}

.headerMenu .menu .menu-item-7.menu-item a::after, .footerInfo__menu .menu .menu-item-7.menu-item a::after {
	content: "HOME";
}

.headerMenu .menu .menu-item-8.menu-item a::after, .footerInfo__menu .menu .menu-item-8.menu-item a::after {
	content: "ABOUT";
}

.headerMenu .menu .menu-item-9.menu-item a::after, .footerInfo__menu .menu .menu-item-9.menu-item a::after {
	content: "SERVICE";
}

.headerMenu .menu .menu-item-10.menu-item a::after, .footerInfo__menu .menu .menu-item-10.menu-item a::after {
	content: "STORE INFO";
}


.footerInfo__menu .menu .menu-item-225.menu-item a::after {
	content: "CONTACT";
}

@media screen and (max-width: 1200px) {	
	.headerMenu .menu .menu-item {
		margin-right: 15px;
	}
}

@media screen and (max-width: 1024px) {
	.header__logo {
		margin-left: 28px;
	}
	
	.header__nav {
		margin-right: 28px;
	}
	
	.headerMenu .menu .menu-item {
		margin-right: 20px;
	}
	
	.headerMenu .menu .menu-item a, .footerInfo__menu .menu .menu-item a {
		font-size: 12px;
	}
	
	.headerMenu .menu .menu-item a::after, .footerInfo__menu .menu .menu-item a::after {
		font-size: 8px;
	}
}


/*
.headerMenu__list__item__link.active {
border-left: solid 3px #97001b;
}
*/







@media screen and (max-width: 767px) {
	.headerScroll.open {
		height: 16vw;
	}
	
	.header {
	height: 16vw;
	}	
	
.header__container {
align-items: center;
}
	
	.header__logo {
		margin-left: 0;
	}
	
.header__logo a img {
    width: auto;
    height: 8vw;
    margin-left: 5vw;
    margin-top: 0;
}

.header__logo__link__image {
width: 27.54vw;
}
}


	.headerScroll__nav__openbtn1::before {
    content: "MENU";
    color: #fff;
    font-family: "century-gothic", sans-serif;
    text-align: center;
    width: auto;
    display: block;
    line-height: 1;
    position: absolute;
    right: 0;
    left: 0;
    top: 28px;
    font-size: 16px;
}
	
	.gNav{
position: absolute;
z-index: 999;
top: 73px;
right: -180%;
width: 100%;
/* height: 100%; */
transition: all 0.6s;
}

.gNav {
top: 80px;
}

/*アクティブクラスがついたら位置を0に*/
.gNav.panelactive{
top: 0;
right: 0;
background-color: #808080;
width: 100%;
background-color: rgba(128, 128, 128, 0.9);
background-color: rgba(171, 165, 129, 0.9);
width: 100%;
height: 100vh;
position: fixed;
}

/*ナビゲーションの縦スクロール*/
.gNav__wrap{
/*ナビの数が増えた場合縦スクロール*/
/*position: fixed;*/
padding: 17.8666vw 11.72vw 0 8.125vw;
z-index: 999; 
width: 100%;
height: 100vh;/*表示する高さ*/
height: 153.334vw;
overflow: hidden;
-webkit-overflow-scrolling: touch;
}

/*
.gNav__wrap::before {
content: "";
width: 100%;
height: 153.334vw;
background-image: url(images/Mission.webp);
position: absolute;
top: 0;
left: 0;
background-size: cover;
background-position: center;
z-index: -100;
}

.gNav__wrap::after {
content: "";
width: 100%;
height: 153.334vw;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.9);
z-index: -100;
}
*/

.gNav ul {
/*padding: 5vw;*/
/*height: 50vh;*/
	list-style: none;
}

.gNav ul li {
line-height: 1;
position: relative;
}

.gNav ul li::after {
content: "";
position: absolute;
bottom: -5vw;
left: 0;
width: 100%;
height: 1px;
background-color: #fff;
}

.gNav ul li a {
display: block;
padding: 0;
font-size: 3.28vw;
/*line-height: calc(40 / 14);*/
color: #000;
text-decoration: none;
text-align: center;
writing-mode: lr;
color: #fff;
margin-bottom: 10.65vw;
margin-bottom: 9.57vw;
font-family: "a-otf-ryumin-pr6n", serif;
}

.gNav ul li a:hover {
color: #750032;
transition: all 0.5s;
}

.gNav__list__item__logo{
    width: 40vw;
    margin: 0 auto 10vw;
}

.headerMenu__list__item__link.active {
border-left: none;
}
	
	.gNav__wrap img {
    width: 35.08vw;
	/*width: 100%;*/
    margin: auto;
    margin-bottom: 14.4vw;
	}
	
.openbtn1{
position:absolute;
z-index: 9999;/*ボタンを最前面に*/
top:-3vw;
top: 0;
bottom: 0;
right: 0;
margin: 0;
cursor: pointer;
width: 20vw;
height: 20vw;
width: 16vw;
height: 16vw;
background-color: #aba581;
}
	
.openbtn1.mb::after {
content: "MENU";
font-size: 2.2vw;
text-align: center;
display: block;
position: absolute;
bottom: 1.8vw;
left: 0;
right: 0;
font-weight: bold;
font-family: "Cormorant Garamond", serif;
font-optical-sizing: auto;
letter-spacing: 1px;
color: #fff;
}

.openbtn1.mb.active::after {
color: #fff;
}
  
/*×に変化*/  
.openbtn1 span{
display: inline-block;
transition: all .4s;
position: absolute;
left: 6.874vw;
border-radius: 2px;
/*width: 45%;*/
background: #fff;
height: 0.4vw;
width: 8.433vw;
left: 0;
right: 0;
top: calc((100% - 0.765vw)/2) !important;
margin: auto;
}

.headerScroll .openbtn1 span {
	/*background-color: #333;*/
}

.headerScroll .openbtn1.mb::after {
	/*color: #333;*/
}

.openbtn1 span:nth-of-type(1) {
/*top:6.874vw;*/
transform: translateY(-2.53vw);
}

.openbtn1 span:nth-of-type(2) {
/*top:10.69vw;*/
transform: translateY(0);
}

.openbtn1 span:nth-of-type(3) {
/*top:14.504vw;*/
transform: translateY(2.53vw);
}

.openbtn1.active span {
background-color: #fff;
}

.openbtn1.active span:nth-of-type(1) {
/*top: 9vw;
left: 7vw;
transform: translateY(6px) rotate(-45deg);
/*width: 30%;*/
transform: rotate(45deg);
}

.openbtn1.active span:nth-of-type(2) {
opacity: 0;
}

.openbtn1.active span:nth-of-type(3){
/*top: 12vw;
left: 7vw;
transform: translateY(-6px) rotate(45deg);
/*width: 30%;*/
transform: rotate(-45deg);
}



.open #global-nav {
  z-index: 1000;
  visibility: visible;
}
#global-nav {
  visibility: hidden;
  position: fixed;
  display: table !important;
  vertical-align: middle;
  color: #fff;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  text-align: center;
  font-size: 16px;
}
#global-nav ul {
  display: table-cell;
  vertical-align: middle;
  list-style: none;
}
#global-nav a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 10px 0;
}

/* ***********************************************************
* nav-list
* *********************************************************** */
#global-nav ul li {
  opacity: 0;
  /*
  -webkit-transform: scaleX(0) translateX(-260px);
  transform: scaleX(0) translateX(-260px);
  -webkit-transition: none;
  transition: none;
  */
}
.open #global-nav ul li {
  opacity: 1;
  /*
  -webkit-transform: scaleX(1) translateX(0);
  transform: scaleX(1) translateX(0);

  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;

  -webkit-transition-delay: .1s;
  transition-delay: .1s;
  */
}
/*
.open #global-nav ul li:nth-child(2) {
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
.open #global-nav ul li:nth-child(3) {
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}
.open #global-nav ul li:nth-child(4) {
  -webkit-transition-delay: .4s;
  transition-delay: .4s;
}
.open #global-nav ul li:nth-child(5) {
  -webkit-transition-delay: .5s;
  transition-delay: .5s;
}
*/

/* ***********************************************************
* #nav-bg
* *********************************************************** */
#nav-bg {
  content: "";
  width: 2400px;
  height: 2400px;
  margin-right: -1200px;
  margin-top: -1200px;
  top: 40px;
  right: 40px;
  display: block;
  position: fixed;
  /*background: #17A669;*/
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: scale(.02);
  transform: scale(.02);

}
.open #nav-bg {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all .6s ease-out;
  transition: all .6s ease-out;
  background-color: rgba(0, 0, 0, 0.8);
  background-color: rgba(0, 0, 0, 1);
  background-color: #228594;
  z-index: 999;
}

.open #nav-bg::before {
background-image: url(images/Mission.webp);
}

/* ***********************************************************
* #nav-toggle
* *********************************************************** */
#nav-toggle {
display: block;
position: absolute;
cursor: pointer;
/* padding: 2vw; */
z-index: 1001;
right: 2.5%;
top: 24px;
/* top: 0; */
bottom: auto;
}

#nav-toggle div::after {
    content: "MENU";
    font-size: 14px;
    text-align: center;
    display: block;
    position: absolute;
    /* bottom: -4vw; */
    font-weight: 900;
    font-family: fieldwork, sans-serif;
    font-optical-sizing: auto;
    letter-spacing: 1px;
    /* width: 8.433vw; */
    top: 16px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    color: #228594;
    line-height: 1;
}

#nav-toggle div {
    position: relative;
    width: 80px;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
}
#nav-toggle span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 6.874vw;
    border-radius: 2px;
    /* width: 45%; */
    background: #228594;
    height: 2px;
    width: 42px;
    left: 0;
    right: 0;
    top: 45px;
    margin: auto;
    /* bottom: auto;*/
}

#nav-toggle span:nth-child(1) {
  transform: translateY(-7px);
}
#nav-toggle span:nth-child(2) {
  transform: translateY(0);
}
#nav-toggle span:nth-child(3) {
  transform: translateY(7px);
}
.open #nav-toggle {
  background: transparent;
}
/*
.open #nav-toggle span {
  background: #fff;
}*/

.open #nav-toggle span:nth-child(1) {
  top: 50px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  zoom: 1;
}
.open #nav-toggle span:nth-child(2) {
  width: 0;
  left: 50%;
}
.open #nav-toggle span:nth-child(3) {
  top: 50px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  zoom: 1;
}

@media screen and (max-width: 767px) {
#nav-toggle {
right: 7.273vw;
top: 4.5456vw;
}

#nav-toggle div {
width: 18.184vw;
height: 18.184vw;
}

#nav-toggle div::after {
top: 3.637vw;
font-size: 3.184vw;
}

#nav-toggle span {
width: 9.546vw;
height: 0.455vw;
top: 10.455vw;
}

#nav-toggle span:nth-child(1) {
transform: translateY(-1.34vw);
}

#nav-toggle span:nth-child(3) {
transform: translateY(1.34vw);
}

.open #nav-toggle span:nth-child(1), .open #nav-toggle span:nth-child(3) {
top: 11.455vw;
}
}
/* // */



/* footer */
footer {
background-color: #463e11;
background-size: cover;
background-position: top;
position: relative;
}

footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
background-image: url(/bliss/assets/img/salon-bg.JPG);
width: 100%;
height: 100%;
opacity: 0.2;
background-size: cover;
background-position: center bottom;
}

.footer__container {
max-width: 1110px;
padding: 70px 0 10px;
justify-content: space-between;
align-items: flex-end;
}

@media screen and (max-width: 1150px) {
	.footer__container {
		max-width: 90%;
	}
}

.footerInfo {
padding-bottom: 28px;
}

.footerInfo__menu .menu .menu-item {
margin-bottom: 5vw;
}

.footerInfo__logo {
width: 186px;
margin-bottom: 16px;
margin-right: 90px;
position: relative;
}

.footerAddress {
max-width: 1015px;
margin: auto;
font-size: 14px;
letter-spacing: 0.05em;
position: relative;
line-height: 1.6;
}

.footerAddress span {
font-size: 24px;
}

.footerInfo__address span {
margin-left: 42px;
}

.footerInfo__menu ul {
flex-wrap: wrap;
display: flex;
list-style-type: none;
margin-left: 90px;
}

.footerInfo__menu .menu .menu-item {
position: relative;
margin-right: 90px;
margin-bottom: 28px;
}

.footerInfo__menu .menu .menu-item a {
color: #fff !important;
}

.footerInfo__menu .menu .menu-item a::after {
color: #fff !important;
}

.footerCopyright {
background-color: #333;
height: 60px;
color: #fff;
text-align: center;
line-height: 60px;
letter-spacing: 0.05em;
position: relative;
}

.footerCopyright__text {
font-size: 12px;
}

@media screen and (max-width: 767px) {
	.footer__container {
		max-width: 90%;
		padding: 11vw 0 5vw;
		flex-wrap: wrap;
	}
	
	.footerInfo {
		width: 100%;
		flex-wrap: wrap;
		padding-bottom: 4.5vw;
	}
	
	.footerInfo__logo {
        width: 40vw;
        height: auto;
        margin-bottom: 0;
    }
	
	.footerInfo__menu ul {
		margin: 0;
	}
	
	.footerInfo__menu ul li,
	.footerInfo__menu ul li:nth-of-type(5){
		margin-right: 8vw !important;
		margin-bottom: 4vw !important;
	}
	
	.footerInfo__menu ul li:last-child {
		margin-bottom: 0;
	}
	
	.footerAddress {
		padding-top: 6vw;
		font-size: 3.2vw;
	}
	
	.footerAddress:before {
		width: 100%;
	}
	
	.footerAddress span {
    font-size: 5vw;
    margin-bottom: 1vw;
}
	
	.footerCopyright {
        width: 100%;
        height: 13vw;
		line-height: 13vw;
    }
	
	.footerCopyright__text {
    margin-bottom: 0;
    font-size: 2.9vw;
    margin-top: 0;
		text-align: center;
	}
	
	.footerCopyright__text img {
		width: 84vw;
	}
	
	.footerInfo__menu .menu .menu-item:nth-of-type(5) {
		width: 50vw;
    	height: 9vw;
	}
	
	.footerInfo__menu .menu .menu-item:nth-of-type(5) a {
		font-size: 3.2vw;
    	padding: 2vw;
	}
	
	.footerInfo__menu .menu .menu-item a {
		font-size: 3.2vw;
	}
	
	.headerMenu .menu .menu-item-11.menu-item a::before, .footerInfo__menu .menu .menu-item:nth-of-type(5) a::before {
    width: 4.3vw;
    height: 3vw;
    right: 3vw;
}
}
/* // */

.homeSection {
	position: relative;
}

/* linkBtn */
.pageBtn {
	width: 220px;
    height: 50px;
    position: relative;
    z-index: 10;
    margin: 25px 0 0 0;
}

.pageBtn__link {
	width: 100%;
	height: 100%;
	line-height: 50px;
	font-size: 14px;
	letter-spacing: 0.05em;
	text-decoration: none;
	/*background: linear-gradient(to right, #98ab6f, #b0dd50 100%);*/
	background-color: #aba581;
	padding-left: 50px;
}

.pageBtn__link img {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 20px;
	margin: auto;
}

@media screen and (max-width: 767px) {
	.pageBtn {
		width: 44vw;
    	height: 10vw;
	}
	
	.pageBtn__link {
		font-size: 3.2vw;
    line-height: 10vw;
	}
}

/* section title */
.home__heading {
	margin-bottom: 60px !important;
}

.homeHeading {
	position: relative;
	margin-bottom: 30px;
	font-weight: bold;
}

.homeHeading__textMain {
	font-size: 40px;
    letter-spacing: 0.1em;
    font-weight: 500;
}

.homeHeading__textMain span{
	color: #808080;
	color: #aba581;
}

.homeHeading__textSub {
	margin-top: 6px;
	font-size: 12px;
	letter-spacing: 0.1em;
	line-height: 1;
}

@media screen and (max-width: 767px) {
	.home__heading {
	margin-bottom: 12vw !important;
}
	
	.homeHeading {
		margin-bottom: 0;
	}
	
	.homeHeading__textMain {
		font-size: 8vw;
	}
	
	.homeHeading__textSub {
		font-size: 3vw;
	}
}
/* // */

/* ------------------------------------------ // ------------------------------------------ */

/* ------------------------------------------ top page ----------------------------------- */
/* mv */
.mv {
	height: 923px;
	height: 100vh;
    position: relative;
    background-size: cover;
	background-position: center;
}

.mv::after {
content: "";
	background-color: rgba(0,0,0,0.3);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.mv__container {
	padding-top: 380px;
}

.mv__logoImage {
	margin: 0 auto 60px;
    max-width: 240px;
	width: 100%;
	position: relative;
	z-index: 10;
}

.mv__textImage{
    margin: auto;
	max-width: 390px;
	width: 100%;
	position: relative;
	z-index: 10;
}

@media screen and (max-width: 767px) {
	.mv {
		height: 140vw;
	}
	
	.mv__container {
    padding-top: 58vw;
}
	
	.mv__logoImage {
		width: 76vw;
	}
	
	.mv__textImage {
		width: 85vw;
	}
}

.mv__text {
position: absolute;
top: 56%;
left: 50%;
transform: translate(-50%, -50%);
}

.mv__news {
height: 80px;
position: absolute;
bottom: 0;
width: 100%;
border-top: solid 1px #ee4d28;
border-bottom: solid 1px #ee4d28;
align-items: center;
background-color: #1b334b;
}

.mv__news__item {
align-items: center;
margin-right: 4.9%;
}

.mv__news h2 {
margin-bottom: 0;
margin-left: 4.9%;
margin-right: 4.9%;
}

.mv__news h2 img {
min-width: 198px;
width: 200px;
}

.mv__news__item .date {
margin-right: 25px;
font-size: 14px;
letter-spacing: 0.05em;
}

.mv__news__item .cate {
min-width: 50px;
height: 16px;
margin-right: 24px;
/*border: solid 1px #ee4d28*/
font-size: 8px;
background-color: #fff;
}

.mv__news__item p {
letter-spacing: 0.05em;
font-size: 14px;
}

@media screen and (max-width: 767px) {
.mv__content__head {
top: 44.093vw;
right: 0;
left: 0;
margin: auto;
}
    
.mv__content__head__text {
margin-bottom: 23.184vw;
font-size: 6.82vw;
text-align: center;
}
    
.mv__content__head__title {
width: 45.683vw;
margin: auto;
}
    
.mv__content__image {
position: relative;
}

.mv__content__scroll {
bottom: auto;
top: 112.046vw;
right: 9.774vw;
}
    
.mv__content__scroll__bar {
top: 7.73vw;
left: 3vw;
}

.mv__content__scroll__bar img {
width: 2.955vw;
}
    
.mv__content__scroll__text {
font-size: 2.274vw;
}
}


/* about */
.homeAbout {
background-color: rgba(171,165,129,0.2);
position: relative;
}

.homeAbout::after {
content: "";
position: absolute;
top: 100px;
left: 4.9%;
width: 154px;
height: 72px;
background-image: url(/bliss/assets/img/about.png);
background-size: cover;
}

.homeAbout__container, .homeRecruit__container {
padding-top: 70px;
padding-bottom: 114px;
padding-left: 20px;
padding-right: 20px;
position: relative;
}

.homeAbout__container .homeHeading {
margin-bottom: 46px;
z-index: 10;
}

.homeAbout__container .homeHeading img {
height: 90px;
width: auto;
}

.homeAbout__content__inner {
max-width: 1226px;
margin: auto;
}

.homeAbout__content__media {
padding: 50px 0;
position: relative;
justify-content: space-between;
}

.homeAbout__content__media::before, .homeAbout__content__media::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 2px;
background-image: url(/bliss/assets/img/line.png);
background-size: cover;
}

.homeAbout__content__media::after {
content: "";
position: absolute;
top: auto;
bottom: 0;
left: 0;
right: 0;
}

.homeAbout__content__media__text {
width: 558px;
width; 47%;
line-height: calc(36 / 16);
letter-spacing: 0.05em;
position: relative;
font-size: 14px;
}

.homeAbout__content__media__text span {
margin-top: 3px;
margin-bottom: 8px;
font-size: 18px;
line-height: calc(40 / 22);
}

.homeAbout__content__media__text::after {
content: "";
position: absolute;
bottom: -13px;
/* left: 0; */
right: 38px;
margin: auto;
width: 99px;
height: 97px;
background-image: url(/bliss/assets/img/hasami01.png);
background-size: cover;
}

.homeAbout__content__media__image {
width: 48.9%;
}

.homeAbout__content__media__image__item div {
width: 580px;
width: 100%;
height: 398px;
background-size: cover;
}

@media screen and (max-width: 767px) {
	.homeAbout::before {
		height: 250vw;
	}
	
	.homeAbout::after {
        right: 4.9%;
        top: 80vw;
        width: 40vw;
        height: 9vw;
        left: auto;
        bottom: 10vw;
        top: auto;
        height: 14vw;
        width: 31vw;
}
	
	.homeAbout__container {
		padding: 12vw 4.9% 30vw;
	}
	
	.homeAbout__container .home__heading {
    margin-bottom: 8vw !important;
}
	
	.homeAbout__container .homeHeading {
    margin-bottom: 3vw;
    margin-left: 0;
}
	
	.homeAbout__container .homeHeading img {
		height: 15vw;
    	width: auto;
    	margin: 0;
	}
	
	.homeAbout__content__inner {
		max-width: none;
}
	
	.homeAbout__content__media {
		padding: 8vw 0;
		flex-wrap: wrap;
	}
	
	.homeAbout__content__media__text {
    width: 100%;
    order: 2;
    font-size: 3.2vw;
}
	
	.homeAbout__content__media__text span {
    margin-top: 2vw;
    font-size: 3.8vw;
    margin-bottom: 1vw;
}
	
	.homeAbout__content__media__text::after {
    bottom: -3vw;
    right: 6vw;
    width: 22vw;
    height: 21vw;
}
	
	.homeAbout__content__media__image {
    width: 100%;
}
	
	.homeAbout__content__media__image__item div {
    height: 50vw;
	}
}


/* service */
.homeService::after {
content: "";
position: absolute;
top: 103px;
left: 4.9%;
width: 183px;
height: 63px;
background-image: url(/bliss/assets/img/service.png);
background-size: cover;
}

.homeService::before {
content: "";
background-image: url(/bliss/assets/img/service-bg.JPG);
background-size: cover;
background-position: bottom;
position: absolute;
width: 100%;
height: 100%;
opacity: 0.6;
}

.homeService {
	background-color: #8e7a36;
}

.homeService__container {
/*max-width: 93%;*/
margin: auto;
padding: 72px 0 120px;
position: relative;
}

.homeService__heading__intro {
margin-bottom: 52px;
}

.homeService__content__inner {
/*max-width: 1076px;*/
max-width: 90%;
margin: auto;
justify-content: center;
flex-wrap: wrap;
position: relative;
z-index: 10;
}

.serviceCp {
height: 118px;
background-color: #aba581;
transform: rotate(-2deg);
width: 102vw;
position: relative;
left: -6%;
margin-bottom: 40px;
}

.serviceCp__text {
line-height: 118px;
font-size: 48px;
text-align: center;
letter-spacing: 0.05em;
}

.serviceMedia {
max-width: 1170px;
justify-content: space-between;
}

.serviceMedia__text {
max-width: 620px;
margin-top: 18px;
width: 53%;
}

.serviceMedia__text__title {
font-size: 22px;
border-bottom: solid 1px;
margin-bottom: 10px;
padding-bottom: 8px;
align-items: center;
font-weight: normal;
}

.serviceMedia__text__title img {
width: 40px;
height: 21px;
position: relative;
top: 3px;
}

.serviceMedia__text__paragraph {
margin-bottom: 40px;
line-height: calc(24 / 14);
font-size: 14px;
}

.serviceMedia__text__paragraph span {
font-size: 18px;
margin-bottom: 5px;
}

.storeBtn__app {
height: 60px;
}

.storeBtn__google {
height: 60px;
margin-left: 35px;
}

.serviceMedia__images {
align-items: end;
width: 42.7%;
justify-content: space-between;
}

.serviceMedia__images__item {
width: 262px;
width: 52.4%;
}

.serviceMedia__images__item--second {
width: 223px;
width: 44.6%;
height: auto;
margin-left: 15px;
}

@media screen and (max-width: 1100px) {
	.serviceCp {
		height: 90px;
		margin-bottom: 20px;
	}
	
	.serviceCp__text {
    line-height: 90px;
    font-size: 30px;
}
}

@media screen and (max-width: 767px) {
	.homeService::before {
		height: 507vw;
		height: 98%;
		top: 30vw;
		top: 19vw;
	}
	
	.homeService::after {
    	left: auto;
        right: 4.9%;
        bottom: 10vw;
        top: auto;
        height: 14vw;
        width: 42vw;
    }
	
	.homeService__container {
		padding: 12vw 0 30vw;
	}
	
	.homeService__heading {
    	width: 90%;
		margin-bottom: 0 !important;
		margin: auto;
	}
	
	.homeService__heading .homeHeading {
		/*margin: 0 0 8vw;*/
	}
	
	.serviceCp--first {
		margin-bottom: 4vw;
	}
	
	.serviceCp {
		height: 15vw;
		margin-bottom: 4vw;
		line-height: 10vw;
}
	
	.serviceCp__text {
		line-height: 14vw;
		font-size: 7vw;
}
	
	.homeService__content {
		padding-top: 8vw;
	}
	
	.homeService__content__inner {
		max-width: none;
		padding: 0 4.9%;
	}
	
	.serviceMedia{
		flex-wrap: wrap;
	}
	
	.serviceMedia__text {
		width: 100%;
		margin-top: 4vw;
	}
	
	.serviceMedia__text__paragraph {
    margin-bottom: 4vw;
    font-size: 3.2vw;
}
	
	.serviceMedia__text__paragraph span {
    font-size: 3.8vw;
    margin-bottom: 1vw;
}
	
	.serviceMedia__text__title {
    font-size: 4.8vw;
    margin-bottom: 2vw;
    padding-bottom: 1.8vw;
}
	
	.serviceMedia__text__title img {
    width: 8vw;
    height: auto;
    top: 0.6vw;
	}
	
	.storeBtn__app {
    height: 12vw;
}
	
	.storeBtn__google {
    height: 12vw;
    margin-left: 4vw;
}
	
	.serviceMedia__images {
	width: 100%;
    margin-top: 7vw;
	justify-content: center;
}
	
	.serviceMedia__images__item {
    width: 40vw;
}
	
	.serviceMedia__images__item--second {
    width: 35vw;
    height: auto;
    margin-left: 3vw;
}
}

/* linklist */
.homeLink::after {
content: "";
position: absolute;
top: 103px;
left: 4.9%;
width: 410px;
height: 63px;
background-image: url(/bliss/assets/img/reservation.png);
background-size: cover;
}

.homeLink {
background-color: #dddbcd;
}

.homeLink__container {
/*max-width: 93%;*/
margin: auto;
padding: 72px 0 120px;
position: relative;
}

.homeLink__heading {
position: relative;
margin-bottom: 100px !important;
}

.homeLink__heading::after {
content: "";
position: absolute;
top: -15px;
left: 614px;
right: 0;
margin: auto;
background-image: url(/bliss/assets/img/doraiya-.png);
background-size: cover;
width: 100px;
height: 74px;
}

.linkList {
max-width: 1238px;
padding: 0 20px;
margin: auto;
justify-content: space-between;
position: relative;
}

.linkList::after {
content: "";
position: absolute;
bottom: -41px;
left: 0;
right: 0;
margin: auto;
width: 95%;
height: 2px;
background-image: url(/bliss/assets/img/line.png);
background-size: cover;
}

.linkList__item {
width: 31.1%;
}

.linkList__item__link {
width: 372px;
width: 100%;
height: 58px;
background-color: #fff;
justify-content: center;
align-items: center;
color: #333;
text-decoration: none;
position: relative;
}

.linkList__item__icon {
width: 32px;
height: 32px;
margin-right: 10px;
}

.linkList__item__arrow{
width: 25px;
position: absolute;
right: 20px;
}

@media screen and (max-width: 767px) {
	 .homeLink::after {
        left: auto;
        right: 4.9%;
        bottom: 7vw;
        top: auto;
        height: 10vw;
        width: 64vw;
        /*transform: rotate(-6deg);*/
    }
	
	.homeLink__container {
    padding: 12vw 0 30vw;
	}
	
	.homeLink__heading {
    margin-bottom: 12vw !important;
}
	
	    .homeLink__heading::after {
        top: 11vw;
        left: 72vw;
        width: 14.8vw;
        height: 12vw;
    }
	
	.linkList::after {
    bottom: -8vw;
    width: 90%;
	}
	
	.linkList {
    flex-wrap: wrap;
    justify-content: center;
}
	
	.linkList__item {
		width: 70vw;
	}
	
	.linkList > .linkList__item:nth-of-type(1),.linkList > .linkList__item:nth-of-type(2) {
		margin-bottom: 4vw;
	}
	
	.linkList__item__link {
    width: 70vw;
    height: 11vw;
	font-size: 3.2vw;
}
	
	.linkList__item__icon{
    width: 6vw;
    height: 6vw;
    margin-right: 2vw;
}
	
	.linkList__item__arrow {
    width: 4vw;
    right: 4vw;
}
}

/* pickup */
.homePickup::after {
content: "";
position: absolute;
top: 75px;
right: 7.9%;
width: 406px;
height: 83px;
background-image: url(/bliss/assets/img/hair-catalog.png);
background-size: cover;
}

.homePickup__container {
padding: 65px 0 122px;
}

.homePickup__heading {
max-width: 1700px;
max-width: 89%;
margin: 0 0 53px auto;
position: relative;

max-width: 1700px;
max-width: 89%;
width: 633px;
margin: 0 0 53px auto;
margin: 0 0 0 11%;	
}

.homePickup__heading::after {
content: "";
position: absolute;
top: -15px;
right: -110px;
background-image: url(/bliss/assets/img/kushi.png);
background-size: cover;
width: 62px;
height: 87px;
transform: rotate(24deg);
}

.homePickup__heading .pageBtn {
margin: 6px 0 0 40px;
}

.swiper {
max-width: 1710px;
max-width: 89%;
margin: 0 0 0 auto;
}

@media screen and (min-width: 769px) {
.swiper-slide {
width: 266px !important;
margin-bottom: 25px !important;
}
}

.swiper-slide .image {
width: 266px;
height: 370px;
margin-bottom: 15px;
background-size: cover;
}

.swiper-slide .cate {
margin-bottom: 8px;
font-size: 14px;
font-weight: bold;
color: #333;
}

.swiper-slide .title {
margin-bottom: 55px;
font-size: 20px;
font-weight: bold;
color: #333;
}

.swiper-scrollbar {
margin-top: 40px;
height: 10px !important;
}

.swiper-scrollbar-drag {
background-color: #463e11;
}

.swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
left: -5% !important;
bottom: 5px !important;
}

@media screen and (max-width: 767px) {
	.homePickup::after {
    	left: auto;
        right: 4.9%;
        bottom: 10vw;
        top: auto;
        height: 14vw;
        width: 66vw;
}
	
.homePickup__container {
    padding: 12vw 4.9% 30vw;
}
	
	.homePickup__heading {
    margin: 0 0 7vw auto;
}
	
	.homePickup__heading h2 img {
		width: auto;
    	height: 11vw;
	}
	
	.homePickup__heading {
		max-width: none;
}
	
	.homePickup__heading::after {
    content: "";
    position: absolute;
    top: -15px;
    left: -240px;
    right: 0;
    margin: auto;
    background-image: url(/bliss/assets/img/kushi.png);
    background-size: cover;
    width: 62px;
    height: 87px;
    transform: rotate(24deg);
    top: 7vw;
    left: 72vw;
    width: 10vw;
    height: 14vw;
}

	.swiper  {
		max-width: none;
	}
	
	.swiper-slide {
		margin-bottom: 7vw !important;
	}
	
	.swiper-slide .image {
		width: auto;
		height: 120vw;
    	margin: 0 4.9%;
}
	
	.swiper-slide .cate {
    	padding: 0 4.9%;
    	font-size: 3.2vw;
		margin-top: 2vw;
    	margin-bottom: 0.6vw;
}
	
	.swiper-slide .title {
    padding: 0 4.8%;
    font-size: 4.5vw;
    margin-bottom: 11vw;
}
	
	.swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
	height: 2vw !important;
    left: 5% !important;
	bottom: 0 !important;	
}
	
	.homePickup__content .pageBtn {
		margin-left: 4.9%;
	}
}

/* company */
.homeCompany {
background-color: #aba581;
}

.homeCompany::before {
content: "";
background-image: url(/bliss/assets/img/salon-bg.JPG);
background-size: cover;
background-position: top center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.2;
}

.homeCompany::after {
content: "";
position: absolute;
top: 95px;
left: 4.9%;
width: 350px;
height: 91px;
background-image: url(/bliss/assets/img/salon-info.png);
background-size: cover;
}

.homeCompany__container {
/*max-width: 93%;*/
max-width: 990px;
margin: auto;
padding: 90px 0 80px;
padding-top: 70px;
position: relative;
}

.homeCompany__heading {
margin-bottom: 50px;
position: relative;
z-index: 10;
}

.homeCompany__heading .homeHeading {
margin-bottom: 40px;
}

.homeCompany__heading .homeHeading .homeHeading__textMain span{
color: #8f7b36;
}

.homeCompany__heading::after {
content: "";
position: absolute;
top: -15px;
left: 474px;
right: 0;
margin: auto;
background-image: url(/bliss/assets/img/hasami03.png);
background-size: cover;
width: 90px;
height: 89px;
transform: rotate(66deg);
}

.homeCompany__content {
position: relative;
z-index: 10;
padding: 0 20px;
}

.homeCompany__content__table {
max-width: 1150px;
width: 100%;
margin: auto;
border-collapse: collapse;
}

.homeCompany__content__table__tr {
position: relative;
display: flex;
align-items: center;
}

.homeCompany__content__table__tr::before {
content: "";
width: 100%;
height: 19px;
background-image: url(/bliss/assets/img/line-white.png);
position: absolute;
left: 0;
top: -9.5px;
}

.homeCompany__content__table__tr:last-child::after {
content: "";
width: 100%;
height: 19px;
background-image: url(/bliss/assets/img/line-white.png);
position: absolute;
left: 0;
bottom: -9.5px;
}

.homeCompany__content__table__th {
width: 17.4%;
min-width: 200px;
text-align: center;
font-weight: normal;
color: #fff;
position: relative;
margin-left: -25px;
}

.homeCompany__content__table__th::after {
content: "/";
position: absolute;
left: 170px;
top: 0;
bottom: 0;
margin: auto 0;
}

.homeCompany__content__table__td {
width: calc(100% - 17.4%);
padding: 16px 0 16px 24px;
font-weight: normal;
line-height: calc(30 / 16);
color: #fff;
}

@media screen and (max-width: 767px) {
	.homeCompany::after {
        right: 4.9%;
        left: auto;
        /* bottom: 0vw; */
        top: 119vw;
        height: 9vw;
        width: 42vw;
        left: auto;
        bottom: 10vw;
        top: auto;
        height: 14vw;
        width: 56vw;
    }
	
	.homeCompany__container {
    padding: 12vw 4.9% 30vw;
}
	
	.homeCompany__heading {
    margin-bottom: 8vw !important;
	}
	
	.homeCompany__heading .homeHeading{
    margin-bottom: 6vw;
    margin-left: 0;
}
	
	.homeCompany__heading::after {
    transform: rotate(66deg);
    top: 3vw;
    left: 72vw;
    width: 13vw;
    height: 13vw;
}
	
	.homeCompany__heading__intro {
		font-size: 3.2vw;
    	text-align: left;
	}
	
	.homeCompany__content {
		padding: 0;
	}
	
	.homeCompany__content__table__th {
		min-width: 0;
    width: 18vw;
		padding: 2vw 0 3vw;
    padding-left: 0;
    font-size: 3.2vw;
		height: auto;
		text-align: left;
		margin-left: 6vw;
}
	
	.homeCompany__content__table__th::after {
    content: "/";
    position: absolute;
    left: 170px;
    top: 18px;
    /* bottom: 0; */
    /* margin: auto 0; */
    top: 50%;
    left: 89%;
		bottom: auto;
    transform: translate(-50%, -50%);
}
	
	.homeCompany__content__table__td {
    width: calc(100% - 36.9%);
    padding: 2vw 4vw;
    font-size: 3.2vw;
    /* width: 26vw; */
}
}
/* ------------------------------------------ // ------------------------------------------ */

/* responsive heading */
@media screen and (min-width: 769px) and (max-width: 1919px)  {
	.homeAbout::after {
    width: 21vw;
    height: 4.56vw;
	width: 8.9vw;
    height: 4.04vw;
}
}

@media screen and (min-width: 769px) and (max-width: 1919px) {
	.homeService::after {
    width: 21vw;
    height: 4.56vw;
	width: 14.9vw;
    height: 5.04vw;
}
}

@media screen and (min-width: 769px) and (max-width: 1919px) {
.homeLink::after {
    width: 23vw;
    height: 3.5vw;
    top: 5vw;
}
	
@media screen and (min-width: 769px) and (max-width: 1919px) {	
.homePickup::after {
     top: 4vw;
     width: 23vw;
     height: 4.8vw;
}
}
	
@media screen and (min-width: 769px) and (max-width: 1919px) {
	.homeCompany::after {
    width: 18vw;
    height: 4.56vw;
	width: 20.45vw;
    height: 5.12vw;
}
}