@charset "utf-8";

/* CSS Document */
@font-face {
  font-family: "XANO-min";
  src: url(#);
  src: url(#) format('embedded-opentype'),
    url(#) format('woff'),
    url(#) format('truetype');
  font-weight: normal;
  font-style: normal;

}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
form,
input,
button,
p {
  margin: 0px;
  padding: 0px;
  font-size: 14px;
  font-family: "メイリオ", Meiryo, "游ゴシック", YuGothic, Hiragino Sans, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", Hiragino Kaku Gothic ProN, 'ＭＳ Ｐゴシック', sans-serif;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝", serif;
  line-height: 160%;
  color: #333;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  display: inline-block;
  display: inline;
  zoom: 1;
}

* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

.clear {
  clear: both;
}

img {
  vertical-align: middle;
  border: none;
  max-width: 100% !important;
  height: auto !important;
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

a img:hover {
  opacity: .5;
}

a {
  text-decoration: none;
  color: #333;
}

a:hover {
  opacity: 0.6;
}

ul {
  list-style: none;
}

/*.fead-mv {
    opacity: 0;
    transition: 1.5s;
}*/
.mv {
  opacity: 1;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex_c {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: justify;
  justify-content: center;
}

.totop {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 99;
  text-align: center;
  line-height: 28px;
  font-family: 'Petit Formal Script', cursive;
}

.totop img {
  width: 50px;
}

#wrapper {
  min-width: 1000px;
  overflow: hidden;
  margin: 0 auto;
  /*background: #FAFAFA;*/
}

#header,
#main,
#footer {
  width: 100%;
  margin: 0 auto;
}

#wrapper .mainSlide {
  text-align: center;
}

@media (max-width: 1024px) {

  #header,
  #main,
  #footer {
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 1220px) {
  #wrapper {
    min-width: 300px;
  }

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

#footer {
  background: rgb(254, 254, 254);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(254, 254, 254, 1)), to(rgba(246, 246, 246, 1)));
  background: linear-gradient(to bottom, rgba(254, 254, 254, 1) 0%, rgba(246, 246, 246, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe', endColorstr='#f6f6f6', GradientType=0);
}

.yazirushiUp img {
  display: none !important;
}

/*gnav*/
#gnav p span.n {
  display: none;
}

#gnav {
  padding: 30px 0 0 0;
}

@media (max-width: 1024px) {
  #gnav {
    position: fixed;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    background: none;
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
    -webkit-transition: ease .5s;
    transition: ease .5s;
    padding: 0;
    z-index: 101;
    border: none;
    padding-bottom: 0;

  }

  #gnav.fixed {
    top: 0;
    right: 0;
    left: auto;
    width: 200px;
    border: none;
    z-index: 101;
    padding-top: 0;
    padding-bottom: 0;
  }

  #header.btm {
    margin-bottom: 0;
  }

  #gnav ul li {
    display: block !important;
    width: auto;
    text-align: center;

  }

  #gnav ul li+li {
    padding-left: 0;
  }





  #gnav p {
    display: block;
    position: absolute;
    width: 38px;
    height: 38px;
    top: 0;
    left: -44px;
    border: 1px solid #fff;
    background: #280D03;
    cursor: pointer;
    opacity: 0.8;
    margin: 2px;
    box-shadow: 0px 0px 0px 2px #280D03;
    -moz-box-shadow: 0px 0px 0px 2px #280D03;
    -webkit-box-shadow: 0px 0px 0px 2px #280D03;
  }



  #gnav > li {
    float: none;
    width: auto;
    border-bottom: 1px dotted #cacad9;
    padding: 0;
    margin-top: 0;
    /* display: block !important; */
  }

  #gnav ul li a {
    height: auto;
    display: block;
    padding: 0;
  }

  #gnav.fixed li {
    padding: 0;
  }

  #gnav.fixed li a {
    padding: 10px 0 10px 0;
    line-height: 160%;
  }

  #gnav li.book .t {
    padding-top: 10px;
    padding-bottom: 5px;
  }

  #gnav li.book {
    padding-left: 0 !important;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block !important;
    border: none;
    margin-bottom: 10px;
  }

  #gnav.fixed li.book {
   display: block !important;
  }

  #gnav li.book a {
    margin: 0 auto;
    display: inline-block !important;
    padding-left: 40px;
    padding-right: 40px;
  }

  #gnav.action {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }

  #gnav p span.n {
    display: block;
    background: #fff;
    height: 2px;
    width: 26px;
    text-indent: -9999px;
    padding: 0;
    top: 50%;
    left: 6px;
    margin-top: -1px;
    position: absolute;
  }

  #gnav p span.n:before {
    display: block;
    content: "";
    background: #fff;
    height: 2px;
    width: 26px;
    position: absolute;
    top: -8px;
    left: 0;
  }

  #gnav p span.n:after {
    display: block;
    content: "";
    background: #fff;
    height: 2px;
    width: 26px;
    position: absolute;
    top: 8px;
    left: 0;
  }

  #gnav.action p span.n {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: ease .10s;
    transition: ease .10s;
  }

  #gnav.action p span.n:after,
  #gnav.action p span.n:before {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    top: 0;
    left: 0;
  }

  #gnav ul {
    width: auto;
    height: 100%;
    overflow-y: auto;
    background: #FFF;
    padding-top: 0;
    padding-bottom: 0;
  }

  .overlay:after {
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.3;
    z-index: 100;
  }
}

a[href*="tel"] {
  pointer-events: none;
}

@media (max-width: 768px) {
  a[href*="tel"] {
    pointer-events: initial !important;
  }
}

#pageNav {
  width: 180px;
  margin: 0 auto;
  clear: both;
}

#pageNav ul li {
  float: left;
  width: 30px;
  font-family: FontAwesome;
  color: #333333;
  font-size: 16.01px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
}

.toContact {
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 260px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  position: relative;
}

.toContact a:after {
  content: url(#);
  position: absolute;
  right: 5%;
  top: 40%;
}

.w10:nth-child(2n) {
  background-color: #f6f4f0;
}

#wrapper .mainImg {
  text-align: left !important;
  position: relative;
}

/* .mainImg h3 {
  font-family: 'Petit Formal Script', cursive !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 2;
  position: absolute;
  top: 20%;
  font-size: 48px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  padding: 64px 0;
  color: #333 !important;
  text-shadow: 4px 2px 3px #FFF !important;
} */

.mainImg p img {
  max-width: initial !important;
  height: 100% !important;
  position: relative;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

/*header*/
h1 {
  font-size: 12px;
  max-width: 1280px;
  margin: 0 auto;
}

#header .headerInner {
  padding-bottom: 20px;
  margin-right: 10px;
  margin-left: 10px;
  max-width: 1280px;
  margin: 0 auto;
}

#header .headerInner .logo {
  margin: 10px auto 0;
}

#header .right {
  float: right;
  width: 200px;
  margin-top: 15px;
}

#header .left {
  width: 1060px;
  text-align: center;
  float: left;
  padding-left: 150px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#header .right .sns ul {
  float: right;
}

#header .right .sns li {
  float: left;
  padding-right: 7px;
}

#header .right .shopTel {
  margin-top: 15px;
}

#header .right .shopTel dt {
  float: left;
  font-family: OpenSans;
  font-size: 12px;
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  color: #868686;
}

#header .right .shopTel dd {
  float: right;
  font-family: OpenSans;
  color: #868686;
  font-size: 12px;
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  color: #868686;
}

#header .right .shopTel dt img {
  margin-right: 10px;
  margin-bottom: 3px;
}

#header .right .shopTel a {
  color: #868686;
}

#gnav > ul {
  margin: 0 auto;
  display: inline-block;
  text-align: center;
}

#gnav li {
  float: left;
  font-family: OpenSans;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  padding: 0 20px;
}

#gnav li a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

#gnav ul li a:after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #333;
  transform: scale(0, 1);
  transform-origin: center top;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
  -ms-transform: scale(0, 1);
  -webkit-transform: scale(0, 1);
  -ms-transform-origin: center top;
  -moz-transform-origin: center top;
  -webkit-transform-origin: center top;
  -webkit-transform: transform .3s;
  -ms-transform: transform .3s;
}

#gnav ul li a:hover:after {
  transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
}

/*main*/
#main .w10 {
  text-align: center;
  margin: 0 auto;
  padding: 70px 0;
}

#main h3.h3h {
  font-size: 28px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  font-family: PetitFormalScript;
  padding: 64px 0;
  font-family: 'Petit Formal Script', cursive;
}

div#footer {
  margin-top: 100px;
}

/*styleGallery*/
#main .home-styleGallery,
.home-menu {
  background: #f6f4f0;
}

#main .styleGalleryTop div {
  float: left;
  width: 197px;
  margin-right: 47px;
  margin-bottom: 47px;
}

.mainSlide .slide img {
  width: 100% !important;
}

#main .styleGalleryTop div:nth-child(5n) {
  margin-left: 47px;
}

#main .styleGalleryTop {
  max-width: 1024px;
  margin: auto;
  margin-bottom: 50px;
}

#main .styleGalleryTop2 div {
  float: right;
  width: 223px;
  margin-right: 47px;
}

#main .toDetail {
  background-color: #beb198;
  width: 260px;
  height: 48px;
  border-radius: 40px;
  text-align: center;
  margin: 60px auto 160px auto;
}

#main .toDetail a {
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  line-height: 48px;
  text-align: center;
  text-align: center;
}

#main .toDetail img {
  vertical-align: baseline;
}

#main .home-styleGallery .toDetail {
  background-color: #beb198;
  width: 260px;
  height: 48px;
  border-radius: 40px;
  text-align: center;
  margin: 60px auto 160px auto;
}

#main .home-styleGallery .toDetail:last-child {
  margin: 60px auto 60px auto;
}

