@charset "UTF-8";
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0; }

*, *:before, *:after {
  box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  font-size: 62.5%;
  font-family: "ヒラギノ角ゴPro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  font-feature-settings: "palt";
  letter-spacing: 0.1em; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

ul {
  list-style: none; }

a {
  margin: 0;
  padding: 0;
  background: transparent; }
  a:hover {
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: ease-in; }

a, u {
  text-decoration: none; }

img {
  max-width: 100%;
  height: auto;
  display: block; }

mark {
  padding: 0.2em 0.5em;
  margin: 0 0.2em; }

.l-grid {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap; }
  .l-grid-top {
    align-items: flex-start; }
  .l-grid-middle {
    align-items: center; }
  .l-grid-bottom {
    align-items: flex-end; }
  .l-grid-stretch {
    align-items: stretch; }
  .l-grid-center {
    justify-content: center; }
  .l-grid-end {
    justify-content: flex-end; }
  .l-grid-between {
    justify-content: space-between; }
  .l-grid-nowrap {
    flex-wrap: nowrap; }

.l-col-1 {
  width: 8.3333333333%; }

.l-col-2 {
  width: 16.6666666667%; }

.l-col-3 {
  width: 25%; }

.l-col-4 {
  width: 33.3333333333%; }

.l-col-5 {
  width: 41.6666666667%; }

.l-col-6 {
  width: 50%; }

.l-col-7 {
  width: 58.3333333333%; }

.l-col-8 {
  width: 66.6666666667%; }

.l-col-9 {
  width: 75%; }

.l-col-10 {
  width: 83.3333333333%; }

.l-col-11 {
  width: 91.6666666667%; }

.l-col-12 {
  width: 100%; }

.l-col-d-1 {
  width: 8.3333333333%; }

.l-col-d-2 {
  width: 16.6666666667%; }

.l-col-d-3 {
  width: 25%; }

.l-col-d-4 {
  width: 33.3333333333%; }

.l-col-d-5 {
  width: 41.6666666667%; }

.l-col-d-6 {
  width: 50%; }

.l-col-d-7 {
  width: 58.3333333333%; }

.l-col-d-8 {
  width: 66.6666666667%; }

.l-col-d-9 {
  width: 75%; }

.l-col-d-10 {
  width: 83.3333333333%; }

.l-col-d-11 {
  width: 91.6666666667%; }

.l-col-d-12 {
  width: 100%; }

@media screen and (max-width: 959px) {
  .l-col-t-1 {
    width: 8.3333333333%; } }

@media screen and (max-width: 959px) {
  .l-col-t-2 {
    width: 16.6666666667%; } }

@media screen and (max-width: 959px) {
  .l-col-t-3 {
    width: 25%; } }

@media screen and (max-width: 959px) {
  .l-col-t-4 {
    width: 33.3333333333%; } }

@media screen and (max-width: 959px) {
  .l-col-t-5 {
    width: 41.6666666667%; } }

@media screen and (max-width: 959px) {
  .l-col-t-6 {
    width: 50%; } }

@media screen and (max-width: 959px) {
  .l-col-t-7 {
    width: 58.3333333333%; } }

@media screen and (max-width: 959px) {
  .l-col-t-8 {
    width: 66.6666666667%; } }

@media screen and (max-width: 959px) {
  .l-col-t-9 {
    width: 75%; } }

@media screen and (max-width: 959px) {
  .l-col-t-10 {
    width: 83.3333333333%; } }

@media screen and (max-width: 959px) {
  .l-col-t-11 {
    width: 91.6666666667%; } }

@media screen and (max-width: 959px) {
  .l-col-t-12 {
    width: 100%; } }

@media screen and (max-width: 480px) {
  .l-col-s-1 {
    width: 8.3333333333%; } }

@media screen and (max-width: 480px) {
  .l-col-s-2 {
    width: 16.6666666667%; } }

@media screen and (max-width: 480px) {
  .l-col-s-3 {
    width: 25%; } }

@media screen and (max-width: 480px) {
  .l-col-s-4 {
    width: 33.3333333333%; } }

@media screen and (max-width: 480px) {
  .l-col-s-5 {
    width: 41.6666666667%; } }

@media screen and (max-width: 480px) {
  .l-col-s-6 {
    width: 50%; } }

@media screen and (max-width: 480px) {
  .l-col-s-7 {
    width: 58.3333333333%; } }

@media screen and (max-width: 480px) {
  .l-col-s-8 {
    width: 66.6666666667%; } }

@media screen and (max-width: 480px) {
  .l-col-s-9 {
    width: 75%; } }

@media screen and (max-width: 480px) {
  .l-col-s-10 {
    width: 83.3333333333%; } }

@media screen and (max-width: 480px) {
  .l-col-s-11 {
    width: 91.6666666667%; } }

@media screen and (max-width: 480px) {
  .l-col-s-12 {
    width: 100%; } }

.l-center {
  margin-left: auto;
  margin-right: auto; }

.l-right {
  margin-left: auto;
  margin-right: 0; }

.l-left {
  margin-right: auto;
  margin-left: 0; }

@media screen and (max-width: 480px) {
  .l-s-center {
    margin-left: auto;
    margin-right: auto; } }

@media screen and (max-width: 480px) {
  .l-s-left {
    margin-right: auto;
    margin-left: 0; } }

.l-fixed-top {
  position: fixed;
  top: 0;
  left: 0; }

.l-fixed-bottom {
  position: fixed;
  bottom: 0;
  right: 0; }

#wrapper {
  height: 100%; }

