@charset "utf-8";

/* 
 Author:       Torus Dep't Planning
 Author URI:   http://torus.g-art-man.com/
*/

/*==================================================
 * basic
 *================================================*/

body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
    overflow: hidden;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
    padding-top: 89px;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

article {
   margin: 60px 0;
   position: relative;
}

article.first {
   padding-top: 0;
}
content{
}
img {
   height: auto;
   max-width: 100%;
}

::selection {
    background: #FAFF00;
    color: #000;
}

::-moz-selection {
    background: #FAFF00;
    color: #000;
}
a {
   -webkit-transition: all 0.2s;
   -moz-transition: all 0.2s;
   -o-transition: all 0.2s;
   transition: all 0.2s;
   text-decoration: none;
   color: #000;
}
a img:hover{
   opacity: 0.7;
}
p {
   margin: 1em 0;
   font-size: 14px;
}
pre{
   margin: 1em 0;
   font-size: 14px;
   font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   margin: 10px 0;
}

h3{
   font-size: 18px;
}
h3 span{
   font-family: 'Amiri', serif;
   font-style: italic;
   font-size: 34px;
   font-weight: lighter;
   display: block;
}
ul,ol{
   font-size: 14px;
   list-style: none;
}
.smaller{
   font-size: 90%;
}
.Box {
   padding: 0 5%;
   max-width: 1100px;
   margin: auto;
   position: relative;
}
.innerBox {
   max-width: 90%;
   margin: auto;
   position: relative;
}
.colum2{
   font-size: 0;
   text-align: center;
}
.colum2 li {
   display: block;
   text-align: left;
   font-size: initial;
   padding: 10px 1%;
}
.colum3{
   font-size: 0;
   text-align: center;
}
.colum3 li {
   display: block;
   text-align: left;
   padding: 10px 0;
   font-size: initial;
}
.colum4{
   font-size: 0;
}
.colum4 li {
   display: inline-block;
   width: 49%;
   padding: 2px;
   vertical-align: top;
}
.check li{
   position: relative;
   list-style: none;
   padding-left: 40px;
   margin-bottom: 0;
}
.check li:before{
   content: url(../img/check.svg);
   margin-right: 6px;
   vertical-align: middle;
   width: 20px;
   position: absolute;
   left: 1px;
}
.subTitle{
   line-height: 1.2em;
   margin: 0;
   font-size: 32px;
}
.subTitleGray{
   color: #B3B3B3;
   
   font-size: 26px;
   font-weight: bold;
}
.txtr{
   text-align: right;
}
.LR {
   display: table;
}

.fontL {
   margin-left: 3%;
}
.fontL h2 {
   margin: 0;
   color: #808080;
   font-size: 24px;
}
.fontL h2 span {
   font-size: 40px;
   margin-right: 10px;
   color: #000;
}

.fontR {
   margin-right: 3%;
}
.fontR h2 {
   margin: 0;
   color: #808080;
   font-size: 24px;
}
.fontR h2 span {
   font-size: 40px;
   margin-left: 10px;
   color: #000;
}

.underG{
   display: block;
   color: #B3B3B3;
}
.arrow{
   position: relative;
   display: inline-block;
   font-size: 18px;
   font-weight: bold;
   color: #000;
}

.arrow span {
   position: relative;
   top: 50%;
   margin-left: 10px;
   width: 90px;
   height: 1px;
   content: "";
   background: #000;
   display: inline-block;
}
.arrow:hover > span,
a:hover > .arrow > span{
   -webkit-transition: all 0.2s;
   -moz-transition: all 0.2s;
   -o-transition: all 0.2s;
   transition: all 0.2s;
   margin-left: 20px;
}
.arrow span::after {
   position: absolute;
   top: 50%;
   right: 0;
   width: 20px;
   height: 1px;
   content: "";
   background: #000;
   display: inline-block;
   transform: rotate(20deg);
   margin-top: -4px;
}
.wPC {
   display: none;
}

.wSP {
   display: block;
}

.arrowBox {
   text-align: center;
   display: block;
   position: relative;
   padding: 40px 0;
   width: 250px;
   margin: auto;
}
.arrowBox a,
.arrowBox div{
   background: #000;
   color: #fff;
   margin: auto;
   display: block;
   padding: 20px 0;
}
.arrowBox a:after,
.arrowBox div:after {
   position: absolute;
   top: 50%;
   right: 0px;
   width: 30px;
   height: 1px;
   content: "";
   background: #fff;
   display: inline-block;
}

.butonArrow {
   position: absolute;
   top: 50%;
   right: -30px;
   width: 30px;
   height: 1px;
   content: "";
   background: #000;
   display: inline-block;
}

.butonArrow:after {
   position: absolute;
   top: 50%;
   right: 0px;
   width: 20px;
   height: 1px;
   content: "";
   background: #000;
   display: inline-block;
   transform: rotate(20deg);
   margin-top: -4px;
}

.arrowBox:hover > .butonArrow{
   -webkit-transition: all 0.2s;
   -moz-transition: all 0.2s;
   -o-transition: all 0.2s;
   transition: all 0.2s;
   right: -40px;
   width: 40px;
}
.arrowBox:hover > a::after{
   -webkit-transition: all 0.2s;
   -moz-transition: all 0.2s;
   -o-transition: all 0.2s;
   transition: all 0.2s;
   width: 20px;
}
.borderLink{
   text-align: center;
   display: block;
   line-height: 70px;
   margin: 50px 0 100px;
   position: relative;
   display: table;
   width: 100%;
}
.borderLink a{
   padding: 0px 30px;
   font-size: 14px;
  position: relative;
  z-index: 2;
  background-color: #fff;
  border: 2px solid #333;
  color: #333;
  line-height: 50px;
  overflow: hidden;
   position: absolute;
   margin-left: -135px;
}

.borderLink a::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.borderLink a,
.borderLink a::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.borderLink a:hover {
  color: #fff;
}
.borderLink a::after {
  top: 0;
   left: -100%;
  width: 100%;
  height: 100%;
}
.borderLink a:hover::after {
  top: 0;
   left: 0;
  background-color: #333;
}
.scroll {
   font-family: 'Gentium Book Basic', serif;
   transform: rotate(90deg);
   position: absolute;
   margin-top: -100px;
   right: -10px;
   font-style: italic;
}

.scroll:after {
   content: '';
   width: 0;
   border-top: solid 1px #000;
   position: absolute;
   margin-left: 10px;
   height: 0px;
   padding-bottom: 2px;
   margin-top: 10px;
   -webkit-transition: all 1s .5s;
   -moz-transition: all 1s .5s;
   -o-transition: all 1s .5s;
   transition: all 1s .5s;
}
.is-animated.scroll:after {
   width: 110px;
}


.lineL,.lineR{
   font-family: 'Gentium Book Basic', serif;
   font-style: italic;
   transform: rotate(90deg);
   position: absolute;
   top: 0px;   
}
.lineL {
   left: 30px;
   transform-origin: 0 0;
}
.lineR {
   right: -90px;
   transform-origin: 0% 0%;
}


.lineL:after,.lineR:after{
   content: '';
   position: absolute;
   width: 0px;
   border-top: solid 1px #000;
   margin-left: 10px;
   height: 0px;
   padding-bottom: 2px;
   margin-top: 10px;
   -webkit-transition: all 1s .5s;
   -moz-transition: all 1s .5s;
   -o-transition: all 1s .5s;
   transition: all 1s .5s;
}
.is-animated.lineL:after,.is-animated.lineR:after{
  width: 300px;
}
.img-wrap {
    overflow: hidden;
    position: relative;
    transform: translate(0, 0, 0);
    background-color: transparent;
}
.img-wrap:before,.img-wrap:after { 
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;   
}
.img-wrap:before {  
  background: #000;
  z-index: 2;
}
.img-wrap:after {  
  background: #fff;
  z-index: 1;
}
.is-animated.img-wrap:before {
  animation: img-wrap 0.5s cubic-bezier(.4, 0, .2, 1) forwards;
}
.is-animated.img-wrap:after {
  animation: img-wrap 0.5s cubic-bezier(.4, 0, .2, 1) .4s forwards;
}
@keyframes img-wrap {
  100% {
    transform: translateX(100%) ;
  }
}

video{
   width: 100%;
   max-width: 870px;
   max-height: 600px;
   display: block;
}

