@charset "utf-8";

body.fixed {
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

body.fixed .pane-main {
  display: none;
}

/* ---- header order ---- */
#header_order {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #fff;
  z-index: 5000;
  padding-bottom: 1px;
  box-shadow: 0px 2px 2px -1px rgba(155, 155, 155, 0.3);
}

#header_order #logo_wrapper {
  width: 124px;
  height: 60px;
  margin: 0 auto;
  background-color: #fff;
}

#header_order #logo_wrapper p a {
  height: 60px;
  padding: 11px 0;
  display: block;
  text-align: center;
}

/* header */
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #fff;
  z-index: 5000;
  padding-bottom: 1px;
}

#header .header-wrapper {
  position: relative;
  padding: 0 60px;
  box-shadow: 0px 2px 2px -1px rgba(155, 155, 155, 0.3);
}

/* nav */
#header #menu_nav {
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  border-right: 1px solid #f4f4f5;
  cursor: pointer;
}

#header #menu_nav,
#header #menu_cart {
  width: 61px;
  height: 60px;
  position: absolute;
  background: #fff;
  border-right: 1px solid #f4f4f5;
  text-indent: -9999px;
  cursor: pointer;
}

#header #menu_nav {
  top: 0;
  left: 0;
}

#header #menu_cart {
  top: 0;
  right: 0;
  border-left: 1px solid #f4f4f5;
  border-right: none;
}

#header #menu_nav .btn-menu,
#header #menu_cart .btn-menu {
  display: block;
  width: 100%;
  height: 60px;
  background: url(../../Contents/ImagesPkg/transfer/sb_common/menu.gif) no-repeat 50% 100%;
  background-size: cover;
}

#header #menu_cart .btn-menu {
  background: url(../../Contents/ImagesPkg/transfer/sb_common/menu_cart.gif) no-repeat 50% 100%;
  background-size: cover;
}

#header #menu_nav.open .btn-menu {
  background-image: url(../../Contents/ImagesPkg/transfer/sb_common/menu_open.gif);
}

/* mega menu */
#header #mega_menu {
  display: none;
}

#header #mega_menu {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 60px;
  z-index: 9997;
  background-color: #fff;
  border: #c5dbe3 5px solid;
}

#header .menu-wrapper {
  padding: 0 0 40px 0;
  background-color: #fff;
  z-index: 6000;
  height: calc(100vh - 60px);
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: content-box;
}

#header #mega_menu .menu-list {
  margin: 0 0 20px 0;
  border-top: 1px solid #d7dae2;
}

#header .menu-scroll {
  height: calc(80vh - 60px);
  width: 100%;
  padding: 15px 10px 10px 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#header .menu-wrapper .btn-close {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  width: 100%;
  margin: 0;
  padding: 10px 10px 0 10px;
  cursor: pointer;
  text-align: center;
  background-color: #c5dbe3;
  font-size: 16px;
  line-height: 1.2;
  z-index: 9998;
}

#header .menu-wrapper .btn-close.open {
  display: block;
}

#header .menu-wrapper .btn-close:before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  vertical-align: middle;
  margin-right: 10px;
  background: url(../../Contents/ImagesPkg/transfer/sb_common/menu_btn_close.png) no-repeat 0 50%;
  background-size: 9px 9px;
}

#header #mega_menu .menu-btn ul {
  font-size: 0;
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#header #mega_menu .menu-btn ul li {
  display: inline-block;
  font-size: 16px;
  width: 48%;
  margin: 0 0 15px 4%;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #e8e9ea;
  border-radius: 4px;
  box-shadow: 2px 3px 3px -3px rgba(135, 138, 145, 1);
}

#header #mega_menu .menu-btn ul li:nth-child(2n + 1) {
  margin-left: 0;
}

#header #mega_menu .menu-btn ul li a {
  display: block;
  padding: 10px 2%;
}

#header #mega_menu .menu-btn ul li#menu_login {
  background: #727478;
  border: 1px solid #727478;
}

#header #mega_menu .menu-btn ul li#menu_login a {
  color: #fff;
  display: block;
}

#header #mega_menu .menu-btn ul li#menu_login a:before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 20px;
  vertical-align: middle;
  margin-right: 10px;
  background: url(../../Contents/ImagesPkg/transfer/sb_common/menu_login.png) no-repeat 0 50%;
  background-size: 17px 20px;
}

#header #mega_menu .menu-list > li {
  border-bottom: 1px solid #d7dae2;
}

#header #mega_menu .menu-list > li a {
  padding: 10px 10px 10px 30px;
}