.l-container {
  width: 960px;
  margin-right: auto;
  margin-left: auto; }
  @media screen and (max-width: 480px) {
    .l-container {
      width: 100%; } }

.l-section {
  padding-top: 100px;
  padding-bottom: 100px;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto; }
  @media screen and (max-width: 480px) {
    .l-section {
      padding-top: 20vw;
      padding-bottom: 20vw;
      overflow-x: hidden; } }
  .l-section .l-title {
    margin-top: 100px;
    margin-bottom: 100px;
    position: relative; }
    .l-section .l-title.l-center {
      padding: 0 30px; }
      @media screen and (max-width: 480px) {
        .l-section .l-title.l-center {
          padding: 0 6vw; } }
    @media screen and (max-width: 480px) {
      .l-section .l-title {
        margin-top: 20vw;
        margin-bottom: 20vw; } }

.l-content {
  position: relative; }
  .l-content-table {
    position: relative; }
  .l-content-box.l-layered {
    margin-top: -60px;
    padding: 120px 50px 30px; }
    @media screen and (max-width: 480px) {
      .l-content-box.l-layered {
        margin-top: -10vw;
        padding: 20vw 6vw 0; } }

.l-header {
  padding: 20px 0;
  position: fixed;
  top: 0;
  left: 0; }
  .l-header:after {
    content: "";
    display: block;
    width: 960px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: 140px 30px;
    background-position: center top;
    position: absolute;
    bottom: -29px;
    left: 0;
    right: 0;
    margin: auto; }
    @media screen and (max-width: 480px) {
      .l-header:after {
        width: 30vw;
        height: 8vw;
        bottom: 0;
        top: 15vw;
        background-size: 100%; } }
  .l-header-logo {
    position: relative; }
    .l-header-logo .logo {
      width: 150px;
      height: 90px;
      position: absolute;
      top: -20px;
      left: 0;
      right: 0;
      margin: auto;
      z-index: 10; }
      @media screen and (max-width: 480px) {
        .l-header-logo .logo {
          width: 30vw;
          height: 15vw;
          top: -6vw; } }
      .l-header-logo .logo img {
        display: block;
        width: 70px;
        height: 46px;
        margin: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0; }
        @media screen and (max-width: 480px) {
          .l-header-logo .logo img {
            width: 45%;
            height: auto; } }

