@charset "UTF-8";
body{overflow-y: scroll;}
body::after{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  content: '';
  display: block;
  background-color: #000;
  opacity: 0;
  transition: all .4s;
  width: 100%;
}
body.on{
  position: relative;
}
body.on::after{
  height: 100%;
  opacity: .4;
}
@media screen and (max-width:979px){
  body.on{
    overflow: hidden;
  }
}
img{
  vertical-align: top;
}
@media screen and (max-width:768px){
  html.tablet .container img{
    width: 100%;
    height: auto;
  }
 }

.container{
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
  position: relative;
}
#header{
  max-width: 1600px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
}
#header.sticky{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
main{
  max-width: 1280px;
	display: block;
	margin-left: auto;
  margin-right: auto;
  margin-bottom: 4rem;
}
#main-wrap{
  margin-bottom: 4rem;
}
#main-wrap .fx main{
  flex-basis: 70%;
}
#main-wrap .fx aside{
  flex-basis: 30%;
}
@media screen and (max-width:768px){
.container{padding:0 2rem;}
footer .container{padding:0 10px;}
.sp-only{display: block;}
.pc-only{display: none;}
.pd-t{padding-top:1.5rem;}
.pd-b{padding-bottom:1.5rem;}
.mb-s{margin-bottom:.5rem;}
.mb-m{margin-bottom:1rem;}
.mb-l{margin-bottom:2rem;}
.mb-ll{margin-bottom:6rem;}
}
@media screen and (min-width:769px){
.container{padding:0 45px;}
.container-inner{padding:0 45px;}
.sp-only{display: none;}
.pc-only{display: block;}
.pd-t{padding-top:3rem;}
.pd-b{padding-bottom:3rem;}
.mb-s{margin-bottom:1rem;}
.mb-m{margin-bottom:2rem;}
.mb-l{margin-bottom:4rem;}
.mb-ll{margin-bottom:8rem;}
}
.sr-e{
	visibility: hidden;
}
.copy-guard{
  pointer-events: none;
}
/**/
a {
	color: #3f3f3f;
	text-decoration: none;
}
.btn{
	padding:.5rem 1rem;
	font-weight: bold;
}
.btn.styleA{
	color: #fff;
	background-color: #00a63d;
}
.btn.styleB{
	color: #777;
  background-color: #fff;
  border: 1px #ccc solid;
}
.btn.radius{
  padding:.75rem 2rem;
  border-radius:2rem;
}
.color-A{
  color: #00a63d;
}
.color-B{
  color: #ed2870;
}
.box-link{
position: relative;
}
.box-link a{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-indent: -999em;
background-color:rgba(255,255,255,0);
}
.box-sd{
  box-shadow: 0px -10px 30px 0 rgba(0,0,0,0.1);
}
.txt-links a,
a.txt-link{
color: #333;
text-decoration: none;
}

@media screen and (min-width:980px){
.txt-links a,
a.txt-link{
transition: opacity .3s;
}
.txt-links a:hover,
a.txt-link:hover{
color: #000;
text-decoration: underline;
}
.btn{
  transition: all .3s cubic-bezier(0.785, 0.135, 0.15, 0.86); 
}
.btn:hover{
  opacity: .6;
}
.btn.styleA:hover{
color: #767171;
background-color: #f5f5f5;
}
.h-imgs a img,
a.h-img img{
  transition: opacity .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.h-imgs a:hover img,
a.h-img:hover img{
  opacity: .6;
}
.box-link a{
transition: background-color .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.box-link a:hover{
  background-color:rgba(255,255,255,.4);
}
}
.btn-ttl{
font-size: 18px;
color: #3f3f3f;
}
/**/
.all{
  text-align: left;
  }
.alc{
text-align: center;
}
.alr{
text-align: right;
}
.txt-jc{
text-align: justify;
text-justify: inter-ideograph;
}
.txt-indent{
padding-left: -1rem;
text-indent: 1rem;
}
.txt-upc{
text-transform: uppercase;
}
.txt-small{
  font-size: 10px;
}
ul.kome{
  list-style: none;
}
p.kome{
  margin-left: 1em;
}
ul.kome li,
p.kome{
  text-indent: -1em;
}
ul.kome li::before,
p.kome::before{
  content:'※';
}
ul.kome li{
  padding-left: 1em;
}
.is-empty {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.border-frame{
  border:1px solid #ccc;
}
.border-lead{
  position: relative;
  padding-bottom: .5em;
  border-bottom: 1px solid #ccc;
  z-index:0;
}
.border-lead::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  z-index:1;
  content: '';
  width: 20%;
  height: 1px;
  background-color: #00a63d;
}


/*----------------------------------------------------*/
nav.breadcrumbs{
  padding-top: 1rem;
  padding-bottom: 1rem;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
nav.breadcrumbs ul {
	font-size: 12px;
	padding: 0;
  margin: 0;
  letter-spacing: .04em;
  color: #777;
}
nav.breadcrumbs ul li {
	display:inline-block;
}
nav.breadcrumbs ul li:last-child{
	font-weight: bold;
}
nav.breadcrumbs ul li:first-child::before {
	padding: 0 .5em 0 0;
	content: '\f015';
	font-family: FontAwesome;
}
nav.breadcrumbs ul li::before {
  padding: 0 .5em 0 .5em;
	content: '\f105';
  font-family: FontAwesome;
  font-weight: normal;
}
@media screen and (min-width:980px){
  nav.breadcrumbs ul a:hover{
    color: #000;
    text-decoration: underline;
  }
}
/*----------------------------------------------------*/
.map-fluid,
.video-fluid {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
}
iframe {
    border: 0;
}
.map-fluid>iframe,
.video-fluid>iframe,
.video-fluid>video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




/*HEADER----------------------------------------------------*/
.sp-shop{font-size: 10px;position: absolute;top:28px;right:70px;}
#header .shop{letter-spacing: .08em;}
ul.sub-nav,
ul.main-nav {
    list-style-type: none;
    font-size: 0px;
  }
  ul.main-nav > li > a {
    display: block;
    padding:0 .5rem;
    position: relative;
    font-size: 14px;
    letter-spacing: .04em;
    font-weight:bold;
  }

  ul.main-nav > li ul.sub-menu-lists {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: block;
  }

  ul.main-nav > li ul.sub-menu-lists > li {
    padding: .5rem 0;
  }

  ul.main-nav > li ul.sub-menu-lists > li > a,
  ul.main-nav > li .sub-menu-block .thumb p,
  div.shop.pc-shop > div.sub-menu-block .thumb p{
    font-size: 14px;
  }
  ul.main-nav > li .sub-menu-block .brand a{
    padding: .5rem 0;
  }
  ul.main-nav > li ul.sub-menu-lists > li > a i.logo{
    width: 7rem;
    padding-bottom: .2rem;
    margin-right: 3rem;
    display: inline-block;
  }
  ul.sub-nav li:last-child{
    margin-right:0;
  }
  .sub-menu-lists li{padding:4rem 0;border-bottom: 1px #ccc solid;}
  .sub-menu-lists li:last-child{border-bottom:0;}
  ul.sub-nav > li > a{
    display: block;
    font-size: 12px;
  }
  .ic{
    position: fixed;
    cursor: pointer;
    display: inline-block;
    right: 25px;
    width: 32px;
    height: 24px;
    text-align: center;
    top: 0;
    outline: none;
  }
  /* Menu Icons for Devices*/
  .ic.menu {
    top: 25px;
  }
  .ic.close {
    opacity: 0;
    font-size: 0px;
    color: #3f3f3f;
    top:8px;
    height:40px;
    display: block;
    outline: none;
  }
  .ic.menu .line {
    height: 4px;
    width: 100%;
    display: block;
    margin-bottom: 6px;
    pointer-events: none;
  }
  .ic.menu .line:last-child {
    margin-bottom: 0;
  }
  #header .sub-menu-head {
    font-size: 12px;
    color: #00a63d;
    margin-bottom: 1rem;
  }
  #header .banners-area {
    /*margin-top: 1rem;*/
    padding-top: 1rem;
  }
  #header .shop-area {
    font-size: 14px;
  }
  #header h1{
    flex-basis: auto;
    display: flex;
    align-items: center;
  }
  #header h1 a{
    display: block;
  }
  #header h1 img{
   margin-left: 1rem;
   vertical-align: middle;
  }
  .sub-menu-block .logo{
    width: 4rem;
    display: inline-block;
    vertical-align: middle;
    margin-right:1rem;
  }