@media screen and (max-width: 960px) {
   .contentR{
      padding-left: 30px;
   }
   .topConcept h2{
      font-size: 26px;
   }
   .fontL h2 span,
   .fontR h2 span{
       display: block; 
   }
   .footerBnr{
      display: none;
      position: fixed;
      bottom: 0;
      background: #C69C6D;
      right: 0;
      z-index: 10;
      width: 100%;
      text-align: center;
   }
   .footerBnr a{
      margin: 0;
      font-size: 16px;
      display: inline-block;
      padding: 15px 20px;
      height: 50px;
      vertical-align: middle;
      position: relative;
      color: #fff;
   }
   .footerBnr img{
   width: 40px;
   position: absolute;
   height: 24px;
   }
}
@media screen and (min-width: 960px) {
   body{
      padding-top: 110px;
   }
   .Box{
      
   }
   h2{
      font-size: 50px;
   }
   article {
      margin: 100px 0;
   }
   .wPC {
      display: block;
   }
   .wSP {
      display: none;
   }
   p {
      font-size: 16px;
   }
   pre{
      font-size: 16px;      
   }
   ul,ol{
      font-size: 16px;
   }
   .subTitle{
      font-size: 50px;
   }
   .subTitleGray{
      font-size: 40px;
   }
   .colum2 > li {
      width: 50%;
      display: inline-block;
      vertical-align: top;
   }
   .colum3 > li {
      width: 33%;
      display: inline-block;
      padding: 0% 2%;
      vertical-align: top;
   }
   .colum4 > li {
      width: 25%;
   }
   .arrowBox {
      width: 400px;
   }
   .arrowBox a:after,
   .arrowBox div:after {
      width: 60px;
   }
   .butonArrow {
      right: -60px;
      width: 60px;
   }
   .arrowBox:hover > .butonArrow{
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s;
      right: -70px;
      width: 70px;
   }
   .arrowBox:hover > a::after{
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s;
      width: 50px;
   }
   .fontL {
      left: 40px;
      top: 0;
      transform: rotate(90deg);
      position: absolute;
      transform-origin: 0 0;
   }
   .fontL h2 {
      margin: 0;
   }
   .fontL h2 span {
      font-size: 60px;
   }

   .fontR {
      right: 40px;
      top: 0;
      transform: rotate(90deg);
      position: absolute;
      transform-origin: 0 0;
   }
   .fontR h2 {
      margin: 0;
   }
   .fontR h2 span {
      font-size: 60px;
   }
   
   .footerBnr{
      display: none;
   }
   .is-animated.img-wrap.delay1:before {
     animation: img-wrap 0.5s cubic-bezier(.4, 0, .2, 1) .2s forwards;
   }
   .is-animated.img-wrap.delay1:after {
     animation: img-wrap 0.5s cubic-bezier(.4, 0, .2, 1) .7s forwards;
   }
   .is-animated.img-wrap.delay2:before {
     animation: img-wrap 0.5s cubic-bezier(.4, 0, .2, 1) .4s forwards;
   }
   .is-animated.img-wrap.delay2:after {
     animation: img-wrap 0.5s cubic-bezier(.4, 0, .2, 1) .9s forwards;
   }
}


/*==================================================
 * Slider
 *================================================*/
.sliderWrap .sliderBG{
   min-width: 600px;
   width: 100%;
}
.sliderWrap a{
   color: #000;
}
.sliderWrap h2{
   margin: 0;
}
.sliderWrap h3{
   margin: 0;
   color: #808080;
}
.sliderBGleft{
   
   margin-left: 0;
   margin-top: 20px;
   width: 100vw;
   z-index: 0;
}
.sliderBGcenter{
   position: absolute;   
   right: 0vw;
   bottom: 0;
   z-index: -1;
   height: 35.3vh;
}
.sliderBGright{
   position: absolute;
   
   left: 95%;
   width: 100vw;
   top: 80px;
   z-index: -2;
   opacity: 0.5;
}
.sliderBox01{
   position: absolute;
   width: 23%;
   top: 0;
   left: 5%;
   z-index: -1
}
.sliderBox02{
   position: absolute;
   width: 31%;
   bottom: 34%;
   right: 3%;
}
.sliderBox03{
   position: absolute;
   width: 17%;
   top: 49%;
   left: 4%;
}
.sliderBox04{
   position: absolute;
   width: 25%;
   top: 0%;
   right: 5%;
}
.sliderBox05{
   position: absolute;
   width: 14%;
   top: 0;
   left: 13%;
}
.sliderBox06{
   position: absolute;
   width: 24%;
   bottom: 21%;
   left: 71%;
}
.sliderBox07{
   position: absolute;
   width: 13%;
   top: 21%;
   right: -8%;
}
.sliderBox08{
   position: absolute;
   width: 19%;
   top: 12%;
   left: 6%;
}
.sliderBox09{
   position: absolute;
   width: 23%;
   bottom: 1%;
   right: 10%;
   z-index: 0;
}
.slickTxt{
   background: #fff;
   position: absolute;
   bottom: 0;
   left: 0;
   padding: 10px;
   width: 87%;
   max-width: 85vw;
   min-height: 90px;
}
.slickDelay{
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
    opacity: 0;
    -webkit-transition: 0.8s;
    transition: 0.8s;
}
h3.slickDelay{
    -webkit-transition-delay: .2s;
    transition-delay: .2s;   
}
.slickDelay.SDelay1{
    -webkit-transition-delay: .2s;
    transition-delay: .2s;   
}
.slickDelay.SDelay2{
    -webkit-transition-delay: .4s;
    transition-delay: .4s;   
}
.slickDelay.SDelay3{
    -webkit-transition-delay: .6s;
    transition-delay: .6s;   
}
.slick-active .slickDelay{
   -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;   
}

.thumbnail .slick-list{
   padding-bottom: 10px;
}
.thumbnail .slick-list img{
   margin: auto;
}
.thumbnail-thumb .slick-track{
   margin: auto;
   text-align: center;
   max-width: 325px;
   width: 100% !important;
}
.thumbnail-thumb .slick-track .slick-slide{
   width: 33% !important;
   padding: 0 1%;
}
@media screen and (max-width: 960px) {
   .slick .slick-slide{
      height:  79vw !important;
   }
   
}
@media screen and (max-width: 500px) {
   .sliderWrap h2{      
   font-size: 16px;
   }
   .slickTxt{      
   min-height: 60px;
   }
}
@media screen and (min-width: 960px) {
   .slick .slick-slide{
      height: 47vw !important;
   }
   .sliderWrap h2{
      font-size: 31px;
   }
   .sliderWrap h3{
      font-size: 26px;
   }
   .slickTxt{
      
   left: 50%;
   margin-left: -42vw;
   padding: 30px;
   width: 50%;
   }
.slick-prev,.slick-next{
   width: 50px;
height: 50px;
      
   }
   .sliderBGleft{
      margin-left: 10%;
      margin-top: 3vw;
      width: 50vw;
      left: 0;
   }
   .sliderBGcenter{ 
      left: 52vw;
      bottom: 0;
      height: 36.3vw;
   }
   .sliderBGright{
      left: 92%;
      width: 66vw;
      bottom: 0;
   }
   .sliderBox01{
      width: 23%;
      top: 0;
      left: 5%;
      z-index: -1
   }
   .sliderBox02{
      width: 18%;
      bottom: 14%;
      right: 10%;
   }
   .sliderBox03{
      width: 17%;
      top: 39%;
      left: 4%;
   }
   .sliderBox04{
      width: 25%;
      top: 14%;
      right: 10%;
   }
   .sliderBox05{
      width: 14%;
      top: 0;
      left: 13%;
   }
   .sliderBox06{
      width: 24%;
      bottom: 11%;
      left: 41%;
   }
   .sliderBox07{
      width: 13%;
      top: 17%;
      right: 7%;
   }
   .sliderBox08{
      width: 19%;
      top: 12%;
      left: 6%;
   }
   .sliderBox09{
      width: 23%;
      bottom: 14%;
      right: 3%;
      z-index: -2;
   }
}
/*==================================================
 * Header
 *================================================*/