.bar {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4vw;
  margin: auto;
  width: 30px;
  height: 13px; }
  @media screen and (max-width: 480px) {
    .bar {
      display: block; } }
  .bar span {
    display: block;
    width: 20px;
    height: 0;
    border-top: 1px solid #000000;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto; }

@media screen and (max-width: 480px) {
  .l-nav {
    position: absolute;
    top: 9vw;
    width: 100%;
    padding: 5vw;
    transition: none; } }
.l-nav-box:first-child .nav-list:not(:last-child) {
  margin-right: 30px; }
  @media screen and (max-width: 480px) {
    .l-nav-box:first-child .nav-list:not(:last-child) {
      margin-right: 0; } }
.l-nav-box:last-child .nav-list:not(:first-child) {
  margin-left: 30px; }
  @media screen and (max-width: 480px) {
    .l-nav-box:last-child .nav-list:not(:first-child) {
      margin-left: 0; } }
@media screen and (max-width: 480px) {
  .l-nav-list {
    width: 100%;
    padding: 2vw 0; } }

.l-footer {
  padding: 40px 0; }
  @media screen and (max-width: 480px) {
    .l-footer {
      padding-bottom: 30vw; } }

.l-contact {
  padding: 14px 50px 16px 30px; }
  @media screen and (max-width: 480px) {
    .l-contact {
      width: 100%;
      padding: 3vw 0; } }
  .l-contact .l-grid {
    flex-wrap: nowrap; }
    @media screen and (max-width: 480px) {
      .l-contact .l-grid > div {
        display: flex;
        align-items: center;
        justify-content: center; } }
  .l-contact > a {
    display: block; }
  .l-contact img {
    margin-right: 13px; }
    @media screen and (max-width: 480px) {
      .l-contact img {
        display: none; } }
  .l-contact p, .l-contact small {
    line-height: 1.2; }
    @media screen and (max-width: 480px) {
      .l-contact p, .l-contact small {
        margin: 0 1vw; } }
  .l-contact p {
    letter-spacing: 1.5px; }
  .l-contact small {
    letter-spacing: 0; }

.l-visual {
  display: block;
  width: 100%;
  height: 100%;
  position: relative; }
  .l-visual-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
    @media screen and (max-width: 480px) {
      .l-visual-title {
        width: 100%; } }
  .l-visual-txt {
    padding: 25px 40px; }
    @media screen and (max-width: 480px) {
      .l-visual-txt {
        padding: 3vw 5vw; } }
  .l-visual-logo {
    margin-bottom: 40px; }
    @media screen and (max-width: 480px) {
      .l-visual-logo {
        width: 30%;
        margin: 0 auto 8vw; } }

#blog {
  margin-top: 50px;
  padding: 50px 0; }
  #blog > .l-container {
    position: relative; }
    #blog > .l-container:before {
      content: "";
      display: block;
      width: 960px;
      height: 1040px;
      background-repeat: no-repeat;
      position: absolute;
      top: -50px;
      left: 480px; }
      @media screen and (max-width: 480px) {
        #blog > .l-container:before {
          width: 100%;
          top: -25vw;
          left: auto;
          right: 0;
          background-position: top right;
          background-size: contain; } }
  #blog .l-title {
    margin-top: 0;
    margin-bottom: 60px; }
    @media screen and (max-width: 480px) {
      #blog .l-title {
        transform: translateX(-4vw); } }
  #blog .article {
    position: relative;
    margin-bottom: 100px; }
    @media screen and (max-width: 480px) {
      #blog .article {
        margin-bottom: 20vw; } }
    #blog .article:nth-last-of-type(1) {
      margin-bottom: 50px; }
      @media screen and (max-width: 480px) {
        #blog .article:nth-last-of-type(1) {
          margin-bottom: 10vw; } }
    #blog .article-author {
      position: absolute;
      top: -36px;
      left: 0px;
      right: 0; }
      @media screen and (max-width: 480px) {
        #blog .article-author {
          top: -7vw;
          padding-left: 5vw; } }
    #blog .article-content {
      padding: 20px 0; }
      @media screen and (max-width: 480px) {
        #blog .article-content {
          padding: 4vw 5vw; } }
    #blog .article-date {
      position: absolute;
      width: 110px;
      height: 110px;
      top: -55px;
      left: -55px; }
      @media screen and (max-width: 480px) {
        #blog .article-date {
          width: 18vw;
          height: 18vw;
          top: -9vw;
          left: -7vw; } }
    #blog .article-desc {
      line-height: 1.6; }
      #blog .article-desc a {
        margin-left: 10px; }
    #blog .article-title {
      margin-bottom: 5px; }
      @media screen and (max-width: 480px) {
        #blog .article-title {
          margin-top: 3vw; } }
  #blog .l-btn {
    position: relative;
    z-index: 1; }

#concept {
  padding: 0;
  margin-top: 50px;
  height: 1170px; }
  @media screen and (max-width: 480px) {
    #concept {
      margin-top: 10vw;
      height: auto; } }
  #concept > .l-container {
    position: relative; }
    @media screen and (max-width: 480px) {
      #concept > .l-container {
        padding-bottom: 10vw; } }
    #concept > .l-container:before {
      content: "";
      display: block;
      width: 1360px;
      height: 1170px;
      background-size: 100%;
      background-repeat: no-repeat;
      position: absolute;
      top: 0;
      left: -480px; }
      @media screen and (max-width: 480px) {
        #concept > .l-container:before {
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          background-position: top center;
          background-size: 130%; } }
  @media screen and (max-width: 480px) {
    #concept .l-title {
      padding: 0; } }
  #concept .l-content {
    position: relative; }
    #concept .l-content-box {
      padding: 60px; }
      @media screen and (max-width: 480px) {
        #concept .l-content-box {
          padding: 8vw; } }
    #concept .l-content-txt {
      line-height: 2;
      margin-bottom: 20px; }
      #concept .l-content-txt:nth-child(2) {
        line-height: 1.6;
        margin-top: 40px; }