@media only screen and (max-width:979px) {
.sp-shop{display: block;}
.ic.menu {display: block;}
.pc-shop{display: none;}
.ic.menu .line {background-color: #3f3f3f;}
.ic.menu .line {
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
}
html:not(.safari) .ic.menu:focus .line,
.ic.menu.is-active .line{background-color: #3f3f3f !important;}
html:not(.safari) .ic.menu:focus .line:nth-child(1),
.ic.menu.is-active .line:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
html:not(.safari) .ic.menu:focus .line:nth-child(2),
.ic.menu.is-active .line:nth-child(2) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  margin-top: -10px;
}
html:not(.safari) .ic.menu:focus .line:nth-child(3),
.ic.menu.is-active .line:nth-child(3) {
  transform: translateY(15px);
  opacity: 0;
}
#header h1{
  height: 5.8rem;
}
#header h1 img{
  height: 2rem;
}
nav {
  background-color: transparent;
}
/* Main Menu for Handheld Devices  */
.target {
  padding:80px 0 40px 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 0;
  height: 100%;
  overflow: auto;
  /*CSS animation applied : Slide from Right*/
  -webkit-transition-property: background, width;
  -moz-transition-property: background, width;
  -o-transition-property: background, width;
  transition-property: background, width;
  -webkit-transition-duration: 0.6s;
  -moz-transition-duration: 0.6s;
  -o-transition-duration: 0.6s;
  transition-duration: 0.6s;
  background-color: #fff;
}

html:not(.safari) .ic.menu:focus ~ .target,
.ic.menu.is-active ~ .target{width: 260px;}
.target > * {
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
  opacity: 0;
}
html:not(.safari) .ic.menu:focus ~ .target > *,
.ic.menu.is-active ~ .target > *{opacity: 1;}
ul.main-nav > li > a:after{display: none;}
ul.main-nav > li:first-child {border-radius:0;}
ul.main-nav > li {padding:1rem 0;display: block;border-bottom: 5px solid #efefef;}
html:not(.safari) .ic.menu:focus ~ ul.main-nav > li > div.sub-menu-block,
.ic.menu.is-active ~ ul.main-nav > li > div.sub-menu-block{
  border-left: 0px solid #ccc;
  border-right: 0px solid #ccc;
  border-bottom: 0px solid #ccc;
  position: relative;
  visibility: visible;
  opacity: 1;
}
#header ul.sub-nav{padding: 0 1rem;text-align: center;margin-bottom: 1rem;letter-spacing: -.4em;}
#header ul.sub-nav li{display:inline-block;margin-right: 1rem;letter-spacing: normal;}
#header ul.sub-nav li:last-child{margin-right: 0;}
#header .shop{padding: 0 2rem;}
#header .shop a{padding: 2rem 0;margin-bottom: 1rem;display: block;text-align: center;}
.sub-menu-block {padding: 0 2rem;}
.sub-menu-block .group{margin-bottom: 2rem;}
.sub-menu-block .group .thumb{margin-bottom: 1rem;}
.sub-menu-lists li a{display: block;}
.banners-area,.shop-area {padding-bottom: 0;border-top: 1px solid #ccc;}
.banners-area > div {margin-bottom: 1rem;}
.shop-area ul{font-size: 14px;list-style: none;margin-bottom: 1rem;margin-top: 1rem;}
.main-nav > li > a{margin-bottom:1rem;padding: 0 2rem;}
i.sp-ico{display: inline-block;margin-right: .5rem;font-size: 10px;}

.main-nav > li > a + .sub-menu-block{
  margin-top: 2rem;
}

.sub-menu-block .group:last-of-type,
.sub-menu-block .group .thumb:last-of-type,
.main-nav > li > a:last-of-type{margin-bottom: 0;}
}
.sp-shop-select > .fx p{
  margin: 0 calc(24px / 2);
  flex-basis: 33.33333%;
}
.sp-shop-select > .fx p img{
  max-height:4rem;
  width: auto;
}
@media only screen and (max-width:979px) {
  body .sp-shop + div.sub-menu-block {
    visibility: hidden;
    background-color: #f9f9f9;
    position: absolute;
    margin-top: -1px;
    width: 100%;
    color: #333;
    left: 0;
    right: 0;
    font-size: 16px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    opacity: 0;
    padding: 45px;
  
    /*CSS animation applied for sub menu : Slide from Top */
    /*-webkit-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;*/
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
  }
  body .sp-shop.on + div.sub-menu-block{
    visibility: visible;
    opacity: 1;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  .sp-shop + div.sub-menu-block > *{
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
    opacity: 0;
  }
  body .sp-shop + div.sub-menu-block > *{
    opacity: 1;
  }
}
@media only screen and (min-width:980px) {
i.sp-ico{display: none;}
.sp-shop{display: none;}
.ic.menu {display: none;}
.pc-shop{display:block;}
.sub-menu-block {padding: 1rem;}
body .sp-shop + div.sub-menu-block {display: none;}
ul.main-nav > li > div.sub-menu-block,
body.ready div.shop.pc-shop > div.sub-menu-block{
  visibility: hidden;
  background-color: #f9f9f9;
  position: absolute;
  margin-top: -1px;
  width: 100%;
  color: #333;
  left: 0;
  right: 0;
  font-size: 16px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  opacity: 0;
  padding: 45px;

  /*CSS animation applied for sub menu : Slide from Top */
  /*-webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;*/
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
}
body.ready ul.main-nav > li:hover > div.sub-menu-block,
body.ready div.shop.pc-shop:hover > div.sub-menu-block{
  visibility: visible;
  opacity: 1;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
ul.main-nav > li > div.sub-menu-block > *,
div.shop.pc-shop > div.sub-menu-block > *{
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
  opacity: 0;
}
body.ready ul.main-nav > li:hover > div.sub-menu-block > *,
body.ready div.shop.pc-shop > div.sub-menu-block > *{
  opacity: 1;
}
/* Drop Down/Up Arrow for Mega Menu */
ul.main-nav > li > a > span {
  display: block;
  vertical-align: middle;
  padding-bottom: 1rem;
  overflow: hidden;
}
ul.main-nav > li > a.mega-menu > span:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #999;
  content: '';
  background-color: transparent;
  display: inline-block;
  margin-left: .25rem;
  vertical-align: middle;
}
body.ready ul.main-nav > li:hover > a.mega-menu span::after {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 0px solid transparent;
  border-bottom: 5px solid #00a63d;
}

html.tablet ul.main-nav > li > div.sub-menu-block,
html.tablet ul.main-nav > li > a.mega-menu > span:after{
  display: none;
}

#header{
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  position: relative;
}
#header nav{
    flex-basis: auto;
}
#header .target{
    display: grid;
    display: -ms-grid;
    grid-template-rows: 2.5rem 2.5rem;
    -ms-grid-rows: 2.5rem 2.5rem;
    grid-template-areas:
    "sub shop"
    "main shop";
    grid-gap: .5rem;
    gap: .5rem;
    height: 100%;
}
#header div.shop.pc-shop{
    grid-area: shop;
    height: 100%;
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    -ms-grid-row-span:2;
}
#header div.shop.pc-shop > p{
  height: 100%;
}
#header div.shop.pc-shop > p a{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
ul.sub-nav{
grid-area: sub;
display: flex;
justify-content: flex-end;
align-items: stretch;
-ms-grid-row: 1;
-ms-grid-column: 1;
}
ul.sub-nav li{
  flex: 0 0 auto;
}
ul.sub-nav li a{
  padding: .5rem;
}
ul.main-nav {
  /*display: block;
  position: relative;*/
}
ul.main-nav{
    grid-area: main;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    -ms-grid-row: 2;
    -ms-grid-column: 1;
}
ul.main-nav li{
  flex: 0 0 auto;
}