header {
   position: fixed;
   height: 30px;
   z-index: 10000000;
   display: table;
   background: rgba(255,255,255,0.9);
   width: 100%;
   box-shadow: 0 0px 6px rgba(0,0,0,0.2);
   top: 0;
}
.logo img{
   width: 150px;
}
.gnaviBtn {
   position: fixed;
   top: 32px;
   right: 32px;
   z-index: 1001;
}
.breadcrumb{   
   padding-bottom: 20px;
   position:relative;
}
.breadLeft:after{
   content: '';
   width: 20px;
   border-top: solid 1px #000;
   position: absolute;
   margin-left: 10px;
   height: 0px;
   padding-bottom: 2px;
   margin-top: 10px;
}
.breadLeft{
   margin-right: 40px;
}
.gnaviBtn a {
   margin: 0 4px;
}

.gnaviBtn .reserve {
   background: #C69C6D;
   padding: 4px;
   display: inline-block;
   vertical-align: 14px;
   font-size: 14px;
}
.gnaviBtn .reserve span {
   border: solid 1px #fff;
   padding: 2px 25px;
   display: inline-block;
   color: #fff;
}

.reserveWrap a {
   background: #C69C6D;
   padding: 4px;
   vertical-align: 14px;
   position: relative;
   font-size: 25px;
   display: block;
   margin: 10px 0;
   text-align: center;
}
.reserveWrap a span {
   border: solid 1px #fff;
   padding: 6px 25px;
   display: block;
   color: #fff;
   padding-left: 40px;
   height: 46px;
   vertical-align: middle;
}
.reserveWrap a.phone{
   font-size: 28px;
}
.reserveBox{
   border: solid 1px;
   padding: 20px 10px 0;
   position: relative;
   margin: 0 10px;
}
.reserveBox h2{
   position: absolute;
   top:-40px;
   z-index: 1;
   font-size: 40px;
}
.reserveBox h2 span{
   color: #808080;
   font-size: 24px;
   padding-left: 10px;
}
.reserveBox h2:before{
   content: '';
   position: absolute;
   background: #fff;
   height: 50px;
   width: 312px;
   left: -50px;
   z-index: -1;
}
.download h4{
   display: inline-block;
   margin: 0;
   margin-bottom: 5px;
}
.downloadLink{
   display: inline-block;
}
.download a{
   background: #C69C6D;
   color: #fff;
   padding: 2px 24px;
   font-weight: bold;
   border-radius: 30px;
   margin-left: 2px;
   font-size: 14px;
   vertical-align: 2px;
}

.calender:before{
   content: url(../img/iconReserve.svg);
   position: absolute;
   left: 50%;
   margin-left: -83px;
   margin-top: 6px;
}
.phone:before{
   content: url(../img/iconTel.svg);
   position: absolute;
   left: 50%;   
   margin-left: -110px;
   margin-top: 8px;
}

.header div{
   padding: 30px 10px;
   text-align: center;
   color: #fff;
}
.header h1{
   font-size: 22px;
}
.header h1 span{
   display: block;
   font-size: 36px;
   font-weight: lighter;
}
.headerCmt{
   background: url(../img/headerCmt.jpg)no-repeat;
   background-position: center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-repeat: no-repeat;
   background-size: cover;   
}
.headerMenu{
   background: url(../img/headerMenu.jpg)no-repeat;
   background-position: center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-repeat: no-repeat;
   background-size: cover;   
}
.headerSBC{
   background: url(../img/headerSBC.jpg)no-repeat;
   background-position: center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-repeat: no-repeat;
   background-size: cover;   
}
.headerStaff{
   background: url(../img/headerStaff.jpg)no-repeat;
   background-position: center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-repeat: no-repeat;
   background-size: cover;   
}
.headerVoice{
   background: url(../img/headerVoice.jpg)no-repeat;
   background-position: center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-repeat: no-repeat;
   background-size: cover;   
}
.headerSalon{
   background: url(../img/headerSalon.jpg)no-repeat;
   background-position: center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-repeat: no-repeat;
   background-size: cover;   
}
.headerBlog{
   background: url(../img/headerBlog.jpg)no-repeat;
   background-position: center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-repeat: no-repeat;
   background-size: cover;   
}
.headerStyle{
   background: url(../img/headerStyle.jpg)no-repeat;
   background-position: center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-repeat: no-repeat;
   background-size: cover;   
}

.logo{
   display: inline-block;
   margin: 13px 10px 0;
   13px;
   max-width: calc(100% - 240px);
}


@media screen and (max-width: 960px) {
   .gnaviBtn{
      display: none;
   }
   .header{
      padding: 0;
   }   
   .reserveWrap a.phone span{      
      padding: 6px 0px;
      padding-left: 10px;
   }
}

@media screen and (min-width: 960px) {
   header {
   }
   .header div{
      padding: 50px 10px;
   }
   .header h1{
      font-size: 30px;
   }
   .header h1 span{
      font-size: 70px;
   }
   .logo img{
      width: 172px;
   }
   .reserveWrap a{      
      display: inline-block;
      margin: 10px 5px;
   }
   .reserveWrap a span{
      padding-right: 45px;
      padding-left: 70px;
   }
   .reserveWrap a.calender:before{
      margin-top: 7px;
   }
   .reserveBox .reserveTxt{
      width:calc(100% - 570px);
      display: inline-block;
   }
   .reserveBox p{
      margin-top:7px;
      margin-bottom: 5px;
   }
   .reserveBox .reserveWrap{
      display: inline-block;
      vertical-align: top;
   }
   .reserveBox h2{      
      top: -50px;
   }
}

/*==================================================
 * Gnavi
 *================================================*/
.gnavi_list li.new a{
   position: relative;
   padding-left: 30px;
}
.new a:before{
   content: url(../img/new.svg);
	position: absolute;
	margin-left: -27px;
	text-align: center;
	height: 23px;
	width: 23px;
   top: -4px;
}
@-webkit-keyframes active-menu-bar02 {
	100% {
		height: 0;
	}
}
@keyframes active-menu-bar02 {
	100% {
		height: 0;
	}
}

@media screen and (max-width: 1399px) {
   header{      
      position: absolute;
      background: none;
      box-shadow: none;
   }
   .gnavi_block {
      background-color: rgba(0, 0, 0, 0.7);
      color: #ffffff;
      height: 500px;
      display: none;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      padding-top: 64px;
   }
   .gnavi_block ul {
      padding: 10px;
   }
   .gnavi_block ul li {
      line-height: 180%;
   }
   .gnavi_block ul li a {
      color: #ffffff;
      font-size: 16px;
      line-height: 260%;
      display: block;
      position: relative;
   }
   .gnavi_block ul li a:after{  
      content: '';
      width: 0%;
      border-top: solid 1px #fff;
      position: absolute;
      margin-left: 10px;
      padding-bottom: 2px;
      margin-top: 20px;
      -webkit-transition: all .5s;
      -moz-transition: all .5s;
      -o-transition: all .5s;
      transition: all .5s;
   }
   .gnavi_block ul li a:hover:after{  
      width: 100%;
   }
   .new a::before{
      top: 5px;
   }
   .onanimation {
      display: block;
      position: fixed;
   }
   .gnavi_box {
      display: inline-block;
      background: #000;
      padding: 10px;
   }
   .menu-trigger,
   .menu-trigger span {
      display: inline-block;
      transition: all .4s;
      box-sizing: border-box;
   }
   .menu-trigger {
      position: fixed;
      width: 70px;
      height: 64px;
      background: #000;
      color: #fff;
      float: right;
      right: 0;
      z-index: 10;
   }
   .menu-trigger span {
       position: absolute;
       left: 50%;
       width: 40px;
       height: 4px;
       background-color: #fff;
       margin-left: -20px;
   }
   .menu-trigger:after{
      content: 'ページ一覧';
      text-align: center;
      font-size: 10px;
      bottom: 5px;
      position: absolute;
      margin-left:10px;
   }
   .menu-trigger span:nth-of-type(1) {
       top: 10px;
   }
   .menu-trigger span:nth-of-type(2) {
       top: 22px;
   }
   .menu-trigger span:nth-of-type(3) {
       top: 34px;
   }
   .menu-trigger.active span:nth-of-type(1) {
       -webkit-transform: translateY(10px) rotate(-45deg);
       transform: translateY(10px) rotate(-45deg);
   }
   .menu-trigger.active span:nth-of-type(2) {
       left: 50%;
       opacity: 0;
       -webkit-animation: active-menu-bar02 .8s forwards;
       animation: active-menu-bar02 .8s forwards;
   }
   .menu-trigger.active span:nth-of-type(3) {
       -webkit-transform: translateY(-15px) rotate(45deg);
       transform: translateY(-15px) rotate(45deg);
   }
   .SPmenu{
      display: inline-block;
      right: 80px;
      position: fixed;
      top: 5px;
      z-index: 10;
   }
   .SPmenu a{
      display: inline-block;
      text-align: center;
      font-size: 10px;
      margin-right: 2px;
   }
   .SPmenu a span{
      background: #C69C6D;
      height: 40px;
      width: 40px;
      display: block;     
      border-radius: 50%;
      padding-top: 7px;
   }
   .SPmenu a span img{
      max-height: 25px;
   }
}
@media screen and (min-width: 1400px) {
   .menu-trigger{
      display: none;
   }
   .gnavi_block{
      display: inline-block;
      position: absolute;
      right: 130px;
      top: 35px;
   }
   .gnavi_list li{
      display: inline-block;
   }
   .gnavi_list li + li{
      border-left: solid 1px #ddd;
   }
   .gnavi_list li a{
      padding: 0 10px;
      font-size: 16px;
   }
   .logo{
      margin-top: 25px;
   }
   .SPmenu{
      float:right;
      right: 0;
      top: 0;
      width: 100px;
      background: #000;
      height:90px;      
   }
   .SPmenu a{
      color: #fff;
      font-size: 14px;
      text-align: center;
      display: block;
      height: 100%;
      padding-top: 20px;
   }
   .SPmenu a span{
      display: block;
   }
   .SPmenu a:nth-child(1),
   .SPmenu a:nth-child(2){
      display: none;
   }
   .gnavi_list li.new a{
      padding-left: 34px;
   }
   
}
/*==================================================
 * Footer
 *================================================*/

