@charset "UTF-8";

/* ==========================================================================
   Base
========================================================================== */
html {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", 游ゴシック体, YuGothic, "Hiragino Kaku Gothic ProN", HiraKakuProN-W3, "Noto Sans JP", sans-serif;
}
/* ==========================================================================
   Header
========================================================================== */
#siteHeader {
  padding: 35px 35px 0;
    max-width: 1480px;
    margin: 0 auto;
}
#siteHeader.fixed {
  position: fixed;
}
.inner-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
}
#logo {
  flex: 0 0 100px;
  margin: 0 15px;
}
#logo {
  margin-right: 40px;
}
/* ==========================================================================
   Navigation
========================================================================== */
.nav {
  display: -ms-flexbox;
  display: flex;
}
.nav li.top {
  display: none;
}


.gNav .navArea {
  display: block !important;
}
.gNav .nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -ms-flex-align: center;
  align-items: center;
}
.gNav ul {
  -ms-flex-align: center;
  align-items: center;
  justify-content: flex-end;
}
.gNav ul li {
  font-size: 1.2rem;
  text-align: center;
}
.gNav .navapp {
    display: none;
}

/* LANG */
.gNav ul.lang-nav {
  display: none;
}
/* MAIN */
.gNav ul.main-nav {
  margin-right: 15px;
  padding-right: 15px;
  position: relative;
}
.gNav ul.main-nav::after {
  content: '';
  display: block;
  height: calc(100% - 10px);
  width: 1px;
  background-color: currentColor;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.gNav ul.main-nav li a {
  padding: 10px .8vw;
}
.gNav ul.main-nav li a span::after {
  position: absolute;
  bottom: -6px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .2s;
}
.gNav ul.main-nav li a:hover span::after {
  transform: scale(1, 1);
}

.gNav ul.main-nav li.ec-guide,
.gNav ul.main-nav li.contact {
  display: none;
}

.gNav ul.main-nav li .sub-menu__category {
  display: none!important;
}


/* EC */
.gNav ul.ec-nav {
  height: 100%;
  position: relative;
}
.gNav ul.ec-nav li a {
  padding: 0 10px;
}
.gNav ul.ec-nav li.user .icon {
  width: 18px;
}
.gNav ul.ec-nav li.cart .icon {
  width: 20px;
}


/* SNS */
.gNav ul.sns-nav {
  display: none !important;
}
.nav ul.sns-nav {
  display: block;
}

/* FIXED SNS */
.sns-fixed {
  right: 32px;
  bottom: 100px;
  opacity: 1;
  transition: .4s;
}
#siteHeader.transform .sns-fixed {
  opacity: 0;
  transition: .2s;
}

/* Btn */
.nav-btn {
  display: none;
}

/* ==========================================================================
   Main Bottom
========================================================================== */
.main-bottom__links ul {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.main-bottom__links ul li {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}
.main-bottom__links ul li a .ttl {
  font-size: 4rem;
}


/* ==========================================================================
   Footer
========================================================================== */
#siteFooter {
  padding: 88px 10px;
}
#siteFooter .footer-logo {
  margin: 0 auto 0 15px;
}

