@charset "UTF-8";

/* =======================================================================

  Default.css

======================================================================= */

/*  Base
======================================================= */

/* PC */
html {
  font-size: 62.5%;
  color: var(--color-font);
}

button {
  outline: none;
  border: none;
  background: none;
  cursor: pointer;
}


@media screen and (max-width: 1200px) {
  html {
    font-size: calc(10 * (100vw / 1200));
  }
}


/* @media screen and (max-width: 980px) {
	html {
	  font-size: calc(10 * (100vw / 980));
	}
} */

@media screen and (max-width: 768px) {
  html{
    font-size: 62.5%;
  }
}


/* SP */
@media screen and (max-width: 375px) {
  html {
    font-size: calc(10 * (100vw / 375));
  }
}


body {
  font-family: var(--font-en), var(--font-jp);
  font-size: var(--text-l);
  color: var(--color-font);
  padding-top: var(--header-fullHeight);
  letter-spacing: 0.08em;
}

.contents_inner {
  width: var(--container-default);
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.user_wrap {
  width: 100%;
}

#Wrap_lower.onlyDefault {
  margin-top: 0 !important;
  padding: 0 !important;
}




/* =============================================================

    Header Setting

============================================================= */

#header {
  position: fixed;
  width: 100%;
  z-index: var(--zindex-header);
  top: 0;
  font-family: var(--font-en), var(--font-jp);
}
#header #header_top {
  background: var(--color-light-opaque);
  backdrop-filter: blur(5px);
  --color-header: #333;
  transition: background var(--transition-default);
}
#header.header-wht:not(.search-open) #header_top {
  background: transparent;
  backdrop-filter: unset;
  --color-header: #fff;
  color: var(--color-header);
}
#header svg path {
  transition: fill var(--transition-default);
}

#header.header_order {
  position: inherit;
}

.header_inner {
  width: 100%;
  padding-left: var(--content-padding);
  padding-right: var(--content-padding);
}


/* Header Search
---------------------------------- */
#header_search {
  display: none;
  border-top: 1px solid var(--color-border);
  position: relative;
  pointer-events: none;
}

#header_search .header_search_inner {
  position: absolute;
  z-index: calc(var(--zindex-header) + 2);
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 91.6666666667%;
  max-width: 132rem;
  background: var(--color-light-opaque);
  backdrop-filter: blur(5px);
  padding: 4.5rem 18.48484848484848% 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
}
#header_search .header_search_box {
  width: 80.8rem;
  position: relative;
}
#header_search .header_search_box .input-search {
  outline: none;
  border: none;
  width: 100%;
  background: var(--color-search-input);
  font-size: 1.4rem;
  line-height: normal;
  padding: 1.2rem 0 1.2rem 5.8rem;
}
#header_search .header_search_box::before {
  content: '';
  display: block;
  width: 2.1rem;
  height: 2.1rem;
  background: url("data:image/svg+xml, %3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.4398 22.8767C11.7629 22.8767 9.09719 21.8618 7.05608 19.8206C5.0819 17.8465 4 15.2254 4 12.437C4 9.64857 5.0819 7.02748 7.05608 5.0533C11.1271 0.982235 17.7524 0.982235 21.8234 5.0533C23.7976 7.02748 24.8795 9.64857 24.8795 12.437C24.8795 15.2254 23.7976 17.8465 21.8234 19.8206C19.7823 21.8506 17.1166 22.8767 14.4398 22.8767ZM14.4398 4.22793C12.3429 4.22793 10.2349 5.03099 8.62874 6.62595C7.07839 8.1763 6.21956 10.2397 6.21956 12.437C6.21956 14.6342 7.07839 16.6865 8.62874 18.248C11.8298 21.4491 17.0385 21.4491 20.2396 18.248C21.79 16.6976 22.6488 14.6342 22.6488 12.437C22.6488 10.2397 21.79 8.18745 20.2396 6.62595C18.6335 5.01983 16.5366 4.22793 14.4286 4.22793H14.4398Z' fill='%23333'/%3E%3Cpath d='M21.8278 18.2549L20.2504 19.8323L26.268 25.8499L27.8454 24.2725L21.8278 18.2549Z' fill='%23333'/%3E%3C/svg%3E") no-repeat center;
  background-size: 100% auto;
  position: absolute;
  top: 50%;
  left: 1.5rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.header_search :placeholder-shown {
  color: var(--color-placeholder);
}

.header_search ::-webkit-input-placeholder {
  color: var(--color-placeholder);
}

.header_search :-moz-placeholder {
  color: var(--color-placeholder);
}

.header_search ::-moz-placeholder {
  color: var(--color-placeholder);
}

.header_search :-ms-input-placeholder {
  color: var(--color-placeholder);
}