.sub-menu-block .thumb img{
  margin-bottom: .5rem;
}
.sub-menu-block .group.theory{
  display: flex;
  justify-content:left;
  flex-wrap: wrap;
}
.sub-menu-block .group.theory .thumb{
  flex-basis:calc(25% - 1rem);
  margin: 1rem calc(2rem / 4);
}

.sub-menu-block .group.esthetic{
  display: flex;
  justify-content:left;
  flex-wrap: wrap;
}
.sub-menu-block .group.esthetic .thumb{
  flex-basis:calc(25% - 1rem);
  margin: 1rem calc(2rem / 4);
}

.sub-menu-block .group.brand{
  display: flex;
  justify-content: space-between;
  margin: 0 calc(2rem / 2 * -1);
  margin-bottom: 1rem;
}
.sub-menu-block .group.brand .thumb{
  flex: 1;
  margin: 0 calc(2rem / 2);
}
.shop-area ul li{
  display: inline-block;
  margin-right: 1rem;
}
.shop-area ul li:last-child{
  margin-right: 0;
}
.sub-menu-block .group.company{
  display: flex;
  justify-content:left;
  flex-wrap: wrap;
}
.sub-menu-block .group.company .thumb{
  flex-basis:calc(25% - 1rem);
  margin: 1rem calc(2rem / 4);
}

.sub-menu-block .group.facility{
  display: flex;
  justify-content:left;
}
.sub-menu-block .group.facility .thumb{
  flex-basis:calc(25% - 1rem);
  margin: 1rem calc(2rem / 4);
}

.banners-area{
  display: flex;
  justify-content:start;
}
.banners-area > div{
  flex-basis: 20%;
}
ul.sub-nav li.seperate{
  position: relative;
  padding-right:1rem;
  margin-right: 1rem;
}
ul.sub-nav li.seperate::after{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  height: 80%;
  content: '';
  display: block;
  background-color: #ccc;
}
/*a hover*/
ul.main-nav > li:hover > a {
  color: #000;
}
ul.main-nav > li > a {
  position: relative;
}
ul.main-nav > li > a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background-color: #00a63d;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
  pointer-events: none;
  }
ul.main-nav > li:hover > a::after {
    transform-origin: left top;
    transform: scale(1, 1);
  }
  .sub-menu-block .group.brand .thumb .sub-menu-lists a{
    transition:opacity .3s;
  }
  .sub-menu-block .group.brand .thumb .sub-menu-lists a:hover{
    opacity: .6;
  }
}
@media only screen and (min-width:980px) and (max-width:1200px) {
#header .target{
  grid-template-columns: 1fr 5rem;
  -ms-grid-columns: 1fr 5rem;
}
#header div.shop.pc-shop a i{
  font-size: 2rem;
}
#header div.shop.pc-shop a span{
display: none;
}
}
@media only screen and (min-width:1201px){
  #header .target{
    grid-template-columns: 1fr 14rem;
    -ms-grid-columns: 1fr 14rem;
}
}
  /*IE11----------------------------------------------------*/
  _:-ms-lang(x)::-ms-backdrop, .target{overflow: hidden;}
  _:-ms-lang(x)::-ms-backdrop, body.on{overflow:hidden;}
  _:-ms-lang(x)::-ms-backdrop, body.on .target{overflow:auto;}

  /*Z-INDEX----------------------------------------------------*/
  #header{z-index: 10;}
  .target {z-index: 11;}
  body.on::after{z-index: 1;}
  @media only screen and (max-width:979px) {
  .ic.menu {z-index:100;}
  .ic.menu:focus ~ .ic.close{z-index:101;}
  }
   @media only screen and (min-width:980px) {
    #header{z-index: 2;}
    ul.main-nav > li > div.sub-menu-block {z-index: -1;}
   }


/*PAGE----------------------------------------------------*/
.main-header{
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}
.main-header header h2{
  font-size: 24px;
}
@media screen and (max-width:768px){
  .main-header > .inner header{
    padding: 2rem;
  }
  .main-header > .inner{
    background-image: none!important;
  }
  .main-header > .inner .ph{
    display: block;
    margin-bottom: 2rem;
  }
}
@media screen and (min-width:769px){
  .main-header > .inner{
    background-position: center right;
    background-repeat: no-repeat;
    padding: 0 45px;
  }
  .main-header > .inner{
      min-height: 500px;
  }
  .main-header > .inner.brand-list header{
    padding: 2rem;
  }
  .main-header > .inner .ph{
    display: none;
  }
  .main-header header{
    flex-basis:calc( 50% - 45px);
    margin-left: 45px;
  }
}