#menu {
  padding-bottom: 200px;
  position: relative;
  background-size: 1920px 100%;
  background-repeat: no-repeat; }
  @media screen and (max-width: 480px) {
    #menu {
      padding-bottom: 30vw;
      height: auto;
      background-size: 100% 50%; } }
  #menu .l-title {
    margin-bottom: 0; }
    @media screen and (max-width: 480px) {
      #menu .l-title {
        margin-top: 0; } }
  #menu .l-content {
    position: relative; }
    #menu .l-content-box {
      border: 2px solid; }
    #menu .l-content-table {
      padding-right: 20px;
      padding-left: 20px;
      padding-bottom: 50px;
      margin-bottom: 50px; }
      @media screen and (max-width: 480px) {
        #menu .l-content-table {
          padding-right: 0;
          padding-left: 0;
          padding-bottom: 10vw;
          margin-bottom: 10vw; } }
      #menu .l-content-table .border-scissors {
        width: 770px;
        margin-left: 20px; }
        @media screen and (max-width: 480px) {
          #menu .l-content-table .border-scissors {
            width: 84%;
            margin-left: 0; } }
      #menu .l-content-table:nth-of-type(odd) {
        padding-right: 60px; }
        @media screen and (max-width: 480px) {
          #menu .l-content-table:nth-of-type(odd) {
            padding-right: 0; } }
      #menu .l-content-table:nth-of-type(even) {
        padding-left: 60px; }
        @media screen and (max-width: 480px) {
          #menu .l-content-table:nth-of-type(even) {
            padding-left: 0; } }
      #menu .l-content-table:nth-of-type(even) .border-scissors, #menu .l-content-table:nth-last-of-type(2) .border-scissors {
        display: none; }
        @media screen and (max-width: 480px) {
          #menu .l-content-table:nth-of-type(even) .border-scissors, #menu .l-content-table:nth-last-of-type(2) .border-scissors {
            display: block; } }
      @media screen and (max-width: 480px) {
        #menu .l-content-table:last-child .border-scissors {
          display: none; } }
    #menu .l-content-table-title {
      margin-bottom: 20px; }
    #menu .l-content-table-txt > .l-grid {
      margin-bottom: 15px; }
      #menu .l-content-table-txt > .l-grid dt span {
        white-space: nowrap; }

#stylist {
  padding: 0;
  position: relative;
  background-size: 1920px auto;
  background-repeat: no-repeat;
  background-position: top center; }
  @media screen and (max-width: 480px) {
    #stylist {
      height: auto;
      background-size: auto 15%;
      background-position: top left 100%; } }
  @media screen and (max-width: 480px) {
    #stylist .l-title {
      padding: 0;
      margin-top: 15vw;
      margin-bottom: 15vw; } }
  #stylist .l-content {
    position: relative; }
  #stylist .l-card {
    position: relative;
    border: 2px solid #C7A57F;
    margin: 0 2.5% 5%;
    width: 30%; }
    @media screen and (max-width: 480px) {
      #stylist .l-card {
        width: 100%;
        margin: 0 0 10%; } }
    #stylist .l-card:nth-of-type(1), #stylist .l-card:nth-of-type(4), #stylist .l-card:nth-of-type(7), #stylist .l-card:nth-of-type(10) {
      margin-left: 0; }
    #stylist .l-card:nth-of-type(3n) {
      margin-right: 0; }
    #stylist .l-card-box {
      padding: 50px 0; }
      @media screen and (max-width: 480px) {
        #stylist .l-card-box {
          padding: 6vw 0; } }
    #stylist .l-card-img {
      width: 150px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 30px; }
      @media screen and (max-width: 480px) {
        #stylist .l-card-img {
          width: 50%;
          margin-bottom: 5vw; } }
    #stylist .l-card-title {
      margin-bottom: 30px; }
      @media screen and (max-width: 480px) {
        #stylist .l-card-title {
          margin-bottom: 5vw; } }
      #stylist .l-card-title dt {
        margin-bottom: 5px; }
    #stylist .l-card-desc {
      line-height: 2; }
    #stylist .l-card-icon {
      position: absolute;
      top: 0;
      left: 0; }
      #stylist .l-card-icon:before {
        content: "";
        display: block;
        width: 110px;
        height: 110px;
        background-image: url("../img/icon_triangle.svg");
        background-size: 100%;
        background-repeat: no-repeat;
        position: absolute;
        top: 0;
        left: 0; }
        @media screen and (max-width: 480px) {
          #stylist .l-card-icon:before {
            width: 30vw;
            height: 30vw; } }
    #stylist .l-card-icon-txt {
      position: relative;
      transform: rotateZ(-45deg);
      top: 10px;
      left: -10px; }
      @media screen and (max-width: 480px) {
        #stylist .l-card-icon-txt {
          top: 3vw;
          left: -2vw; } }
    #stylist .l-card .l-gutter {
      padding: 24px; }