#Header .search_tag {
  width: 83.2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 6.2rem;
}
#Header .search_tag.search_category {
  margin-top: 4.5rem;
}
.search_tag .search_tag_list {
  flex-basis: 73.5576923077%;
}
.search_tag .search_tag_list ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2.3rem;
  row-gap: 2rem;
}
.search_tag .search_tag_list ul > li {
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.08em;
}
.search_tag .search_tag_list ul > li > a {
  line-height: 180%;
  padding: 0.4rem 1.5rem;
  border: 1px solid var(--color-primary);
  border-radius: 1.5rem;
  transition: all var(--transition-default);
}
.search_tag .search_tag_list ul > li > a::before {
  content: '#';
  display: inline;
}
.search_tag .search_tag_list ul > li > a.tag-selected {
  color: #fff;
  background: var(--color-primary);
}
#Header .search_tag.search_category ul > li > a::before {
  display: none;
}
#header_search .search_btn {
  margin-top: 9rem;
}
#header_search .search_btn .btn-search {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.2em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.6rem;
}
#header_search .search_btn .btn-search .btn_txt {
  display: inline-block;
  padding-bottom: 0.2rem;
  position: relative;
}
#header_search .search_btn .btn-search .btn_txt::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-font);
  transition: width var(--transition-default);
}
#header_search .search_btn .btn-search::after {
  content: '';
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M8.68885 17.3754C6.46094 17.3754 4.24231 16.5306 2.54353 14.8318C0.900447 13.1888 0 11.0073 0 8.68653C0 6.36579 0.900447 4.18429 2.54353 2.54121C5.93181 -0.84707 11.4459 -0.84707 14.8342 2.54121C16.4772 4.18429 17.3777 6.36579 17.3777 8.68653C17.3777 11.0073 16.4772 13.1888 14.8342 14.8318C13.1354 16.5213 10.9168 17.3754 8.68885 17.3754ZM8.68885 1.85427C6.94365 1.85427 5.18917 2.52264 3.85243 3.85011C2.5621 5.14044 1.84731 6.85778 1.84731 8.68653C1.84731 10.5153 2.5621 12.2233 3.85243 13.5229C6.51664 16.1872 10.8518 16.1872 13.516 13.5229C14.8063 12.2326 15.5211 10.5153 15.5211 8.68653C15.5211 6.85778 14.8063 5.14972 13.516 3.85011C12.1792 2.51336 10.434 1.85427 8.67957 1.85427H8.68885Z' fill='%23333333'/%3E%3Cpath d='M14.8378 13.5287L13.525 14.8415L18.5334 19.8499L19.8462 18.5371L14.8378 13.5287Z' fill='%23333333'/%3E%3C/svg%3E") no-repeat center;
  background-size: 100% auto;
}
@media screen and (min-width: 769px) {
  #header_search .search_btn .btn-search:hover {
    opacity: 1;
  }
  #header_search .search_btn .btn-search:hover .btn_txt::after {
    width: 0;
  }
}
#header_search .header_search_overlay {
  position: absolute;
  inset: 0;
  z-index: calc(var(--zindex-header) + 1);
  width: 100%;
  height: 100vh;
  background: transparent;
  pointer-events: auto;
}

/* Header Info
---------------------------------- */

#header_info {
  background: #fff;
  color: var(--color-font);
  height: 3rem;
  font-family: var(--font-jp);
  overflow: hidden;
  transition: height .4s ease;
}
#header_info.is-collapsed {
  height: 0;
}

#header_info .header_inner {
}

#header_info .header_inner {
  margin: 0 auto;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

#header_info .header_inner,
#header_info .header_inner > * {
  font-weight: 300;
  font-size: 1.1rem;
  line-height: normal;
  letter-spacing: 0.08em;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#header_info a {
  text-decoration: underline;
}

#header_info a:hover {
  text-decoration: none;
}


/* Header Top
---------------------------------- */

#header_top {
  overflow: hidden;
}

#header_top .header_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2.5rem;
  padding-bottom: 2.35rem;
  position: relative;
}

#header_top .header_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 14.2rem;
  padding-top: 0;
}

.header_logo img,
.header_logo svg {
  display: block;
  width: 100%;
  height: auto;
}

.header_inner__column {
  display: flex;
  align-items: center;
  line-height: 0;
}

/* ---- Login info ---- */
.header_login_info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.header_login_info .salon_detail {
  border-right: 1px solid var(--color-header);
  font-size: 1.1rem;
  padding: 0.5rem 1.1rem 0.7rem 0;
}
.header_login_info .utility_salon {
  width: 2.2rem;
  margin-right: 1.6rem;
}
.header_login_info .utility_salon a {
  pointer-events: none;
}
.header_login_info .salon_detail .salon_name {
  max-width: 15.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.3rem;
}
.header_login_info .login_name {
  font-size: 1.1rem;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.08em;
}
.header_login_info .salon_detail + .login_name {
  padding-left: 1.5rem;
}
.header_login_info .salon_detail .btn-edit-salon {
  display: inline-block;
  font-size: 1rem;
  line-height: normal;
  transition: all var(--transition-default);
}
.header_login_info .salon_detail .btn-edit-salon::after {
  background: var(--color-header);
}
.header_login_info .salon_detail .btn-edit-salon::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-header);
}
@media screen and (min-width: 769px) {
  .header_login_info .salon_detail .btn-edit-salon::after {
    transition: width var(--transition-default);
  }
  .header_login_info .salon_detail .btn-edit-salon:hover {
    opacity: 1;
  }
  .header_login_info .salon_detail .btn-edit-salon:hover::after {
    width: 0;
  }
}

/* ---- Header Utiliry ---- */

.header_login {
  padding: 0 0;
  font-weight: bold;
}

.header_login span {
  display: inline-block;
  padding: 0 0;
}

/* ---- Cart ---- */

.utility_cart a {
  position: relative;
  display: inline-block;
}

.utility_cart .num {
  position: absolute;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--color-header);
  text-align: center;
  content: "";

}


/* ---- Header Utiliry ---- */

.header_utiliry ul {
  display: flex;
  align-items: center;
  column-gap: 4.65rem;
}
.header_utiliry ul li {
  padding: 0 0;
  text-align: center;
}
.header_utiliry ul li img{
  width: 3rem;
}

/* ---- Cart ---- */

/* .header_utiliry ul .utility_cart {
  padding-right: 1.2rem;
} */