#main .home-styleGallery .toDetail a {
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  line-height: 48px;
  text-align: center;
  text-align: center;
}

#main .home-styleGallery .toDetail img {
  vertical-align: baseline;
}

#main .styleGalleryBottom {
  text-align: center;
}

#main .styleGalleryBottom dl {
  display: inline-block;
  width: 180px;
  height: 270px;
  padding: 0 35px;
  vertical-align: top;
}

@media (max-width: 1280px) {
  #main .styleGalleryBottom {
    display: block;
    max-width: 1000px;
    margin: auto;
  }

  #main .styleGalleryBottom dl {
    width: 28%;
    display: inline-block;
    padding: 0% 2%;
    margin-bottom: 40px;
  }
}

@media (max-width: 768px) {
  #main .styleGalleryBottom {
    display: block;
    max-width: 600px;
    margin: auto;
  }

  #main .styleGalleryBottom dl {
    width: 44%;
    display: inline-block;
    padding: 0% 2%;
  }
}

/*shop*/
.home-shop .shopBox {
  max-width: 1024px;
  margin: auto;
}

#main .home-shop .shopBoxinn {
  float: left;
  width: 430px;
  margin: 0 40px;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
}

#main .home-shop .shopBoxinn p {
  margin: 20px 0;
  font-size: 14px;
}

#main .home-shop .shopInfoLeft {
  float: left;
  margin-bottom: 40px;
}

#main .home-shop .shopInfoRight {
  float: right;
}

#main .home-shop .toDetail {
  clear: both;
  background-color: #beb198;
  width: 260px;
  height: 48px;
  border-radius: 40px;
  text-align: center;
  margin: 0px auto !important;
}

#main .home-shop .toDetail a {
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  line-height: 48px;
  text-align: center;
}

#main .home-shop .toDetail img {
  vertical-align: baseline;
}

#main .home-shop .shopInfoinn p {
  font-size: 14px;
}

/*menu*/
#main .home-menu p {
  text-align: center;
  color: #333333;
  font-size: 14px;
  font-weight: bold;
  line-height: 28px;
  text-align: center;
}

#main .home-menu .menuBox {
  width: 1000px;
  margin: 0 auto;
  z-index: 1;
}

#main .home-menu .menuBoxLeft {
  float: left;
  width: 500px;
  margin: 30px auto;
}

#main .home-menu .menuBoxRight {
  float: right;
  width: 500px;
  margin: 30px auto;
}

#main .home-menu .menuBoxLeft dl {
  border-bottom: 1px solid #999;
  color: #333333;
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
  padding: 13px 0;
  width: 400px;
}

#main .home-menu .menuBoxLeft dt {
  float: left;
  width: 200px;
  text-align: left;
  margin-left: 10px;
}

#main .home-menu .menuBoxRight span {
  text-align: right;
  display: block;
  margin-right: 30px;
}

#main .home-menu .menuBoxLeft dd {
  text-align: right;
  margin-right: 10px;
}

#main .home-menu .menuBox .toDetail {
  clear: both;
  background-color: #beb198;
  width: 260px;
  height: 48px;
  border-radius: 40px;
  text-align: center;
  margin: 0px auto;
}

#main .home-menu .menuBox .toDetail a {
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  line-height: 48px;
  text-align: center;
}

#main .home-menu .toDetail img {
  vertical-align: baseline;
}

#main .home-menu {
  padding: 70px 0 0;
}

#main .home-menu .video {
  margin-top: 50px;
  position: relative;
  z-index: 2;
}

/*information*/
.home-infoNews {
  max-width: 1280px;
}

#main .home-info {
  float: left;
  /*width: 640px;*/
  margin-left: 2%;
}

#main .home-info dl {
  margin: 0 auto;
  width: 500px;
  border-bottom: 1px solid #999;
  color: #333333;
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
  padding: 11px 0;
  text-align: left;
}

#main .home-info dt {
  float: left;
  width: 100px;
  margin-left: 10px;
}

#main .home-info .toDetail {
  clear: both;
  background-color: #beb198;
  width: 260px;
  height: 48px;
  border-radius: 40px;
  text-align: center;
  margin: 60px auto !important;
}

#main .home-info .toDetail a {
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  line-height: 48px;
  text-align: center;
}

#main .home-info .toDetail img {
  vertical-align: baseline;
}

/*news*/
#main .home-news {
  float: right;
  /*width: 640px;*/
  margin-right: 2%;
}

#main .home-news dl {
  margin: 0 auto;
  width: 500px;
  border-bottom: 1px solid #999;
  color: #333333;
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
  padding: 11px 0;
  text-align: left;
}

#main .home-news dt {
  float: left;
  width: 100px;
  margin-left: 10px;
}

#main .home-news .toDetail {
  clear: both;
  background-color: #beb198;
  width: 260px;
  height: 48px;
  border-radius: 40px;
  text-align: center;
  margin: 60px auto !important;
}

#main .home-news .toDetail a {
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  line-height: 48px;
  text-align: center;
}

#main .home-news .toDetail img {
  vertical-align: baseline;
}

/*recruit*/
#main .home-recruit {
  clear: both;
  background-color: #f6f4f0;
}

#main .recruitInner {
  max-width: 1280px;
  margin: 0 auto;
}

#main .home-recruit .recruitBoxRight {
  float: right;
  width: 50%;
}

#main .home-recruit .recruitBoxRight p {
  margin: 0 auto;
  width: 340px;
  color: #333333;
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
  text-align: left;
}

#main .home-recruit p.toDetail {
  clear: both;
  background-color: #beb198;
  width: 260px;
  height: 48px;
  border-radius: 40px;
  text-align: center;
  margin: 50px auto;
}

#main .home-recruit .toDetail a {
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  line-height: 48px;
  text-align: center;
}

#main .home-recruit .toDetail img {
  vertical-align: baseline;
}

#main .home-recruit .recruitBoxLeft {
  float: left;
  width: 50%;
}

/*staff*/
#main .home-staff {
  margin: 0 auto;
  max-width: 1280px;
}

#main .home-staff .staffBox {
  display: inline-block;
  margin: 0 auto;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

#main .home-staff .staffBox div {
  float: left;
  width: 160px;
  margin-right: 40px;
}

/*voice*/
#main .home-voice {
  background: #FAFAFA;
  position: relative;
}

#main .home-voiceInner {
  position: relative;
  z-index: 1;
  -webkit-filter: sepia(20%);
  filter: sepia(20%);
  min-height: 380px;
  margin: 0 auto;
  margin-bottom: 80px;
  max-width: 1280px;
}

.home-voice .pic img {
  max-width: initial !important;
  height: 100% !important;
  width: auto !important;
}

#main .home-voice:after {
  background: url(#) no-repeat transparent;
  content: url(#);
  position: absolute;
  top: 0px;
  left: 0px;
  /* width: 10%; */
  /* height: 100%; */
  background-size: 8px 9px;
  opacity: 0.1;
}

#main .home-voice .voiceBox {
  margin: 0 auto;
  display: inline-block;
}

#main .home-voice .voiceBoxInner {
  width: 300px;
  margin-right: 30px;
  float: left;
  text-align: left;
  font-size: 14px;
  font-weight: bold;
  line-height: 28px;
  background-color: rgba(255, 255, 255, 0.5);
  height: 170px;
  padding: 30px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-filter: sepia(0%);
  filter: sepia(0%);
}

#main .home-voice .voiceTittle {
  margin-bottom: 20px;
  font-weight: bold;
  font-family: YuGo;
}

#main .home-voice .voiceTxt {
  font-weight: 400;
  font-family: YuGo;
}

#main .toDetail {
  position: relative;
  z-index: 1;
}

#main .toDetail img {
  position: absolute;
  top: 40%;
  right: 10%;
}

#main #back img {
  position: absolute;
  top: 40%;
  left: 10%;
}

.home-voice .pic {
  position: absolute;
  top: 0;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

#main .w10 {
  position: relative;
  z-index: 1;
}

#main .w10:nth-child(odd):before {
  content: url(/import/tenant_1/160.16.237.162/html/images/top/yashi_left.png);
  left: 0;
  bottom: -10%;
  position: absolute;
  z-index: 0;
}

#main .w10:nth-child(2n):before {
  content: url(/import/tenant_1/160.16.237.162/html/images/top/yashi_right.png);
  right: 0;
  bottom: -10%;
  position: absolute;
}

.home-info .infoBox:before {
  display: none;
}

#main .home-menu:before {
  z-index: 0;
}

#wrapper #main .home-infoNews:before {
  left: -15%;
}

/*footer*/
#footer .yazirushiUp {
  margin: 50px auto;
}

#footer .yazirushiUp img {
  margin: 0 auto;
  display: block;
}

#footer .footerInner {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

#footer .footerInnerLeft {
  float: left;
  margin-left: 130px;
  text-align: left;
}

#footer .footerInnerLeft p {
  line-height: 28px;
  font-family: PetitFormalScript;
}

#footer .footerInnerLeft span {
  color: #333333;
  font-size: 14px;
  font-weight: 700;
  line-height: 28px;
  text-align: left;
}

#footer .footerInnerRight {
  float: right;
  width: 370px;
  margin-bottom: 50px;
}

#footer .footerInnerRight .sns li {
  display: inline-block;
  margin: 0 10px;
}

#footer .copy {
  clear: both;
  text-align: center;
  margin-bottom: 20px;
}

/*concept*/
#header .inner {
  width: 1280px;
  float: none;
  padding: 0;
}

.concept #main .home-concept {
  background: #f6f4f0;
  padding-bottom: 100px;
  position: relative;
}

.concept #main .home-concept:before {
  content: url(#);
  right: 0;
  bottom: -10%;
  position: absolute;
}

#wrapper .concept .mainImg {
  text-align: center;
  width: 100%;
  position: relative;
}