#hairstyle {
  padding-top: 250px;
  padding-bottom: 200px;
  position: relative;
  background-size: 1920px auto;
  background-repeat: no-repeat;
  background-position: center top; }
  @media screen and (max-width: 480px) {
    #hairstyle {
      padding-top: 40vw;
      padding-bottom: 30vw;
      height: auto;
      background-size: 220% auto; } }
  @media screen and (max-width: 480px) {
    #hairstyle .l-title {
      margin-top: 0; } }
  #hairstyle .l-content {
    position: relative; }
    #hairstyle .l-content-box {
      margin-bottom: 100px; }
      @media screen and (max-width: 480px) {
        #hairstyle .l-content-box {
          margin-bottom: 20vw; } }
  #hairstyle .l-card {
    position: relative;
    border: 2px solid #C7A57F;
    margin: 0 2.5% 5%;
    width: 30%; }
    #hairstyle .l-card:nth-of-type(1), #hairstyle .l-card:nth-of-type(4) {
      margin-left: 0; }
    #hairstyle .l-card:nth-of-type(3n) {
      margin-right: 0; }
    #hairstyle .l-card .l-gutter {
      padding: 24px; }
    #hairstyle .l-card-box {
      padding: 50px 0; }
    #hairstyle .l-card-img {
      margin-bottom: 30px; }
    #hairstyle .l-card-title {
      margin-bottom: 30px; }
      #hairstyle .l-card-title dt {
        margin-bottom: 5px; }
    #hairstyle .l-card-desc {
      line-height: 2; }
    #hairstyle .l-card-icon {
      position: absolute;
      top: 10px;
      left: -10px; }
      #hairstyle .l-card-icon:before {
        content: "";
        display: block;
        border-bottom: 80px solid #C7A57F;
        border-top: 0 solid transparent;
        border-right: 80px solid transparent;
        border-left: 80px solid transparent;
        position: absolute;
        top: -23px;
        left: -43px;
        transform: rotateZ(-45deg); }
    #hairstyle .l-card-icon-txt {
      position: relative;
      transform: rotateZ(-45deg); }

#information {
  padding-bottom: 0;
  position: relative; }
  #information .l-title {
    margin-bottom: 0; }
    @media screen and (max-width: 480px) {
      #information .l-title {
        margin-top: 0; } }
  #information .l-content {
    position: relative; }
    #information .l-content-box.l-layered {
      padding-bottom: 0;
      margin-bottom: 200px; }
      @media screen and (max-width: 480px) {
        #information .l-content-box.l-layered {
          padding-bottom: 0; } }
  @media screen and (max-width: 480px) and (max-width: 480px) {
    #information .l-content-box.l-layered {
      margin-bottom: 20vw; } }

    #information .l-content-table {
      padding-right: 20px;
      padding-left: 20px;
      padding-bottom: 50px; }
      @media screen and (max-width: 480px) {
        #information .l-content-table {
          padding-right: 0;
          padding-left: 0;
          padding-bottom: 10vw; } }
      #information .l-content-table .border-scissors {
        width: 600px; }
        @media screen and (max-width: 480px) {
          #information .l-content-table .border-scissors {
            width: 84%; } }
    #information .l-content-table-title {
      margin-bottom: 50px;
      padding-bottom: 20px;
      position: relative; }
    #information .l-content-table-txt > .l-grid {
      margin-bottom: 15px; }
    #information .l-content-table-txt .border-d {
      display: inline-block;
      padding-left: 5px;
      padding-right: 5px; }
      @media screen and (max-width: 480px) {
        #information .l-content-table-txt .border-d {
          display: none; } }
    #information .l-content-table-txt .border-s {
      display: none; }
      @media screen and (max-width: 480px) {
        #information .l-content-table-txt .border-s {
          display: block; } }

.clearfix {
  overflow: hidden; }

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

.ff-en {
  font-family: "Futura", "Arial";
  font-weight: 500 !important;
  letter-spacing: 0;
  -ms-font-feature-settings: "normal"; }

.fw-light {
  font-weight: lighter; }

.fw-normal {
  font-weight: normal; }

.fw-bold {
  font-weight: bold; }

.txt-huge {
  font-size: 6rem;
  font-weight: bold; }
.txt-xlarge {
  font-size: 3rem;
  font-weight: bold; }
.txt-large {
  font-size: 2.4rem;
  font-weight: bold; }
.txt-medium {
  font-size: 2rem;
  font-weight: bold; }
.txt-primary {
  font-size: 1.6rem;
  font-weight: bold; }
.txt-small {
  font-size: 1.4rem;
  font-weight: bold; }
.txt-xsmall {
  font-size: 1.2rem;
  font-weight: bold; }
.txt-tiny {
  font-size: 1rem;
  font-weight: bold; }
@media screen and (max-width: 480px) {
  .txt-huge {
    font-size: 10vw; } }
@media screen and (max-width: 480px) {
  .txt-xlarge {
    font-size: 6.4vw; } }
@media screen and (max-width: 480px) {
  .txt-large {
    font-size: 5.3vw; } }
@media screen and (max-width: 480px) {
  .txt-medium {
    font-size: 4.8vw; } }
@media screen and (max-width: 480px) {
  .txt-primary {
    font-size: 4vw; } }
@media screen and (max-width: 480px) {
  .txt-small {
    font-size: 3.7vw; } }
@media screen and (max-width: 480px) {
  .txt-xsmall {
    font-size: 3.2vw; } }
@media screen and (max-width: 480px) {
  .txt-tiny {
    font-size: 2.7vw; } }
.txt-d-huge {
  font-size: 6rem;
  font-weight: bold; }
.txt-d-xlarge {
  font-size: 3rem;
  font-weight: bold; }