.utility_cart img {
  width: 2rem;
}
.utility_cart .num {
  bottom: 50%;
  left: 50%;
  transform: translateY(50%) translateX(-50%);
  padding: 0.7rem 0 0;
}
_::-webkit-full-page-media, _:future, :root .utility_cart .num {
  padding-top: .2rem;
}

/* ---- キーワード検索 ---- */

.header_search .textBox {
  width: 22rem;
  height: 3rem;
  border-bottom: 1px solid var(--color-dark-grey);
  margin-right: 1.5rem;
  line-height: 2;
}

.header_search .textBox input {
  width: 100%;
  height: 100%;
  border: none;
}

.header_search .btnSearch {
  top: 0;
  right: -.02rem;
  width: 1.7rem;
  height: 100%;
}

.header_search .btnSearch a {
  display: flex;
  justify-content: center;
  height: 100%;
}

.header_search .btnSearch img {
  width: 1.5rem;
  margin-top: -0.5rem;
  vertical-align: 0;
}

#header #dvProductSearch input.text,
#header .header_search .textBox input {
  font-size: var(--text-m) !important;
  font-family: var(--hiragino-gothic) !important;
  line-height: 2;
}

/* Header Menu
---------------------------------- */

#header_menu {
  /* border-top: 1px solid var(--color-very-light-grey);
  border-bottom: 1px solid var(--color-very-light-grey); */
  position: fixed;
  width: fit-content;
  bottom: 3rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  /* transform: translateX(-50%); */
  background: rgba(93, 97, 100, 0.800000011920929);
  border-radius: 3px;
  padding: 0 0;
  color: #fff;
  transition: background var(--transition-default);
}
body:not(.body_nav-open) #header_menu.header-wht {
  background: rgba(255, 255, 255, 0.800000011920929);
  color: #333;
}
#header_menu .header_inner {
  width: auto;
  padding-left: 0;
  padding-right: 0;
}

#header_menu .header_menu__list > ul {
  display: flex;
  align-items: center;
}

#header_menu .header_menu__item > a {
  display: block;
  position: relative;
  padding: 1.2rem 1.5rem;
  text-align: center;
}
#header_menu .header_menu__item > a::before {
  display: none;
}
#header_menu .header_menu__item:first-child a {
  padding-left: 3rem;
}
#header_menu .header_menu__item:last-child a {
  padding-right: 3rem;
}

#Wrap_lower.onlyOrder,
#Wrap_lower.onlyUser {
  padding-top: 0;
}


/*  Header PC Only Setting
-------------------------- */

@media (min-width: 769px) {

  #header_top a {
    transition: opacity var(--transition-default);
  }

  #header_top a:hover {
    opacity: var(--hover-opacity);
  }


  /*  Menu Contents
  -------------------------- */

  .header_menu__contents {
    height: 0;
    opacity: 0;
    transition: opacity .4s ease-in-out;
    visibility: hidden;
    z-index: -1;
    position: absolute;
    top: 18.1rem;
    left: 0;
    right: 0;
    z-index: var(--zindex-header);
    color: #C7C7C7;
  }

  .header_menu__contents a {
    transition: color .4s ease-in-out;
  }

  .header_menu__contents a:hover {
    color: var(--color-black);
  }

  .header_menu__contents::before {
    position: absolute;
    top: 3rem;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #efefef;
    content: "";
  }

  .header_menu__item:hover .header_menu__contents  {
    height: auto;
    z-index: 9999;
    opacity: 1;
    visibility: visible;
  }

  .header_menu__contents .contents_inner {
    width: var(--container-default);
    margin-right: auto;
    margin-left: auto;
    padding: 2.5rem 0 1rem;
    max-width: 95%;
  }

  .header_menu__contents .nav_list {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .header_menu__contents .nav_list > ul > li {
    display: flex;
    overflow: hidden;
  }

  .header_menu__contents .nav_list > ul > li:first-child {
    padding-bottom: 2.5rem;
  }

  .header_menu__contents .nav_list .nav_toggle {
    width: 20rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    font-weight: bold;
  }

  .header_menu__contents .nav_list .nav_list__child {
    width: 90rem;
    font-size: var(--text-l);
  }

  .header_menu__contents .nav_list .nav_list__child li::after {
    padding: 0 1.5rem;
    content: "│";
  }

  .nav_list__child {
    display: flex;
    flex-wrap: wrap;
    padding-top: .5rem;
    padding-bottom: .5rem;
  }

  .nav_list__child li {
    margin-bottom: 2rem;
  }

  /* ---- Hover Line ---- */

  #header_menu .header_menu__item > a,
  #header_menu .header_menu__item > p > a {
    transition: opacity var(--transition-default);
  }

  #header_menu .header_menu__item > a::before,
  #header_menu .header_menu__item > p > a::before {
    transition: opacity var(--transition-default);
    opacity: 0;
    position: absolute;
    right: 3.4rem;
    bottom: 0;
    left: 3.4rem;
    height: .2rem;
    background: var(--color-black);
    content: "";
  }

  #header_menu .header_menu__item:first-child > a::before,
  #header_menu .header_menu__item:first-child > p > a::before {
    left: 0;
  }

  #header_menu .header_menu__item:hover > a,
  #header_menu .header_menu__item:hover > p > a {
    /* color: var(--color-black); */
    opacity: 0.75;
  }

  #header_menu .header_menu__item:hover > a::before,
  #header_menu .header_menu__item:hover > p > a::before {
    opacity: 1;
  }

}

