@charset "utf-8";
/* ---------------------------------------------------------------------------------
Copyright maisha. All Rights Reserved.

HTML CSS Selectors Menu

$Revision: 1.0 $
--------------------------------------------------------------------------------- */

/*---------------------------------------------------------------------------------
FV
--------------------------------------------------------------------------------- */
.page-header {
  width: 100%;
  height: 1390px;
  position: relative;
  background-color: #f5f5f2;
}
.page-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  margin-top: 965px;
  position: relative;
  z-index: 2;
}
.page-nav a {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 118px;
  height: 115px;
  margin: 0 56px;
  font-size: 16px;
  line-height: 1;
  position: relative;
  z-index: 2;
}
.page-nav a::before {
  display: block;
  width: 118px;
  height: 115px;
  background: url("../img/menu/nav_bg-pc.png") no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  animation:10s linear infinite rotation1;
  content:"";
}
.page-nav a:nth-of-type(2)::before {
  animation-delay: 715ms;
}
.page-nav a:nth-of-type(3)::before {
  animation-delay: 300ms;
}
.page-nav a:nth-of-type(4)::before {
  animation-delay: 100ms;
}
.mv-wrap {
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}
.mv-img {
  width: 896px;
  position: absolute;
  top: 420px;
  left: 50%;
  margin-left: -448px;
  z-index: 3;
  transition : all 200ms 0ms ease-out;
}
.mv-bg01 {
  width: 896px;
  height: 550px;
  background-image: url("../img/menu/mv_bg01-pc.jpg");
  background-size: cover;
  position: absolute;
  top: 508px;
  left: 50%;
  margin-left: -600px;
  z-index: 1;
  transition : all 200ms 0ms ease-out;
}
.mb-bg02 {
  width: 556px;
  height: 556px;
  background-image: url("../img/menu/mv_bg02-pc.jpg");
  background-size: cover;
  position: absolute;
  top: 358px;
  left: 50%;
  margin-left: 43px;
  z-index: 2;
  transition : all 200ms 0ms ease-out;
}


/*---------------------------------------------------------------------------------
カテゴリー
--------------------------------------------------------------------------------- */
.menu-category {
  padding: 373px 0 422px;
  position: relative;
}
.menu-category-icon01,
.menu-category-icon02 {
  background-repeat: no-repeat;
  position: absolute;
  left: 50%;
  z-index: 3;
}

.menu-category-img {
  width: 800px;
  margin: 0 auto 200px;
  position: relative;
  z-index: 2;
}
.menu-category-ttl {
  margin-bottom: 145px;
  font-size: 14px;
  line-height: 1;
  text-align: center;
}
.menu-category-ttl .en {
  display: block;
  margin-bottom: 30px;
  font-family: var(--font-en);
  font-size: 34px;
}
.menu-category .tab {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  width: 785px;
  margin: 190px auto 78px;
}
.menu-category .tab li {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  min-width: 98px;
  padding: 0 18px;
  height: 38px;
  border: 1px solid #A0A0A0;
  border-radius: 19px;
  margin: 0 10px 36px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}
.menu-category .tab li.select,
.menu-category .tab li:hover {
  background-color: #C6D1D8;
}
.menu-category-list {
  width: 765px;
  border-top: 1px solid #BCB1AB;
  margin: 0 auto;
  font-family: var(--font-go);
  font-size: 14px;
  line-height: 1;
  font-weight: 300;
}
.menu-category-list div {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  border-bottom: 1px solid #BCB1AB;
}
.menu-category-list dt {
  width: 555px;
  padding: 23px 0 21px 20px;
}
.menu-category-list dd {
  width: calc(100% - 555px);
  padding: 23px 30px 21px 0;
  text-align: right;
}
.menu-category-list dd:nth-of-type(2) {
  width: 100%;
  padding: 0 30px 23px 20px;
  font-size: 12px;
  line-height: 1.83;
  text-align: left;
}
.menu-category-list dd:nth-of-type(2):empty {
  display: none;
} 


.menu-category-note01 {
  width: 765px;
  margin: 0 auto 8px;
  font-family: var(--font-go);
  font-size: 12px;
  line-height: 1;
  text-align: right;
}
.menu-category-note02 {
  width: 765px;
  padding-left: 20px;
  margin: 26px auto 0;
  font-family: var(--font-go);
  font-size: 12px;
  line-height: 1.83;
}
.menu-category-note03 {
  width: 765px;
  margin: 145px auto 0;
}
.menu-category-note03__ttl {
  padding: 0 20px 17px;
  border-bottom: 1px solid #BCB1AB;
  margin-bottom: 32px;
  font-size: 16px;
  line-height: 1;
}
.menu-category-note03__txt {
  padding: 0 20px;
  font-family: var(--font-go);
  font-size: 12px;
  line-height: 1.76;
}

/*---------------------------------------------------------------------------------
カテゴリー毎
--------------------------------------------------------------------------------- */
.menu-category:nth-of-type(1) {
  background-color: #f5f5f2;
}
.menu-category:nth-of-type(1) .menu-category-icon01 {
  width: 453px;
  height: 48px;
  background-image: url("../img/menu/icon_hair.svg");
  position: absolute;
  top: 173px;
  margin-left: -892px;
}
.menu-category:nth-of-type(1) .menu-category-icon02 {
  width: 453px;
  height: 48px;
  background-image: url("../img/menu/icon_hair.svg");
  position: absolute;
  top: 508px;
  margin-left: 335px;
}

.menu-category:nth-of-type(2) {
}
.menu-category:nth-of-type(2) .menu-category-icon01 {
  width: 500px;
  height: 250px;
  background-image: url("../img/menu/icon_nail.svg");
  position: absolute;
  top: -78px;
  margin-left: -976px;
}
.menu-category:nth-of-type(2) .menu-category-icon02 {
  width: 500px;
  height: 250px;
  background-image: url("../img/menu/icon_nail.svg");
  position: absolute;
  top: -130px;
  margin-left: 479px;
}

.menu-category:nth-of-type(3) {
  background-color: #f5f5f2;
}
.menu-category:nth-of-type(3) .menu-category-icon01 {
  width: 441px;
  height: 421px;
  background-image: url("../img/menu/icon_kitsuke01.svg");
  position: absolute;
  top: -506px;
  margin-left: -903px;
}
.menu-category:nth-of-type(3) .menu-category-icon02 {
  width: 290px;
  height: 276px;
  background-image: url("../img/menu/icon_kitsuke02.svg");
  position: absolute;
  top: -372px;
  margin-left: 482px;
}

.menu-category:nth-of-type(4) {
  padding-bottom: 285px;
}
.menu-category:nth-of-type(4) .menu-category-icon01 {
  width: 233px;
  height: 233px;
  background-image: url("../img/menu/icon_eyelash.svg");
  position: absolute;
  top: -1324px;
  margin-left: -462px;
  z-index: 1;
}
.menu-category:nth-of-type(4) .menu-category-icon02 {
  width: 233px;
  height: 233px;
  background-image: url("../img/menu/icon_eyelash.svg");
  position: absolute;
  top: -188px;
  margin-left: 232px;
  z-index: 1;
}