.txt-d-large {
  font-size: 2.4rem;
  font-weight: bold; }
.txt-d-medium {
  font-size: 2rem;
  font-weight: bold; }
.txt-d-primary {
  font-size: 1.6rem;
  font-weight: bold; }
.txt-d-small {
  font-size: 1.4rem;
  font-weight: bold; }
.txt-d-xsmall {
  font-size: 1.2rem;
  font-weight: bold; }
.txt-d-tiny {
  font-size: 1rem;
  font-weight: bold; }
@media screen and (max-width: 480px) {
  .txt-s-huge {
    font-size: 10vw;
    font-weight: bold; } }
@media screen and (max-width: 480px) {
  .txt-s-xlarge {
    font-size: 6.4vw;
    font-weight: bold; } }
@media screen and (max-width: 480px) {
  .txt-s-large {
    font-size: 5.3vw;
    font-weight: bold; } }
@media screen and (max-width: 480px) {
  .txt-s-medium {
    font-size: 4.8vw;
    font-weight: bold; } }
@media screen and (max-width: 480px) {
  .txt-s-primary {
    font-size: 4vw;
    font-weight: bold; } }
@media screen and (max-width: 480px) {
  .txt-s-small {
    font-size: 3.7vw;
    font-weight: bold; } }
@media screen and (max-width: 480px) {
  .txt-s-xsmall {
    font-size: 3.2vw;
    font-weight: bold; } }
@media screen and (max-width: 480px) {
  .txt-s-tiny {
    font-size: 2.7vw;
    font-weight: bold; } }
.txt-left {
  text-align: left; }
.txt-center {
  text-align: center; }
.txt-right {
  text-align: right; }
.txt-d-left {
  text-align: left; }
.txt-d-center {
  text-align: center; }
.txt-d-right {
  text-align: right; }
@media screen and (max-width: 480px) {
  .txt-s-left {
    text-align: left; } }
@media screen and (max-width: 480px) {
  .txt-s-center {
    text-align: center; } }
@media screen and (max-width: 480px) {
  .txt-s-right {
    text-align: right; } }
.txt-link {
  margin-bottom: 0.5em; }
  .txt-link > a, .txt-link > u {
    padding-bottom: 0.1em;
    border-bottom: 1px solid;
    text-decoration: none;
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: ease-in; }
    .txt-link > a:hover, .txt-link > u:hover {
      border-width: 0; }
.txt-visual span {
  line-height: 1.4;
  vertical-align: baseline; }

.list {
  margin-left: 0.5em; }
  .list:before {
    content: "・";
    display: inline-block;
    margin-left: -0.5em;
    font-feature-settings: normal; }
  .list-attention {
    margin-left: 0.5em; }
    .list-attention:before {
      content: "※";
      display: inline-block;
      margin-left: -0.5em; }
  .list-number:nth-child(1) {
    margin-left: 0.5em; }
    .list-number:nth-child(1):before {
      content: "1";
      display: inline-block;
      margin-left: -0.5em; }
  .list-number:nth-child(2) {
    margin-left: 0.5em; }
    .list-number:nth-child(2):before {
      content: "2";
      display: inline-block;
      margin-left: -0.5em; }
  .list-number:nth-child(3) {
    margin-left: 0.5em; }
    .list-number:nth-child(3):before {
      content: "3";
      display: inline-block;
      margin-left: -0.5em; }
  .list-number:nth-child(4) {
    margin-left: 0.5em; }
    .list-number:nth-child(4):before {
      content: "4";
      display: inline-block;
      margin-left: -0.5em; }
  .list-number:nth-child(5) {
    margin-left: 0.5em; }
    .list-number:nth-child(5):before {
      content: "5";
      display: inline-block;
      margin-left: -0.5em; }
  .list-number:nth-child(6) {
    margin-left: 0.5em; }
    .list-number:nth-child(6):before {
      content: "6";
      display: inline-block;
      margin-left: -0.5em; }
  .list-number:nth-child(7) {
    margin-left: 0.5em; }
    .list-number:nth-child(7):before {
      content: "7";
      display: inline-block;
      margin-left: -0.5em; }
  .list-number:nth-child(8) {
    margin-left: 0.5em; }
    .list-number:nth-child(8):before {
      content: "8";
      display: inline-block;
      margin-left: -0.5em; }
  .list-number:nth-child(9) {
    margin-left: 0.5em; }
    .list-number:nth-child(9):before {
      content: "9";
      display: inline-block;
      margin-left: -0.5em; }
  .list-number:nth-child(10) {
    margin-left: 0.5em; }
    .list-number:nth-child(10):before {
      content: "10";
      display: inline-block;
      margin-left: -0.5em; }

