/* header */
.brand-header{
  width: 100%;
  position: relative;
  border-bottom: 1px solid #F4F0F0;
  z-index: 20000;
  background: white;
}
.brand-header__wrap{
  display: flex;
  width: 100%;
  height: 140px;
  justify-content: center;
}
.brand-header__search{
  position: absolute;
  top: 15px;
  left: 20px;
  display: none;
}
.brand-header__search .lower-header__filter{
  left: 0;
  transform: translateX(0);
}
.brand-header__search--box{
  position: relative;
}
.brand-header__search--input{
  width: 470px;
  height: 50px;
  box-sizing: border-box;
  background: #F0ECE2;
  padding: 12px 12px 12px 42px;
  border-radius: 4px;
  border: none;
  font-size: 16px;
}
.brand-header__search--input::placeholder{
  color: #CAC6BD;
}
.brand-header__search--icon{
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}
.brand-header__search--icon img{
  filter: invert(15%) sepia(0%) saturate(0%) hue-rotate(140deg) brightness(92%) contrast(87%);
}
.brand-header__main{
  text-align: center;
  padding: 21px 0 23px;
}
.brand-header__main--logo{
}
.brand-header__main--h1{
  margin-top: 16px;
  color: var(--Text-Secondary, #787777);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 14px */
}
.brand-header__nav{
  position: absolute;
  top: 0;
  right: 0;
}
.brand-header__nav a{
  text-decoration: none;
}
.brand-header__nav--wrap{
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-header__nav--support{

}
.brand-header__nav--support a{
  display: flex;
  height: 40px;
  padding: 0px 20px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  align-self: stretch;
  color: #EC130F;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 16px */
  background: #FFECE9;
  border-radius: 100px;
}
.brand-header__nav--support a img{
  filter: invert(22%) sepia(99%) saturate(7500%) hue-rotate(359deg) brightness(98%) contrast(94%);
}
.brand-header__nav--member{

}
.brand-header__nav--member a{
  display: flex;
  width: 76px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  line-height: 1;
  color: #2F2F2F;
}
.brand-header__nav--member a img{
  filter: invert(22%) sepia(99%) saturate(7500%) hue-rotate(359deg) brightness(98%) contrast(94%);
}
.brand-header__nav--txt{

}
.brand-header__nav--icon{

}

.brand-header__nav--contact{

}
.brand-header__nav--contact a{
  display: flex;
  width: 100px;
  height: 90px;
  padding: 4px 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
  color: white;
  background: #EC130F;
  border-radius: 0 0 0 4px;
}
.brand-header__nav--contact a img{
  filter: brightness(0) invert(1);
}

/* nav */
.brand-nav__overlay{
  position: fixed;
  width: 100%;
  height: 100%;
  background: #2F2F2F;
  opacity: .6;
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
}

.brand-nav{
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2100;
  background: white;
}
.brand-nav__wrap{
  width: 1200px;
  display: flex;
  
}
.brand-nav__wrap ul{
  display: flex;
}
.brand-nav__wrap > ul > li{
  width: 240px;
}
.brand-nav__wrap > ul > li:hover > .brand-nav__mega{
  display: flex;
}
.brand-nav__link{
  color: #2F2F2F;
  text-decoration: none;
  display: flex;
  padding: 20px 28px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-bottom: 3px solid #FFFFFF;
}
.brand-nav__link--en{
  display: block;
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.96px;
  line-height: 1;
}
.brand-nav__link--jp{
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
.brand-nav__link:hover{
  opacity: 1;
  transition: .3s;
}
.brand-nav__link.--know.active,
.brand-nav__link.--know:hover{
  color: #EC130F;
  border-bottom: 3px solid #EC130F;
}
.brand-nav__link.--learn.active,
.brand-nav__link.--learn:hover{
  color: #38B9C5;
  border-bottom: 3px solid #38B9C5;
}
.brand-nav__link.--consult.active,
.brand-nav__link.--consult:hover{
  color: #E5BB11;
  border-bottom: 3px solid #E5BB11;
}
.brand-nav__link.--support.active,
.brand-nav__link.--support:hover{
  color: #31A975;
  border-bottom: 3px solid #31A975;
}
.brand-nav__link.--about.active,
.brand-nav__link.--about:hover{
  color: #FF5443;
  border-bottom: 3px solid #FF5443;
}

/* nav mega */
.brand-nav__mega{
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  border-radius: 0px 0px 12px 12px;
  background: #FFFFFF;
  z-index: 3000;
  padding: 20px 40px;
  align-items: flex-start;
}

.brand-nav__mega--info{
  width: 266px;
  margin-top: 28px;
  padding-right: 40px;
  box-sizing: border-box;
  border-right: 1px solid rgba(236, 19, 15, 0.40);
}
.brand-nav__mega--title{
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
  color: #2F2F2F;
}
.brand-nav__mega--title em{
  font-size: 42px;
  letter-spacing: 1.68px;
}
.brand-nav__mega--title small{
  font-size: 15px;
  font-family: "Open Sans" sans-serif;
}
.brand-nav__mega--txt{
  color: #787777;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 16px;
}
.brand-nav__mega--body{
  width: 816px;
  margin-left: auto;
}
.brand-nav__mega--link{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.brand-nav__mega--link li{
  width: 264px;
}

/* mega --know */
.brand-nav__mega.--know{
  background: #FFF9FA;
}
.brand-nav__mega.--know .brand-nav__mega--link li:first-child{
  width: 540px;
}
.brand-nav__mega.--know .brand-nav__mega--info{
  border-right: 1px solid rgba(236, 19, 15, 0.40);
}
.brand-nav__mega.--know .brand-nav__mega--title em,
.brand-nav__mega.--know .brand-nav__mega--title small{
  color: #EC130F;
}
/* mega --learn */
.brand-nav__mega.--learn{
  background: #F3FEFF;
}
.brand-nav__mega.--learn .brand-nav__mega--link li:first-child{
  width: 540px;
}
.brand-nav__mega.--learn .brand-nav__mega--info{
  border-right: 1px solid rgba(56, 185, 197, 0.40);
}
.brand-nav__mega.--learn .brand-nav__mega--title em,
.brand-nav__mega.--learn .brand-nav__mega--title small{
  color: #38B9C5;
}
/* mega --consult */
.brand-nav__mega.--consult{
  background: #FFFCF7;
}
.brand-nav__mega.--consult .brand-nav__mega--info{
  border-right: 1px solid rgba(229, 187, 17, 0.40);
}
.brand-nav__mega.--consult .brand-nav__mega--title em,
.brand-nav__mega.--consult .brand-nav__mega--title small{
  color: #E5BB11;
}
/* mega --support */
.brand-nav__mega.--support{
  background: #F3FEF9;
}
.brand-nav__mega.--support .brand-nav__mega--info{
  border-right: 1px solid rgba(49, 169, 117, 0.40);
}
.brand-nav__mega.--support .brand-nav__mega--title em,
.brand-nav__mega.--support .brand-nav__mega--title small{
  color: #31A975;
}
/* mega --about */
.brand-nav__mega.--about{
  background: #FFF8F7;
}
.brand-nav__mega.--about .brand-nav__mega--link li:first-child{
  width: 540px;
}
.brand-nav__mega.--about .brand-nav__mega--info{
  border-right: 1px solid rgba(255, 84, 67, 0.40);
}
.brand-nav__mega.--about .brand-nav__mega--title em,
.brand-nav__mega.--about .brand-nav__mega--title small{
  color: #FF5443;
}


/*----------------------
sp mode
----------------------*/
.brand-nav-sp__trigger,
.brand-nav-sp__close{
  position: fixed;
  top: 20px;
  right: 20px;
  display: none;
}
.brand-nav-sp__trigger a,
.brand-nav-sp__close a{
  display: flex;
  width: 42px;
  height: 42px;
  background: #2F2F2F;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}
.brand-nav-sp{
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: white;
  z-index: 10000;
  box-sizing: border-box;
  padding: 0 28px 24px;
}
.brand-nav-sp.--open{
  display: flex;
}
.brand-nav-sp__body{
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  height: 100%;
   /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
   -ms-overflow-style: none;
   /*Firefoxへの対応*/
   scrollbar-width: none;
}
.brand-nav-sp__body::-webkit-scrollbar{
  display: none;
}
.brand-nav-sp__top{
  margin-top: 84px;
  margin-bottom: 20px;
}
.brand-nav-sp__top ul{
  display: flex;
  gap: 8px;
}
.brand-nav-sp__top ul li{
  width: 50%;
}
.brand-btn{
  text-decoration: none;
  display: block;
  background: #999;
  color: white;
  border-radius: 4px;
  display: flex;
  gap: 8px;
  padding: 8px 20px;
  justify-content: center;
  align-items: center;
}
.brand-btn.--red{
  background: #EC130F;
}
.brand-btn.--blue{
  background: #49D9E2;
}
.brand-btn .brand-btn__icon{

}
.brand-btn .brand-btn__txt{
  font-size: 14px;
}
/* brand-nav-sp__nav */
.brand-nav-sp__nav{
  border-top: 1px solid #F4F0F0;
}
.brand-nav-sp__nav > ul >li{
  border-bottom: 1px solid #F4F0F0;
}
.brand-nav-sp__nav--btn{
  display: flex;
  height: 64px;
  padding: 8px 0px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  text-decoration: none;
  color: #2F2F2F !important;
}
.brand-nav-sp__nav--btn a{
  text-decoration: none;
}
.brand-nav-sp__nav--btntxt{
  font-size: 16px;
}
.brand-nav-sp__nav--btnicon{
  padding-right: 8px;
}
.brand-nav-sp__nav--btnicon .--minus{
  display: none;
}
.brand-nav-sp__nav--btnicon.--open .--minus{
  display: block;
}
.brand-nav-sp__nav--btnicon.--open .--plus{
  display: none;
}
.brand-nav-sp__nav--btnicon img{
  filter: invert(50%) sepia(86%) saturate(7460%) hue-rotate(350deg) brightness(88%) contrast(111%);
}
.brand-nav-sp__nav--contents{
  /* display: flex; */
  padding-bottom: 32px;
  align-items: flex-start;
  align-content: flex-start;
  gap: 8px;
  align-self: stretch;
  flex-wrap: wrap;
  display: none;
}
.brand-nav-sp__nav--contents.--open{
  display: flex;
}
.brand-nav-sp__nav--contents > li{
  width: calc(100%/2 - 4px);
}
.brand-nav-sp__nav--contents > li.--wide{
  width: 100%;
}
.brand-nav-sp__under{
  margin-top: auto;
  padding-top: 20px;
}
.brand-nav-sp__under--link{
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 4px 24px;
  flex-wrap: wrap;
}
.brand-nav-sp__under--link li{
  display: inline-block;
}
.brand-nav-sp__under--link li a{
  text-decoration: none;
  font-size: 14px;
}
.brand-nav-sp__copyright{
  font-size: 11px;
  color: #C7C6C6;
  text-align: center;
  padding-top: 20px;
}

@media screen and (max-width: 599px) {
  .brand-header__wrap{
    height: 72px;
    position: fixed;
    background: white;
  }
  .brand-header__search{
    display: none;
  }
  .brand-header__main{
    padding: 7px 0 0;
    display: flex;
    align-items: center;
  }
  .brand-header__main--h1{
    display: none;
  }
  .brand-header__main--logo{
  }
  .brand-header__main--logo img{
    width: auto;
    height: 48px;
  }
  .brand-header__nav{
    right: auto;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 20px;
  }
  .brand-header__nav--member a{
    width: auto;
  }
  .brand-header__nav--support{
    display: none;
  }
  .brand-header__nav--txt{
    display: none;
  }
  .brand-header__nav--contact{
    display: none;
  }
  .brand-nav{
    display: none;
  }
  .brand-nav-sp__trigger{
    display: block;
  }
  /* update */
  .top-search{
    margin-top: 0;
  }
  .wrap{
    padding-top: 72px;
  }
}
@media screen and (max-width: 1279px) {
  .brand-header__nav--support{
    display: none;
  }
}

/* footer */
.brand-footer{
  width: 100%;
  border-top: 10px solid #9B4633;
}
.brand-footer__inner{
  width: 1200px;
  margin: 0 auto;
}
.brand-footer__head{
  padding: 28px 0;
}
.brand-footer__wrap{
  display: flex;
  gap: 20px;
}
.brand-footer__block{
  width: 224px;
}
.brand-footer__nav{
  
  margin-bottom: 32px;
}
.brand-footer__nav--title{
  background: #F0ECE266;
  border-radius: 4px;
  padding: 16px 8px;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
  line-height: 1;
}
.brand-footer__nav--list{

}
.brand-footer__nav--list li{

}
.brand-footer__nav--list li a{
  display: block;
  padding: 4px 8px;
  text-decoration: none;
  font-size: 14px;
  position: relative;
}
.brand-footer__nav--list li a:after{
  content:">";
  position: absolute;
  color: #EC130F;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
}
.brand-footer__link{
  padding: 20px 0;
}
.brand-footer__link ul{
  text-align: center;
}
.brand-footer__link ul li{
  display: inline;
  font-size: 14px;
  margin: 0 10px;
}
.brand-footer__link ul li a{
  text-decoration: none;
}
.brand-footer__copyright{
  text-align: center;
  color: #787777;
  font-size: 12px;
  margin: 20px 0 40px;
}

/* footer sp */
.brand-footer-sp{
  background: #F0ECE2;
  padding: 20px 28px;
  display: none;
}
.brand-footer-sp__head{
  margin-bottom: 8px;
}
.brand-footer-sp__body{

}
.brand-footer-sp__nav ul li{
  border-top: 1px solid #fff;
}
.brand-footer-sp__nav ul li:first-child{
  border-top: none;
}
.brand-footer-sp__nav--btn{
  display: flex;
  height: 64px;
  padding: 8px 0px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  text-decoration: none;
  color: #2F2F2F !important;
}
.brand-footer-sp__nav--btn a{
  text-decoration: none;
}
.brand-footer-sp__nav--btntxt{
  font-size: 16px;
}
.brand-footer-sp__nav--btnicon{
  padding-right: 8px;
}
.brand-footer-sp__nav--btnicon .--minus{
  display: none;
}
.brand-footer-sp__nav--btnicon.--open .--minus{
  display: block;
}
.brand-footer-sp__nav--btnicon.--open .--plus{
  display: none;
}
.brand-footer-sp__nav--btnicon img{
  filter: invert(50%) sepia(86%) saturate(7460%) hue-rotate(350deg) brightness(88%) contrast(111%);
}
.brand-footer-sp__nav--contents{
  /* display: flex; */
  padding-bottom: 32px;
  align-items: flex-start;
  align-content: flex-start;
  gap: 8px;
  align-self: stretch;
  flex-wrap: wrap;
  display: none;
}
.brand-footer-sp__nav--contents.--open{
  display: flex;
}
.brand-footer-sp__nav--contents > li{
  width: calc(100%/2 - 4px);
}
.brand-footer-sp__nav--contents > li.--wide{
  width: 100%;
}
.brand-footer-sp__under{
  margin-top: auto;
  padding-top: 20px;
}
.brand-footer-sp__under--link{
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 4px 24px;
  flex-wrap: wrap;
}
.brand-footer-sp__under--link li{
  display: inline-block;
}
.brand-footer-sp__under--link li a{
  text-decoration: none;
  font-size: 12px;
}
.brand-footer-sp__copyright{
  font-size: 11px;
  color: #787777;
  text-align: center;
  padding-top: 20px;
}

@media screen and (max-width: 599px) {
  .brand-footer{
    display: none;
  }
  .brand-footer-sp{
    display: block;
  }
}

/* side */
.brand-side{
  width: 260px;
}
.brand-side__top{
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 40px;
  background: url(../_newimg/brand/side_top_bottom.png) center 95% no-repeat #ffffff;
  background-size: 100% auto;
}
.brand-side__top-item{

}
.brand-side__top-item a{
  display: block;
}

.brand-side__bnr{
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 16px;
}
.brand-side__bnr-item a{
  display: block;
}

@media screen and (max-width: 599px) {
  .brand-side{
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
  .brand-side__top{
    position: initial;
  }
}