#wrapper .concept .mainImg .mainTriangle {
  position: absolute;
  top: 20%;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 1;
}

#wrapper .mainTriangle h3 {
  color: #333333;
  font-size: 24px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  position: relative;
  top: 0;
  font-family: NotoSerifCJKjp !important;
}

#wrapper .mainTriangle .triangle1 {
  margin-top: 80px;
  font-size: 18px;
  width: 150px;
  height: 150px;
  line-height: 80px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  color: #000;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 100%;
  background: #ebda86;
  -webkit-box-shadow: 1px 1px 70px #fff;
  box-shadow: 1px 1px 70px #fff;
  background: #fff;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(25%, #f2eabd), color-stop(50%, #ebda86), color-stop(51%, #f2eabd), to(#fff));
  background: linear-gradient(#fff 0%, #f2eabd 25%, #ebda86 50%, #f2eabd 51%, #fff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#fff, endColorstr=#fff, GradientType=1);
  background: url(#) center center;
  border-radius: 100%;
}

#wrapper .mainTriangle .triangle2 {
  font-size: 18px;
  width: 150px;
  height: 150px;
  line-height: 80px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  color: #000;
  position: absolute;
  top: 178px;
  left: -35px;
  -webkit-box-shadow: 1px 1px 100px #fff;
  box-shadow: 1px 1px 100px #fff;
  margin: auto;
  background: url(#);
  background: url(#);
  background: radial-gradient(ellipse at center, rgba(235, 218, 134, 1) 0%, rgba(251, 248, 232, 1) 64%, rgba(255, 255, 255, 0.88) 79%, rgba(255, 255, 255, 0.7) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebda86', endColorstr='#ffffff', GradientType=1);
  background: url(#) center center;
  border-radius: 100%;
}

#wrapper .mainTriangle .triangle3 {
  font-size: 18px;
  width: 150px;
  height: 150px;
  line-height: 80px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  color: #000;
  position: absolute;
  top: 178px;
  right: -35px;
  margin: auto;
  border-radius: 100%;
  background: #ebda86;
  -webkit-box-shadow: 1px 1px 70px #fff;
  box-shadow: 1px 1px 70px #fff;
  background: #fff;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(25%, #f2eabd), color-stop(50%, #ebda86), color-stop(51%, #f2eabd), to(#fff));
  background: linear-gradient(#fff 0%, #f2eabd 25%, #ebda86 50%, #f2eabd 51%, #fff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#fff, endColorstr=#fff, GradientType=1);
  background: url(#) center center;
  border-radius: 100%;
}

.triangle1 img {
  position: absolute;
  top: 25px;
  right: -60px;
}

.triangle2 img {
  position: absolute;
  left: -25px;
}

.triangle3 img {
  position: absolute;
  right: -25px;
  bottom: -25px;
}

#wrapper .mainTriangle .triangle1 p {
  font-weight: bold;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

#wrapper .mainTriangle .triangle2 p {
  font-weight: bold;
  /* position: absolute; */
  margin-top: 50px;
  /* left: 0; */
  /* right: 0; */
  /* margin: auto; */
  /* top: 50%; */
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

#wrapper .mainTriangle .triangle3 p {
  font-weight: bold;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

#wrapper .mainTriangle .triangleBox {
  width: 265px;
  height: 229px;
  margin: auto;
  position: relative;
  margin-top: 80px;
}

#wrapper .mainTriangle .triangleBox:before {
  content: url(#) no-repeat;
  display: block;
  width: 265px;
  height: 229px;
  position: absolute;
}

/*mahalo&mahalopiha*/
#wrapper .mahalo .mainImg01 {
  margin-top: 50px;
  position: relative;
}

#wrapper .mahalo .mainImg01:before {
  content: url(#);
  right: 0;
  top: 10%;
  position: absolute;
}

#main .mahaloBox {
  position: relative;
}

/* #main .mahaloBox:before {
  position: absolute;
  content: url(#);
  bottom: -10%;
  left: 0;
} */

#wrapper .mahalo .mainImg01 p {
  text-align: center;
  margin-top: 20px;
}

#main .mahaloBox {
  height: 650px;
  max-width: 1280px;
  margin: 0 auto;
  margin-top: 100px;
}

#main .mahaloBoxLeft {
  float: left;
  width: 400px;
  margin-left: 100px;
  margin-top: 50px;
}

#main .mahaloBoxRight {
  /* margin: 50px 0 !important; */
  float: right;
  width: 500px;
  position: relative;
}

#main .mahaloBoxRight .mahaloBoxPic02 {
  position: absolute;
  bottom: -170px;
  left: -120px;
}

#main .mahaloBoxRight .mahaloBoxPic03 {
  position: absolute;
  right: 160px;
  bottom: -300px;
}

#main .mahaloBoxLeft dl {
  width: 400px;
  font-family: OpenSans;
  color: #333333;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
}

#main .mahaloBoxLeft dt {
  float: left;
  width: 100px;
  padding-bottom: 15px;
}

#main .mahaloBoxLeft dd {
  float: right;
  width: 300px;
}

#main .mahaloBoxLeft dd img {
  vertical-align: text-top;
}

#main .wayFlow {
  background-color: #f6f4f0;
  padding: 100px 0;
}

#main .wayFlow h4 {
  font-size: 24px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
}

#main .wayFlow p {
  margin-top: 50px;
  text-align: center;
}

#main .wayFlowPic {
  width: 630px;
  margin: 0 auto;
}

#main .wayFlowPicBottom div {
  float: left;
  width: 150px;
  margin-right: 10px;
}

#main .wayFlowPicBottom div:last-child {
  margin-right: 0px;
}

#main .wayFlowPicBottom div img {
  width: 100%;
}

#main .gMap {
  margin-bottom: 80px;
}

#map1 {
  width: 100%;
  height: 630px;
}

/*menu*/
#wrapper .menu .mainImg {
  text-align: center;
  position: relative;
}

.menu .mainImg h3 {
  font-family: 'Petit Formal Script', cursive;
  position: absolute;
  top: 20%;
  right: 45%;
  font-size: 48px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  padding: 64px 0;
  color: #fff;
  text-shadow: 2px 2px 3px #333;
}

.menu .menuBoxBg {
  padding: 80px;
  margin: 30px auto;
}

.menu .menuBoxBg:nth-child(odd) {
  position: relative;
}

.menu .menuBoxBg:nth-child(2n) {
  background: #f6f4f0;
  position: relative;
}

.menu .menuBoxBg:nth-child(2n):before {
  content: url(#);
  right: 0;
  bottom: -10%;
  position: absolute;
}

.menu .menuBox {
  border: 2px solid #000;
  max-width: 1000px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 70px;
  box-sizing: border-box;
  margin: 0 auto;
}

.menu .menuBox:nth-child(2n) {
  background: #f6f4f0;
}

.menu .menuBox h4 {
  font-family: 'Petit Formal Script', cursive;
  color: #333333;
  font-size: 28px;
  font-weight: 400;
  line-height: 22px;
  -webkit-transform: scaleX(1.0006);
  transform: scaleX(1.0006);
  margin-bottom: 35px;
}

.menu .menuBox p {
  line-height: 28px;
}

.menu .menuBoxTittle {
  margin-bottom: 60px;
}

.menu .menuBoxTxt dl {
  font-weight: bold;
}

.menu .menuBoxTxt p {
  margin-bottom: 40px;
}

.menu .menuBoxTxt p:last-child {
  margin-bottom: 0px;
}

.menu .menuBoxTxt .hr {
  border-bottom: 1px dotted #333;
  margin-bottom: 15px;
  ;
  padding-bottom: 20px;
}

/*aujua*/
.aujua .mainImg01 {
  max-width: 1280px;
  width: 1280px;
  margin: 0 auto;
}

.aujua .mainImgLeft {
  float: none;
  width: 73%;
  margin-top: 50px;
}

.aujua .mainImgRight {
  float: right;
  width: 20%;
}

.aujua .mainImgLeft h3 {
  float: right;
  text-align: center;
  font-size: 28px;
  color: #545044;
}

.aujua .mainImgLeft p {
  float: right;
  margin-left: 150px;
  margin-top: 0px;
  width: 110px;
}

.aujua .aujuaBox {
  padding-top: 70px;
  position: relative;
}

.aujua .aujuaBox:nth-child(odd):before {
  content: url(#);
  left: 0;
  bottom: -10%;
  position: absolute;
  z-index: 1;
}

.aujua .aujuaBox:nth-child(2n) {
  background: #f6f4f0;
}

.aujua .aujuaBox:nth-child(2n):before {
  content: url(#);
  right: 0;
  bottom: -10%;
  position: absolute;
}

.aujua .aujuaBox h4 {
  text-align: center;
  color: #333333;
  font-size: 24px;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 50px;
}

.aujua .menuBoxInner {
  max-width: 1000px;
  margin: 0 auto;
  z-index: 1;
  position: relative;
}

.aujua .menuBoxInner p {
  line-height: 28px;
  font-size: 14px;
}

.aujua .aujuaBox p span {
  font-weight: bold;
  font-size: 18px;
}

.aujua .menuBoxInner .menuBoxTxt {
  float: left;
  width: 500px;
}

.aujua .menuBoxInner .menuBoxPic {
  float: right;
  width: 500px;
}

.aujua #aujuaBox02,
.aujua #aujuaBox03 {
  padding-bottom: 70px;
}

.aujua #aujuaBox02 .menuBoxInner .menuBoxTxt {
  float: right;
  width: 46%;
  margin: 0 2%;
}

.aujua #aujuaBox02 .menuBoxInner .menuBoxPic {
  float: left;
  width: 500px;
}

.aujua #aujuaBox03 .menuBoxInner .menuBoxPic {
  float: left;
  width: 250px;
  text-align: center;
}