@media screen and (max-width: 768px) {
  /* Header Search
  ---------------------------------- */
  #header_search {
    display: none;
    border-top: 1px solid var(--color-border);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
  }
  #header_search .header_inner {
    background: #fff;
  }

  #header_search .header_search_inner {
    position: relative;
    z-index: unset;
    top: unset;
    left: unset;
    transform: unset;
    width: 100%;
    max-width: unset;
    background: #fff;
    padding: 0 0 0;
    display: block;
    flex-direction: unset;
    align-items: unset;
    pointer-events: auto;
    height: calc(100% - 6rem);
    padding: 0 2rem 20rem;
    overflow: hidden;
    overflow-y: auto;
  }
  #header_search .header_search_box {
    width: calc(100% - 3.2rem);
    margin: 0 auto;
    position: relative;
  }
  #header_search .header_search_box .input-search {
    background: var(--color-search-input);
    font-size: 1.3rem;
    padding: 1.1rem 0 1rem 5rem;
    border-radius: 2px;
    letter-spacing: 0.08em;
  }
  #header_search .header_search_box::before {
    content: '';
    display: block;
    width: 2.1rem;
    height: 2.1rem;
    background: url("data:image/svg+xml, %3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.4398 22.8767C11.7629 22.8767 9.09719 21.8618 7.05608 19.8206C5.0819 17.8465 4 15.2254 4 12.437C4 9.64857 5.0819 7.02748 7.05608 5.0533C11.1271 0.982235 17.7524 0.982235 21.8234 5.0533C23.7976 7.02748 24.8795 9.64857 24.8795 12.437C24.8795 15.2254 23.7976 17.8465 21.8234 19.8206C19.7823 21.8506 17.1166 22.8767 14.4398 22.8767ZM14.4398 4.22793C12.3429 4.22793 10.2349 5.03099 8.62874 6.62595C7.07839 8.1763 6.21956 10.2397 6.21956 12.437C6.21956 14.6342 7.07839 16.6865 8.62874 18.248C11.8298 21.4491 17.0385 21.4491 20.2396 18.248C21.79 16.6976 22.6488 14.6342 22.6488 12.437C22.6488 10.2397 21.79 8.18745 20.2396 6.62595C18.6335 5.01983 16.5366 4.22793 14.4286 4.22793H14.4398Z' fill='%23333'/%3E%3Cpath d='M21.8278 18.2549L20.2504 19.8323L26.268 25.8499L27.8454 24.2725L21.8278 18.2549Z' fill='%23333'/%3E%3C/svg%3E") no-repeat center;
    background-size: 100% auto;
    position: absolute;
    top: 50%;
    left: 1.5rem;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.4;
  }

  .header_search :placeholder-shown {
    color: var(--color-placeholder);
  }

  .header_search ::-webkit-input-placeholder {
    color: var(--color-placeholder);
  }

  .header_search :-moz-placeholder {
    color: var(--color-placeholder);
  }

  .header_search ::-moz-placeholder {
    color: var(--color-placeholder);
  }

  .header_search :-ms-input-placeholder {
    color: var(--color-placeholder);
  }

  #Header .search_tag {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 5.8rem;
    padding: 0 3.2rem;
  }
  .search_tag .search_tag_list {
    flex-basis: unset;
    margin-top: 3rem;
  }
  .search_tag .search_tag_list ul {
    justify-content: flex-start;
    column-gap: 2.3rem;
    row-gap: 1.3rem;
  }
  .search_tag .search_tag_list ul > li {
  }
  .search_tag .search_tag_list ul > li > a {
    padding: 0.3rem 1.5rem;
  }
  .search_tag .search_tag_list ul > li > a::before {
    content: '#';
    display: inline;
  }
  .search_tag .search_tag_list ul > li > a.tag-selected {
    color: #fff;
    background: var(--color-primary);
  }
  #Header .search_tag.search_category {
    margin-top: 3.7rem;
  }
  #Header .search_tag.search_category ul {
  }
  #header_search .search_btn {
    margin-top: 9rem;
  }
  #header_search .search_btn .btn-search {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.2em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1.6rem;
  }
  #header_search .search_btn .btn-search .btn_txt {
    display: inline-block;
    padding-bottom: 0.2rem;
    position: relative;
  }
  #header_search .search_btn .btn-search .btn_txt::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--color-font);
    transition: width var(--transition-default);
  }
  #header_search .search_btn .btn-search::after {
    content: '';
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M8.68885 17.3754C6.46094 17.3754 4.24231 16.5306 2.54353 14.8318C0.900447 13.1888 0 11.0073 0 8.68653C0 6.36579 0.900447 4.18429 2.54353 2.54121C5.93181 -0.84707 11.4459 -0.84707 14.8342 2.54121C16.4772 4.18429 17.3777 6.36579 17.3777 8.68653C17.3777 11.0073 16.4772 13.1888 14.8342 14.8318C13.1354 16.5213 10.9168 17.3754 8.68885 17.3754ZM8.68885 1.85427C6.94365 1.85427 5.18917 2.52264 3.85243 3.85011C2.5621 5.14044 1.84731 6.85778 1.84731 8.68653C1.84731 10.5153 2.5621 12.2233 3.85243 13.5229C6.51664 16.1872 10.8518 16.1872 13.516 13.5229C14.8063 12.2326 15.5211 10.5153 15.5211 8.68653C15.5211 6.85778 14.8063 5.14972 13.516 3.85011C12.1792 2.51336 10.434 1.85427 8.67957 1.85427H8.68885Z' fill='%23333333'/%3E%3Cpath d='M14.8378 13.5287L13.525 14.8415L18.5334 19.8499L19.8462 18.5371L14.8378 13.5287Z' fill='%23333333'/%3E%3C/svg%3E") no-repeat center;
    background-size: 100% auto;
  }
  #header_search .header_search_overlay {
    display: none;
  }
  .utility_cart .num {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 0 16.5%;
  }
}

