html #wrapper {
   transition: opacity 1s ease-in-out .5s, transform 1s ease-in-out .5s, visibility 0s;
   visibility: visible;
}

html:not(.wf-active) #wrapper {
   transition: opacity 1s ease-in-out 1s, transform 1s ease-in-out 1s, visibility 0s;
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   opacity: 0;
   visibility: hidden;
}

#key .p-indexSlide__item--1 div {
   background: url(../img/index/slide01.jpg) no-repeat center;
}

#key .p-indexSlide__item--2 div {
   background: url(../img/index/slide02.jpg) no-repeat center;
}

#key .p-indexSlide__item--3 div {
   background: url(../img/index/slide03.jpg) no-repeat center;
}

@keyframes b {
   0% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(20px);
   }

   to {
      transform: translateY(0);
   }
}

.p-indexSlide {
   height: 450px;
   position: relative;
   background-color: #fff;
   z-index: 0;
}

.p-indexSlide__inner {
   position: relative;
   width: 100%;
   height: 450px;
}

.p-indexSlide__container {
   position: absolute;
   width: 100%;
   height: 450px;
   overflow: hidden;
}

.txt_key {
   position: absolute;
   top: 50%;
   left: 0;
   width: 100%;
   transform: translateY(-35%);
   z-index: 200;
}

.wf-active .p-indexSlide__item--1 {
   animation: d 15s 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

.wf-active .p-indexSlide__item--1 div {
   animation: c 15s 0s linear infinite;
}

.wf-active .p-indexSlide__item--2 {
   animation: d 15s 4.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

.wf-active .p-indexSlide__item--2 div {
   animation: c 15s 3s linear infinite;
}

.wf-active .p-indexSlide__item--3 {
   animation: d 15s 7.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

.wf-active .p-indexSlide__item--3 div {
   animation: c 15s 6s linear infinite;
}

.p-indexSlide__item {
   position: absolute;
   width: 100%;
   height: 450px;
   overflow: hidden;
}

.p-indexSlide__item div {
   position: absolute;
   width: 110vw;
   height: 450px;
   min-width: 750px;
}

@keyframes c {
   0% {
      transform: translateX(0);
   }

   40% {
      transform: translateX(-30vw);
   }

   61% {
      transform: translateX(0);
   }

   100% {
      transform: translateX(0);
   }
}

@keyframes d {
   0% {
      width: 100%;
      z-index: 3;
   }

   15% {
      width: 100%;
   }

   20% {
      width: 0;
      z-index: 3;
   }

   20.1% {
      z-index: -1;
   }

   26% {
      width: 100%;
   }

   90% {
      z-index: -1;
   }

   100% {
      width: 100%;
      visibility: visible;
      z-index: 2;
   }
}

#index #lead {
   overflow: hidden;
   position: relative;
}

#index #lead h2 {
   margin-bottom: 13px;
}

#index #sec01 {
   background: url(../img/index/bg.jpg) repeat;
}

#index #sec01 .bx-wrapper .bx-pager,
#index #sec01 .bx-wrapper .bx-controls-auto {
   bottom: 10%;
}
#index #sec01 h4{
   text-align: center;
   font-size:5vw;
   line-height:200%;
}
#index #sec01 h4 span{
   background: #fff;
   padding:3px 5px;
}
#index #sec01 p.txt {
   padding-top: 10px;
}

#index #sec01 dl dt {
   margin: 0 3.15%;
   padding-bottom: 25px;
}

#index #sec02 {
   padding: 0px 0 20px;
   background: url(../img/index/bg1.jpg) repeat;
   color: #FFF;
}

#index #sec02 ul {
   clear: both;
   margin: 0 2.5%;
}

#index #sec02 ul li {
   margin: 0;
   padding-bottom: 25px;
}

#index #sec02 ul li a {
   display: block;
   border: 1px solid #653c08;
   color: #d01d00;
   font-weight: bold;
   padding: 8px 0;
   text-align: center;
}

#index #blog {
   background: url(../img/index/bg01.jpg) repeat;
   position: relative;
   padding: 32px 0 25px;
}

#index #blog::before {
   background: url(../img/index/line1.png) repeat-x;
   width: 100%;
   height: 3px;
   content: "";
   position: absolute;
   top: 8px;
   left: 0;
}

#index #blog h2 {
   margin-bottom: 20px;
}