.aujua #aujuaBox03 .menuBoxInner .menuBoxPic p {
  font-family: 'Yu Gothic';
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1.44px;
  line-height: 22px;
  margin-top: 20px;
}

/*staff*/
#wrapper .staff .mainImg {
  text-align: center;
  position: relative;
}

.staff .mainImg h3 {
  font-family: 'Petit Formal Script', cursive;
  position: absolute;
  top: 20%;
  right: 45%;
  font-size: 48px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  padding: 64px 0;
  color: #fff;
  text-shadow: 2px 2px 3px #333;
}

.staff .staffBox {
  padding: 30px 0 100px 0;
  position: relative;
}

.staff .staffBox:nth-child(odd):before {
  content: url(#);
  left: 0;
  bottom: -10%;
  position: absolute;
  z-index: 1;
}

.staff .staffBox:nth-child(2n):before {
  content: url(#);
  right: 0;
  bottom: -10%;
  position: absolute;
}

.staff .staffBox:nth-child(2n) {
  background: #f6f4f0;
}

.staff .styleInner {
  margin: 0 auto;
  max-width: 1080px;
}

.staff #assistantBox {
  margin: 0 auto;
  width: 620px;
}

.staff .stylebox h4 {
  font-family: 'Myriad Pro';
  color: #333333;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1.36px;
  line-height: 24px;
  text-align: center;
  margin: 40px 0;
}

.staff .stylebox .stylistBox {
  float: left;
  width: 29%;
  margin: 2%;
  text-align: center;
}

.staff .stylebox .stylistBox p.name {
  text-align: center;
  font-weight: bold;
  line-height: 22px;
  font-family: OpenSans;
  padding: 25px 0 25px 0;
}

/*.staff #stylistBox .stylistBox:nth-child(2n){
    margin: 0 60px;
}*/
#assistantBox .stylistBox {
  text-align: center;
  width: 46%;
}

/*.staff #assistantBox .stylistBox:nth-child(3n){
    margin: 0 0 0 60px;
}*/
.staff #main .toDetail {
  margin: 15px auto;
}

/*staff_detail*/
#wrapper .staffDetail .mainImg {
  text-align: center;
  position: relative;
}

.staffDetail .mainImg h3 {
  font-family: 'Petit Formal Script', cursive;
  position: absolute;
  top: 20%;
  right: 45%;
  font-size: 48px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  padding: 64px 0;
  color: #fff;
  text-shadow: 2px 2px 3px #333;
}

.staffDetailBoxBg {
  position: relative;
}

.staffDetailBoxBg:nth-child(odd):before {
  content: url(#);
  left: 0;
  bottom: -40%;
  position: absolute;
  z-index: 1;
}

.staffDetailBoxBg:nth-child(2n):before {
  content: url(#);
  right: 0;
  bottom: -10%;
  position: absolute;
}

.staffDetailBoxBg:nth-child(2n) {
  background: #f6f4f0;
  padding-top: 77px;
}

.staffDetail .staffDetailBox {
  width: 1000px;
  margin: 70px auto;
}

.staffDetail .staffDetailBox:nth-child(2n) {
  background: #f6f4f0;
  padding-top: 77px;
  max-width: 1125px;
}

.staffDetail .toContact:after {
  content: url(#);
  position: absolute;
  right: 5%;
  top: 40%;
}

.staffDetail .staffDetailLeft {
  float: left;
  width: 500px;
  position: relative;
  z-index: 2;
}

.staffDetail .staffDetailRight {
  float: right;
  width: 500px;
}

.staffDetail .staffDetailRight p {
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.281px;
  line-height: 22px;
  margin-bottom: 35px;
  position: relative;
}

.staffDetail .staffDetailRight p span {
  font-weight: lighter;
}

.staffDetail .staffDetailRight p.shop {
  font-size: 16px;
}

.staffDetail .staffDetailRight p.name {
  font-size: 24px;
}

.staffDetail .staffDetailRight .toContact {
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 260px;
  height: 50px;
  text-align: center;
  line-height: 50px;
}

.staffDetail #mahaloStaffGallery h4 {
  color: #333333;
  font-size: 24px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  padding-bottom: 50px;
}

/*.staffDetail #mahaloStaffGallery div{
    float: left;
    width:180px;
    margin-right:50px;
}
.staffDetail #mahaloStaffGallery div:last-child{
    margin-right: 0;
}*/
.staffDetail #mahaloStaffGallery dl {
  margin-bottom: 50px;
}

/*styletate*/
#wrapper .styleTate .mainImg {
  text-align: center;
  position: relative;
}

.styleTate .mainImg h3 {
  font-family: 'Petit Formal Script', cursive;
  position: absolute;
  top: 20%;
  right: 45%;
  font-size: 48px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  padding: 64px 0;
  color: #fff;
  text-shadow: 2px 2px 3px #333;
}

.styleBox {
  position: relative;
}

.styleBox:nth-of-type(8n+1):before {
  content: url(#);
  left: -100%;
  top: -10%;
  position: absolute;
}

.styleBox:nth-of-type(8n+8):before {
  content: url(#);
  right: -100%;
  bottom: -10%;
  position: absolute;
}

.styleTateDetail01 {
  position: relative;
}

.styleTateDetail01:before {
  content: url(#);
  left: 0;
  top: -10%;
  position: absolute;
  z-index: -1;
}

.styleTateDetailBox {
  position: relative;
}

.styleTateDetail01:nth-child(2n):before {
  content: url(#);
  left: 0;
  top: -24%;
  position: absolute;
  z-index: 0;
}

#recommend {
  position: relative;
  z-index: 1;
}

.styleTate .style {
  max-width: 1000px;
  text-align: center;
  margin: 70px auto 0 auto;
}

.styleTate .style ul {
  display: inline-block;
  text-align: center;
}

.styleTate .style li {
  float: left;
  width: 150px;
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 16.01px;
  font-weight: 700;
  letter-spacing: 1.281px;
  line-height: 22px;
  text-align: center;
}

.styleTate .style li:last-child {
  margin-right: 0;
}

.styleTate .styleInner {
  margin: 40px auto;
  max-width: 1000px;
}

.styleTate .styleInner .styleBox {
  float: left;
  width: 200px;
  margin: 20px 25px;
}

.styleTate .styleInner .styleBox img {
  width: 100%;
}

/*styletate_detail*/
#wrapper .styleTateDetail .mainImg {
  text-align: center;
  position: relative;
}

.styleTateDetail .mainImg h3 {
  position: absolute;
  top: 20%;
  right: 45%;
  font-size: 48px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  padding: 64px 0;
  color: #fff;
  text-shadow: 2px 2px 3px #333;
}

.styleTateDetail .styleTateDetailBox {
  max-width: 1050px;
  margin: 0 auto;
  margin-top: 70px;
}

.styleTateDetail .styleTateDetailLeft {
  float: left;
  width: 450px;
  margin-bottom: 70px;
}

.styleTateDetail .styleTateDetailRight {
  float: right;
  width: 500px;
  padding-left: 50px;
}

.styleTateDetail .toDetail {
  clear: both;
}

.styleTateDetail .styleTateDetailLeftBottom {
  margin-top: 30px;
}

.styleTateDetail .styleTateDetailLeftBottom p {
  float: left;
  width: 123px;
  margin-right: 27px;
}

.styleTateDetail .styleTateDetailLeftBottom p:last-child {
  margin-right: 0px;
}

.styleTateDetail .styleTateDetailLeftBottom p img {
  width: 100%;
}

.styleTateDetail .styleTateDetailRight .tittle p {
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 1.919px;
  line-height: 22px;
  margin-bottom: 25px;
}

.styleTateDetail .styleTateDetailRight .tittle span {
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.12px;
  line-height: 24px;
  text-align: left;
  margin-bottom: 45px;
}

.styleTateDetail .styleTateDetailRight .styleDate p {
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.281px;
  line-height: 22px;
  margin-bottom: 10px;
}

.styleTateDetail .styleTateDetailRight dt {
  float: left;
  margin-top: 5px;
  width: 85px;
  height: 45px;
  line-height: 45px;
  background: #f6f4f0;
  text-align: center;
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.12px;
}

.styleTateDetail .styleTateDetailRight dd {
  float: left;
  margin-top: 5px;
  margin-left: 5px;
  font-family: 'Yu Gothic';
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.12px;
  line-height: 45px;
  text-align: center;
  background-color: #e69973;
  width: 130px;
  height: 45px;
}

.styleTateDetail .styleTateDetailRight dl.faceType dt {
  line-height: 80px;
  width: 85px;
  height: 80px;
}

.styleTateDetail .styleTateDetailRight dl.faceType dd {
  line-height: 140px;
  width: 75px;
  height: 80px;
  margin-left: 6px;
  position: relative;
}

.styleTateDetail .styleTateDetailRight dl.faceType dd span {
  display: block;
  margin-top: 5px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
}

.styleTateDetail .styleTateDetailRight dl.faceType dd span.a {
  margin-top: 8px;
}

.styleTateDetail .styleTateDetailRight dl.faceType dd span.b {
  margin-top: 13px;
}

.styleTateDetail .styleTateDetailRight .recocomendType {
  margin-top: 50px;
}

.styleTateDetail .styleTateDetailRight .recocomendType p {
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.281px;
  line-height: 22px;
  margin-bottom: 25px;
}

.styleTateDetail .styleTateDetailRight .toContact {
  margin-top: 55px;
}

.styleTateDetail .styleTateDetailLeft .toContact {
  margin: 55px auto 0 auto;
}

#styleTateDetail02 {
  padding: 100px 0;
  background-color: #f6f4f0;
  margin-top: 0;
}

#styleTateDetail02 h4 {
  font-family: PetitFormalScript;
  color: #333333;
  font-size: 28px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  -webkit-transform: scaleX(1.0006);
  transform: scaleX(1.0006);
  padding-bottom: 80px;
}