/*  Footer SP Only Setting
-------------------------- */

@media (max-width: 768px) {

  #header {
  }

  .header_inner__column,
  #header_top .header_inner {
    display: block;
    height: 100%;
  }

  .header_inner {
    max-width: 100%;
  }

  /* Header Info
  ---------------------------------- */

  #header_info {
  }
  #header_info .header_inner,
  #header_info .header_inner > * {
    text-align: center;
    line-height: 1.5;
  }

  #header_info .header_inner {
    max-width: 100%;
    padding: .8rem 1rem .6rem;
    font-size: var(--text-m);
  }

  /* Header Top
  ---------------------------------- */

  #header_top .header_inner,
  #sp_menu .header_inner,
  #header_search .header_inner {
    position: relative;
    height: 6rem;
    padding: 0.7rem 2rem 0;
    align-items: flex-start;
  }

  #header_top .header_logo,
  #sp_menu .header_logo,
  #header_search .header_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 11.2rem;
    padding-top: 0.5rem;
  }

  #sp_bottom_nav {
    position: fixed;
    z-index: var(--zindex-modal);
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    --color-header: #fff;
  }
  #sp_bottom_nav .header_utiliry_wrap {
    display: flex;
    column-gap: 0.5rem;
  }
  #sp_bottom_nav .header_utiliry {
    background: var(--color-dark-opaque);
    border-radius: 3px;
    transition: background var(--transition-default);
  }
  #sp_bottom_nav .header_utiliry ul {
    column-gap: unset;
  }
  #sp_bottom_nav .header_utiliry ul li {
    height: 100%;
    padding: 0.8rem 2rem 0.8rem;
  }
  #sp_bottom_nav .header_utiliry ul li > a,
  #sp_bottom_nav .header_utiliry ul li > button {
    width: 3rem;
    height: 3rem;
  }
  body:not(.body_nav-open)  #sp_bottom_nav.header-wht {
    --color-header: #333;
  }
  body:not(.body_nav-open)  #sp_bottom_nav.header-wht .header_utiliry {
    background: rgba(255, 255, 255, 0.800000011920929);
  }

  /* Header Login Info
  ---------------------------------- */
  .header_login_info {
    height: 100%;
  }
  .header_login_info .salon_detail {
    border-right: none;
    padding: unset;
  }
  .header_login_info .utility_salon {
    width: 2.2rem;
    margin-right: unset;
  }
  .header_login_info .utility_salon a {
    pointer-events: auto;
  }
  #header_top .header_login_info .salon_detail .salon_name {
    display: none;
  }
  #header_top .header_login_info .salon_detail .btn-edit-salon {
    display: none;
  }
  #header_top .header_login_info .login_name {
    display: none;
  }

  /* Hamburger Menu
  ---------------------------------- */

  .header_menu_toggle {
    /* position: absolute;
    top: -2rem;
    left: 1rem;
    z-index: var(--zindex-header);
    width: 2.4rem;
    height: 1.8rem; */
    width: 5rem;
    height: 4.8rem;
    background: var(--color-dark-opaque);
    border-radius: 3px;
    cursor: pointer;
    padding: 1.7rem 1.4rem;
    transition: background var(--transition-default);
  }
  .hamburger {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .hamburger::before,
  .hamburger::after,
  .hamburger span {
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    border-radius: 100px;
    transition: transform .3s,top .3s,left .3s;
  }

  .hamburger::before,
  .hamburger::after {
    left: 0;
    content: "";
  }

  .hamburger span {
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  }

  .header_menu_toggle.is-menu-open .hamburger span {
    height: 0
  }

  .hamburger::before {
    top: 0;
  }

  .hamburger::before {
    top: 0;
  }

  .hamburger::after {
    bottom: 0;
  }

  .header_menu_toggle.is-menu-open .hamburger::before {
    transform: rotate(45deg);
    top: 50%;
  }

  .header_menu_toggle.is-menu-open .hamburger::after {
    transform: rotate(-45deg);
    top: 50%;
  }
  body:not(.body_nav-open) #sp_bottom_nav.header-wht .header_menu_toggle {
    background: rgba(255, 255, 255, 0.800000011920929);
  }
  body:not(.body_nav-open) #sp_bottom_nav.header-wht .hamburger span,
  body:not(.body_nav-open) #sp_bottom_nav.header-wht .hamburger::before,
  body:not(.body_nav-open) #sp_bottom_nav.header-wht .hamburger::after {
    background: var(--color-header);
  }

  /* SP Menu
  ---------------------------------- */

  .sp_menu {
    /* opacity: 0; */
    position: fixed;
    top: 0;
    left: 0;
    /* right: 100%; */
    z-index: var(--zindex-header);
    width: 100%;
    height: 100vh;
    overflow: auto;
    background: var(--color-white);
    /* transition: right .4s ease-in-out, opacity .25s ease-in-out; */
    font-family: var(--font-en), var(--font-jp);
    display: none;
    letter-spacing: 0.08em;
  }


  .sp_menu.is-menu-open {
    /* opacity: 1;
    right: 0; */
  }

  /* iPad対応 */
  @media (min-width: 550px) and (max-width: 768px) {

    .sp_menu {
      width: 90vw;
    }

    .sp_menu.is-menu-open {
      right: 10vw;
    }

  }

  /* -- navi menu close -- */
  .sp_menu.sp_only {
    display: none;
  }

  .sp_menu__inner {
    position: relative;
    padding: 2rem 2rem 15rem;
    border-top: 1px solid #C2C2C2;
  }
  .sp_menu_close {
    display: flex;
    justify-content: flex-end;
    padding-right: 0.7rem;
    padding-bottom: 2rem;
  }
  .sp_menu_close .cross {
    width: 2.7rem;
    height: 2.7rem;
    transform: rotate(45deg);
    transform-origin: center;
    position: relative;
  }
  .sp_menu_close .cross::before,
  .sp_menu_close .cross::after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    background: var(--color-primary);
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  .sp_menu_close .cross::after {
    transform: translateY(-50%) rotate(90deg);
  }

  /* -- navi menu login info -- */
  .sp_menu_login_info {
    padding-bottom: 6rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 2.2rem;
  }
  .sp_menu_login_info .header_login_info {
    width: 100%;
    padding: 1rem 7.1rem 1.3rem 2.4rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 3.3rem;
    background: #F2F2F2;
    height: unset;
  }
  .sp_menu_login_info .login_name {
    font-size: 1.6rem;
    font-weight: 300;
    /* padding: 0 1.1rem 0; */
  }
  .sp_menu_login_info .utility_salon {
    padding-top: 0.5rem;
  }
  .sp_menu_login_info .salon_detail .salon_name {
    font-size: 1.3rem;
    margin-bottom: 1.1rem;
  }
  .sp_menu_login_info .salon_detail .btn-edit-salon {
    font-size: 1.2rem;
    line-height: 1.1;
  }
  .sp_menu_login_info .salon_detail .btn-edit-salon::after {
    background: var(--color-font);
  }


  /* -- navi menu setting -- */

  body.no-scroll {
   /* width: 100%;
    height: 100%;*/
    overflow: hidden;
  }

  .no-scroll .navigation-overlay {
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: var(--zindex-header-bg);
    background: rgba(0, 0, 0, 0.5);
  }

  /* .btn__advancedsearch-popup {
    z-index: 1 !important;
  } */


  /* ------ SP Menu List ------ */

  #sp_menu .header_category_list {
    padding-top: 1rem;
    border-top: 1px solid var(--color-dim-opaque);
  }

  .sp_menu_title {
    display: block;
    position: relative;
    z-index: 1;
    padding: 1.3rem 1.1rem;
    font-size: 3rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1rem;
  }
  .sp_menu_title .sp_menu__subtitle {
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    padding-top: 0.5rem;
  }
  .sp_menu_title.direct-link {
    background: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 5.96188L1 10.9238' stroke='%23333333' stroke-miterlimit='10'/%3E%3C/svg%3E%0A") no-repeat calc(100% - 2rem) 50%;
    background-size: .8rem 1.2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .nav_list .nav_list_title .title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1.6rem;
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: 0.23em;
    padding: 1.65rem 1.6rem 1.65rem 1.4rem;
  }
  .nav_list .nav_list_title .title span {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    background: var(--color-font);
    transform: translateY(0.1rem);
  }
  .nav_list .nav_list_title .toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
  }
  .nav_list .nav_list_title .toggle::before,
  .nav_list .nav_list_title .toggle::after {
    content: '';
    display: block;
    width: 1.5rem;
    height: 1px;
    background: var(--color-primary);
  }
  .nav_list .nav_list_title .toggle::before {
    position: absolute;
    top: 50%;
    right: 1.6rem;
    transform: translateY(-50%) rotate(90deg);
    transition: opacity var(--transition-default);
  }
  .nav_list .nav_list_title .toggle::after {
    position: absolute;
    top: 50%;
    right: 1.6rem;
    transform: translateY(-50%);
  }
  .nav_list.brand_list .nav_list_title {
    border-bottom: 1px solid var(--color-dim-opaque);
  }
  .nav_list.brand_list > ul > li:first-child {
    border-top: none;
  }
  .nav_list .nav_list_title .toggle.is-active::before {
    opacity: 0;
  }

  .sp_menu .nav_list ul {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    text-align: left;
  }
  .sp_menu .nav_list ul.toggle_content {
    display: none;
  }

  .sp_menu .nav_list li {
    width: 100%;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-dim-opaque);
    text-align: left;
  }

  .nav_list li a {
    display: block;
    position: relative;
    padding: 2.1rem 2rem 2.1rem 5.5rem;
    background: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 5.96188L1 10.9238' stroke='%23333333' stroke-miterlimit='10'/%3E%3C/svg%3E%0A") no-repeat calc(100% - 2rem) 50%;
    background-size: .8rem 1.2rem;
    font-size: 1.6rem;
    text-align: left;
  }
  .nav_list > ul > li:last-child {
    border-bottom: 1px solid var(--color-dim-opaque);
  }

  .nav_list .nav_toggle {
    transition: background .2s linear;
    background: url(../Contents/ImagesPkg/common/icn_toggle_off.svg) #fafafa calc(100% - 1.6rem) 1.9rem no-repeat;
    background-size: 1.4rem 1.4rem;
  }

  .nav_list .nav_toggle > a {
    display: inline-block;
    width: auto;
    background: none;
    pointer-events: none;
  }

  .nav_list .nav_toggle.is-active {
    background-image: url(../Contents/ImagesPkg/common/icn_toggle_on.svg);
  }

  .nav_list .nav_toggle + ul {
    display: none;
  }
  .nav_list + .nav_list {
    margin-top: 0.5rem;
  }

  /* ---- header content list ---- */

  #sp_menu .header_contents_list {
    padding-bottom: 11.2rem;
  }
  #sp_menu .header_contents_list ul > li {
    border-bottom: 1px solid var(--color-dim-opaque);
  }

  /* ---- header other list ---- */
  #sp_menu .header_other_list {
    padding-left: 1.1rem;
    display: grid;
    grid-template-columns: 58% 42%;
  }
  #sp_menu .header_other_list ul > li {
    font-size: 1.5rem;
    font-weight: 400;
  }
  #sp_menu .header_other_list ul > li + li {
    margin-top: 2.6rem;
  }

  #sp_menu .header_other_list dl {
    display: flex;
    flex-direction: column;
    row-gap: 3rem;
  }
  #sp_menu .header_other_list dl dt {
    font-size: 1.8rem;
    font-weight: 700;
  }

  /* ---- Search ---- */

  .header_search dd {
    padding: 1.5rem 1.6rem;
  }

  .header_search .textBox {
    overflow: hidden;
    width: 100%;
    height: 5rem;
    border-radius: .5rem;
    border: 1px solid var(--color-light-grey);
  }

  .header_search .text {
    padding: 1.6rem 5.5rem 1.6rem 1.8rem;
  }

  .header_search .btnSearch {
    top: 0;
    right: 0;
    width: 5rem;
    height: 100%;
  }

  .header_search .btnSearch img {
    width: 1.9em;
    margin-top: 0;
    vertical-align: 0;
  }

  #dvProductSearch input.text {
    transform: scale(0.8);
    width: 126%;
    height: 6rem;
    margin-top: -0.7rem;
    margin-left: -13%;
    padding-right: 4rem;
    font-size: 1.6rem;
    background: none;
  }

  /* ---- SNS ---- */

  .sp_menu .sns_area {
    padding: 6.2rem 0 0;
    text-align: center;
    color: var(--color-grey);
    font-family: var(--font-en), var(--hiragino-gothic);
  }

  .sp_menu .sns_area dt {
    display: block;
    margin-bottom: 2.4rem;
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
    letter-spacing: .02em;
  }

  .sp_menu .sns_area ul {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 4rem;
  }

  .sp_menu .sns_area ul li {
    width: 3rem;
    height: 3rem;
    aspect-ratio: 1 / 1;
  }
  .sp_menu .sns_area ul li img {
    display: block;
    width: 100%;
    height: auto;
  }


}