footer {
   background: #000;
   color: #fff;
   padding: 30px 2%;
}

footer a {
   color: #fff;
}

footer ul {
   text-align: center;
   font-size: 0;
   margin-bottom: 50px;
}

footer ul li {
   display: inline-block;
   border-left: solid 1px #fff;
   font-size: 13px;
   padding: 0 14px;
}

footer ul li:nth-child(1) {
   border-left: none;
}

.footerLogo {
   margin: 0;
   display: inline-block;
   margin-right: 20px;
}
.footerLogo img{
   width: 146px;
}
.footerR img {
   width: 100%;
}
.sns{
   display: inline-block;
}
.sns a{
   margin-right: 5px;
}
#goTop {
   font-family: 'Gentium Book Basic', serif;
   font-style: italic;
   transform: rotate(90deg);
   position: absolute;
   margin-top: -340px;
   right: -30px;
}

#goTop a:after {
   content: '';
   width: 0;
   border-top: solid 1px #000;
   position: absolute;
   margin-left: 10px;
   height: 0px;
   padding-bottom: 2px;
   margin-top: 10px;
   -webkit-transition: all 1s .5s;
   -moz-transition: all 1s .5s;
   -o-transition: all 1s .5s;
   transition: all 1s .5s;
}
.is-animated#goTop a:after {
   width: 170px;
}
#goTop a {
   color: #000;
}
.spFix{
   position: fixed;
   bottom: 0;
   text-align: center;
   width: 100%;
   background: #C69C6D;
   z-index: 10;
}
.spFix a{
   color: #fff;
   font-size: 0;
   padding: 14px 0px;
   display: block;
}
.spFix a span{
   display: inline-block;
   font-size: 14px;
   vertical-align: 6px;
   margin-right: 10px;
}
.spFix a img{
   display: inline-block;   
   width: 170px;
}

@media screen and (max-width: 960px) {
   footer ul{      
      text-align: left;
      display: table;
      margin-bottom: 30px;
      border-top: solid 1px;
      border-bottom: solid 1px;
      padding: 10px;
      width: 100%;
   }
   footer ul li{
      padding: 3px 0;
      float: left;
      width: 50%;
      border-left: none;
   }
}
@media screen and (min-width: 960px) {
   .footerL {
      display: inline-block;
      width: 50%;
   }
   .footerR {
      display: inline-block;
      width: 45%;
      float: right;
      vertical-align: top;
   }
   .footerMenu{
      
   padding: 0;
   }
   footer p {
      font-size: 14px;
   }
   #goTop {
      right: -10px;
   }
   .spFix{
      display: none;
   }
}



/*==================================================
 * FrontPage
 *================================================*/
.info{
   border: solid 1px;
   padding: 30px 20px 20px;
   position: relative;
}
.info h4{
   position: absolute;
   top: -20px;
   text-align: center;
   left: 50%;
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
   font-weight: lighter;
   width: 80%;
   font-size: 18px;
}
.info h4 span{
  position: relative;
  z-index: 2;
  display: inline-block;
  /*! margin: 0 2.5em; */
  padding: 0 1em;
  background-color: #fff;
  /*! text-align: left; */
}
.info p span{
   font-weight: bold;
}
.topSBCwrap .innerBox h2{
   margin-top: 0;
   font-size: 26px;
}
.topSBCwrap .innerBox h2 span{
   color: #39B54A;
}
time {
   font-family: 'Gentium Book Basic', serif;
   padding-bottom: 10px;
   display: block;
   font-size: 18px;
   font-style: italic;
}

.journalBG {
   position: absolute;
   font-size: 240px;
   left: 160px;
   margin-left: 0;
   color: #F1EFEE;
   top: 120px;
   z-index: -1;      
   font-weight: bold;
   transform: rotate(90deg);
   transform-origin: 0 0;
}

.jnlImg {
   display: block;
   margin: auto;
   position: relative;
   overflow: hidden;
   height: 300px;
   width: auto;
}
.cmtImg{
   z-index: -1;   
   margin-bottom: -70px;
   position: relative;
}
.cmtImg .arrow{
    position: absolute;
    bottom: 30px;
    color: #fff;
    font-size: 22px;
    right: 40px;
}
.cmtImg .arrow span::after{
   background: #fff;   
}
.cmtImg .arrow span{
   background: #fff;
   width: 95px;
   position: absolute;
   top: 30px;
   left: 0;
   margin-left: 0;
}
.cmtImg:after {
   position: absolute;
   content: '';
   bottom: 0;
   border-style: solid;
   border-width: 110px 0 0 340px;
   border-color: transparent transparent transparent #fff;
   z-index: 1;
   left: 0;
}
/*.cmtImg .img-wrap span{
   position: absolute;
   content: '';
   bottom: 4px;
   right: 0;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 0 110px 300px;
   border-color: transparent transparent #000000 transparent;
}*/

.jnlImg img {
   position: absolute;
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.topConcept{
   overflow: hidden;
   padding-bottom: 30px;
}
.topConceptBG{
   position: absolute;
   z-index: -1;
   margin-top: -10px;
   width: 50%;
   right: 0;
   top: 0;
}
.topCosy{
   background: url(../img/topCosy.jpg)no-repeat;
   background-position: center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-repeat: no-repeat;
   background-size: cover;   
   height: 150px;
   margin: 100px 0;
}
.topCosy img{
   position: absolute;
   right: 5%;
   margin-top: -30px;
   max-width: 90vw;  
}
.topSBC{
   border: solid 1px #000;
   margin-top: 30px;
}
.topSBC a{
   padding: 30px;
   display: block;
}
#topRecruit{
   margin-bottom: 100px;
}
#topRecruit .Box{   
   padding: 0 4%;
}
#topRecruit h2{
   margin-bottom: 5px;
}
#topRecruit p{
   margin: 0 0 10px;
}
#topStaff:before{
   content: '';
   position: absolute;
   z-index: -1;
   width: 30%;
   height: 100%;
   background: #000;
   margin-top: -30px;
}
#topStaff .lineL{
   color: #fff;
}
#topStaff .lineL:after{
   border-top: solid 1px #fff;
}
#topStaff img{
   width: 100%;
}
#topStaff img:hover{
   opacity: 1;
}
#topStaff .contentR{
   display: table;
}
.topStaffTxt{
   background: #fff;
   padding: 10px 20px;
   margin-top: -1em;
}
#topItem .innerBox{
   position: relative;
   display: table; 
   width: 100%; 
   
   max-width: 100%;
   margin-top: 20px;
}
#topItem .innerBox .arrowBox{
   position: absolute;
   left: 0;
   right: 0;
   
   margin-top: 30px;
}
#topItem img{
   width: 50%;
   height: 200px;
   float: left;
   object-fit: cover;
}

#topVoice h2{
   text-align: center;
   margin-bottom: 30px;
   font-size: 40px;
}
#topVoice h2 span{
   display: block;
   color: #808080;