/*styleyoko_detail*/
#yoko {
  margin-bottom: 90px;
}

#yoko dd {
  background: #70bdd6;
}

/*info*/
#wrapper .info .mainImg {
  text-align: center;
  position: relative;
}

.info .mainImg h3 {
  font-family: 'Petit Formal Script', cursive;
  position: absolute;
  top: 20%;
  right: 40%;
  font-size: 48px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  padding: 64px 0;
  color: #fff;
  text-shadow: 2px 2px 3px #333;
}

.info .infoBox {
  max-width: 1000px;
  margin: 70px auto 0;
}

.infoBox .infoLeft {
  float: left;
  width: 750px;
  padding-right: 50px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.infoBox .infoRight {
  float: Right;
  width: 200px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.infoBox .infoLeftBox {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-bottom: 25px;
  border-bottom: 1px dotted #000;
  padding-top: 25px;
}

.infoBox .infoLeftBox:first-child {
  padding-top: 0;
}

.infoBox .infoPic {
  float: left;
  width: 160px;
  padding-top: 25px;
}

.infoBox .infoTxt {
  float: right;
  width: 525px;
  padding-left: 15px;
  padding-top: 25px;
}

.infoBox .infoPic img {
  width: 100%;
}

.infoBox .date {
  text-align: right;
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.281px;
  padding-top: 10px;
}

.infoBox .infoTittle {
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 1.919px;
  text-align: left;
}

.info #main .infoBox .toDetail {
  float: right;
  margin: 40px 0 0 0;
}

.info #pageNav {
  padding-top: 90px;
}

.infoBox .infoCategory {
  padding-top: 25px;
}

.infoBox .infoCategory p {
  font-family: PetitFormalScript;
  color: #333333;
  font-size: 28px;
  font-weight: 400;
  line-height: 22px;
  -webkit-transform: scaleX(1.0006);
  transform: scaleX(1.0006);
}

.infoBox .infoCategory ul {
  padding-top: 20px;
  padding-left: 10px;
}

.infoBox .infoCategory li {
  font-family: FontAwesome;
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  line-height: 48px;
  text-align: left;
}

.infoBox .infoCategory li img {
  margin-bottom: 1px;
  margin-right: 8px;
}

.infoBox .infoArchive {
  padding-top: 75px;
}

.infoBox .infoArchive p {
  font-family: PetitFormalScript;
  color: #333333;
  font-size: 28px;
  font-weight: 400;
  line-height: 22px;
  -webkit-transform: scaleX(1.0006);
  transform: scaleX(1.0006);
}

.infoBox .infoArchive ul {
  padding-top: 20px;
  padding-left: 10px;
}

.infoBox .infoArchive li {
  font-family: FontAwesome;
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  line-height: 48px;
  text-align: left;
  float: left;
  width: 95px;
}

.infoBox .infoArchive li img {
  margin-bottom: 1px;
  margin-right: 8px;
}

.info01 {
  position: relative;
  z-index: 0;
}

.info01:before {
  content: url(#);
  left: 0;
  top: -10%;
  position: absolute;
  z-index: -1;
}

.infoBox {
  position: relative;
}

.infoBox:before {
  content: url(#);
  right: -45%;
  top: 40%;
  position: absolute;
  z-index: -1;
}

#wrapper #main .home-staff:before {
  left: -15%;
}

/*info_detail*/
.infoBox .infoDetailTxt {
  padding-top: 25px;
}

.infoBox .infoDetailTxt img {
  display: block;
  margin: 0 auto 30px;
  ;
}

.infoBox .infoDetailTxt p {
  line-height: 24px;
}

#info02 {
  background: #f6f4f0;
  padding: 100px 0;
  margin-top: 100px;
}

#info02 h4 {
  font-family: PetitFormalScript;
  color: #333333;
  font-size: 28px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  -webkit-transform: scaleX(1.0006);
  transform: scaleX(1.0006);
  padding-bottom: 70px;
}

#main .infoBox .infoM {
  margin-right: 80px;
}

#recommend .tittleTxt {
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.12px;
  text-align: left;
}

#recommend .date {
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 12.01px;
  font-weight: 700;
  letter-spacing: 0.961px;
  line-height: 22px;
  text-align: right;
}

/*blog*/
#wrapper .blog .mainImg {
  text-align: center;
  position: relative;
}

/* .blog .mainImg h3 {
  position: absolute;
  top: 20%;
  right: 45%;
  font-size: 48px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  padding: 64px 0;
  color: #fff;
  text-shadow: 2px 2px 3px #333;
} */

#blog01 {
  background: #f6f4f0;
}

.blog01 {
  position: relative;
  z-index: 0;
}

.blogArea {
  position: relative;
  z-index: 0;
}

.blog01 .blogAreaInner {
  max-width: 1000px;
  margin: 0 auto 0;
}

.blog01 .blogBox {
  float: left;
  width: 220px;
  margin-right: 40px;
  margin-top: 90px;
}

.blog01 .blogBox:nth-child(4n) {
  margin-right: 0;
}

.blog01 .blogBox .date {
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 12.px;
  font-weight: 700;
  letter-spacing: 0.961px;
  line-height: 22px;
  text-align: center;
}

.blog01 .blogBox .blogTittle {
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.12px;
  margin-top: 20px;
}

.blog01 .blogBox .blogPic {
  margin-top: 15px;
}

.blog01 .blogBox .blogPic img {
  width: 100%;
}

.blog01 .blogBox .blogTxt {
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.12px;
  margin-top: 15px;
}

.blog01 #pageNav {
  margin: 80px auto;
}

.blog01 .blogCategory {
  float: left;
  width: 200px;
  margin-right: 70px;
}

.blog01 .blogArchive {
  float: left;
  width: 570px;
}

.blog01 .blogCategory p {
  font-family: PetitFormalScript;
  color: #333333;
  font-size: 28px;
  font-weight: 400;
  line-height: 22px;
  -webkit-transform: scaleX(1.0006);
  transform: scaleX(1.0006);
}

.blog01 .blogCategory ul {
  padding-top: 20px;
  padding-left: 10px;
}

.blog01 .blogCategory li {
  font-family: FontAwesome;
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  line-height: 48px;
  text-align: left;
}

.blog01 .blogArchive p {
  font-family: PetitFormalScript;
  color: #333333;
  font-size: 28px;
  font-weight: 400;
  line-height: 22px;
  -webkit-transform: scaleX(1.0006);
  transform: scaleX(1.0006);
}

.blog01 .blogArchive ul {
  padding-top: 20px;
  padding-left: 10px;
}

.blog01 .blogArchive li {
  font-family: FontAwesome;
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  line-height: 48px;
  text-align: left;
  float: left;
  width: 95px;
}

.blog01 .blogCategory li img,
.blog01 .blogArchive li img {
  margin-bottom: 1px;
  margin-right: 8px;
}

#blog02 .blogAreaInner {
  margin: 120px auto;
}

/*blog_detail*/
#wrapper .blogDetail .mainImg {
  text-align: center;
  position: relative;
}

/* .blogDetail .mainImg h3 {
  font-family: 'Petit Formal Script', cursive;
  position: absolute;
  top: 20%;
  right: 45%;
  font-size: 48px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  padding: 64px 0;
  color: #fff;
  text-shadow: 2px 2px 3px #333;
} */

.blog01 .blogDetailBox {
  text-align: center;
}

.blog01 .blogDetailBox .blogTxt {
  text-align: left;
}

.blog01 .blogDetailBox .blogTxt img {
  margin: 0 auto 30px;
  ;
  display: block;
}

.blogDetail .blogAreaInner {
  max-width: 800px;
}

.blog01 .blogDetailBox {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-bottom: 25px;
  border-bottom: 1px dotted #000;
  padding-top: 25px;
}

.blog01 .blogDetailBox .date {
  padding-top: 50px;
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 16.01px;
  font-weight: 700;
  letter-spacing: 1.281px;
  line-height: 22px;
  text-align: center;
}

.blog01 .blogDetailBox .blogTittle {
  padding-top: 40px;
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 23.99px;
  font-weight: 500;
  letter-spacing: 1.919px;
  line-height: 22px;
}

.blog01 .blogDetailBox .blogTxt {
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.12px;
  line-height: 24px;
  text-align: left;
  padding-top: 50px;
}

.blogDetail #main .toDetail {
  margin: 60px auto 100px auto;
}

.blogDetail #blog02 .blogAreaInner {
  max-width: 1000px;
}

#blog03 {
  background: #f6f4f0;
  padding: 100px 0 130px;
}

#blog03 #recommend h4 {
  text-align: center;
  font-family: PetitFormalScript;
  color: #333333;
  font-size: 28px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  -webkit-transform: scaleX(1.0006);
  transform: scaleX(1.0006);
  padding-bottom: 80px;
}

#blog03 #recommend .date {
  text-align: center;
}

/*voice*/
#wrapper .voice .mainImg {
  text-align: center;
  position: relative;
}

.voice .mainImg h3 {
  position: absolute;
  top: 20%;
  right: 45%;
  font-size: 48px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  padding: 64px 0;
  color: #fff;
  text-shadow: 2px 2px 3px #333;
}

.voiceArea {
  max-width: 1000px;
  margin: 0 auto;
}

.voiceArea .voiceBox {
  border: 1px solid #333;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 40px;
  margin-top: 80px;
}

.voiceBox {
  position: relative;
}