#index #blog #feed p {
   float: left;
}

#index #blog #feed dl {
   padding: 10px;
}

#index #blog #feed dl a {
   text-decoration: none;
   font-weight: bold;
}

#index #takeout {
   padding: 10vw 0;
   position: relative;
}

#index #takeout:before {
   background: url(../img/index/bg.jpg) repeat center top;
   width: 35%;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   content: '';
}

#index #takeout img {
   width: 100%;
   height: auto;
}

#index #takeout h2 {
   padding: 15px 0 20px;
}

#concept #sec01 {
   padding: 10px 0 35px;
}

#concept #sec01 .bx-wrapper .bx-pager,
#concept #sec01 .bx-wrapper .bx-controls-auto {
   bottom: 7%;
}

#concept #sec01 p.txt {
   padding-top: 15px;
}

#concept #sec02 {
   background: url(../img/concept/bg2.jpg) repeat;
   padding: 20px 0 20px;
}

#concept #sec02 p.note {
   text-align: center;
}

#concept #sec02 ul {
   margin: 0 3%;
   padding: 30px 0 35px;
}

#concept #sec03 {
   padding-bottom: 15px;
}

#lunch #sec01 {
   padding-bottom: 35px;
}

#lunch #sec01 p.note {
   text-align: center;
   border: 1px solid #b0afaf;
   padding: 6px 10px;
   margin: 0 5%;
}

#lunch #sec02 {
   background: url(../img/lunch/bg2.jpg) repeat;
   background-size: 80% auto;
   padding-bottom: 35px;
}

#lunch #sec02 dl {
   margin: 10px 3% 0;
   background: #FFF;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
   padding: 15px 10px;
   position: relative;
}

#lunch #sec02 dl::before {
   background: url(../img/lunch/deco.png) no-repeat;
   width: 22px;
   height: 215px;
   content: "";
   position: absolute;
   left: -8px;
   top: -50%;
}

#lunch #sec02 dl dt {
   font-size: 16px;
   font-weight: bold;
   text-align: center;
   letter-spacing: 2px;
}

#lunch #sec02 dl dt span {
   display: block;
   font-size: 20px;
}

#lunch #sec03 {
   background: url(../img/lunch/bg2.jpg) repeat;
   background-size: 80% auto;
   padding-bottom: 15px;
}

#lunch #sec03 .toggle {
   margin: 0 3%;
}

#lunch #sec03 .toggle h2 {
   background: #FFF;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
   padding: 5px 10px;
   margin-bottom: 20px;
}

#lunch #sec03 .toggle dl {
   padding: 5px 0;
   border-bottom: 1px solid #999999;
   position: relative;
}

#lunch #sec03 .toggle dl::after {
   content: "." !important;
   clear: both !important;
   display: block !important;
   height: 0 !important;
   visibility: hidden !important;
}

#lunch #sec03 .toggle dl dt {
   float: left;
}

#lunch #sec03 .toggle dl dd {
   float: right;
}

#lunch #sec03 .toggle dl:nth-child(1) dd {
   position: absolute;
   top: 5px;
   right: 0;
}

#lunch #sec04 {
   padding-bottom: 20px;
}

#popup1,
#popup2,
#popup3 {
   padding: 15px 0 10px;
   margin: 0 3%;
   display: block;
}

#menu #sec01 {
   padding: 20px 0;
}

#menu #sec01 h2 {
   margin-bottom: 10px;
}

#menu #sec02 {
   background: url(../img/lunch/bg2.jpg) repeat;
   background-size: 80% auto;
   padding-bottom: 20px;
}

#menu #sec02 .bx-controls-direction {
   top: 29%;
}

#menu #sec02 dl dd {
   margin: 0 2.5%;
}

#menu #sec02 dl dd.ttl {
   font-weight: bold;
   letter-spacing: 1px;
   text-align: center;
   font-size: 16px;
   padding: 15px 0 10px;
}

#menu #sec02 dl dd.ttl span {
   display: block;
   font-size: 20px;
}

#menu #sec02 dl dd.txt {
   padding-bottom: 15px;
}

#menu #sec02 p.note {
   text-align: center;
   padding-top: 30px;
}

#menu #sec03 {
   padding-bottom: 20px;
}

#menu #sec03 .bx-controls-direction {
   top: 38%;
}

#menu #sec03 dl dd {
   margin: 0 2.5%;
}