font-size: 20px;
}

#topVoice ul.colum3{
   border: solid 1px ;
   padding: 10px;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: -moz-flex;
   display: flex;
   -webkit-box-lines: multiple;
   -moz-box-lines: multiple;
   -webkit-flex-wrap: wrap;
   -moz-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
#topVoice li a{
   display: block;
   padding: 10px 0;
}
#topVoice .colum3 li{
   padding: 0;
}
#topVoice h3{
   font-size: 16px;
   margin-top: 0;
}
#topStyle ul li img{
   width: 100%;
}
#topStyle .styleIg{
   position: absolute;
   top: 50%;
   left: 50%;
   background: #fff;
   width: 70px;
   height: 70px;
   padding: 20px;
   text-align: center;
   border-radius: 50%;
   margin-top: -35px;
   margin-left: -35px;
   z-index: 5;
}
.snapWrap{
   position: relative;
   max-width: 800px;
   margin: auto;
}
.snapWrap:before{
   content: '';
   position: absolute;
   z-index: 1000;
   height: 100%;
   width: 100%;
}
.adeleBox h2{
   margin-top: 0;
   font-size: 40px;
}

@media screen and (max-width: 500px) {
   .cmtImg .arrow{
      bottom: 60px;
      font-size: 20px;
   }
   .cmtImg .arrow span{
      top: 25px;
      width: 80px;
   }
}
@media screen and (max-width: 600px) {
   #topStyle .styleIg{
      width: 50px;
      height: 50px;
      padding: 12px 0;
      margin-left: -25px;
      margin-top: -32px;
   }   
}
@media screen and (max-width: 960px) {
   .infoWrap{
      margin-top: 100px;
   }
   .topSBCwrap .fontL{
      display: none;
   }
   #topVoice ul li{
      border-top: solid 1px;
      width: 100%;
   }
   #topVoice ul li:nth-child(1){
      border-top: none;
   }
   .topConceptBG{
      opacity: 0.5;
   }
   #topRecruit .colum2 li{      
      padding: 0;
   }
   #topItem{
      max-width: 100%;
   }
   .snapWrap{
      margin-top: 10px;
   }
}
@media screen and (min-width: 960px) {
   .info{
      padding: 20px 40px;
   }
   .info h4{      
   font-size: 20px;
   top: -23px;
   }
   .topSBCwrap .Box{
      padding-right: 0;
   }
   .topSBCwrap .colum2 img{
      padding-right: 20px;
   }
   .topSBCwrap .innerBox h2{
      font-size: 40px;
   }
   .topConcept p{
      width: 45%;
   }
   .topStaffTxt{      
      width: 70%;
      float: right;
      display: block;
      margin-top: 10px;
   }
   .journalBG{      
      font-size: 16vw;
      margin-left: -40vw;
      bottom: -139px;
      transform: none;
      left: 50%;
      top: auto;
   }
   #topCmt h3{
      font-size: 24px;
   }
   #topRecruit{
      margin-bottom: 200px;
   }
   #topRecruit h2{
   font-size: 30px;
   margin: 0;
   }
   #topStaff img{      
      width: 90%;
      float: right;
   }
   #topStaff::before{      
      margin-top: -60px;
      height: calc(100% + 30px);
   }
   #topItem .innerBox{      
      padding: 0 5%;
      max-width: 1100px;
      margin: auto;
      position: relative;
      padding: 0 10%;
   }
   #topItem img{
      height: 450px;
   }
   #topItem .topItemPom{
      padding-left: 60px;
   }
   #topItem .innerBox .arrowBox{      
      margin-top: 150px;
   }
   #topVoice ul li{
      border-left: solid 1px;
      vertical-align: top;
   }
   #topVoice ul li:nth-child(1){
      border-left: none;
   }
   #topVoice li a{
      padding: 0 10px;
      height: 100%;
   }
   #topStyle .styleIg{
      margin-left: -33px;
   }
   .topCosy{
      height: 250px;
   }
   .reserveBox{      
      padding: 30px;
      margin: 0;
   }
   .reserveBox h2::before{
      width: 340px;
      height: 80px;
   }
   #topVoice h2 span{      
      font-size: 30px;
      margin-top: -10px;
   }
   .adeleBox h2{
      font-size: 60px;
   }
}


/*==================================================
 * Commitment
 *================================================*/
.cmtSBC{
   background: url(../img/cmtSBCbg2.jpg)no-repeat;
   background-position: center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-repeat: no-repeat;
   background-size: cover;      
   padding: 50px 10px;
}
.cmtSBC .inner{
   background: rgba(255,255,255,0.7);
   max-width: 900px;
   margin: auto;
   padding: 2% 5% 30px;
   position: relative;
}
.cmtSBC h2{
   text-align: center;
}
.arrowWrap{
   position: absolute;
   right: 5%;
   width: 160px;
   bottom: 20px;
}
.cmtStyle{
   position: relative;
   max-width: 980px;
   margin: auto;
}
.cmtStyle:before{   
  content      : "";
  bottom: 0;
  left         : 0;
  position     : absolute;
  width        : 100%;
  height       : 966px;
  background   : #000;
  transform    : skewY(-10deg);
   z-index: -1;
  transform-origin: 0 0;
}
.cmtStyle h3{
    left: 25px;
    top: 0px;
    transform: rotate(90deg);
    position: absolute;
    transform-origin: 0 0;
   color: #fff;
    font-size: 18px;
    padding-left: 185px;
    bottom: 0px;
    font-weight: lighter;
}
.cmtStyle h3 span{
   display: inline-block;
   color: #000;
   margin-right: 20px;
   position: absolute;
   left: 0px;
   margin-top: -19px;
}
.cmtStyle ul li{
   text-align: center;
}
.GTS{
   background: url(../img/gtsBG.jpg)no-repeat;
   background-position: center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-repeat: no-repeat;
   background-size: cover;  
   padding: 60px 20px 30px;
   position:relative;
   margin: 70px 0 0px;
}
.GTS h3,.colorPoint h3,.cutMVT h3{
   color: #fff;
   background: #000;
   position: absolute;
   left: -20px;
   top: 20px;
   padding: 5px 10px;
   margin: 0;
   font-size: 16px;
   font-weight: lighter;
}
.cmtStyle h3 span.cmtGTST{
   font-size: 40px;
   margin-top: -25px;
}
.cutMVT{
   background: url(../img/cutMV.jpg)no-repeat;
   background-position: center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-repeat: no-repeat;
   background-size: cover;   
   height: 104px;
   position: relative;
}
.cutMVT h4{
   font-family: 'Amiri', serif;
font-style: italic;
font-size: 34px;
font-weight: lighter;
   color: #fff;
   border-bottom: solid 1px;
   width: 110px;
   right: 0;
   position: absolute;
   top: 60px;
   line-height: 1em;
}
.cutMVT h4:after{
   
}
.cmtArrow {
  text-align: center;
}
.treatmentMV video{
   box-shadow: -10px -10px;
   margin: 30px auto 60px;
}
.colorPoint{
   border: solid 10px #000;
   padding: 60px 0px 10px;
   position:relative;
   margin: 70px 0;
}
.colorPointTxt{
   
   padding: 10px 3%;
}
.colorPoint h4{
   font-weight: lighter;
}
.colorPoint p{
   margin-top: 0;
}
.borderLeft{
   font-weight: lighter;
   text-align: right;
   
   position: relative;
   margin-top: 20px;
}
.borderLeft:before{
   position: absolute;
   content: '';
   background: #000;
   height: 1px;   
   top: 50%;
   left: 0;
   border-bottom: solid 1px;
   width: 100%;
   z-index: -1;
}
.borderLeft:after{
   position: absolute;
   content: '';
   background: #fff;
   height: 30px;
   width: 140px;
   z-index: -1;
   right: 0;
}
.cutAfterMV video{
   max-width: 600px;
   margin: auto;
   box-shadow: 10px 10px;
}
@media screen and (max-width: 960px) {
   .treatmentMV video{
      max-height: inherit;
      height: 100%;
   }
   .cmtArrow h3 br{
      display: none;
   }
   .cmtArrow h3{
      margin-bottom: 50px;
      position: relative;
      margin-top: 30px;
   }
   .cmtArrow h3:after{
   position: absolute;
   width: 80px;
   height: 1px;
   content: "";
   background: #000;
   display: inline-block;    
   left: 50%;
      bottom: -10px;
      transform: rotate(90deg);      
      transform-origin: 0 0;
   }
   .colorPoint .colum3{
      padding: 0 3%;
   }
   .colorPoint .colum3 img{
      margin: auto;
      display: block;
   }
}
@media screen and (min-width: 960px) {
   .GTS h3,.colorPoint h3,.cutMVT h3{
      font-size: 18px;
      padding: 5px 20px;
   }
   .cmtStyle:before{
  height: 149px;      
   }
   .cmtStyle h3{      
   top: -10px;
   left: 27px;
   }
   .cmtStyle .Box{      
   padding: 0 4%;
   }
   .cmtStyle  .colum3 > li{
      
   padding: 0% 3%;
   }
   .colorPoint h4{
      font-size: 20px;
   }
   .cutMVwrap{
      height: 470px;
   }
   .cutMVT{      
   width: 61%;
   height: 360px;
   }
   .cutMVT h4{
      font-size: 50px;
      top: 90px;
      width: 230px;
   }
   .cutAfterMV{
      position: absolute;
      width: 390px;
      top: 30px;
      right: 6%;
   }
   .cutAfterMV .cmtArrow{
      position: absolute;
      bottom: -15px;
      right: 110%;
      width: 400px;
   }
   .GTSwrap{
      height: 490px;
   }
   .GTS{      
   padding-right: 350px;
   }
   .treatmentMV{
      position: absolute;
      top: 0;
      right: 12%;
      width: 210px;
   }
   .cmtArrow span{
   position: absolute;
   margin-left: 10px;
   width: 90px;
   height: 1px;
   content: "";
   background: #000;
   display: inline-block;      
   bottom: 19px;
   right: 0;
   }
   .cmtArrow span:after{      
   position: absolute;
   top: 50%;
   right: 0;
   width: 20px;
   height: 1px;
   content: "";
   background: #000;
   display: inline-block;
   transform: rotate(20deg);
   margin-top: -4px;
   }
   .treatmentMV .cmtArrow{
      position: absolute;
      right: 290px;
      width: 350px;
      bottom: 130px;      
   }
   
   .cmtArrow{
      text-align: left;
   }
}
/*==================================================
 * STEP BONE CUT
 *================================================*/