/* =============================================================

    Footer Setting

============================================================= */

#footer {
  position: relative;
  font-family: var(--font-en), var(--font-jp);
}

.footer_inner {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

#footer a {
  transition: opacity var(--transition-default);
}

#footer a:hover {
  opacity: var(--hover-opacity);
}

/* Footer Utility
---------------------------------- */
.footer_utility {
  padding: 16rem 0;
}
.footer_social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 4rem;
}
.footer_social li {
  width: 3rem;
  height: 3rem;
}
.footer_social li img {
  display: block;
  width: 100%;
  height: auto;
}

/* Footer Top
---------------------------------- */

#footer_top {
  background: var(--color-silver-white);
  font-size: var(--text-l);
  color: var(--color-font);
  letter-spacing: .05rem;
}

#footer_top .bnr_mailmagazine {
  margin-bottom: 4.5rem;
}

#footer_top .bnr_mailmagazine {
  width: 100%;
}
#footer_top .footer_nav + .footer_nav {
  border-left: 1px solid #686868;
  padding-left: 6.6rem;
  margin-left: 6.8rem;
}
#footer_top .footer_nav .footer_nav_head {
  width: 100%;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.08em;
  padding-bottom: 2.8rem;
}

.footer_nav {
  padding: .6em 0 0;
}