.inner-footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.fNav .nav {
  -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-align: start;
  align-items: flex-start;
}
.fNav .nav ul {
  -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* MAIN */
.fNav ul.main-nav {
  flex: 0 1 540px;
}
.fNav ul.main-nav li {
  flex: 0 0 180px;
}

.fNav ul.main-nav li.products { order: 0; }
.fNav ul.main-nav li.series   { order: 3; }
.fNav ul.main-nav li.wear     { order: 6; }
.fNav ul.main-nav li.styling  { order: 9; }
.fNav ul.main-nav li.look     { order: 1; }

.fNav ul.main-nav li.journal  { order: 4; }
.fNav ul.main-nav li.news     { order: 7; }
.fNav ul.main-nav li.about    { order: 8; }
.fNav ul.main-nav li.store    { order: 2; }

.fNav ul.main-nav li.base     { order: 5; }
.fNav ul.main-nav li.ec-guide { order: 10; }
.fNav ul.main-nav li.contact  { order: 11; }
.fNav ul.main-nav li.careplus { order: 5; }

body:not(.lang-ja) .fNav ul.main-nav li.series   { order: 0; }
body:not(.lang-ja) .fNav ul.main-nav li.products { order: 4; }
body:not(.lang-ja) .fNav ul.main-nav li.wear     {  }
body:not(.lang-ja) .fNav ul.main-nav li.styling  {  }
body:not(.lang-ja) .fNav ul.main-nav li.look     { order: 7; }
body:not(.lang-ja) .fNav ul.main-nav li.journal  {  }
body:not(.lang-ja) .fNav ul.main-nav li.news     {  }
body:not(.lang-ja) .fNav ul.main-nav li.about    { order: 2; }
body:not(.lang-ja) .fNav ul.main-nav li.store    { order: 5; }
body:not(.lang-ja) .fNav ul.main-nav li.base     { order: 8; }
body:not(.lang-ja) .fNav ul.main-nav li.ec-guide { order: 3; }
body:not(.lang-ja) .fNav ul.main-nav li.careplus { order: 6; }
body:not(.lang-ja) .fNav ul.main-nav li.contact  { order: 9; }

.fNav ul.main-nav li a {
  padding: 10px 15px;
}

/* SUB */
.fNav ul.sub-nav {
  width: 180px;
  margin-bottom: 6px;
}
.fNav ul.sub-nav li a {
  padding: 10px 15px;
}

/* SNS */
.fNav ul.sns-nav {
  width: 146px;
  margin-left: 30px;
}
.fNav .followus {
  width: 146px;
  margin-left: 30px;
  padding: 10px 15px 11px;
}
.fNav ul.sns-nav li a {
  padding: 9px 15px;
}
.fNav ul.sns-nav li a span {
  margin-left: 14px;
}

.footer-bottom {
  margin-top: 18px;
}
#siteFooter .copyright {
  min-width: 146px;
}

/* ==========================================================================
   Assets
========================================================================== */
/* ---------------
   Container
--------------- */
body:not(.haveMV) #container {
  margin-top: 85px;
}
.container.container_S {
  max-width: 860px;
}
.section-padding {
  padding-top: 40px;
}
.content {
  margin-top: 60px;
  margin-bottom: 60px;
}
@media only screen and (min-width: 1200px) {
  .container.container_M {
    max-width: 1020px;
  }
}
@media only screen and (min-width: 1440px) {
  .container {
    max-width: 1332px;
  }
}
/* ---------------
   Typography
--------------- */
.huge {
  font-size: 10rem; }

h1, .h1 {
  font-size: 5rem; }

h2, .h2 {
  font-size: 3rem; }

h3, .h3 {
  font-size: 1.8rem; }

h4, .h4 {
  font-size: 1.4rem; }

h5, .h5 {
  font-size: 1.2rem; }

h6, .h6 {
  font-size: 1rem; }
/* ---------------
   Headline
--------------- */
.page__header {
  margin-bottom: -10px;
}
.section__header {
  text-align: center;
  right: 0;
  margin: 0 auto;
}
/* ---------------
   List
--------------- */
.lists .list a {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: 32px 60px 32px 30px;
}
/* ---------------
  Card
--------------- */
.cards .card {
  margin-bottom: 60px;
}
/* ---------------
   inview Animation
--------------- */
.cards li.inview.fadeInUp:nth-of-type(3n - 1) {
  transition-delay: .4s;
}
.cards li.inview.fadeInUp:nth-of-type(3n) {
  transition-delay: .6s;
}
@media only screen and (min-width: 1200px) {
  .cards li.col-xl-3.inview.fadeInUp:nth-of-type(3n + 1) {
    transition-delay: .8s;
  }
}
/* ---------------
   WP
--------------- */
.entry__content p {
  font-size: 1.6rem;
}

/* ---------------
   Tag
--------------- */
.tags {
  display: flex;
}

/* ---------------
   MW WP Form
--------------- */
form dl {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
form dl dt {
  -ms-flex: 0 0 215px;
  flex: 0 0 215px;
  border-bottom: 1px solid #E6E6E6;
  padding-top: 30px;
  padding-bottom: 30px;
}
form dl dd {
  -ms-flex: 0 0 calc(100% - 215px);
  flex: 0 0 calc(100% - 215px);
  padding-top: 30px;
  padding-bottom: 30px;
}
form input[type="text"]#tel {
  width: 50%;
}
form textarea {
  min-height: 160px;
}
form select {
  width: 50%;
}