.sbcMV h3{
   text-align: center;
   margin: 30px 0 10px;
}
.sbcMV video{
   margin: auto;
   max-width: 800px;
}
.parallelT span{
   color: #B3B3B3;
   display: block;
}
.sbcImg01{
   position: absolute;
   width: 20%;
   right: 10%;
   top: -30px;
   max-width: 110px;
}
.sbcImg02{
   position: absolute;
   width: 150px;
   left: 5px;
   margin-top: -20px;
   z-index: 10;
}
.sbcModel li{   
   padding-bottom: 30px;
}
.sbcImg03{
   position: absolute;
   left: -40px;
   width: 35%;
   margin-top: -10px;
   z-index: -1;
   max-width: 300px;
}
.sbcPoint{   
   background: #F2F2F2;
   padding: 30px 5% 5%;
   box-shadow: 10px 10px;
   position: relative;
   margin: 50px 0;
}
.pointNo{   
   background: #000;
   color: #fff;
   position: absolute;
   padding: 1px 15px 5px;
   top: -20px;
   left: -10px;
   z-index: 1;
}
.pointNo span{
   font-size: 33px;
   font-weight: bold;
}
.sbcPointFont{
   height: 25px;
   position: absolute;
   top: 7px;
   right: 3%;
}
.sbcPointImg{
   margin: auto;
   display: block;
   border: solid 1px;
   margin-top: 30px;
}
.sbcPoint .colum2 img{
   border: solid 1px;   
}
.brooklyn{
   margin-top: 100px;
   padding: 0 3%;
}
.brooklynBnr{
   position: absolute;
   width: 20%;
   right: 10px;
   top: -60px;
   max-width: 180px;
}
@media screen and (max-width: 600px) {
   .parallelTsub{
   width: 60%;      
   }   
   .sbcImg01{      
   width: 100px;
   top: 50px;
   right: 4%;
   }
   .sbcPoint h3 br{
      display: none;
   }
}
@media screen and (max-width: 960px) {
   .sbcPoint2 .sbcPointFont{      
   height: 32px;
   }
   .sbcPoint3 .sbcPointFont{      
   height: 35px;
   }
   
}
@media screen and (min-width: 960px) {
   .parallelT span{
      font-size: 40px;
      margin-left: 10px;
      display: inline-block;
      margin-right: 90px;
   }
   .parallelTsub{
      font-size: 26px;
   }
   .sbcMV h3{
      font-size: 27px;
   margin: 30px 0 ;
   }
   .sbcMV h3 br{
      display: none;
   }
   .sbcPoint{      
   padding-top: 130px;
   margin: 150px 0;
   }
   .sbcPoint3{      
   padding-top: 110px;
   }
   .sbcImg01{
      width: 150px;
      right: 10px;
      top: -40px;
      max-width: 150px;
   }
   .sbcImg02{      
   left: -30px;
   width: 180px;
   }
   .sbcImg03{
      
   left: 5%;
   width: 24vw;
   margin-top: -50px;
   }
   .sbcModelWrap{
      
   padding: 0 3%;
   }
   .sbcModel{      
   margin-top: 50px;
   }
   .sbcPoint h3{      
   position: absolute;
   top: -30px;
   left: 91px;
   font-size: 30px;
   }
   .sbcPointFont{
      position: absolute;
      right: 15px;
      height: inherit;
      top: 70px;
   }
   .sbcPoint3 .sbcPointFont{
      
   top: 40px;
   }
   .brooklyn{
      margin-top: 230px;
   }
   .brooklynBnr{
      
   top: -150px;
   }
}



/*==================================================
 * Menu
 *================================================*/
.menuWrap .colum2 li{   
   padding: 0px 1%;
}
.menu{   
   margin: 30px 0;
}
.menu .txtr{
   margin-top: 5px;
}
.menu h2{
   border-bottom: solid 3px;
   margin-bottom: 0;
   position: relative;
}
.menu h2 span{
    color: #808080;
    font-size: 18px;
   font-weight: lighter;
    position: absolute;
    right: 0;
    bottom: 4px;
}
table{
   width: 100%;
   border-collapse: collapse;
}
th,td{
   border-bottom: solid 1px;
   padding: 14px 2%;
}
th{
   text-align: left;
   font-weight: lighter;
   vertical-align: top;
}
.menu td{
   font-weight: bold;
   text-align: right;   
}
td span{
   display: block;
   font-weight: lighter;
}
#shop{
   margin-top: -90px;
   padding-top: 90px;
}
.shopWrap img{
   box-shadow: 0 0px 6px rgba(0,0,0,0.2);
}
.itemTL h2{
   font-size: 24px;
}
.itemTwrap{
   position: relative;
}
.itemTwrap .lineR{
   
   right: -45px;
}
.itemWrap .colum2 >li img{
   width: 100%;
}
.itemWrap h3{
   color: #C69C6D;
   font-size: 22px;
}
.itemList li{   
   font-size: 14px;
   padding: 0;
}
.itemFontL h2 {
   color: #808080;
   font-size: 14px;
   padding: 4px 6%;
}
.itemFontL h2 span {
   font-size: 24px;
   margin-right: 10px;
   color: #fff;
}
.item1, .item2{
   margin-bottom: 150px;
}
.item1 .inner, .item2 .inner{
   background: #fff;
}
.item1:before{
   content: '';
   position: absolute;
   width: 30vw;
   height: 300px;
   border: solid 7px #000;
   right: -20px;
   bottom:-80px; 
   z-index: -1;
}
.item2:before{
    content: ''; 
   position: absolute;
   width: 7px;
   height: 350px;
   background: #000;
   right: 1%;
   bottom:-40px; 
}