.nav-list a {
  position: relative;
  display: inline-block; }
  @media screen and (max-width: 480px) {
    .nav-list a {
      display: block; } }
  .nav-list a:after {
    content: "";
    display: block;
    width: 0;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: ease-in;
    position: absolute;
    bottom: -0.5em;
    left: 0;
    right: 0;
    margin: auto; }
    @media screen and (max-width: 480px) {
      .nav-list a:after {
        display: none; } }
  .nav-list a:hover:after {
    width: 20px; }

.gmap {
  width: 100%;
  overflow: hidden;
  height: 500px; }
  @media screen and (max-width: 480px) {
    .gmap {
      height: 250px; } }
  .gmap iframe {
    margin-top: -150px; }
    @media screen and (max-width: 480px) {
      .gmap iframe {
        margin-top: -250px; } }

.layer {
  position: relative; }
  .layer-0 {
    z-index: 0; }
  .layer-1 {
    z-index: 1; }
  .layer-2 {
    z-index: 2; }
  .layer-3 {
    z-index: 3; }
  .layer-4 {
    z-index: 4; }
  .layer-5 {
    z-index: 5; }
  .layer-6 {
    z-index: 6; }
  .layer-7 {
    z-index: 7; }
  .layer-8 {
    z-index: 8; }
  .layer-9 {
    z-index: 9; }
  .layer-10 {
    z-index: 10; }

.table {
  display: table; }
  .table-cell {
    display: table-cell;
    vertical-align: middle; }

.icon-phone {
  width: 35px; }

.round {
  border-radius: 50%; }

.border {
  border: 2px solid; }
  .border-b-small {
    display: inline-block; }
    .border-b-small:after {
      content: "";
      display: block;
      width: 20px;
      border-bottom-width: 2px;
      border-bottom-style: solid;
      margin-top: 15px;
      margin-left: auto;
      margin-right: auto; }
      @media screen and (max-width: 480px) {
        .border-b-small:after {
          width: 5vw; } }
  .border-b-medium {
    display: inline-block; }
    .border-b-medium:after {
      content: "";
      display: block;
      width: 50px;
      border-bottom-width: 3px;
      border-bottom-style: solid;
      margin-top: 15px;
      margin-left: auto;
      margin-right: auto; }
      @media screen and (max-width: 480px) {
        .border-b-medium:after {
          width: 8vw; } }
  .border-b-large {
    display: inline-block; }
    .border-b-large:after {
      content: "";
      display: block;
      width: 70px;
      border-bottom-width: 5px;
      border-bottom-style: solid;
      margin-top: 20px;
      margin-left: auto;
      margin-right: auto; }
      @media screen and (max-width: 480px) {
        .border-b-large:after {
          width: 12vw;
          border-bottom-width: 1vw;
          margin-top: 2vw; } }
  .border-scissors {
    width: 600px;
    height: 50px;
    background-image: url("../img/border_line.svg");
    background-repeat: repeat-x;
    background-position: left center;
    position: absolute;
    bottom: -20px;
    left: 0; }
    .border-scissors:after {
      content: "";
      display: block;
      width: 50px;
      height: 50px;
      background-image: url("../img/icon_scissors.svg");
      background-repeat: no-repeat;
      background-position: center;
      margin-left: auto;
      margin-right: -50px; }
      @media screen and (max-width: 480px) {
        .border-scissors:after {
          width: 10vw;
          background-size: 100% auto;
          margin-right: -10vw; } }

.btn {
  padding: 6px 30px; }
  .btn > a {
    display: block; }
    .btn > a:hover {
      opacity: 0.8; }
  .btn-icon:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-size: 100%;
    margin-right: 10px;
    margin-left: -20px; }

.js-hide {
  display: none; }

.js-pagetop {
  display: none; }

.js-more-icon {
  transition: all .5s .5s ease-in; }

.js-open-icon {
  transform: rotateZ(-45deg);
  top: 5px; }

.js-bg-fade {
  width: 100%;
  height: 100%;
  position: absolute; }
  .js-bg-fade > div {
    width: 100%;
    height: 100%;
    background-size: cover;
    position: absolute; }
    @media screen and (max-width: 480px) {
      .js-bg-fade > div {
        background-position: bottom center; } }

@media screen and (max-width: 480px) {
  .js-nav {
    display: none; } }

.js-scroll {
  transition-property: all;
  transition-duration: 0.6s;
  transition-timing-function: ease-in; }
  .js-scroll-l {
    transform: translateX(-200px);
    opacity: 0.1; }
  .js-scroll-r {
    transform: translateX(200px);
    opacity: 0.1; }
  .js-scroll-y {
    transform: translateY(200px);
    opacity: 0.1; }
  .js-scroll-fadeIn {
    opacity: 0; }
  .js-scroll-finished {
    transform: translate(0);
    opacity: 1; }

.loader {
  width: 100%;
  height: 100%;
  position: fixed;
  background: #ffffff;
  z-index: 9999; }
  .loader img {
    width: 150px;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto; }
    @media screen and (max-width: 480px) {
      .loader img {
        width: 75px; } }