/*
.main-header .slide {
  padding-left: calc(50% - (1190px/2));
  width: calc(1190px + (50% - (1190px/2) ));
}
.main-header .slide .ph{
  position: relative;
  min-width: 40vw;
}
<div class="main-header mb-ll">
  <div class="fx fx--jc-sb fx--item-c">
    <section class="slide">
      <header>
        <h2 class="mincyo kerning btn-ttl">ブランド情報</h2>
      </header>
    </section>
    <p class="ph alr"><img src="../home/image/brand.jpg"></p>
  </div>
</div>
*/

/*LAZY----------------------------------------------------*/
img.lazy{
	background-image: url('data:image/gif;base64,R0lGODlhIAAgAPUAAP///15eXvv7+9nZ2fDw8PX19eHh4a2trb+/v/j4+O7u7vz8/Lm5ubKysuzs7NHR0cLCwvLy8svLy+jo6IWFhZSUlJqamqysrMfHx/Pz84yMjKKiomVlZV5eXt/f39vb2+bm5nl5eZmZmXBwcI2NjczMzAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAIAAgAAAG/0CAcEgkFjgcR3HJJE4SxEGnMygKmkwJxRKdVocFBRRLfFAoj6GUOhQoFAVysULRjNdfQFghLxrODEJ4Qm5ifUUXZwQAgwBvEXIGBkUEZxuMXgAJb1dECWMABAcHDEpDEGcTBQMDBQtvcW0RbwuECKMHELEJF5NFCxm1AAt7cH4NuAOdcsURy0QCD7gYfcWgTQUQB6Zkr66HoeDCSwIF5ucFz3IC7O0CC6zx8YuHhW/3CvLyfPX4+OXozKnDssBdu3G/xIHTpGAgOUPrZimAJCfDPYfDin2TQ+xeBnWbHi37SC4YIYkQhdy7FvLdpwWvjA0JyU/ISyIx4xS6sgfkNS4me2rtVKkgw0JCb8YMZdjwqMQ2nIY8BbcUQNVCP7G4MQq1KRivR7tiDEuEFrggACH5BAkKAAAALAAAAAAgACAAAAb/QIBwSCQmNBpCcckkEgREA4ViKA6azM8BEZ1Wh6LOBls0HA5fgJQ6HHQ6InKRcWhA1d5hqMMpyIkOZw9Ca18Qbwd/RRhnfoUABRwdI3IESkQFZxB4bAdvV0YJQwkDAx9+bWcECQYGCQ5vFEQCEQoKC0ILHqUDBncCGA5LBiHCAAsFtgqoQwS8Aw64f8m2EXdFCxO8INPKomQCBgPMWAvL0n/ff+jYAu7vAuxy8O/myvfX8/f7/Arq+v0W0HMnr9zAeE0KJlQkJIGCfE0E+PtDq9qfDMogDkGmrIBCbNQUZIDosNq1kUsEZJBW0dY/b0ZsLViQIMFMW+RKKgjFzp4fNokPIdki+Y8JNVxA79jKwHAI0G9JGw5tCqDWTiFRhVhtmhVA16cMJTJ1OnVIMo1cy1KVI5NhEAAh+QQJCgAAACwAAAAAIAAgAAAG/0CAcEgkChqNQnHJJCYWRMfh4CgamkzFwBOdVocNCgNbJAwGhKGUOjRQKA1y8XOGAtZfgIWiSciJBWcTQnhCD28Qf0UgZwJ3XgAJGhQVcgKORmdXhRBvV0QMY0ILCgoRmIRnCQIODgIEbxtEJSMdHZ8AGaUKBXYLIEpFExZpAG62HRRFArsKfn8FIsgjiUwJu8FkJLYcB9lMCwUKqFgGHSJ5cnZ/uEULl/CX63/x8KTNu+RkzPj9zc/0/Cl4V0/APDIE6x0csrBJwybX9DFhBhCLgAilIvzRVUriKHGlev0JtyuDvmsZUZlcIiCDnYu7KsZ0UmrBggRP7n1DqcDJEzciOgHwcwTyZEUmIKEMFVIqgyIjpZ4tjdTxqRCMPYVMBYDV6tavUZ8yczpkKwBxHsVWtaqo5tMgACH5BAkKAAAALAAAAAAgACAAAAb/QIBwSCQuBgNBcck0FgvIQtHRZCYUGSJ0IB2WDo9qUaBQKIXbLsBxOJTExUh5mB4iDo0zXEhWJNBRQgZtA3tPZQsAdQINBwxwAnpCC2VSdQNtVEQSEkOUChGSVwoLCwUFpm0QRAMVFBQTQxllCqh0kkIECF0TG68UG2O0foYJDb8VYVa0alUXrxoQf1WmZnsTFA0EhgCJhrFMC5Hjkd57W0jpDsPDuFUDHfHyHRzstNN78PPxHOLk5dwcpBuoaYk5OAfhXHG3hAy+KgLkgNozqwzDbgWYJQyXsUwGXKNA6fnYMIO3iPeIpBwyqlSCBKUqEQk5E6YRmX2UdAT5kEnHKkQ5hXjkNqTPtKAARl1sIrGoxSFNuSEFMNWoVCxEpiqyRlQY165wEHELAgAh+QQJCgAAACwAAAAAIAAgAAAG/0CAcEgsKhSLonJJTBIFR0GxwFwmFJlnlAgaTKpFqEIqFJMBhcEABC5GjkPz0KN2tsvHBH4sJKgdd1NHSXILah9tAmdCC0dUcg5qVEQfiIxHEYtXSACKnWoGXAwHBwRDGUcKBXYFi0IJHmQEEKQHEGGpCnp3AiW1DKFWqZNgGKQNA65FCwV8bQQHJcRtds9MC4rZitVgCQbf4AYEubnKTAYU6eoUGuSpu3fo6+ka2NrbgQAE4eCmS9xVAOW7Yq7IgA4Hpi0R8EZBhDshOnTgcOtfM0cAlTigILFDiAFFNjk8k0GZgAxOBozouIHIOyKbFixIkECmIyIHOEiEWbPJTTQ5FxcVOMCgzUVCWwAcyZJvzy45ADYVZNIwTlIAVfNB7XRVDLxEWLQ4E9JsKq+rTdsMyhcEACH5BAkKAAAALAAAAAAgACAAAAb/QIBwSCwqFIuicklMEgVHQVHKVCYUmWeUWFAkqtOtEKqgAsgFcDFyHJLNmbZa6x2Lyd8595h8C48RagJmQgtHaX5XZUYKQ4YKEYSKfVKPaUMZHwMDeQBxh04ABYSFGU4JBpsDBmFHdXMLIKofBEyKCpdgspsOoUsLXaRLCQMgwky+YJ1FC4POg8lVAg7U1Q5drtnHSw4H3t8HDdnZy2Dd4N4Nzc/QeqLW1bnM7rXuV9tEBhQQ5UoCbJDmWKBAQcMDZNhwRVNCYANBChZYEbkVCZOwASEcCDFQ4SEDIq6WTVqQIMECBx06iCACQQPBiSabHDqzRUTKARMhSFCDrc+WNQIcOoRw5+ZIHj8ADqSEQBQAwKKLhIzowEEeGKQ0owIYkPKjHihZoBKi0KFE01b4zg7h4y4IACH5BAkKAAAALAAAAAAgACAAAAb/QIBwSCwqFIuicklMEgVHQVHKVCYUmWeUWFAkqtOtEKqgAsgFcDFyHJLNmbZa6x2Lyd8595h8C48RagJmQgtHaX5XZUUJeQCGChGEin1SkGlubEhDcYdOAAWEhRlOC12HYUd1eqeRokOKCphgrY5MpotqhgWfunqPt4PCg71gpgXIyWSqqq9MBQPR0tHMzM5L0NPSC8PCxVUCyeLX38+/AFfXRA4HA+pjmoFqCAcHDQa3rbxzBRD1BwgcMFIlidMrAxYICHHA4N8DIqpsUWJ3wAEBChQaEBnQoB6RRr0uARjQocMAAA0w4nMz4IOaU0lImkSngYKFc3ZWyTwJAALGK4fnNA3ZOaQCBQ22wPgRQlSIAYwSfkHJMrQkTyEbKFzFydQq15ccOAjUEwQAIfkECQoAAAAsAAAAACAAIAAABv9AgHBILCoUi6JySUwSBUdBUcpUJhSZZ5RYUCSq060QqqACyAVwMXIcks2ZtlrrHYvJ3zn3mHwLjxFqAmZCC0dpfldlRQl5AIYKEYSKfVKQaW5sSENxh04ABYSFGU4LXYdhR3V6p5GiQ4oKmGCtjkymi2qGBZ+6eo+3g8KDvYLDxKrJuXNkys6qr0zNygvHxL/V1sVD29K/AFfRRQUDDt1PmoFqHgPtBLetvMwG7QMes0KxkkIFIQNKDhBgKvCh3gQiqmxt6NDBAAEIEAgUOHCgBBEH9Yg06uWAIQUABihQMACgBEUHTRwoUEOBIcqQI880OIDgm5ABDA8IgUkSwAAyij1/jejAARPPIQwONBCnBAJDCEOOCnFA8cOvEh1CEJEqBMIBEDaLcA3LJIEGDe/0BAEAIfkECQoAAAAsAAAAACAAIAAABv9AgHBILCoUi6JySUwSBUdBUcpUJhSZZ5RYUCSq060QqqACyAVwMXIcks2ZtlrrHYvJ3zn3mHwLjxFqAmZCC0dpfldlRQl5AIYKEYSKfVKQaW5sSENxh04ABYSFGU4LXYdhR3V6p5GiQ4oKmGCtjkymi2qGBZ+6eo+3g8KDvYLDxKrJuXNkys6qr0zNygvHxL/V1sVDDti/BQccA8yrYBAjHR0jc53LRQYU6R0UBnO4RxmiG/IjJUIJFuoVKeCBigBN5QCk43BgFgMKFCYUGDAgFEUQRGIRYbCh2xACEDcAcHDgQDcQFGf9s7VkA0QCI0t2W0DRw68h8ChAEELSJE8xijBvVqCgIU9PjwA+UNzG5AHEB9xkDpk4QMGvARQsEDlKxMCALDeLcA0rqEEDlWCCAAAh+QQJCgAAACwAAAAAIAAgAAAG/0CAcEgsKhSLonJJTBIFR0FRylQmFJlnlFhQJKrTrRCqoALIBXAxchySzZm2Wusdi8nfOfeYfAuPEWoCZkILR2l+V2VFCXkAhgoRhIp9UpBpbmxIQ3GHTgAFhIUZTgtdh2FHdXqnkaJDigqYYK2OTKaLaoYFn7p6j0wOA8PEAw6/Z4PKUhwdzs8dEL9kqqrN0M7SetTVCsLFw8d6C8vKvUQEv+dVCRAaBnNQtkwPFRQUFXOduUoTG/cUNkyYg+tIBlEMAFYYMAaBuCekxmhaJeSeBgiOHhw4QECAAwcCLhGJRUQCg3RDCmyUVmBYmlOiGqmBsPGlyz9YkAlxsJEhqCubABS9AsPgQAMqLQfM0oTMwEZ4QpLOwvMLxAEEXIBG5aczqtaut4YNXRIEACH5BAkKAAAALAAAAAAgACAAAAb/QIBwSCwqFIuicklMEgVHQVHKVCYUmWeUWFAkqtOtEKqgAsgFcDFyHJLNmbZa6x2Lyd8595h8C48RahAQRQtHaX5XZUUJeQAGHR0jA0SKfVKGCmlubEhCBSGRHSQOQwVmQwsZTgtdh0UQHKIHm2quChGophuiJHO3jkwOFB2UaoYFTnMGegDKRQQG0tMGBM1nAtnaABoU3t8UD81kR+UK3eDe4nrk5grR1NLWegva9s9czfhVAgMNpWqgBGNigMGBAwzmxBGjhACEgwcgzAPTqlwGXQ8gMgAhZIGHWm5WjelUZ8jBBgPMTBgwIMGCRgsygVSkgMiHByD7DWDmx5WuMkZqDLCU4gfAq2sACrAEWFSRLjUfWDopCqDTNQIsJ1LF0yzDAA90UHV5eo0qUjB8mgUBACH5BAkKAAAALAAAAAAgACAAAAb/QIBwSCwqFIuickk0FIiCo6A4ZSoZnRBUSiwoEtYipNOBDKOKKgD9DBNHHU4brc4c3cUBeSOk949geEQUZA5rXABHEW4PD0UOZBSHaQAJiEMJgQATFBQVBkQHZKACUwtHbX0RR0mVFp0UFwRCBSQDSgsZrQteqEUPGrAQmmG9ChFqRAkMsBd4xsRLBBsUoG6nBa14E4IA2kUFDuLjDql4peilAA0H7e4H1udH8/Ps7+3xbmj0qOTj5mEWpEP3DUq3glYWOBgAcEmUaNI+DBjwAY+dS0USGJg4wABEXMYyJNvE8UOGISKVCNClah4xjg60WUKyINOCUwrMzVRARMGENWQ4n/jpNTKTm15J/CTK2e0MoD+UKmHEs4onVDVVmyqdpAbNR4cKTjqNSots07EjzzJh1S0IADsAAAAAAAAAAAA=');
	background-repeat:no-repeat;
	background-position: 50% 50%;
  background-size:20px 20px;
  min-width: 4rem;
  min-height: 4rem;
}
/*SVG----------------------------------------------------*/
.sc-svg-c {
  position: relative;
  height: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  padding-bottom: 100%;
  display: inline-block;
  }
  svg{
  fill: currentColor;
  }
  .sc-svg-c > svg{
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  }
  svg path,
  svg polygon{
  fill: inherit;
  stroke: inherit;
  stroke-width: inherit;
  transform: inherit;
  }