.voiceBox:nth-child(odd):before {
  content: url(#);
  left: -45%;
  bottom: -10%;
  position: absolute;
}

.voice .voiceBox:nth-child(2n):before {
  content: url(#);
  right: -45%;
  bottom: -10%;
  position: absolute;
}

.voiceArea .voiceBox .voicePic {
  float: left;
  width: 460px;
}

.voiceArea .voiceBox .voiceTxt {
  float: left;
  width: 100%;
  margin-left: 28px;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.voiceArea .voiceBox #voiceTxt01 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-bottom: 1px dotted #333;
}

.voiceArea .voiceBox #voiceTxt01 dt {
  float: left;
  width: 120px;
  padding-bottom: 20px;
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 16.01px;
  font-weight: 700;
  letter-spacing: 1.281px;
  line-height: 22px;
}

.voiceArea .voiceBox #voiceTxt01 dd {
  float: left;
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 16.01px;
  font-weight: 400;
  letter-spacing: 1.281px;
  line-height: 22px;
}

.voiceArea .voiceBox #voiceTxt02 dt {
  padding: 20px 0 15px;
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 16.01px;
  font-weight: 700;
  letter-spacing: 1.281px;
  line-height: 22px;
}

.voiceArea .voiceBox #voiceTxt02 dd {
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 16.01px;
  font-weight: 400;
  letter-spacing: 1.281px;
  line-height: 22px;
}

.voice #pageNav {
  margin: 100px auto;
}

.voiceBoxRight {
  float: right;
  width: 44%;
  margin: 0 2%;
}

/*recruit_new*/
#wrapper .recruitNew .mainImg {
  text-align: center;
  position: relative;
}

.recruitNew .mainImg h3 {
  font-family: 'Petit Formal Script', cursive;
  position: absolute;
  top: 20%;
  right: 45%;
  font-size: 48px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  padding: 64px 0;
  color: #fff;
  text-shadow: 2px 2px 3px #333;
}

.recruitBox {
  max-width: 960px;
  margin: 70px auto 0;
}