#header #mega_menu .menu-list > li .menu-cate-ttl {
  background: url(../../Contents/ImagesPkg/transfer/sb_common/menu_campaign.png) no-repeat 0 50%;
  background-size: 22px 22px;
}

#header #mega_menu .menu-list > li#menu_sarana .menu-cate-ttl {
  background-image: url(../../Contents/ImagesPkg/transfer/sb_common/menu_sarana.png);
}

#header #mega_menu .menu-list > li#menu_surana .menu-cate-ttl {
  background-image: url(../../Contents/ImagesPkg/transfer/sb_common/menu_surana.png);
}

#header #mega_menu .menu-list > li#menu_white-essence .menu-cate-ttl {
  background-image: url(../../Contents/ImagesPkg/transfer/sb_common/menu_white-essence.png);
}

#header #mega_menu .menu-list > li#menu_health .menu-cate-ttl {
  background-image: url(../../Contents/ImagesPkg/transfer/sb_common/menu_health.png);
}

#header #mega_menu .menu-list > li#menu_skincare .menu-cate-ttl {
  background-image: url(../../Contents/ImagesPkg/transfer/sb_common/menu_skincare.png);
}

#header #mega_menu .menu-list > li#menu_haircare .menu-cate-ttl {
  background-image: url(../../Contents/ImagesPkg/transfer/sb_common/menu_haircare.png);
}

#header #mega_menu .menu-list > li#menu_oral .menu-cate-ttl {
  background-image: url(../../Contents/ImagesPkg/transfer/sb_common/menu_oralcare.png);
}

#header #mega_menu .menu-list > li#menu_medicine .menu-cate-ttl {
  background-image: url(../../Contents/ImagesPkg/transfer/sb_common/menu_medicine.png);
}
#header #mega_menu .menu-list > li#menu_household .menu-cate-ttl {
  background-image: url(../../Contents/ImagesPkg/transfer/sb_common/menu_household.png);
}

#header #mega_menu .menu-list > li .menu-cate-ttl.open {
}

#header #mega_menu .menu-list > li a {
  display: block;
  font-size: 18px;
  color: #4d95b2;
  text-decoration: underline;
  font-weight: bold;
}

#header #mega_menu .menu-list li .menu-cate-ttl {
  width: 100%;
  display: table;
}

#header #mega_menu .menu-list li.open .menu-cate-ttl {
  border-bottom: 1px solid #d7dae2;
}

#header #mega_menu .menu-list li .menu-cate-ttl a {
  display: table-cell;
  width: 90%;
}

#header #mega_menu .menu-list li .menu-cate-ttl .menu-accordion-btn {
  display: table-cell;
  width: 10%;
  height: 24px;
  vertical-align: middle;
  background: url(../../Contents/ImagesPkg/transfer/sb_common/icon_plus.png) no-repeat 100% 50%;
  background-size: 24px 24px;
  cursor: pointer;
  text-indent: -9999px;
}

#header #mega_menu .menu-list li.open .menu-cate-ttl .menu-accordion-btn {
  background-image: url(../../Contents/ImagesPkg/transfer/sb_common/icon_minus.png);
}

#header #mega_menu li .cate-list .menu-sub-cate-ttl {
  vertical-align: middle;
  background: url(../../Contents/ImagesPkg/transfer/sb_common/icon_plus_blue.png) no-repeat 100% 50%;
  background-size: 24px 24px;
  border-bottom: 1px solid #d7dae2;
}

#header #mega_menu li .cate-list .menu-sub-cate-ttl a {
  background-image: none;
}

#header #mega_menu li .cate-list .menu-sub-cate-ttl.open {
  background-image: url(../../Contents/ImagesPkg/transfer/sb_common/icon_minus_blue.png);
}

#header #mega_menu li.open .cate-list > .menu-sub-cate-ttl:last-of-type {
  border-bottom: none;
}

#header #mega_menu li.open .cate-list > .menu-sub-cate-ttl.open:last-of-type {
  border-bottom: 1px solid #d7dae2;
}

#header #mega_menu li.open .cate-list > .menu-sub-cate-ttl.open:last-of-type + .sub-cate-list li:last-child {
  border-bottom: none;
}

#header #mega_menu li .cate-list .menu-sub-cate-ttl a {
  padding: 10px 24px 10px 30px;
  font-size: 16px;
  font-weight: normal;
}

#header #mega_menu .cate-list .sub-cate-list a {
  padding: 10px 18px 10px 40px;
  color: #666;
  text-decoration: none;
  font-size: 16px;
  vertical-align: middle;
  background: url(../../Contents/ImagesPkg/transfer/sb_common/icon_arw.png) no-repeat right 10px center;
  background-size: 7px 11px;
  font-weight: normal;
}