.item{
   margin: 30px 0;
   display: table;
   width: 100%;
   position: relative;
}
.item ul{
   margin-top: 10px;
}
.itemSBCP li{
   text-align: center;
}
.itemSBCP img{
   margin-left: 20%;
   width: 163px;
}
.bx-wrapper{
   position: relative;
}
.bx-controls{
   position: absolute;
   top: 50%;
   width: 100%;
}
.bx-prev,
.bx-next{
   line-height: 1;
   opacity: .75;
   color: black;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   position: absolute;
   content: '';
   width: 16px;
   height: 16px;
   margin-top: -7px; 
   border-top: solid 3px #000;
   border-right: solid 3px #000;  
}
.bx-prev {
   -webkit-transform: rotate(-135deg);
   transform: rotate(-135deg);
   left: 20px;
}
.bx-next{
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
   right: 20px;
}
.bx-prev:hover {
  background-image: url(../images/btn_prev_on.png);
}
.bx-next:hover{
  background-image: url(../images/btn_next_on.png);
}
@media screen and (max-width: 960px) {
   .itemFontL h2 span{
   }
.itemFontL:before {
   position: absolute;
   content: '';
   background: #000;
   height: 35px;
   width: 100%;
   z-index: -1;   
   left: 0;
}
}
@media screen and (min-width: 960px) {
   .itemFontL {
      top: 0px;
      transform: rotate(90deg);
      position: absolute;
      transform-origin: 0 0;
      left: 70px;
      margin-left: 0;
   }
   .itemFontL h2 {
      margin: 0;
      padding-left: 10px;
      padding-right: 150px;
      font-size: 24px;
   }
   .itemFontL h2 span {
      font-size: 50px;
   }
   .menuWrap{      
   padding: 0 3%;
   }
   .menuWrap .colum2 > li{      
   padding: 0px 3%;
   }
   .menu{      
   margin: 50px 0;
   }
   
   .menu h2 span{
      font-size: 30px;
   }
   .menu h2 span.menuTL{      
   position: relative;
   display: block;
   }
   .item{      
   margin: 50px 0;
   }
   .itemTL{
      width: 30%;
      display: inline-block;
      vertical-align: top;
   }
   .itemTL h2{
      font-size: 30px;
   }
   .itemTR{
      width: 69%;
      display: inline-block;
      padding-left: 5%;
   }
   .itemWrap{      
   padding-left: 9%;
   }
   .itemWrap .colum2 > li{
      
   padding: 10px 2%;
   }
   #shop{
      margin-top: -130px;
      padding-top: 130px;
   }
   .itemWrap h3{      
   font-size: 28px;
   margin-top: 0;
      font-weight: lighter;
   }
   .itemFontL h2:before{      
   position: absolute;
   content: '';
   background: #000;
   height: 300px;
   width: 100%;
   z-index: -1;   
   left: 0;
   }
   .itemL .itemImg{
      float: left;
      padding-right: 2%;
      width: 50%;
   }
   .itemL .itemTBox,
   .itemL > p,
   .itemL .itemOrder{
      float: right;
      padding-left: 2%;
      width: 50%;
      right: 0;
   }
   .itemR .itemImg{
      float: right;
      padding-left: 2%;
      width: 50%;
   }
   .itemR .itemTBox,
   .itemR > p,
   .itemR .itemOrder{
      width: 50%;
      float: left;
      padding-right: 2%;
   }
   .itemOrder .itemList{
      position: absolute;
      bottom: 0px;
   }
   .item2::before{
      content: '';
      width: 10px;
      height: 440px;
      right: 1%;
      bottom: auto;
      top: 71%;
   }
   .itemSBCP p{
      padding-right: 140px;
   }
   .itemSBCP img{
      margin-left: auto;
      position: absolute;
      top: -20px;
      right: -30px;
   }
   .SBCPmask .itemOrder{
      height: 370px;
   }
}
@media screen and (min-width: 1200px) {
   .itemFontL {
      left: 50%;
      margin-left: -515px;
   }
   .itemWrap{
      padding-left: 7%;
   }
   .item2::before{
   right: 50%;
   margin-right: -550px;
   }
}

/*==================================================
 * STAFF
 *================================================*/
.staff{
   display: table;
   position: relative;
   margin: 100px 0;
   width: 100%;
}
.staff img{
   margin: auto;
   display: block;
   margin-bottom: 20px;
}
.staff th{
   width: 165px; 
}
.staffT{
   background: #000;
   box-shadow: 10px 10px #CCCCD3;   
   margin-bottom: 30px;
}
.staff h2{
   color: #fff;
   font-weight: lighter;
   font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
   padding: 10px 11px;
}
.staff h2 span{
   font-family: 'Amiri', serif;
   display: block;
   font-size: 16px;
   border-top: solid 1px;
   font-style: italic;
}
@media screen and (min-width: 960px) {
   .staff h2{
      
   margin: 0;
   }
   .staff h2 span{
      font-size: 34px;
   }
   .staffL img{
      float: left;
      width: 48%;
   }
   .staffL .staffProf{
      float: right;
      width: 50%;
      padding: 200px 2% 0;
   }
   .staffL .staffT{
      position: absolute;
      width: 57%;
      left: 50%;
      margin-left: -50px;
      top: 30px;
   }
   .staffR img{
      float: right;
      width: 48%;
   }
   .staffR .staffProf{
      float: left;
      width: 50%;
      padding: 200px 2% 0;
   }
   .staffR .staffT{
      position: absolute;
      width: 55%;
      right: 50%;
      margin-right: -50px;
      top: 30px;
   }
   .assistant .staffL img{
      margin-top: -37%;
   }
}
@media screen and (max-width: 959px){
   .staffAll img{
      padding: 10px;
      margin-bottom: 60px;
   }
}

/*==================================================
 * VOICE
 *================================================*/