.recruitBox li {
  float: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.recruitBox li img {
  margin: 0 10px 2px 0;
}

.recruitBox li.new {
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
  background-color: #beb198;
  width: 480px;
  height: 73px;
  line-height: 73px;
  color: #fefefe;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  border-right: none;
  position: relative;
}

.recruitBox li.career {
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
  width: 480px;
  height: 73px;
  line-height: 73px;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  position: relative;
}

.recruitMessage,
.staffFlow {
  position: relative;
}

.recruitMessage:before {
  content: url(#);
  left: -25%;
  top: -10%;
  position: absolute;
  z-index: -1;
}

.recruitMessage:after {
  content: url(#);
  right: -25%;
  bottom: -10%;
  position: absolute;
  z-index: -1;
}

.staffFlow:before {
  content: url(#);
  left: 0%;
  top: -10%;
  position: absolute;
  z-index: -1;
}

.staffFlow:after {
  content: url(#);
  right: 0%;
  bottom: -10%;
  position: absolute;
  z-index: -1;
}

#staffFlow03:before,
#staffFlow03:after {
  z-index: 0;
}

#staffFlow02:after {
  z-index: 1;
  bottom: -11%;
}

.recruitBox li.new:after {
  content: url(#);
  position: absolute;
  bottom: 5px;
  right: 50%;
}

.recruitBox li.career:after {
  content: url(#);
  position: absolute;
  bottom: 5px;
  right: 50%;
}

.recruitMessage {
  background: url(/import/tenant_1/160.16.237.162/html/images/common/test07.jpg) no-repeat;
  height: 740px;
  padding-top: 90px;
}

.recruitMessageBox {
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 15.88px;
  font-weight: 500;
  letter-spacing: 1.27px;
  line-height: 22px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.5);
  width: 680px;
  margin: 0 auto;
  padding-bottom: 100px;
}

.recruitMessageBox p {
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1.27px;
  line-height: 22px;
  text-align: center;
  padding: 0 40px;
  margin-bottom: 25px;
}

.recruitMessageBox h3 {
  font-family: 'Petit Formal Script', cursive;
  color: #333333;
  font-size: 28px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  padding: 70px 0;
}

#staffFlow01 {
  margin-top: 90px;
}

.staffFlow h5 {
  color: #333333;
  font-size: 24px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  margin-bottom: 100px;
}

.staffFlow p.logoTittle {
  font-family: OpenSans;
  color: #333333;
  font-size: 24px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  margin-top: 100px;
}

.flowPic {
  position: relative;
  text-align: center;
  width: 50%;
  max-width: 324px;
  margin: auto;
  padding: 30px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.flowPic:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  width: 100%;
  padding-top: 100%;
  background-size: 100%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.flowQAbox {
  width: 950px;
  margin: 0 auto;
  margin-top: 50px;
  padding-bottom: 30px;
  border-bottom: 1px dotted #000;
  margin-bottom: 30px;
}

.flowQA {
  float: left;
  width: 290px;
  margin-right: 40px;
}

.flowQA:last-child {
  margin-right: 0px;
}

.flowQA p.QAtittle {
  font-family: OpenSans;
  color: #333333;
  font-size: 24px;
  font-weight: 700;
  line-height: 22px;
  margin-bottom: 10px;
}

.flowQA p.QAtittle span {
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.281px;
  line-height: 30px;
}

.flowQA p.QAtxt {
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.12px;
  line-height: 24px;
  background-color: #f6f4f0;
  padding: 20px;
  min-height: 170px;
}

#staffFlow02 .staffFlowBox {
  width: 950px;
  margin: 20px auto 0;
}

.staffFlow .staffFlowLeft {
  float: left;
  width: 290px;
  margin-right: 10px;
}

.staffFlow .staffFlowRight {
  float: right;
  width: 650px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #000;
  padding: 20px 10px 20px 20px;
  min-height: 220px;
}

.flowTxtBoxLeft {
  float: left;
  width: 340px;
}

.flowTime p {
  font-family: OpenSans;
  color: #333333;
  font-size: 24px;
  font-weight: 700;
  line-height: 22px;
  text-align: left;
  margin: 20px 0 10px;
  position: relative;
}

.flowTime p span {
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.12px;
  line-height: 24px;
}

.flowTime p span:after {
  content: url(#);
  position: absolute;
  bottom: -130px;
  left: 120px;
}

.staffFlowBox.clearfix:last-of-type span:after {
  display: none;
}

.flowTxtBoxLeft p {
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.12px;
  line-height: 24px;
}

.flowTxtBoxRight {
  float: right;
  margin-left: 10px;
  width: 260px;
}

#staffFlow03 {
  background-color: #f6f4f0;
  padding: 100px 0 170px;
  margin-top: 70px;
}

.staffEdu {
  max-width: 950px;
  margin: 0 auto;
}

.step {
  font-family: 'Petit Formal Script', cursive;
  color: #ffffff;
  font-size: 28px;
  font-weight: 400;
  line-height: 22px;
  -webkit-transform: scaleX(1.0006);
  transform: scaleX(1.0006);
  background: url(#)no-repeat;
  width: 160px;
  display: block;
  text-align: center;
  line-height: 100px;
  height: 80px;
  top: -81px;
  left: -1px;
  position: absolute;
}

#staffEduBox01 .step {
  background: url(#)no-repeat;
}

#staffEduBox02 .step {
  background: url(#)no-repeat;
}

#staffEduBox03 .step {
  background: url(#)no-repeat;
}

.staffEduBox {
  max-width: 800px;
  width: 800px;
  min-height: 200px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #000;
  padding: 35px 35px 0;
  position: relative;
  margin-top: 100px;
}

.staffEduBox:nth-of-type(2n) {
  margin-left: 80px;
}

.staffEduBox:nth-of-type(3n) {
  margin-left: 160px;
}

.staffEduBox p {
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.12px;
  line-height: 24px;
  text-align: left;
  padding-bottom: 40px;
}

.staffEduBox p span {
  font-family: OpenSans;
  color: #333333;
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  text-align: left;
}

.staffRecruit {
  margin: 100px 0;
}

.staffRecruiteBox {
  max-width: 1000px;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 50px 30px;
}

.staffRecruiteBox dl {
  border-bottom: 1px dotted #000;
  padding: 15px 0;
}

.staffRecruiteBox dl:last-of-type {
  border-bottom: none;
}

.staffRecruiteBox dt {
  float: left;
  width: 75px;
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1.12px;
  line-height: 28px;
  text-align: left;
  padding-left: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.staffRecruiteBox dd {
  float: left;
  width: 760px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 60px;
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.12px;
  line-height: 28px;
  text-align: left;
}

/*recruit_career*/
#wrapper .recruitCareer .mainImg {
  text-align: center;
  position: relative;
}

.recruitCareer .mainImg h3 {
  position: absolute;
  top: 20%;
  right: 45%;
  font-size: 48px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  padding: 64px 0;
  color: #fff;
  text-shadow: 2px 2px 3px #333;
}

.recruitCareer .recruitMessage {
  background: url(/import/tenant_1/160.16.237.162/html/images/common/test07.jpg) no-repeat;
  height: 770px;
}

.recruitMessage {
  max-width: 1280px;
  margin: 0 auto;
}

.recruitCareer .recruitBox li.new {
  background: #FAFAFA;
  border: none;
  color: #000;
  position: relative;
}

.recruitCareer .recruitBox li.career {
  background: #fff;
  color: #fefefe;
  background-color: #beb198;
  position: relative;
}

.recruitCareer .recruitBox li.new:after {
  content: url(#);
  position: absolute;
  bottom: 5px;
  right: 50%;
}

.recruitCareer .recruitBox li.career:after {
  content: url(#);
  position: absolute;
  bottom: 5px;
  right: 50%;
}

/*movie*/
#wrapper .movie .mainImg {
  text-align: center;
  position: relative;
  width: 100%;
}

.movie .mainImg h3 {
  position: absolute;
  top: 20%;
  right: 45%;
  font-size: 48px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  padding: 64px 0;
  color: #fff;
  text-shadow: 2px 2px 3px #333;
}

#wrapper .movie .mainImg p {
  height: 100%;
  width: 100%;
}

.movie .mainImg img {
  max-width: initial !important;
  height: 100% !important;
  width: auto !important;
}

.movieBox {
  max-width: 1000px;
  width: 1000px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #000;
  margin: 80px auto;
  padding: 40px;
}

.movieBoxLeft {
  float: left;
  width: 460px;
  padding-right: 40px;
}

.movieBoxRight {
  float: right;
  width: 415px;
}

.movieBoxRight dt {
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 16.01px;
  font-weight: 700;
  letter-spacing: 1.281px;
  line-height: 22px;
  margin-bottom: 30px;
  margin-top: 10px;
}

.movieBoxRight dd {
  font-family: 'Yu Gothic';
  color: #333333;
  font-size: 23.99px;
  font-weight: 500;
  letter-spacing: 1.919px;
  line-height: 32px;
}

.movieBg:nth-child(2n) {
  background: #f6f4f0;
}

.movieBg {
  position: relative;
}

.movieBg:nth-child(odd):before {
  content: url(#);
  left: 0;
  bottom: -10%;
  position: absolute;
}

.movieBg:nth-child(2n):before {
  content: url(#);
  right: 0;
  bottom: -10%;
  position: absolute;
}

.movieBg {
  padding: 40px 0;
}

.movie #pageNav {
  margin: 100px auto;
}

.trimming {
  position: relative;
  display: block;
  overflow: hidden;
  width: 200px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
}

.trimming:after {
  display: block;
  content: "";
  padding-top: 130%;
  /*100%で正方形にカット。100%以下で横長、100%以上で縦長*/
}

#main .gMap img {
  max-width: initial !IMPORTANT;
  max-height: initial !important;
}

@media (max-width: 1280px) {
  #header .inner {
    width: 100%;
  }

  .aujua .mainImg01 {
    width: 100%;
    margin-top: 80px;
  }
}

/*TAB*/
@media (max-width: 1024px) {
  #header .left {
    width: 100%;
    padding-left: 0;
  }

  #gnav ul {
    display: block;
  }

  #gnav li {
    float: none;
    width: auto;
    border-bottom: 1px dotted #cacad9;
    padding: 0;
    margin-top: 0;
   /*  display: block !important; */
  }

  #gnav ul li a {
    height: auto;
    display: block;
  }

  #main .styleGalleryTop div:nth-child(5n) {
    margin-left: 2%;
  }

  #main .styleGalleryTop {
    margin-left: 0px;
  }

  #main .styleGalleryTop div {
    width: 28%;
    margin-right: 2%;
    margin-left: 2%;
  }

  #main .home-menu .menuBox {
    width: 100%;
  }

  #main .home-menu .menuBoxLeft,
  #main .home-menu .menuBoxRight {
    float: none;
    margin: 50px auto;
  }

  #main .home-menu .menuBoxLeft dl {
    width: 100%;
  }

  #main .home-news,
  #main .home-info {
    width: 50%;
    margin: 0 auto;
  }

  #main .home-news dl,
  #main .home-info dl {
    width: 80%;
  }

  #main .home-shop .shopBoxinn {
    width: 40%;
  }

  #main .home-recruit .recruitBoxRight,
  #main .home-recruit .recruitBoxLeft {
    float: none;
    margin: 50px auto;
    width: 100%;
  }

  #main .home-staff .staffBox div {
    width: 33%;
    margin-right: 0;
    margin-bottom: 50px;
  }

  #main .home-voice .voiceBoxInner {
    width: 30%;
    margin-right: 1%;
    margin-left: 1%;
    height: auto;
    min-height: 230px;
  }

  #main .home-recruit .recruitBoxRight p {
    text-align: center;
  }

  #wrapper .concept .mainImg .mainTriangle {
    top: 0%;
  }

  #footer .footerInnerLeft {
    margin-left: 10%;
    display: inline-block;
    float: none;
    margin: auto;
    margin-bottom: 20px;
  }

  #footer .footerInnerRight {
    width: auto;
    float: none;
    display: inline-block;
  }

  /*mahalo*/
  #main .mahaloBoxLeft,
  #main .mahaloBoxRight {
    float: none;
    margin: 0 auto;
  }

  #main .mahaloBoxRight,
  #main .mahaloBoxRight .mahaloBoxPic02,
  #main .mahaloBoxRight .mahaloBoxPic03 {
    position: static;
    text-align: center;
  }

  .mahaloBoxPic02,
  #main .mahaloBoxRight .mahaloBoxPic03 {
    float: left;
    width: 50%;
  }

  #main .mahaloBox {
    height: auto;
    margin-top: 100px;
    margin-bottom: 100px;
  }

  .mahaloBoxLeft {
    margin-top: 50px !important;
  }

  #main .wayFlowPic {
    width: 80%;
    margin: 0 auto;
  }

  #main .wayFlowPicBottom div {
    width: 23%;
    margin-right: 2%;
  }

  #wrapper .mahalo .mainImg p {
    width: 100%;
  }

  /*menu*/
  .menu .menuBoxBg {
    padding: 40px;
  }

  /*aujua*/
  .aujua .mainImgRight {
    float: none;
    margin-top: 30px;
    text-align: center;
    width: 100%;
  }

  .aujua .mainImgLeft h3 {
    float: none;
  }

  .aujua .menuBoxInner p {
    text-align: center;
  }

  .aujua .menuBoxInner .menuBoxPic {
    float: none;
    width: auto;
  }

  .aujua .menuBoxInner .menuBoxTxt {
    float: none;
    width: auto;
    padding-bottom: 15px;
  }

  .aujua #aujuaBox02 .menuBoxInner .menuBoxPic {
    width: 46%;
    margin: 0 2%;
  }

  .aujua #aujuaBox02 .menuBoxInner .menuBoxTxt p {
    text-align: center;
  }

  .aujua #aujuaBox03 .menuBoxInner .menuBoxPic {
    width: 46%;
    margin: 2%;
  }

  .aujua .mainImgLeft p {
    margin-top: 0;
  }

  .aujua .mainImgLeft {
    width: auto;
    margin: 0px auto 0;
    text-align: center;
  }

  .aujua .mainImgLeft p {
    margin-left: 0;
  }

  .aujua .mainImgLeft p {
    float: none;
    width: auto;
  }

  /*staff*/
  .staff .stylebox .stylistBox {
    float: left;
    width: 46%;
    margin: 2%;
    text-align: center;
  }

  .staff #main .toDetail {
    text-align: center;
    display: inline-block;
  }

  .staff #stylistBox .stylistBox:nth-child(2n) {
    margin: 2%;
  }

  /*staff_detail*/
  .staffDetail .staffDetailBox {
    width: 100%;
  }

  .staffDetail .staffDetailRight {
    width: 42%;
    margin-left: 8%;
  }

  .staffDetail .staffDetailLeft {
    width: 48%;
    margin-left: 2%;
  }

  .styleTate .styleInner .styleBox {
    width: 27%;
    margin: 3%;
  }

  .styleBox:nth-of-type(8n+1):before {
    display: none;
  }

  .styleBox:nth-of-type(8n+8):before {
    display: none;
  }

  .styleBox:nth-of-type(9n+1):before {
    content: url(#);
    left: 0%;
    top: -10%;
    position: absolute;
    display: block;
  }

  .styleBox:nth-of-type(9n+9):before {
    content: url(#);
    right: 0%;
    bottom: -10%;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }

  /*stafftate_detail*/
  .styleTateDetail .styleTateDetailRight {
    width: 68%;
    padding-left: 2%;
    padding-bottom: 10%;
  }

  /*stafftate_detail*/
  .styleTateDetail .styleTateDetailLeft {
    width: 28%;
    padding-left: 2%;
    padding-bottom: 5%;
  }

  .styleTateDetail .styleTateDetailLeftBottom p {
    width: 30%;
    margin-right: 3%;
  }

  .styleTateDetail .styleTateDetailLeft .toContact {
    width: 200px;
  }

  /*info*/
  .infoBox .infoLeft {
    width: 70%;
    padding-right: 2.5%;
    padding-left: 2.5%;
  }

  .infoBox .infoRight {
    width: 20%;
  }

  .infoBox .infoTxt {
    width: 50%;
  }

  .info #main .infoBox .toDetail {
    height: 40px;
  }

  .info #main .infoBox .toDetail a {
    line-height: 40px;
  }

  /*info_detail*/

  /*blog*/
  .blog01 .blogBox {
    width: 30%;
    margin-right: 1.5%;
    margin-left: 1.5%;
  }

  .blog01 .blogCategory {
    width: 90%;
    margin: auto;
    float: none;
  }

  .blog01 .blogArchive {
    float: none;
    width: 90%;
    margin: auto;
  }

  /*voice*/
  .voiceArea .voiceBox .voicePic {
    width: 46%;
    margin: 0 2%;
  }

  .voiceArea .voiceBox .voiceTxt {
    width: 100%;
  }

  .voiceArea .voiceBox {
    width: 96%;
    margin: 80px auto 0;
  }

  /*recruit*/
  .recruitBox {
    width: 95%;
  }

  .recruitBox li.career,
  .recruitBox li.new {
    width: 50%;
    font-size: 18px;
  }

  .recruitMessageBox {
    max-width: 680px;
    width: 96%;
    margin: auto;
  }

  .recruitMessage {
    height: auto;
    padding: 2% 0;
  }

  .flowQA {
    width: 31%;
    margin: 0 1%;
  }

  .flowQAbox {
    max-width: 950px;
    width: auto;
  }

  #staffFlow02 .staffFlowBox {
    max-width: 950px;
    width: auto;
  }

  .staffFlow .staffFlowLeft {
    float: none;
    width: 90%;
    margin: 0 auto;
  }

  .staffFlow .staffFlowRight {
    float: none;
    width: 90%;
    margin: 10px auto 80px;
  }

  .flowTime p span:after {
    display: none;
  }

  .flowTxtBox {
    position: relative;
  }

  .staffFlowRight .flowTxtBoxLeft:after {
    content: url(#);
    position: absolute;
    bottom: -100px;
    right: 50%;
  }

  .staffFlowBox:last-of-type .flowTxtBoxLeft:after {
    display: none;
  }

  .flowTxtBoxRight {
    width: 46%;
    margin: 2%;
    text-align: center;
  }

  .flowTxtBoxLeft {
    width: 46%;
    margin: 2%;
  }

  .staffEduBox {
    width: 90%;
    min-height: 200px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #000;
    padding: 35px 35px 0;
    position: relative;
    margin-top: 100px;
  }

  .staffEduBox:nth-of-type(2n) {
    margin: 120px auto 0;
  }

  .staffEduBox:nth-of-type(3n) {
    margin: 120px auto;
  }

  .staffEduBox {
    margin: 120px auto;
  }

  .staffRecruiteBox {
    width: 90%;
  }

  .staffRecruiteBox dd {
    width: 85%;
  }

  .staffRecruiteBox dt {
    width: 15%;
  }

  #footer .footerInner {
    width: 90%;
  }

  .movieBox {
    width: 90%
  }

  .movieBoxRight,
  .movieBoxLeft {
    float: none;
    width: 100%;
    margin: 0 auto;
  }

  .movieBoxRight dd {
    font-size: 18px;
  }

  .movieBoxLeft {
    padding: 0;
    margin-top: 20px;
    text-align: center;
  }
}