.circle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 300px;
  height: 300px;
  background: #000000;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  z-index: 1; }
  @media screen and (max-width: 480px) {
    .circle {
      width: 150px;
      height: 150px; } }
  .circle:before, .circle:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 300px;
    height: 300px;
    background: #ffffff; }
    @media screen and (max-width: 480px) {
      .circle:before, .circle:after {
        width: 150px;
        height: 150px; } }
  .circle:before {
    left: -150px;
    transform-origin: right 150px;
    z-index: 2;
    animation: rotate-circle-left 1s linear forwards; }
    @media screen and (max-width: 480px) {
      .circle:before {
        left: -75px;
        transform-origin: right 75px; } }
  .circle:after {
    left: 150px;
    transform-origin: left 150px;
    z-index: 3;
    animation: rotate-circle-right 1s linear forwards; }
    @media screen and (max-width: 480px) {
      .circle:after {
        left: 75px;
        transform-origin: left 75px; } }
  .circle-inner {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 280px;
    height: 280px;
    background: #ffffff;
    border-radius: 50%;
    z-index: 4; }
    @media screen and (max-width: 480px) {
      .circle-inner {
        top: 5px;
        left: 5px;
        width: 140px;
        height: 140px; } }

@keyframes rotate-circle-right {
  0% {
    transform: rotate(0deg);
    background: #ffffff; }
  50% {
    transform: rotate(180deg);
    background: #ffffff; }
  50.01% {
    transform: rotate(360deg);
    background: #000000; }
  100% {
    transform: rotate(360deg);
    background: #000000; } }
@keyframes rotate-circle-left {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(180deg); } }
.is-show {
  display: block; }

.is-hidden {
  display: none; }

.is-hidden-x {
  overflow-x: hidden; }

.is-hidden-y {
  overflow-y: hidden; }

.is-d-show {
  display: block; }
  @media screen and (max-width: 480px) {
    .is-d-show {
      display: none; } }

.is-d-hidden {
  display: none; }
  @media screen and (max-width: 480px) {
    .is-d-hidden {
      display: block; } }

@media screen and (max-width: 480px) {
  .is-s-show {
    display: block; }

  .is-s-hidden {
    display: none; } }
html, body {
  color: #000000; }

a {
  color: #C7A57F; }

::selection {
  color: #ffffff;
  background-color: #C7A57F; }

.bg-black {
  background-color: #000000; }

.color-black {
  color: #000000; }

.bg-white {
  background-color: #ffffff; }

.color-white {
  color: #ffffff; }

.bg-white-rgba {
  background-color: rgba(255, 255, 255, 0.8); }

.color-white-rgba {
  color: rgba(255, 255, 255, 0.8); }

.bg-gray {
  background-color: #F5F5F5; }

.color-gray {
  color: #F5F5F5; }

.bg-gray-dark {
  background-color: #B3B3B3; }

.color-gray-dark {
  color: #B3B3B3; }

.bg-beige {
  background-color: #C7A57F; }

.color-beige {
  color: #C7A57F; }

.bg-red {
  background-color: #B24A4A; }

.color-red {
  color: #B24A4A; }

.txt-link {
  color: #C7A57F; }
  .txt-link > a, .txt-link > u {
    color: #C7A57F;
    border-bottom-color: #C7A57F; }

.nav-list a:after {
  border-bottom-color: #C7A57F; }
.nav-list a:hover {
  color: #C7A57F; }

.btn {
  background-color: #C7A57F; }
  .btn-icon-blog:before {
    background-image: url("../img/icon_blog.svg"); }
  .btn-icon-instagram:before {
    background-image: url("../img/icon_instagram.svg"); }

.border {
  border-color: #000000; }

.border-b-large:after {
  border-bottom-color: #000000; }

.gmap {
  border-color: #ffffff; }

.l-header:after {
  background-image: url("../img/bg_header.svg"); }

@media screen and (max-width: 480px) {
  .l-nav {
    background: #ffffff; } }

#blog > .l-container:before {
  background-image: url("../img/bg_blog.jpg"); }

#concept > .l-container:before {
  background-image: url("../img/bg_concept.png"); }
@media screen and (max-width: 480px) {
  #concept .l-title {
    color: #ffffff; } }
@media screen and (max-width: 480px) {
  #concept .border-b-large:after {
    border-bottom-color: #ffffff; } }

#menu {
  background-image: url("../img/bg_menu.png"); }
  #menu .l-content-box {
    border-color: #000000; }

#stylist {
  background-image: url("../img/bg_stylist.jpg"); }
  @media screen and (max-width: 480px) {
    #stylist .l-title {
      color: #ffffff; } }
  @media screen and (max-width: 480px) {
    #stylist .border-b-large:after {
      border-bottom-color: #ffffff; } }

#hairstyle {
  background-image: url("../img/bg_hairstyle.png"); }

/*# sourceMappingURL=common.css.map */