#footer_top .footer_nav ul {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  column-gap: 6.6rem;
}


.footer_nav li {
  margin-bottom: 2.1rem;
}

/* Footer Bottom
---------------------------------- */

#footer_bottom {
  background: var(--color-silver-white);
  /* border-top: 1px solid var(--color-white); */
  color: var(--color-font);
  font-size: var(--text-s);
}

#footer_bottom .footer_inner {
  display: flex;
  justify-content: center;
  padding: 0 0 2.4rem;
}

.footer_btm_nav {
  padding-top: 0;
}

#footer_bottom .coryright {
  font-family: var(--font-jp) !important;
  font-weight: 300 !important;
  font-size: var(--text-m);
}

/* NewsList
---------------------------------- */
.news_detail {
  display: none;
}

/*  Footer PC Only Setting
-------------------------- */

@media (min-width: 769px) {

  /* Footer Top
  ---------------------------------- */

  #footer_top .footer_inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 6.6rem 4.5138888889% 10.7rem 4.3055555556%;
  }
  #footer_top .footer_inner__column.nav_column {
    display: flex;
    flex-wrap: wrap;
  }
  /* #footer_top .footer_inner__column {
    width: 24.4rem;
    padding: 0 .5em 0 0;
  }

  #footer_top .footer_inner__column:nth-child(1) {
    width: 28rem;
  }

  #footer_top .footer_inner__column:nth-child(2) {
    width: 24rem;
  }

  #footer_top .footer_inner__column:nth-child(3) {
    width: 36rem;
  }

  #footer_top .footer_inner__column:nth-child(4) {
    width: 28rem;
    padding: 0;
  } */

  #footer_top .footer_logo {
    width: 13rem;
  }

  #footer_top .footer_logo img {
    width: 100%;
    max-width: 100%;
  }
  /* #footer_top .footer_inner__column.nav_column {
    display: flex;
  } */

  /* Footer Bottom
  ---------------------------------- */

  #footer_bottom .footer_nav ul {
    display: flex;
    width: 100%;
  }

  .footer_btm_nav ul {
    display: flex;
  }

  .footer_btm_nav li {
    margin-bottom: 0;
    padding-left: 2.4rem;
  }

  .footer_btm_nav li:first-child {
    padding-left: 0;
  }

}