#menu #sec03 dl dd.ttl {
   font-weight: bold;
   letter-spacing: 1px;
   text-align: center;
   font-size: 16px;
   padding: 15px 0 10px;
}

#menu #sec03 dl dd.ttl span {
   display: block;
   font-size: 20px;
}

#menu #sec03 dl dd.txt {
   padding-bottom: 15px;
}

#menu #sec04 {
   padding: 0px 0 20px;
   background: url(../img/index/bg1.jpg) repeat;
   color: #FFF;
}

#menu #sec04 .bx-controls-direction {
   top: 26%;
}

#menu #sec04 dl dd {
   margin: 0 2.5%;
}

#menu #sec04 dl dd.ttl {
   font-weight: bold;
   letter-spacing: 1px;
   text-align: center;
   font-size: 16px;
   padding: 15px 0 10px;
}

#menu #sec04 dl dd.ttl span {
   display: block;
   font-size: 20px;
}

#menu #sec04 dl dd.txt {
   padding-bottom: 15px;
}

#menu #sec05 {
   padding-bottom: 20px;
}

#menu #sec05 h2 {
   margin-bottom: 12px;
}

#menu #sec06 {
   padding-bottom: 20px;
}

#menu #sec07 {
   background: url(../img/lunch/bg2.jpg) repeat;
   padding: 35px 0;
}

#menu #sec07 h3 {
   border: 1px solid #000;
   margin: 0 2.5%;
   position: relative;
}

#menu #sec07 p.note {
   padding: 10px 0 0 0;
   text-align: center;
}

#menu #sec07 h4 {
   position: relative;
   margin: 15px 2.5% 0;
   font-size: 18px;
   text-align: center;
   padding: 5px 0 10px;
   border-bottom: 1px solid #000;
}

#menu #sec07 dl {
   margin: 0 2.5%;
   padding: 8px 0;
}

#menu #sec07 dl::after {
   content: "." !important;
   clear: both !important;
   display: block !important;
   height: 0 !important;
   visibility: hidden !important;
}

#menu #sec07 dl dt {
   float: left;
}

#menu #sec07 dl dd {
   float: right;
   text-align: center;
}

#menu #sec07 dl+dl {
   border-top: 1px solid #999999;
}

#menu #sec08 {
   background: url(../img/menu/bg_ac.jpg) repeat;
   padding: 35px 0;
}

#menu #sec08 h3 {
   border: 1px solid #000;
   margin: 0 2.5%;
   position: relative;
}

#menu #sec08 p.note {
   padding: 10px 0 0 0;
   text-align: center;
}

#menu #sec08 h4 {
   position: relative;
   margin: 15px 2.5% 0;
   font-size: 18px;
   text-align: center;
   padding: 5px 0 10px;
   border-bottom: 1px solid #000;
}

#menu #sec08 dl {
   margin: 0 2.5%;
   padding: 8px 0;
}

#menu #sec08 dl::after {
   content: "." !important;
   clear: both !important;
   display: block !important;
   height: 0 !important;
   visibility: hidden !important;
}

#menu #sec08 dl dt {
   float: left;
}

#menu #sec08 dl dd {
   float: right;
   text-align: center;
}

#menu #sec08 dl+dl {
   border-top: 1px solid #999999;
}

#party #lead {
   padding: 20px 0;
}

#party #sec01 {
   background: url(../img/lunch/bg2.jpg) repeat;
   padding-bottom: 20px;
}

#party #sec01 h2 {
   margin-bottom: 15px;
}

#party #sec01 dl {
   text-align: center;
   padding-bottom: 25px;
}

#party #sec01 dl dt {
   font-weight: bold;
   font-size: 18px;
   padding-top: 15px;
}

#party #sec01 .toggle {
   margin: 0 2.5% 25px;
   border: 2px solid #FFF;
   text-align: center;
}

#party #sec01 .toggle h3 {
   padding: 10px;
   font-weight: bold;
}

#party #sec01 .toggle h3 span {
   display: block;
   font-size: 17px;
}

#party #sec01 .toggle p span {
   border-top: 1px solid #000;
   display: inline-block;
   padding-top: 10px;
}

#party #sec02 dl {
   margin: 0 2.5%;
   padding-bottom: 25px;
}

#party #sec02 dl dt {
   font-weight: bold;
   font-size: 18px;
   text-align: center;
   padding-bottom: 10px;
}