/*EXAMPLE
<p class="sc-svg-c selgrace"><svg><use xlink:href="#SELGRACE"/></svg></p>
*/
.sc-svg-c.majesta{
padding-bottom: 15.753425%;
/*viewbox 46/292 = 0.15753425 x 100*/
}
.sc-svg-c.rejuarna{
padding-bottom: 10%;
/*viewbox 46/292 = 0.1 x 100*/
}
.sc-svg-c.selgrace{
padding-bottom: 16.666667%;
/*viewbox 50/300 = 0.16666667 x 100*/
}
.sc-svg-c.luque{
padding-bottom: 26.029654%;
/*viewbox 158/607 = 0.26029654 x 100*/
/*padding-bottom: 30.666667%;
viewbox 92/300 = 0.30666667 x 100*/
}
.sc-svg-c.dearse-wh{
/*padding-bottom: 19.759036%;*/
/*viewbox 82/415 = 0.19759036 x 100*/
padding-bottom: 24%;
}
.sc-svg-c.dearse-wr{
padding-bottom: 24%;
/*padding-bottom: 19.759036%;*/
/*viewbox 82/415 = 0.19759036 x 100*/
}


.sc-svg-c.leadbeau{
  padding-bottom: 13.666667%;
  /*viewbox 41/300 = 0.13666667 x 100*/
  }
  .sc-svg-c.uv-beauty{
    padding-bottom: 61.111111%;
    /*viewbox 110/180 = 0.61111111 x 100*/
    }