/*  Footer SP Only Setting
-------------------------- */

@media (max-width: 768px) {

  .footer_inner {
    max-width: 100%;
    padding: 1.8rem;
  }

  /* Footer Utility
  ---------------------------------- */
  .footer_utility {
    padding: 10rem 0 6rem;
  }
  .footer_social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 4rem;
  }
  .footer_social li {
    width: 3rem;
    height: 3rem;
  }

  /* Footer Top
  ---------------------------------- */

  #footer_top {
  }

  #footer_top .footer_inner {
    padding-top: 5.2rem;
  }

  .footer_logo img {
    width: 100%;
    max-width: 13rem;
  }
  .footer_logo .footer_catchcopy {
    display: block;
    font-size: 1.1rem;
    font-weight: 300;
    padding-top: 0.6rem;
  }
  #footer_top .footer_nav + .footer_nav {
    padding-left: 1.9rem;
    margin-left: 0;
    border-left: none;
    margin-top: 7.8rem;
  }
  .footer_nav {
    padding: 0 1.9rem;
  }
  .footer_nav.category_nav {
    padding-top: 10.7rem;
  }
  #footer_top .footer_nav ul {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0;
    row-gap: 1.5rem;
  }
  .footer_nav.category_nav ul {
    max-width: 24rem;
  }
  .footer_nav li {
    flex-basis: 50%;
    display: inline-block;
    margin: 0;
    font-size: 1rem;
    font-weight: 300;
  }
  .footer_nav li a {
    display: block;
    padding: 0 0;
  }

  .sp_nav__half {
    margin-bottom: 4rem;
  }

  .sp_nav__half ul {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    margin-left: -1px;
  }

  .sp_nav__half li:first-child {
    border-top: none;
  }

  .sp_nav__half li {
    width: 50%;
  }

  .sp_nav__half li:nth-child(2n) a {
    padding-left: 1.5rem;
    border-left: 1px solid #989898;
  }

  #footer_top .sns_area {
    width: 22rem;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 3.5rem;
  }

  #footer_top .sns_area dt {
    font-size: 1.3rem;
    text-align: center;
  }

  #footer_top .sns_area li {
    width: 2.4rem;
  }

  /* Footer Bottom
  ---------------------------------- */

  #footer_bottom {
    border-top-width: 0;
  }

  #footer_bottom .footer_inner {
    display: block;
    padding-top: 0;
    padding-bottom: 0;
  }

  .footer_btm_nav {
    margin-bottom: 1rem;
    font-size: var(--text-l);
    text-align: center;
  }

  .footer_btm_nav li {
    margin-bottom: 1rem;
    text-align: center;
  }

  .footer_btm_nav li:last-child {
    margin-bottom: 0;
  }

  .footer_btm_nav li a {
    display: block;
    padding: .5rem 0;
  }

  #footer_bottom .coryright {
    display: block;
    padding: 9.4rem 0 3.1rem;
    text-align: center;
    font-size: 1rem;
  }

  /* Page Top
  ---------------------------------- */

  #pagetop {
    transition: opacity var(--transition-default), height var(--transition-default);
    /* opacity: 0;
    position: absolute;
    top: -10rem;
    right: 3rem;
    bottom: auto;
    z-index: var(--zindex-header);
    width: 6rem;
    height: 6rem; */
    text-align: center;
    margin-top: 8.4rem;
  }
  #pagetop a {
    display: inline-block;
    vertical-align: baseline;
    font-size: 1rem;
    font-weight: 700;
  }
  #pagetop a::after {
    content: '';
    display: inline-block;
    width: 0.8rem;
    height: 0.5rem;
    background: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.99785 1.52314L6.78214 5H8L3.99785 0L0 5H1.21786L3.99785 1.52314Z' fill='%23333333'/%3E%3C/svg%3E%0A") no-repeat center;
    vertical-align: middle;
    margin-bottom: 0.2rem;
    margin-left: 0.8rem;
  }


}


/* =============================================================

    Contents Setting

============================================================= */

/* Section Area
---------------------------------- */

.section p {
  margin: 0 0 5rem;
  font-size: var(--text-m);
  line-height: 2;
}

.section .btn-base {
  width: 24rem;
  height: 6rem;
  margin: 2rem 0;
  padding: .5rem 0;
}

.contents_section {
  padding-top: 5rem;
}

/*  Contents SP Only Setting
-------------------------- */

@media (max-width: 768px) {

  /* Section Area
  ---------------------------------- */

  .contents_section {
    padding-top: 4rem;
  }

}


/* =============================================================

    User Setting

============================================================= */

#Wrap_lower.onlyOrder,
#Wrap_lower.onlyUser {
  width: var(--container-default);
  margin-right: auto;
  margin-left: auto;
}

#Wrap_lower.onlyOrder {
  padding-top: 5rem;
  /* padding-bottom: 10rem; */
}

#loginWrap {
  width: var(--container-static);
  margin-right: auto;
  margin-left: auto;
}

@media screen and (max-width: 800px) {
  #loginWrap{
    width: 100%;
  }
}


@media screen and (max-width: 1024px) {
  #Wrap_lower.onlyOrder, #Wrap_lower.onlyUser{
    width: 100%;
  }
}