#party #sec02 dl dd {
   margin-bottom: 15px;
}

#party #sec02 dl dd span {
   margin: auto;
   padding: 5px 10px;
   border: 1px solid #b0afaf;
   display: block;
   text-align: center;
}

#access #lead {
   padding-bottom: 35px;
}

#access #lead .info_list {
   margin: 0 2.5%;
   padding: 20px 0 10px;
}

#access #lead dl {
   padding: 6px 0;
}

#access #lead dl dt {
   font-weight: bold;
}

#access #lead dl dd a {
   font-weight: bold;
   font-size: 18px;
   text-decoration: none;
}

#access #lead dl dd span {
   font-size: 12px;
   line-height: 18px;
   position: relative;
   top: -5px;
}

#access #lead dl+dl {
   border-top: 1px solid #bababa;
}

#access #lead ul {
   padding-top: 10px;
   margin: 0 2.5%;
}

#access #lead ul a,
#access #lead ul span {
   display: block;
   border: 1px solid #000;
   color: #000;
   font-weight: bold;
   padding: 8px 0;
   text-align: center;
}

#access #sec02 {
   margin-top: -9px;
   background: url(../img/lunch/bg2.jpg) repeat;
   background-size: 90% auto;
   padding-bottom: 35px;
}

#access #sec02 dl dd {
   margin: 0 2.5%;
}

#access #sec03 {
   padding-bottom: 35px;
}

#access #sec03 dl {
   background: url(../img/shared/bg_ft.jpg) repeat;
   color: #FFF;
   padding: 15px 15px 25px;
   margin: -4% 0 0 5%;
   position: relative;
}

#access #sec03 dl dd {
   padding-top: 10px;
}

#access #sec04 {
   background: url(../img/access/bg_mail.jpg) repeat;
   position: relative;
   padding: 20px 0 10px;
}
#access #sec04 p span{
   font-weight: bold;
	font-size: 16px;
}

#mail {
   background: url(../img/recruit/bg_mail.jpg) repeat;
   padding: 25px 2.5% 20px;
}

#mail .caption {
   font-weight: bold;
   margin-bottom: 5px;
}

#mail .caption .mark-require {
   background: #7c150f;
   font-size: 12px;
   color: #fff;
   text-align: center;
   line-height: 23px;
   letter-spacing: 0;
   padding: 1px 10px;
   margin-left: 12px;
   font-weight: normal;
   border-radius: 3px;
}

#mail .error,
#mail .error-phone,
#mail .error-number,
#mail .error-email {
   position: inherit;
}

#mail .col {
   border-top: 1px solid rgba(0, 0, 0, 0.5);
   padding: 15px 0;
}

#mail .col p {
   margin: 0;
   padding: 0;
}

#mail .col input[type='text'] {
   line-height: 32px;
   height: 32px;
   width: 100%;
}

#mail .col select {
   line-height: 32px;
   height: 32px;
   width: 100%;
}

#mail .col textarea {
   width: 100%;
   min-height: 100px;
}

#mail .col .name1,
#mail .col .name2 {
   width: 50%;
   float: left;
}

#mail .col .name1 input,
#mail .col .name2 input {
   width: auto;
}

#recruit #mail .col .year,
#recruit #mail .col .month,
#recruit #mail .col .day {
   width: 33%;
   float: left;
   position: relative;
}

#mail .submit {
   text-align: center;
}

#mail .submit button {
   width: 55%;
   background: none;
   border: 2px solid #000;
   padding: 2.5%;
   position: relative;
}

#mail .submit button::before {
   position: absolute;
   top: 10px;
   right: 4%;
   content: '\f105';
   font-family: "fontello";
}

#mail .submit-form {
   padding-top: 20px;
}

#mail .submit-form button {
   margin-left: 25%;
}

#mail .submit-confirm {
   padding-top: 20px;
}

#mail .submit-confirm button {
   margin: 0;
   width: 48%;
}

#mail .submit-confirm button.form-submit {
   float: left;
}

#mail .submit-confirm button.form-back {
   float: right;
}

#room {
   font-size: 13px;
   line-height: 25px;
   letter-spacing: 0.15em;
}

#room .block {
   background-color: #fff;
}

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

#room .fnt-shippori-mincho {
   font-family: 'Shippori Mincho', serif;
}