.sc-svg-c.Basic-Skincare{
  padding-bottom: 10.191083%;
    /*viewbox 32/314 = 0.10191083 x 100*/
}
.sc-svg-c.intimilli{
  padding-bottom: 17.666667%;
    /*viewbox 53/300 = 0.17666667 x 100*/
}
.sc-svg-c.agnegrand{
  padding-bottom: 88.780488%;
    /*viewbox 182/205 = 0.88780488 x 100*/
}
.sc-svg-c.trueria{
  padding-bottom: 14.444444%;
    /*viewbox 52/360 = 0.14444444 x 100*/
}
.sc-svg-c.atodelie{
  padding-bottom: 13.666667%;
    /*viewbox 41/300 = 0.13666667 x 100*/
}
.sc-svg-c.ett{
  padding-bottom: 66.666667%;
    /*viewbox 100/150 = 0.66666667 x 100*/
}

.sc-svg-c.lidee{
  padding-bottom: 17.93722%;
  /*viewbox 40/223 = 0.1793722 x 100*/
}

.sc-svg-c.amulte{
  padding-bottom: 29.6%;
  /*viewbox 74/250 = 0.296 x 100*/
}

.sc-svg-c.dressdia{
  padding-bottom: 11.73913%;
  /*viewbox 27/230 = 0.1173913 x 100*/
}
.sc-svg-c.purece{
  padding-bottom: 25%;
  /*viewbox 75/300 = 0.25 x 100*/
}
.sc-svg-c.ecmer{
  padding-bottom: 15%;
  /*viewbox 45/300 = 0.15 x 100*/
}
.sc-svg-c.velvety{
  padding-bottom: 12.666667%;
  /*viewbox 38/300 = 0.12666667 x 100*/
}
.sc-svg-c.velvety{
  padding-bottom: 85.585586%;
  /*viewbox 190/222 = 0.85585586 x 100*/
}
.sc-svg-c.sg-ex{
  padding-bottom: 34.653465%;
  /*viewbox 70/202 = 0.34653465 x 100*/
}
.sc-svg-c.others{
  padding-bottom: 23.728814%;
  /*viewbox 42/177 = 0.23728814 x 100*/
}
.sc-svg-c.jyz{
  padding-bottom: 42.028986%;
  /*viewbox 58/138 = 0.42028986 x 100*/
}
.sc-svg-c.assemblage{
  padding-bottom: 72.972973%;
  /*viewbox 108/148 = 0.72972973 x 100*/
}
.sc-svg-c.vieta{
  padding-bottom: 21.854305%;
  /*viewbox 604/132 = 0.21854305 x 100*/
}

/*NEWS------------------------------------------------------------*/
.news dl.articles{
border-top: 2px solid #ccc;
}
.news dl.articles dt{
    border-top: 1px dotted #ccc;
}
.news dl.articles dd{
    border-top: 1px dotted #ccc;
    padding:1rem 0 0 0;
}
.news dl.articles dt:first-child,
.news dl.articles dd:nth-of-type(1){
    border-top: 0;
}
.category-ico{
    font-size: 10px;
    border-radius: 4px;
    padding:.25rem .5rem;
    width: 5rem;
    display: inline-block;
    background-color:#fff;
}
.category-ico::before{
    text-align: center;
    font-style: normal;
    display: block;
}
.category-ico.media{
  color: #bc4e7c;
  border: 1px #bc4e7c solid;
}
.category-ico.media::before{
    content: 'MEDIA';
}
.category-ico.product{
  color: #e0ac3e;
  border: 1px #e0ac3e solid;
}
.category-ico.product::before{
    content: 'PRODUCT';
}
.category-ico.company{
  color: #a7d061;
  border: 1px #a7d061 solid;
}
.category-ico.company::before{
    content: 'COMPANY';
}
.category-ico.rd{
  color: #2468a6;
  border: 1px #2468a6 solid;
}
.category-ico.rd::before{
    content: 'R&D';
}
.news dl.articles dt{
    float: left;
}
.news-data em{
  font-style: normal;
  margin-right: 1rem;
}
.news-data .category-ico{
  margin:0 1rem 0 0;
}
.news dl.articles dd:after {
    content: '';
    display: block;
    clear: both;
  }
@media screen and (max-width:768px){
    .news dl.articles dt{
        width: 6rem;
        padding:1rem 1rem 1rem 0;
    }
    .news dl.articles dt span{
        display: block;
        text-align: center;
        padding-right: 1rem;
    }
    .news dl.articles dd{
        margin-left: 6rem;
    } 
    .news .category-ico{
        display: block;
        margin-bottom: .5rem;
    }
}
@media screen and (min-width:769px){
    .news dl.articles dt{
        width: 16rem;
        padding:1rem;
    }
    .news .category-ico{
        display:inline-block;
    }
    .news dl.articles dd{
        margin-left: 16rem;
    } 
}

.refrect{
  /*-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(0.2, rgba(0,0,0,0)),to(rgba(0,0,0,0.4)));*/
  -webkit-box-reflect: below -2px -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, .25)), to(transparent));
}
/*
grid-row-gap: 2rem;
    grid-template-columns: repeat(3,calc(100% / 3));
    grid-template-columns: repeat(4,25%);
    */
    .ch-line{
      overflow: hidden;
      text-align: center;
    }
    .ch-line span {
      position: relative;
      display: inline-block;
      margin: 0 2.5em;
      padding: 0 1em;
      text-align: left;
    }
    .ch-line span::before,
    .ch-line span::after {
      position: absolute;
      top: 50%;
      content: '';
      width: 400%;
      height: 1px;
      background-color: #ccc;
    }
    .ch-line span::before {
      right: 100%;
    }
    .ch-line span::after {
      left: 100%;
    }




    .footer-info{
      border-top: 1px #efefef solid;
      border-bottom: 1px #fff solid;
      background-color: #f5f5f5;
    }
    .footer-info .fx.column2 .item{
      flex-basis:calc(50% - 2em);
    }
    .footer-info .fx.column3 .item{
      flex-basis:calc(33.3333333% - 2em);
    }

    @media screen and (max-width:768px){
      .footer-info .fx .item{
        margin-bottom: 2rem;
    }
      .footer-info .fx .item:last-child{
          margin-bottom:0;
      }
  }