#header #mega_menu .cate-list .sub-cate-list li {
  border-bottom: 1px solid #d7dae2;
}

#header #mega_menu .menu-search-form {
  margin: 10px 0 20px 0;
  font-size: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

#header #mega_menu .menu-search-form .block-menu-search--keyword {
  width: 69%;
  height: 34px;
  display: inline-block;
  font-size: 16px;
  /* margin-right: 3%; */
  border-radius: 0;
  -webkit-appearance: none;
  padding: 0 7px;
}

#header #mega_menu .menu-search-form .block-menu-search--btn {
  width: 28%;
  height: 34px;
  display: inline-block;
  font-size: 16px;
  padding: 2px 2% !important;
  color: #fff;
  vertical-align: middle;
  background-color: #727478;
  background-image: none;
}

/* logo */
#header .logo-wrapper {
  width: 124px;
  height: 60px;
  margin: 0 auto;
  background-color: #fff;
}

#header .logo-wrapper h1 {
  padding: 0;
}

#header .logo-wrapper h1 a,
#header .logo-wrapper p a {
  height: 60px;
  padding: 11px 0;
  display: block;
  text-align: center;
}

#header .logo-wrapper h1 #logo img,
#header .logo-wrapper p #logo img {
  width: auto;
  height: 100%;
}

/* status */
.status-wrapper {
  margin: 0 0 20px;
  padding: 10px 15px;
  color: #727478;
  border-bottom: 1px solid #f5f5f5;
}

#user_name {
  margin-bottom: 5px;
  font-size: 16px;
}

#user_name span {
  margin: 0 5px;
  font-weight: bold;
}

#user_stage {
  font-size: 14px;
}

/* footer */
#footer_wrapper {
  font-size: 14px;
  color: #999999;
}

#footer_contact {
  padding: 15px 15px;
  background: #f1f2f5;
}

#footer_contact_inner {
  padding: 15px 15px;
  text-align: center;
  background: #fff;
}

.free-dial {
  margin-bottom: 10px;
  color: #333333;
  font-size: 22px;
  font-weight: bold;
  line-height: 18px;
}

.free-dial:before {
  content: "";
  display: inline-block;
  width: 35px;
  height: 20px;
  vertical-align: bottom;
  margin-right: 5px;
  background: url(../../Contents/ImagesPkg/transfer/sb_common/footer_fd.gif);
  background-size: contain;
}

.footer-column-wrapper {
  display: table;
  width: 100%;
}

.footer-column {
  display: table-cell;
  padding: 10px 15px;
}

.footer-column:first-child {
  width: 30%;
}

.footer-column:last-child {
  width: 70%;
}

.footer-column + .footer-column {
  vertical-align: middle;
}

.footer-column + .footer-column p {
  text-align: right;
}

.footer-column + .footer-column p img {
  width: 30%;
  height: auto;
}

.footer-external-link {
  padding: 10px 15px;
  border-top: 1px solid #d7dae2;
}

.footer-external-link a {
  padding-left: 12px;
  padding-right: 30px;
  background-image: url(../../Contents/ImagesPkg/transfer/sb_common/icon_arw.png), url(../../Contents/ImagesPkg/transfer/sb_common/icon_external-link.png);
  background-repeat: no-repeat;
  background-position:
    0 center,
    right center;
  background-size:
    7px 11px,
    14px 11px;
}

#copyright {
  padding: 10px 15px;
  text-align: center;
  line-height: 1em;
  border-top: 1px solid #d7dae2;
}

/* clearfix */
#block_header:after,
#global_menu ul:after {
  content: "";
  display: block;
  clear: both;
}

/* Landscape */
@media screen and (min-width: 568px) {
  #header .menu-scroll {
    max-height: 52vh;
    overflow-y: auto;
  }
}

/*20210224追加*/

#header .header_campaign_bnr.notice {
  text-indent: 0;
  font-size: 3.3vw;
  padding: 0;
  /* padding: 10px; */
  background: #f8e5dd;
  text-decoration: underline;
}
#header .header_campaign_bnr.notice img {
  width: 100%;
  padding: 0;
  margin: 0;
}

/* .status-wrapper{
    padding-top: 13vw;
} */

.block-mypage {
  padding-top: 15vw;
}

/*20210224追加 ここまで*/

/*20230823追加*/
.status-wrapper {
  padding-top: 75px;
  margin-top: 8vw;
}
#Wrap .wrapper {
  padding-top: 0 !important;
}
/*20230823追加 ここまで*/