#room .ttl01 {
   font-weight: 400;
   font-size: 5.4vw;
   letter-spacing: 0.12em;
   line-height: 1.75;
}

#room p {
   margin: 0;
   padding: 0;
}

#room #lead .box {
   padding: 6.5vw 4% 16vw;
}

#room #lead h3 {
   font-weight: 400;
   font-size: 6.4vw;
   letter-spacing: 0.12em;
   line-height: 1.5;
}

#room #lead h3 span {
   font-size: 8.5vw;
}

#room #lead h3 p:last-child {
   padding-left: 10%;
}

#room #lead .txt {
   padding-top: 15px;
}

#room #link .box {
   display: flex;
   flex-wrap: wrap;
}

#room #link .box p {
   width: 50%;
}

#room #scene01 {
   padding-top: 15vw;
}

#room #scene01 .box {
   margin-top: -5%;
   padding: 0 4% 15vw;
}

#room #scene01 .txt {
   padding-top: 15px;
}

#room #scene02 .box {
   margin-top: -5%;
   padding: 0 4% 15vw;
}

#room #scene02 .txt {
   padding-top: 15px;
}

#room #scene02 .link {
   padding-top: 20px;
}

#room #scene03 .box {
   padding: 10vw 4% 15vw;
}

#room #scene03 .txt {
   padding-top: 15px;
}

#room #scene04 .ttl01 {
   font-size: 5vw;
}

#room #scene04 .box {
   padding: 10vw 4% 15vw;
}

#room #scene04 .txt {
   padding-top: 15px;
}

#room #floor {
   background: url("../img/room/floor-bg.jpg") repeat center top;
   padding: 15vw 0 10vw;
}

#room #floor .box {
   padding: 0 6%;
}

#room #floor .slider-fade .slick-dots {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   position: absolute;
   bottom: 4%;
   right: 3%;
}

#room #floor .slider-fade .slick-dots li {
   width: 12px;
   height: 12px;
   background-color: #c9b09b;
   border-radius: 50%;
   position: relative;
   transition: all 0.3s;
}

#room #floor .slider-fade .slick-dots li+li {
   margin-left: 8px;
}

#room #floor .slider-fade .slick-dots li button {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   cursor: pointer;
   opacity: 0;
}

#room #floor .slider-fade .slick-dots li.slick-active {
   background-color: #fff;
}

#room #floor h3 {
   padding-top: 30px;
}

#room #floor .txt {
   padding-top: 15px;
}

#room #room_pat {
   padding-bottom: 15vw;
   position: relative;
}

#room #room_pat h2 {
   width: 100%;
   background: url("../img/room/floor-bg.jpg") repeat center top;
   position: absolute;
   top: 0;
   left: 0;
}
#room #room_pat h2 {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}
#room #room_pat h2 img {
   display: block;
   position: relative;
   z-index: 1;
}
#room #room_pat h2 img:nth-child(1){
   width: 23.6%;
}
#room #room_pat h2 img:nth-child(2){
   width: 12.4%;
   margin-right: 4%;
}
#room #room_pat .slider-fade .photo {
   width: 76.5%;
   margin-left: auto;
   padding-top: 4.8%;
}

#room #room_pat .slider-fade .box {
   padding: 0 4%;
}

#room #room_pat .slider-fade .slick-dots {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   position: absolute;
   top: 46%;
   right: 4%;
   left: 4%;
   z-index: 3;
}

#room #room_pat .slider-fade .slick-dots li {
   width: 12px;
   height: 12px;
   background-color: #c9b09b;
   border-radius: 50%;
   position: relative;
   transition: all 0.3s;
}

#room #room_pat .slider-fade .slick-dots li+li {
   margin-left: 10px;
}

#room #room_pat .slider-fade .slick-dots li button {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   cursor: pointer;
   opacity: 0;
}

#room #room_pat .slider-fade .slick-dots li.slick-active {
   background-color: #fff;
}


#room_pat .slider-fade h3{
   font-size:7vw;
   text-align: center;
   border-bottom:1px solid #000;
   line-height:120%;
   margin-bottom:10px;
   padding-top:10px;
   padding-bottom:5px;
}
#room_pat .slider-fade h3 span{
   font-size:60%;
}
#room_pat .slider-fade h4{
   font-size:4vw;
   text-align: center;
   margin-bottom:10px;
}