/*PRINT------------------------------------------------------------*/
  @media print {
    /*section { display: block; page-break-before: always; }
    pre code {page-break-after: always;}*/
    @page {
    margin-top:0.4cm;
    margin: 0.5cm;
    }
    /*p a, code, pre {
    word-wrap: break-word;
    }
    img {display:none;}*/
     
    pre a[href]:after {
    content: ""; }
     
    pre abbr[title]:after {
    content: ""; }
     
    pre .ir a:after,
    pre a[href^="javascript:"]:after,
    pre a[href^="#"]:after {
    content: ""; }
     
    .no-print {display:none;}
  

    aside{
      display: none;
    }
    #header > p.sp-shop,
    #header > nav{
      display: none;
    }
    footer > .footer-wrap,
    footer .sub-content{
      display: none;
    }

    .main-header .inner{
      display: block;
    }
    .main-header .inner {
      background-image:none!important;
    }
}


/*2019.6改修 スマホバナー設置*/
.sp-banner-brand{
  position: fixed;
  right:0;
  left:0;
  bottom:0;
  width: 100%;
  display: none;
  z-index: 9;
}
.sp-banner-brand > p{
position: relative;
  /*border-radius: 4px;*/
  text-align: center;
}
.sp-banner-brand > p a{
  color: #3a3a3a;
  font-size: 1.4rem;
  display: block;
  background: rgb(249,237,207);
  background: linear-gradient(90deg, rgba(249,237,207,1) 0%, rgba(244,239,218,1) 100%);
  padding: 1rem .5rem;
}
/*
.sp-banner-brand > div img{
  width: 100%;
  height: auto;
}
.sp-banner-brand > div i.sp-close{
  position: absolute;
  right: 6px;
  top: 50%;
  margin-top: -14px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  background-color: #00a63d;
}
i.sp-close::before,
i.sp-close::after {
  position: absolute;
  left:13px;
  top:7px;
  content: ' ';
  height:13px;
  width: 2px;
  background-color: #fff;
}
i.sp-close::before {
  transform: rotate(45deg);
}
i.sp-close::after {
  transform: rotate(-45deg);
}
↓この仕様の場合
<section class="sp-banner-brand">
  <div class="box-link">
    <p class="ph"><img src="<?php echo $THISDIR; ?>common/images/sp-banner-brand.jpg" alt="ブランド情報"></p>
    <a href="<?php echo $THISDIR; ?>product/">詳細</a>
    <i class="sp-close"></i>
  </div>
</section>
*/