/*SP*/
@media (max-width: 768px) {
  h1 {
    padding-right: 50px;
  }

  #main .styleGalleryTop div {
    width: 48%;
    margin-right: 1%;
    margin-left: 1%;
  }

  #main .styleGalleryTop div:nth-child(5n) {
    margin-left: 1%;
  }

  #main .home-shop .shopInfoLeft,
  #main .home-shop .shopInfoRight {
    float: none;
  }

  #main .home-shop .shopBoxinn p {
    text-align: center;
  }

  #main .home-menu .menuBoxLeft {
    width: 80%;
  }

  #main .home-menu .menuBoxRight {
    width: 80%;
  }

  #main .home-news,
  #main .home-info {
    float: none;
  }

  #main .home-news,
  #main .home-info {
    width: 100%;
    margin: 0 auto;
    float: none;
  }

  #main .home-staff .staffBox div {
    width: 50%;
  }

  #main .home-voiceInner {
    height: 450px;
  }

  #main .home-voice .voiceBoxInner {
    width: 100%;
    margin-bottom: 10px;
  }

  #main .home-voice .voiceBoxInner {
    float: none;
    min-height: initial;
  }

  #main .home-voiceInner {
    height: 530px;
  }

  #main .home-shop .shopBoxinn {
    width: 100%;
  }

  #footer .footerInnerRight {
    width: auto;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 20px;
  }

  /*mahalo*/
  #main .mahaloBoxLeft,
  #main .mahaloBoxRight {
    width: 100%;
  }

  #main .mahaloBoxLeft dl {
    width: 100%;
    margin: 0 auto;
  }

  #main .wayFlowPicBottom div {
    float: left;
    width: 46%;
    /* margin-right: 10px; */
    margin: 0 2%;
  }

  /*menu*/
  .menu .menuBoxBg {
    padding: 20px 10px;
  }

  .menu .menuBoxTxt dt {
    width: auto;
  }

  .menu .menuBox {
    padding: 40px;
  }

  /*aujua*/
  .aujua .menuBoxInner .menuBoxPic {
    float: none;
    width: 100%;
    text-align: center;
  }

  .aujua #aujuaBox02 .menuBoxInner .menuBoxTxt,
  .aujua #aujuaBox02 .menuBoxInner .menuBoxPic {
    float: none;
    width: 90%;
    margin: 5% 5% 0;
    text-align: center;
  }

  /*staff*/
  .staff .stylebox .stylistBox {
    float: none;
    width: 80%;
  }

  .staff #stylistBox .stylistBox:nth-child(2n) {
    margin: 2% auto;
  }

  .staff .stylebox .stylistBox {
    margin: 2% auto;
  }

  .staff #assistantBox {
    width: 100%;
  }

  .staff #assistantBox .stylistBox {
    width: 100%;
  }

  .styleBox:nth-of-type(9n+1):before {
    display: none;
  }

  .styleBox:nth-of-type(8n+1):before {
    content: url(#);
    display: block;
  }

  .styleBox:nth-of-type(8n+8):before {
    content: url(#);
    display: block;
    right: 0;
    z-index: -1;
  }

  /*staff_detail*/
  .staffDetail .staffDetailRight {
    width: 96%;
    float: none;
    text-align: center;
    margin: 2% auto;
  }

  .staffDetail .staffDetailLeft {
    width: 96%;
    float: none;
    text-align: center;
    margin: 2% auto;
  }

  .staffDetail .staffDetailRight .toContact {
    margin: 0 auto;
  }

  .trimming {
    width: 150px;
  }

  .styleTate .styleInner .styleBox {
    width: 44%;
    margin: 3%;
  }

  .trimming:after {
    display: block;
    content: "";
    padding-top: 100%;
    /*100%で正方形にカット。100%以下で横長、100%以上で縦長*/
  }

  .styleTate .style li {
    width: 50%;
    margin: 20px auto;
  }

  /*stafftate_detail*/
  .styleTateDetail .styleTateDetailRight {
    float: none;
    width: 90%;
    padding-left: 0%;
    text-align: center;
    margin: 0 auto;
  }

  .styleTateDetail .styleTateDetailLeft {
    float: none;
    width: 90%;
    padding-left: 0%;
    text-align: center;
    margin: 0 auto;
  }

  .styleTateDetail .styleTateDetailRight dt {
    font-weight: 500;
  }

  .styleTateDetail .styleTateDetailRight .styleDate dt {
    width: 49%;
    margin-left: 1%;
  }

  .styleTateDetail .styleTateDetailRight .styleDate dd {
    width: 49%;
    margin-left: 1%;
  }

  .styleTateDetail .styleTateDetailRight .recocomendType dt {
    width: 100%;
  }

  .styleTateDetail .styleTateDetailRight .recocomendType dd {
    width: 31%;
    margin: 1%;
  }

  .styleTateDetail .styleTateDetailRight dl.faceType dt {
    width: 100%;
    height: 45px;
    line-height: 45px;
  }

  .styleTateDetail .styleTateDetailRight dl.faceType dd {
    float: none;
    display: inline-block;
    line-height: initial;
    height: initial;
    width: 30%;
    margin: 1%;
    position: relative;
  }

  .styleTateDetail .styleTateDetailRight dl.faceType dd span {
    position: static;
  }

  .styleTateDetail .styleTateDetailRight .toContact {
    margin: 55px auto 0;
  }

  .styleTateDetail .styleTateDetailLeftBottom p {
    width: 30%;
    margin-right: 3%;
  }

  .styleTateDetail .styleTateDetailLeftBottom p:last-child {
    margin-right: 0%;
  }

  .styleTateDetail .styleTateDetailRight dl.faceType dd span.a {
    margin-top: 12px;
  }

  .styleTateDetail .styleTateDetailRight dl.faceType dd span.b {
    margin-top: 19px;
  }

  .styleTateDetail .styleTateDetailRight dl.faceType dd span.c {
    margin-top: 13px;
  }

  .styleTateDetail .styleTateDetailLeft .toContact {
    width: 260px;
  }

  /*info*/
  .infoBox .infoLeft {
    float: none;
    width: 90%;
    padding-right: 2.5%;
    padding-left: 2.5%;
    text-align: center;
    margin: 0 auto;
  }

  .infoBox .infoRight {
    width: 95%;
    padding-right: 2.5%;
    padding-left: 2.5%;
    text-align: center;
    margin: 0 auto;

  }

  .infoBox .infoTxt {
    width: 90%;
    padding-left: 0%;
    text-align: left;
    float: none;
  }

  .infoBox .infoPic {
    width: 90%;
    float: none;
  }

  .info #main .infoBox .toDetail {
    width: 100%;
    height: 35px;
  }

  .info #main .infoBox .toDetail a {
    line-height: 35px;
  }

  .info #main .infoBox .toDetail img {
    top: 30%;
  }

  .blog01 .blogBox {
    width: 47%;
    margin-right: 1.5%;
    margin-left: 1.5%;
  }

  /*voice*/
  .voiceArea .voiceBox .voicePic {
    float: none;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  .voiceBoxRight {
    float: none;
    width: 100%;
    margin: 30px auto 0;
  }

  .voiceArea .voiceBox .voiceTxt {
    margin: 0;
  }

  .voiceTxt dl {
    text-align: center;
    padding-top: 20px;
  }

  .voiceArea .voiceBox #voiceTxt01 dd {
    float: none;
    width: 100%
  }

  .voiceArea .voiceBox #voiceTxt01 dt {
    float: none;
    width: 100%
  }

  .voiceArea .voiceBox .voiceTxt {
    text-align: center;
  }

  /*recruit*/
  .flowQA {
    float: none;
    width: 80%;
    margin: 30px auto 0;
  }

  .flowQA:last-child {
    margin: 30px auto 0;
  }

  .flowTxtBoxRight {
    width: 96%;
    margin: 2%;
    text-align: center;
  }

  .flowTxtBoxLeft {
    width: 96%;
    margin: 2%;
  }

  .flowPic {
    padding: 3%;
  }

  .staffRecruiteBox dd {
    float: none;
    width: 90%;
    margin: 0 auto;
    padding: 0;
  }

  .staffRecruiteBox dt {
    float: none;
    width: 90%;
    margin: 0 auto;
    padding: 0;
  }

  .recruitMessageBox h3 {
    padding: 40px;
  }

  .recruitMessageBox p {
    font-size: 12px;
  }
}