.voiceBG:before{
   content: '';
   position: absolute;
   background: #F2F2F2;
   width: 82%;
   height: 94%;
   max-width: 1100px;  
   left: 50%;
   margin-left: -41%;
   margin-top: 18px;
}
.voiceT h3{
   font-size: 18px;
   color: #B3B3B3;
   margin: -10px 0;
}
.voiceT h2{
   font-size: 26px;
}
.voiceWrap{   
   padding: 0 3%;
   margin-top: -30px;
}
ul.voice{   
   font-size: 0;
}
ul.voice > li{   
   font-size: inherit;
}
ul.voice > li{   
   padding: 20px 2%;
   width: 100%;
}
.border{
   border: solid 7px #000;
   padding: 2%;
   background: #fff;
}
.cat{
   width: 100%;
}
.cat li{   
   display: inline-block;
   color: #fff;
   font-size: 14px;
   padding: 3px 10px;
   margin-right: 3px;
   margin-bottom: 5px;
   margin-top: 5px;
}
.catCut{ background: #00B5FF; }
.catSBC{ background: #2E3192; }
.catColor{ background: #C69C6D;}
.catGTS{ background: #4D646E;}
.catTreatment{ background: #00D100;}
.catSet{ background: #E20086;}
.catSpa{ background: #FFC63D;}

.voiceTxt{
   border-top: solid 1px;   
}
.voicePerson{
   border-top: solid 1px;
   text-align: right;
   padding-top: 10px;
   margin-bottom: 5px;
}
@media screen and (min-width: 960px) {
   .voiceBG:before{      
   margin-top: 45px;
   }
   .voiceWrap{
      
   padding: 0 4%;
   }
   .voiceT h3{
      font-size: 20px; 
      display: inline-block;
   }
   .voiceT h2{
      font-size: 60px;        
      display: inline-block;
      margin-right: 10px;
      margin-bottom: -10px;
   }
   ul.voice > li{
width: 50%;
float: left;
   }  
ul.voice > li{   
   padding: 30px 10px;
}

}
@media screen and (min-width: 1100px) {
   .voiceBG:before{   
   width: 930px;
   margin-left: -470px;
   }   
}


/*==================================================
 * SALON
 *================================================*/
   .salon{
      position: relative;
   }
.salonL h2 span{
   color: #B3B3B3;
   display: block;
}
.salonL table tr{
   border-top: solid 1px;
}
.salonL{
   margin-bottom: 30px;
}
.salonL tr th{
   width: 20%;
}
.salonR{
    display: block;
    margin: auto;
    position: relative;
    overflow: hidden;
    height: 200px;
    width: auto;
}
.salonR img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.map iframe{
   width: 100%;
   height: 450px;
}
.salonGallery img{
   width: 100%;
}
@media screen and (min-width: 960px) {
   .salonL{
      display: inline-block;
      width: 60%;
   }
   .salonR{
      position: absolute;
      width: 36%;
      height: 670px;
      right: 0;
      top: 0;
   }
   .salonL h2 span{
      font-size: 40px;
      margin-top: -10px;
   }
   
}


/*==================================================
 * Blog
 *================================================*/
.posts h2{
   font-size: 24px;
}
.sideCat h2{
   color: #808080;
   font-size: 14px;
   background: #000;
   padding: 10px;
}
.sideCat h2 span{
   font-size: 20px;
   color: #fff;
}
.blogWrap .Box{
   display: table;
   width: 100%;
}
.posts li a{
   display: table;
   padding: 10px 0;
}
.posts img{
   display: table-cell;
}
.posts txt{
   display: table-cell;
   padding-left: 10px;
   width: 70%;
   vertical-align: top;
}
.blogCat li{
   color: #B3B3B3;
   display: inline-block;
   padding: 0;
   font-weight: bold;
}
.blogCat li + li{
   border-left: solid 1px;
   padding-left:5px;
}
.textOverflow {
    display: block;
    height: 4.6em;
    margin: 0;
    overflow: hidden;
}
.singlePost img{
   margin: auto;
   display: block;
}
.prevnext{
  border-top: solid 1px #808080;
  border-bottom: solid 1px #808080;
  font-size: 0;
  display: table;
   width: 100%;
}
.prevnext a{
  padding: 10px 30px;
  font-size: 16px;
  display: block;
}
.prevnext div{
  width: 50%;
  display: table-cell;
  position: relative;
  vertical-align: middle;
}
.prev{
  border-right: solid 1px #808080;
}
.next{
  text-align: right;
}
.prevnext div:nth-last-child(1){
   border-right: none;
}
.prevnext div:before{
   position: absolute;
   content: '';
   border-top: solid 1px #000;
   border-right: solid 1px #000;
   width: 20px;
   height: 20px;
   top: 50%;
   margin-top: -10px;
}
.prev:before{
   -webkit-transform: rotate(225deg);
   transform: rotate(225deg);
}
.next:before{
  right: 0;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
}


@media screen and (min-width: 960px) {
   .blogWrap main{
      display: inline-block;
      width:70%;   
      float: left;
      padding-right: 20px;
   }
   .blogWrap side{
      display: inline-block;
      width: 30%;
      vertical-align: top;
   }
   .posts txt{
      width: 80%;
      padding-left: 30px;
   }
   .singlePost h2{
      font-size: 28px;
   }
   .prevnext a {
       padding: 20px 30px;
   }
}

/*==================================================
 * Pager
 *================================================*/
#pagenation {
   position: relative;
   overflow: hidden;
   padding: 20px 0;
}
#pagenation ul {
    position:relative;
    left:50%;
    float:left;
    list-style: none;
}
#pagenation li {
    position:relative;
    left:-50%;
    float:left;
    margin: 3px 0px;
}
#pagenation li a {
    border:1px solid #000;
    margin: 0 3px;
    padding:3px 7px;
    display: block;
    text-decoration:none;
    color: #000;
    background: #fff;
}
#pagenation li.active a,
#pagenation li a:hover{
    border:solid 1px #000;
    color: #FFFFFF;
    background: #000;
}
@media screen and (min-width: 960px) {
   #pagenation li a {
      padding:8px 10px;
   }
}
/*==================================================
 * Style
 *================================================*/
.styleWrap h2{
   font-size: 20px;
}
.styleWrap h3{
   border-bottom: solid 3px;
   margin: 30px 0 0;
}
.styleWrap table th{
   width: 30%;
}
.stylistComment{
   display: table;
   width: 100%;
}
.stylistComment img{
   display: table-cell;
   margin-top: 1em;
}
.stylistComment txt{
   display: table-cell;
   padding-left: 10px;
   width: 70%;
   vertical-align: top;
}
.hairType txt{
   display: block;
   margin-bottom: 10px;
}
.hairType h4{   
   display: inline-block;
   margin: 0;
   margin-right: 10px;
}
.hairType p{
   display: inline-block;
   background: #C69C6D;
   border:solid 1px #C69C6D;
   color: #fff;
   width: 60px;
   padding: 1px;
   margin: 0 3px;
   text-align: center;
   font-size: 14px;
}
.hairType .none{
   background: #fff;
   color: #C69C6D;
}

.faceType{
   display: table;
}
.faceType h4{
   display: table-cell;
   width: 40px;
}
.faceType inner{
   display: table-cell;
   vertical-align: top;
}
.faceType txt{
   display:inline-block;
   width: 70px;
   text-align: center;
   margin-bottom: 10px;
}
.faceType inner p{
   margin:0;
}

.coupon{
   position: relative;
   border: solid 1px #000;
   padding: 10px 10px 10px;
}
.coupon h4{
   margin: 0;
   margin-top: 30px;
}
.coupon a{
   background: #C69C6D;
   color: #fff;
   padding: 10px;
   width: 100%;
   display: block;
   text-align: center;
}
.timing{
   background: #000;
   display: inline-block;
   position: absolute;
   padding: 3px 6px;
   top: 0;
   left: 0;
   color: #fff;
   text-align: center;
   font-weight: bold;
}
.coupon txt{
   display: table;
   width: 100%;
}
.coupon p{
   margin: 15px 0;
}
.coupon .price{
   color: #C00;
   font-weight: bold;
   font-size: 22px;
   margin: 10px 0;
}
.styleLi li {
   overflow: hidden;
   position: relative;
   /* 相対位置指定 */
}
.styleLi a {
   color: #fff;
}
.styleLi li .caption {
   font-size: 130%;
   text-align: center;
   padding-top: 80px;
   color: #fff;
}
.styleLi li .mask {
   width: 100%;
   height: 100%;
   position: absolute;
   /* 絶対位置指定 */
   top: 0;
   left: 0;
   opacity: 0;
   /* マスクを表示しない */
   background-color: rgba(0, 0, 0, 0.4);
   /* マスクは半透明 */
   -webkit-transition: all 0.2s ease;
   transition: all 0.2s ease;
   padding: 20px;
}
.styleLi li:hover .mask {
   opacity: 1;
   /* マスクを表示する */
}
.styleLi li txt {
    border-top: solid 1px #fff;
    display: block;
}
.styleLi li .length{
   background: #000;
   display: inline-block;
   padding: 0 10px;
   font-size: 12px;
}
.styleLi li p{
   margin: 5px 0;
}
.styleLi h4 {
    font-size: 16px;
   margin: 0;
}
.styleCheck{
   background: #F2F2F2;
}
.styleWrap .open{
   border: solid 1px;
   padding: 10px;
}
.styleWrap form{
   position: relative;
   margin: 20px 0 50px;
}
.styleWrap input[type="submit"]{
   background: #000;
   color: #fff;
   border-radius: 50%;
   width: 50px;
   height: 50px;
   position: absolute;
   right: 10px;
   z-index: 10;
   bottom: -25px;
   cursor: pointer;
}
.styleWrap form .inner{
   border-right: solid 1px;
   border-left: solid 1px;
}
.styleWrap table.styleCheck th{
      border-right: solid 1px;
  width: 20%;
   }
.styleCheck label input{
   margin-right: 10px;
}
.styleCheck label{
   display: inline-block;
   margin-right: 20px;
}
@media screen and (max-width: 960px) {
   .styleWrap table.styleCheck th,
   .styleWrap table.styleCheck td{
      display: block;
      width: 100%;
   }
   .styleWrap table.styleCheck th{
      border: none;
      padding-bottom: 0;
      font-weight: bold;
   }
   .styleWrap table.styleCheck td{
      padding-top: 5px;
   }
   .coupon .price{
      margin: 0;
      text-align: right;
   }
   .coupon p{
      margin-top: 0;
   }
   .styleWrap table.couponWrap th,
   .styleWrap table.couponWrap td{
      display: block;
      width: 100%;
   }
   .styleWrap table.couponWrap th{
      border-bottom: none;
      padding-bottom: 0;
      font-weight: bold;
   }
   .styleWrap table.couponWrap td{
      padding-top: 5px;
   }
}
@media screen and (min-width: 960px) {
   .styleWrap main{
      display: inline-block;
      width:70%;   
      padding-left: 20px;
   }
   .styleWrap side{
      display: inline-block;
      width: 30%;
      vertical-align: top;
      float: left;
   }
   .styleWrap h2{
      font-size: 24px;
   }
   .styleWrap h3{
      font-size: 20px;
   }
   .hairType h4{
      margin-right: 10px;
   }
   .hairType p{
      width: 60px;
   }
   .timing{      
      padding: 10px 6px;
   }
   .coupon h4{
      padding-left: 50px;
      margin-top: 0;
   }
   .coupon .price{
      float: right;
   }
}