/*202001 SNS設置*/
.footer-sns{
  padding-top: 2rem;
  border-top: 1px #ccc solid;
}
@media only screen and (max-width:979px) {
  .footer-wrap .container.footer-sns{
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}
.footer-sns .inner > ul > li{
  flex-basis: 3rem;
  margin: 0 1rem;
}
.footer-sns .inner > ul > li > a{
  pointer-events: inherit;
  display: block;
  position: relative;
  z-index: 1;
}
.footer-sns .inner > ul > li > a::before,
.footer-sns .inner > ul > li > a::after{
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  left:50%;
  margin-left: -15px;
  display: none;
}
.footer-sns .inner > ul > li > a::before{
  top: -20px;
  border-top: 15px solid #eee;
  border-right: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid  transparent;
}
.footer-sns .inner > ul > li > a::after{
  top: -21px;
  border-top: 15px solid #fff;
  border-right: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid  transparent;
}
.footer-sns .inner > ul > li > a.drop.active::before,
.footer-sns .inner > ul > li > a.drop.active::after{
  display: block;
}
.footer-sns ul li > .sns-menu{
  position: absolute;
  left: 50%;
  bottom: 5.5rem;
  font-size: 1.4rem;
  top: auto;
  width: 66.25%;
  margin-left: -33.125%;
  display: none;
}
.footer-sns ul li > .sns-menu > ul > li{
  margin-bottom: .5rem;
}
.footer-sns ul li > .sns-menu > ul > li:last-child{
  margin-bottom: 0;
}
@media screen and (min-width:769px){
  .footer-sns .inner > ul > li{
    position: relative;
  }
  .footer-sns ul li > .sns-menu{
    bottom: 4.4rem;
    font-size: 1rem;
    width: 16rem;
    margin-left: -8rem;
  }
}
.footer-sns ul li > .sns-menu > ul{
  position: relative;
  width: 100%;
  padding: 2rem;
  margin: 0;
  background-color:#fff;
  border: 1px solid #eee;
  box-shadow: 0 0 15px 1px rgba(127, 127, 127, 0.33); 
}
@media screen and (min-width:769px){
  .footer-sns ul li > .sns-menu > ul{
    padding: 1rem;
  }
}
@media screen and (min-width:980px){
  .footer-sns .inner a:hover{
    opacity: .7;
  }
}

/*FOOTER-202012改修---------------------------------------------------*/
body > footer h2{
  color: #3f3f3f;
  font-size: 16px;
}
body > footer .footer-wrap h2 a i{
  font-size: 10px;
  vertical-align: middle;
}
body > footer .footer-wrap .sub-menu-head {
  font-size: 12px;
  color: #00a63d;
  margin-bottom: .5rem;
}
body > footer ul{
  list-style: none;
}
body > footer .sub-menu-lists-sub{
  font-size: 12px;
}
body > footer .sub-menu-lists-sub li > a{
  color: #858585;
}
body > footer .footer-wrap{
  background-color: #f9f9f9;
}
body > footer .footer-wrap .footer-main,
body > footer .footer-wrap .footer-sub,
body > footer .footer-wrap .footer-sub-info{
  margin-bottom: 2rem;
}
body > footer .footer-wrap .footer-main,
body > footer .footer-wrap .footer-sub{
  border-bottom: 1px #ccc solid;
  padding-bottom: 2rem;
}
body > footer .footer-wrap .footer-sub .contact{
  text-align: center;
}
body > footer .footer-wrap .footer-sub .contact a{
  display: block;
}
body > footer .footer-wrap .footer-sub .tel{
  text-align: center;
}
body > footer .footer-wrap .footer-sub .shop ul.banners li{
  margin: 0 calc(20px / 2);
  flex-basis: 33.33333%;
}
body > footer .footer-wrap .footer-sub li img{
  max-height: 3rem;
  width: auto;
}
body > footer .footer-wrap .footer-sub-info ul.fx li{
  flex-basis: 16%;
}
body > footer .footer-wrap .footer-sub-info ul li img{
  mix-blend-mode: multiply;
}
body > footer address{
  display: block;
  font-size: 10px;
  font-style: normal;
  text-align:center;
  margin: 2rem 0;
}
body > footer ul.sub-content li{
  border-right:1px solid #ccc;
  padding-right: 1rem;
  margin-right: 1rem;
  display: inline-block;
}
body > footer ul.sub-content li:last-child{
  border-right:0;
  padding-right:0;
}
body > footer .footer-wrap > .container.footer-sub .contact a{
  padding: 2rem;
}

body > footer .footer-wrap .footer-sub-info .inner ul li img{
  max-width: 4rem;  
}
@media only screen and (max-width:979px) {
  body > footer .footer-wrap{
    padding-top: 10px;
  }
  body > footer .footer-wrap .container{
    padding:0;
  }
  body > footer h2{
    padding:1rem;
    margin-bottom: 1rem;
  }
  body > footer .sub-menu-head{
    padding: 0 10px;
  }
  body > footer .sub-menu-lists-main{
    display: flex;
    align-items:flex-start;
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }
  body > footer .sub-menu-lists-main li{
    flex-basis: 50%;
    border-bottom: 1px solid #ccc;
    margin: 0;
  }
  body > footer .sub-menu-lists-main li:nth-of-type(1),
  body > footer .sub-menu-lists-main li:nth-of-type(2){
    border-top: 1px solid #ccc;
  }
  body > footer .sub-menu-lists-main li:nth-of-type(odd){
    border-right: 1px solid #ccc;
  }
  body > footer .sub-menu-lists-main li > a{
    padding: .5rem;
    display: block;
  }
  body > footer .sub-menu-lists-sub{
    padding: 0 10px;
  }
  body > footer .sub-menu-lists-sub a{
    padding: .5rem 0;
    display: block;
  }
  body > footer .footer-wrap > .container.footer-main .brand .inner .group{
    margin-bottom: 2rem;
  }
  body > footer .footer-wrap > .container.footer-sub > div{
    margin-bottom: 2rem;
  }
  body > footer .footer-wrap > .container.footer-sub .contact{
    padding: 0 10px;
    margin-bottom: 2rem;
  }
  body > footer .footer-wrap .footer-sub-info{
    padding: 0 10px;
  }
  body > footer .footer-wrap .footer-sub-info .inner ul{
    padding-left: 20vw;
    padding-right: 20vw;
    margin-bottom: 2rem;
  }
  body > footer .footer-wrap .footer-sub-info .inner .logo{
    text-align: center;
  }
  body > footer ul.sub-content{
    text-align: center;
    padding-top: 2rem;
  }
}
@media only screen and (min-width:980px) {
  body > footer h2{
    margin-bottom: 1.5rem;
  }
  body > footer .footer-wrap{
    padding-top: 4rem;
    padding-bottom: 2rem;
  }
  body > footer .sub-menu-lists-main{
    margin-bottom: 1rem;
  }
  body > footer .sub-menu-lists-sub li{
    margin-bottom: .5rem;
  }
  body > footer .sub-menu-lists-main li{
    margin-bottom: .5rem;
  }
  body > footer .footer-wrap .sub-menu-head{
  }
  body > footer .footer-wrap .sub-menu-lists-main,
  body > footer .footer-wrap .sub-menu-lists-sub{
    margin-left: 1rem;
  }
  body > footer .footer-wrap > .container.footer-main .brand .inner{
    display:-webkit-box;
  	display:-ms-flexbox;
    display:flex;
    
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  
    margin-bottom: 2rem;
  }
  body > footer .footer-wrap > .container.footer-main .brand .inner .group{
    -ms-flex-preferred-size: 16%;
	  flex-basis: calc(16.6666666% - 1rem);
  }
  body > footer .footer-wrap > .container.footer-main .brand .inner + .sub-menu-lists-sub li{
    margin-right: 1rem;
    display: inline-block;
  }
  body > footer .footer-wrap > .container.footer-main .brand .inner + .sub-menu-lists-sub li:last-child{
    margin-right: 0;
  }

  body > footer .footer-wrap > .container.footer-sub{
    display: grid;
    display: -ms-grid;
    grid-template-rows:auto;
    -ms-grid-rows:auto;
    grid-template-columns: 20% 20% 30% 30%;
    -ms-grid-columns: 20% 20% 30% 30%;
    grid-template-areas:
    "buy company nba contact"
    "esthetic company facility tel"
    "esthetic company recruit shop";
    grid-gap: .5rem;
    gap: .5rem;
  }
  body > footer .footer-wrap > .container.footer-sub .buy{
    grid-area: buy;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-row-span:2;

    margin-bottom: 1rem;
  }
  body > footer .footer-wrap > .container.footer-sub .esthetic{
    grid-area: esthetic;
    -ms-grid-column: 1;
    -ms-grid-row: 2;
    -ms-grid-row-span:2;
  }
  body > footer .footer-wrap > .container.footer-sub .company{
    grid-area: company;
    -ms-grid-column: 2;
    -ms-grid-row: 1;
    -ms-grid-row-span:3;
  }
  body > footer .footer-wrap > .container.footer-sub .nba{
    grid-area: nba;
    -ms-grid-column: 3;
    -ms-grid-row: 1;
    -ms-grid-row-span:1;

   /*margin-bottom: 1rem;*/
  }
  body > footer .footer-wrap > .container.footer-sub .facility{
    grid-area: facility;
    -ms-grid-column: 3;
    -ms-grid-row: 2;
    -ms-grid-row-span:1;

    /*margin-bottom: 1rem;*/
  }
  body > footer .footer-wrap > .container.footer-sub .recruit{
    grid-area: recruit;
    -ms-grid-column: 3;
    -ms-grid-row: 3;
    -ms-grid-row-span:1;
  }
  body > footer .footer-wrap > .container.footer-sub .contact{
    grid-area: contact;
    -ms-grid-column: 4;
    -ms-grid-row: 1;
    -ms-grid-row-span:1;

    /*margin-bottom: 1rem;*/
  }
  body > footer .footer-wrap > .container.footer-sub .tel{
    grid-area: tel;
    -ms-grid-column: 4;
    -ms-grid-row: 2;
    -ms-grid-row-span:1;

    /*margin-bottom: 1rem;*/
  }
  body > footer .footer-wrap > .container.footer-sub .shop{
    grid-area: shop;
    -ms-grid-column: 4;
    -ms-grid-row: 3;
    -ms-grid-row-span:1;
  }

  body > footer .footer-wrap .footer-sub-info .inner{
    display:-webkit-box;
  	display:-ms-flexbox;
    display:flex;
    
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  body > footer .footer-wrap .footer-sub-info .inner ul{
    flex-basis: 40%;
  }
  body > footer .footer-wrap .footer-sub-info .inner .logo{
    flex-basis: 15%;
  }
}