* {

  margin: 0;

  padding: 0;

  list-style: none;

}



.noshow {

  display: none;

}



img[data-src] {

  opacity: 0;

}



html {

  font-size: 16px;

}



.img-box {

  position: relative;

}



.gray-container {

  background-image: url('/images/0) COMMON/common/background.png');

  margin: auto 2% auto 2%;

  padding-bottom: 50px;

}



.gray-container.fix-gray {

  padding-bottom: 20%;

}



.part-title-box {

  margin: 8% 5%;

  display: inline-block;

  width: 15rem;

  vertical-align: top;

  transition: all .3s;

}



.part-title {

  height: 1.5rem;

  padding-bottom: 1.5rem;

  vertical-align: bottom;

}



.part-title-2col {

  height: 5rem;

  padding-bottom: 1rem;

  vertical-align: bottom;

}



.about-page .second-title {

  height: 3rem;

  margin: 8% 5%;

  vertical-align: bottom;

}



.part-title-box .border-bot {

  border-bottom: 1px solid rgb(186, 147, 108);

  width: 0;

  opacity: 0;

  transition: all .5s;

}



.part-title-box .border-bot.lineAppear {

  width: 100%;

  opacity: 1;

}



#about-page {

  width: 100%;

  overflow: hidden;

}



#about-page .about-page {

  width: 100%;

}



.about-page .menu-box {

  width: 100%;

  position: fixed;

  background-color: #fff;

  z-index: 15;

}



.about-page header {

  display: flex;

  justify-content: space-between;

}



.about-page header #main-logo {

  height: 100%;

}



.about-page header .main-menu {

  display: flex;

}



.about-page header .main-menu img {

  height: 3rem;

  vertical-align: bottom;

  transition: .3s;

}



#about-page header .main-menu img:hover {

  opacity: .5;

  transform: scale(1.05);

}



.about-page header .main-menu a {

  width: 6rem;

  text-decoration: none;

  text-align: center;

  font: .85rem bold;

  line-height: 2rem;

  letter-spacing: .2rem;

  color: black;

  padding: .5rem 5px;

  margin: .5rem 15px;

  opacity: 0;

}



.about-page header .main-menu a:first-child {

  animation-duration: .5s;

}



.about-page header .main-menu a:nth-child(2) {

  animation-duration: .7s;

}



.about-page header .main-menu a:nth-child(3) {

  animation-duration: .9s;

}



.about-page header .main-menu a:nth-child(4) {

  animation-duration: 1.1s;

}



.about-page header .main-menu a:nth-child(5) {

  animation-duration: 1.3s;

}



.about-page header .main-menu a:nth-child(6) {

  animation-duration: 1.5s;

}



.about-page header .main-menu a:last-child {

  width: 3rem;

  margin: auto;

  padding: 0;

  padding-right: .6rem;

}



.about-page header .main-menu a:nth-child(5) {

  letter-spacing: .1rem;

}



.about-page header .main-menu a:hover,

.about-page header .main-menu .active {

  color: white;

  font-size: .75rem;

  background-color: rgb(23, 33, 72);

}



.about-page header .main-menu a:last-child:hover {

  background-color: transparent;

}



.about-page .main-img {

  margin-bottom: 35%;

}



.about-page .main-img img:first-child {

  width: 75%;

  position: relative;

  z-index: 2;

}



.about-page .main-img img:nth-child(2) {

  width: 24%;

  position: absolute;

  left: 64.8%;

  top: 56%;

  z-index: 3;

}



.about-page .main-img img:nth-child(3) {

  width: 24%;

  position: absolute;

  top: 68%;

  margin-left: 2%;

}



.about-page .main-img img:nth-child(4) {

  width: 5%;

  position: absolute;

  top: 70%;

  margin-left: 2%;

}



.about-page .main-img img:nth-child(5) {

  width: 35%;

  position: absolute;

  top: 75%;

  left: 75%;

  margin-left: -5%;

  z-index: 1;

  opacity: 0;

}



.about-page .main-img img:nth-child(6) {

  width: 30%;

  position: absolute;

  top: 0;

  bottom: 0;

  right: 0;

  left: 0;

  margin: 35% auto auto;

  z-index: 7;

}



.about-page .main-img img:nth-child(7) {

  width: 1%;

  position: absolute;

  top: 0;

  bottom: 0;

  right: 0;

  left: 0;

  margin: 43% auto auto 50%;

  z-index: 7;

}



.about-page .gray-container.story-gray {

  margin: -41% 2% auto 2%;

  padding-top: 5%;

  padding-bottom: 20%;

}



.about-page .gray-container.story-gray .language-part {

  display: none;

  width: 100%;

  margin-top: -3%;

  margin-bottom: 5%;

}



.about-page .gray-container.story-gray .language-part .language {

  display: inline-block;

  width: 25%;

  margin-left: 5%;

}



.about-page .gray-container.story-gray .language-part .change {

  width: 60%;

  margin-left: 5%;

  display: inline-block;

}



.about-page .gray-container.story-gray .language-part .change h2 {

  cursor: pointer;

  display: inline-block;

  font-size: 1.2rem;

  line-height: 0.8rem;

  margin-right: 5%;

  padding: 3%;

}



.about-page .gray-container.story-gray .language-part .change h2:first-child {

  background-color: black;

  color: #fff;

}



.about-page .gray-container .about-container {

  position: relative;

  padding-bottom: 5%;

  width: 100%;

}



.about-page .gray-container .about-container img:first-child {

  width: 30%;

  display: inline-block;

  vertical-align: top;

  margin-left: 7%;

  opacity: 0;

}



.about-page .gray-container .about-container p {

  display: inline-block;

  vertical-align: top;

  /* writing-mode: vertical-rl; */

  text-align: center; 

  margin-left: 5%;

  margin-top: 10%;

  white-space: nowrap;

  font-size: .9rem;

  line-height: 2.2rem;

  letter-spacing: .2rem;

  opacity: 0;

  position: relative;

}



.about-page .gray-container .about-container p::before{

  display: block;

  content: '';

  background-color: black;

  width: 1.3rem;

  height: .3rem;

  position: absolute;

  top: -4%;

  left: 47%;

}



.about-page .gray-container .about-container img:nth-child(2) {

  /* width: 7%; */

  height: 5rem;

  display: inline-block;

  vertical-align: top;

  margin-left: 5%;

  opacity: 0;

}



.about-page .gray-container .about-container .para-first img{

  width: auto;

  height: 5rem; /*add*/

  display: inline-block;

  vertical-align: top;

  margin-left: 5%;

  opacity: 0;

}



.about-page .gray-container .about-bg {

  width: 65%;

  margin-left: 25%;

  margin-top: -50%;

}



.about-page .gray-container .story-1 {

  display: none;

  width: 100%;

}



.about-page .gray-container .story-1 h3 {

  padding: 10% 0 2% 2%;

  font-size: 1.17rem;

  opacity: 0;

}



.about-page .gray-container .story-1 .content {

  position: relative;

  padding-left: 5%;

  width: 85%;

  background-color: #fff;

}



.about-page .gray-container .story-1 .content h2 {

  font-size: 1.2rem;

  letter-spacing: .2rem;

  line-height: 2rem;

  position: relative;

  z-index: 5;

  opacity: 0;

}



.about-page .gray-container .story-1 .content p {

  /* font-size: .9rem;

  line-height: 1.5rem;

  padding-left: 3.5rem; */

  font-size: .9rem;

  line-height: 2.2rem;

  letter-spacing: .2rem;

  opacity: 0;

}



.about-page .gray-container .story-1 .content .conclusion {

  color: #B6936D;

  font-size: 1.5rem;

  line-height: 2rem;

  padding-bottom: 2%;

  font-weight: bold;

}



.about-page .gray-container .story-1 .content img {

  width: 35%;

  position: absolute;

  top: -20%;

  right: -5%;

  z-index: 2;

  opacity: 0;

}



.about-page .gray-container .story-2 {

  display: none;

  width: 100%;

}



.about-page .gray-container .story-2 h2 {

  text-align: center;

  font-size: 1.2rem;

  letter-spacing: .2rem;

  line-height: 2rem;

  padding-top: 3%;

  opacity: 0;

}



.about-page .gray-container .story-2 .line {

  margin: 2% auto 8%;

  width: 28%;

  display: block;

  opacity: 0;

}



.about-page .gray-container .story-2 img:nth-child(3) {

  width: 35%;

  margin-left: 5%;

  margin-top: -2%;

  display: inline-block;

  vertical-align: top;

  box-shadow: 5px 5px 10px gray;

  position: relative;

  z-index: 2;

  opacity: 0;

}



.about-page .gray-container .story-2 p {

  writing-mode: vertical-rl;

  white-space: nowrap;

  display: inline-block;

  vertical-align: top;

  font-size: .9rem;

  line-height: 2.2rem;

  letter-spacing: .2rem;

  position: absolute;

  right: 5%;

  opacity: 0;

}



.about-page .gray-container .story-2 h3 {

  writing-mode: vertical-rl;

  display: inline-block;

  white-space: nowrap;

  vertical-align: top;

  margin-right: 8%;

  font-size: 1.1rem;

  line-height: 2rem;

  letter-spacing: .4rem;

  font-weight: bold;

  position: absolute;

  right: 40%;

  opacity: 0;

}



.about-page .gray-container .story-2 img:nth-child(6) {

  width: 35%;

  display: block;

  position: relative;

  margin: -2% 0 -20% -15%;

  opacity: 0;

}



p.thanks {

  display: none;

  text-align: center;

  font-size: .9rem;

  line-height: 2.2rem;

  letter-spacing: .2rem;

  opacity: 0;

  padding-bottom: 5%;

}



.black-container {

  width: 100%;

  padding-bottom: 50px;

}



.about-page .black-container .video-part video:first-child {

  width: 80%;

  position: relative;

  float: right;

  margin-top: -5%;

  z-index: 5;

  opacity: 0;

  outline: none;

}



.about-page .black-container .video-part img:nth-child(2) {

  width: 60%;

  margin-top: -40%;

  z-index: 4;

  position: relative;

  opacity: 0;

}



.about-page .black-container .video-part img:nth-child(3) {

  width: 35%;

  left: 8%;

  top: 60%;

  z-index: 10;

  position: absolute;

  pointer-events: none;

}



.about-page .gray-container .information-container {

  width: 104%;

  white-space: nowrap;

  overflow: hidden;

  margin-left: -2%;

  box-sizing: border-box;

  opacity: 0;

}



.resturant-info tr td:first-child {

  color: #B3B3B3;

}



.about-page .gray-container .information-container .map {

  width: 58%;

  display: inline-block;

  vertical-align: top;

  position: relative;

}



.about-page .gray-container .information-container img:nth-child(2) {

  width: 43.6%;

  display: inline-block;

  position: relative;

}



.about-page .gray-container .computer.infortmation-part {

  margin-top: 1rem;

  opacity: 0;

}



.about-page .gray-container .infortmation-part .line-box {

  width: 58%;

  display: inline-block;

}



.about-page .gray-container .infortmation-part .line-box img {

  width: 6rem;

  display: block;

  margin: 5rem auto;

}



.about-page .gray-container .infortmation-part img:nth-child(2) {

  width: 1%;

  position: relative;

  vertical-align: top;

}



.about-page .gray-container .infortmation-part .resturant-info {

  display: inline-block;

  vertical-align: top;

}



.about-page .gray-container .infortmation-part .resturant-info tr {

  line-height: 2.5rem;

}



.about-page .gray-container .infortmation-part .resturant-info caption {

  color: #B6936D;

  text-align: start;

  font-size: 2rem;

  letter-spacing: 0.5rem;

  font-weight: bold;

  padding-bottom: 7%;

  padding-top: 2%;

}



.about-page .gray-container .infortmation-part .resturant-info td:nth-child(2) {

  letter-spacing: .15rem;

}



.about-page .gray-container .infortmation-part .resturant-info td:first-child {

  padding-right: 5%;

}



.about-page .gray-container .infortmation-part img:nth-child(3) {

  float: right;

  position: relative;

  width: 10%;

  margin: 12% 23% 0 auto;

}



.about-page .page-end {

  clear: both;

  width: 104%;

  margin-left: -2%;

  position: relative;

  opacity: 0;

}



.about-page .page-end img:first-child {

  width: 100%;

}



.about-page .page-end .item-1 {

  text-decoration: none;

  color: #fff;

  width: 45%;

  position: absolute;

  top: -130%;

  left: 10%;

  z-index: 3;

  text-decoration: none;

}



.about-page .page-end .item-1 img {

  width: 100%;

  filter: brightness(.4);

  transition: all .7s;

}



.about-page .page-end .item-1 .content {

  text-align: center;

  position: absolute;

  top: 35%;

  left: 0;

  right: 0;

  margin: auto;

}



.about-page .page-end .item-1 .content h3 {

  font-size: 2rem;

  letter-spacing: .5rem;

}



.about-page .page-end .item-1 .content h4 {

  width: 5rem;

  display: block;

  margin: 1.5rem auto;

  font-size: 1.2rem;

  letter-spacing: .1rem;

  border: .05rem solid #fff;

  position: relative;

}



.about-page .page-end .item-1 .content h4::before {

  content: '';

  display: block;

  background-color: #fff;

  width: 2rem;

  height: .05rem;

  right: 0;

  left: 0;

  margin: -.9rem auto 0;

  position: absolute;

}



.about-page .page-end .item-2 {

  color: #000;

  text-decoration: none;

  width: 45%;

  position: absolute;

  top: -100%;

  left: 45%;

  z-index: 5;

  text-decoration: none;

}



.about-page .page-end .item-2 img {

  width: 100%;

  transition: all .7s;

}



.about-page .page-end .item-2 .content {

  text-align: center;

  position: absolute;

  top: 35%;

  left: 0;

  right: 0;

  margin: auto;

}



.about-page .page-end .item-2 .content h3 {

  font-size: 2rem;

  letter-spacing: .5rem;

}



.about-page .page-end .item-2 .content h4 {

  width: 5rem;

  display: block;

  margin: 1.5rem auto;

  font-size: 1.2rem;

  letter-spacing: .1rem;

  border: .05rem solid #000;

}



.about-page .page-end .item-2 .content h4::before {

  content: '';

  display: block;

  background-color: #000;

  width: 2rem;

  height: .05rem;

  right: 0;

  left: 0;

  margin: -.9rem auto 0;

  position: absolute;

}



.about-page .page-end .item-1:hover {

  color: #000;

  z-index: 8;

}



.about-page .page-end .item-1:hover img {

  filter: brightness(1);

}



.about-page .page-end .item-1:hover .content h4 {

  border: .05rem solid #000;

}



.about-page .page-end .item-1:hover .content h4::before {

  background-color: #000;

}



.about-page .page-end .item-1:hover~.item-2 {

  color: #fff;

}



.about-page .page-end .item-1:hover~.item-2 img {

  filter: brightness(.4);

}



.about-page .page-end .item-1:hover~.item-2 .content h4 {

  border: .05rem solid #fff;

}



.about-page .page-end .item-1:hover~.item-2 .content h4::before {

  background-color: #fff;

}



.about-page .footer-part {

  text-align: center;

  position: relative;

}



.about-page .footer-part img:first-child {

  width: 2%;

  margin: 5%;

}



.about-page .footer-part img:nth-child(3) {

  width: 15%;

}



.about-page .footer-part img:nth-child(5) {

  width: 1%;

  position: absolute;

  top: -5%;

  left: 90%;

}



.about-page .footer-part footer {

  margin: 5% 0 2% 0;

  font-size: .8rem;

}



.about-page .footer-part footer a {

  text-decoration: none;

  color: #000;

}



.about-page .footer-part footer a:hover {

  color: rgb(23, 33, 72);

}









@media screen and (max-width: 600px) {





  .gray-container {

    padding-top: 3%;

  }



  .about-page .gray-container.story-gray {

    margin: -60% 2% auto 2%;

    padding-top: 25%;

    padding-bottom: 15%;

  }



  .part-title-box {

    text-align: center;

    display: block;

    width: 25rem;

    margin: 2rem auto 1.5rem;

  }



  .part-title {

    height: 3rem;

    padding-bottom: 2rem;

  }



  .about-page .second-title {

    height: 5.5rem;

    display: block;

    margin: 0 auto 8%;

  }



  .about-page .gray-container.space {

    padding-top: 30%;

  }



  .about-page header {

    width: 100%;

    height: 35px;

    position: fixed;

    top: 0;

    z-index: 10;

    background-color: #fff;

  }



  .about-page header #main-logo1 {

    height: 1.5rem;

    padding: 5px 0.5rem;

    margin: auto 3%;

  }



  .about-page header .main-menu {

    width: 100%;

    height: 100vh;

    position: absolute;

    top: 35px;

    text-align: center;

    flex-direction: column;

    background-color: rgb(32, 46, 100);

    transition: all .5s;

  }



  .about-page header .main-menu.close {

    transform: translate(100%, 0);

    opacity: 0;

  }



  .about-page header .main-menu a {

    width: 100%;

    color: #fff;

    font-size: 2rem;

    letter-spacing: .5rem;

    padding: 1rem 0;

    margin: 3rem 0;

    position: relative;

    opacity: 1;

  }



  .about-page header .main-menu a:hover {

    font-size: 2rem;

  }



  .about-page header .main-menu a::before {

    content: '';

    display: block;

    background-color: #eee;

    height: 5.5rem;

    width: .1rem;

    position: absolute;

    left: 50%;

    bottom: -6rem;

  }



  .about-page header .main-menu a:nth-child(6)::before {

    display: none;

  }



  .about-page header .main-menu a:last-child::before {

    display: none;

  }



  .about-page header .main-menu a:nth-child(5) {

    letter-spacing: .5rem;

  }



  .about-page header .main-menu a img {

    display: block;

    height: 2rem;

    margin: auto;

    padding-top: 1rem;

  }



  .about-page header .main-menu a:nth-child(6) img {

    height: 8rem;

  }



  .about-page header .main-menu a:hover {

    background-color: rgb(40, 58, 128);

  }



  .about-page header img:nth-child(2) {

    height: 1.2rem;

    padding: 5px 0.5rem;

    margin: auto 3%;

  }



  /* .home-page header img:nth-child(4){

    height: 1.2rem;

    padding: 5px 0.5rem;

    margin: auto 3%;

  } */

  .about-page header .bar {

    display: inline-block;

    width: 3rem;

    height: 3rem;

    margin: auto 3%;

  }



  .about-page header .bar .bar1 {

    width: 95%;

    height: .2rem;

    background-color: #333;

    margin: .9rem auto 1.2rem auto;

    transition: all .5s;

  }



  .about-page header .bar .bar2 {

    width: 95%;

    height: .2rem;

    background-color: #333;

    margin: auto;

    transition: all .5s;

  }



  .about-page header .change.bar .bar1 {

    width: 95%;

    height: .2rem;

    transform: rotate(-45deg);

    background-color: #333;

    margin-top: 1.5rem;

    margin-bottom: -.2rem;

  }



  .about-page header .change.bar .bar2 {

    width: 95%;

    height: .2rem;

    transform: rotate(45deg);

    background-color: #333;

  }



  .about-page .main-img.phone {

    margin-left: -90%;

    margin-top: 35px;

  }



  .about-page .main-img img:nth-child(2) {

    width: 30%;

    top: 43%;

    left: 62.3%;

    opacity: 0;

  }



  .about-page .main-img img:nth-child(3) {

    top: 59%;

    margin-left: 4%;

  }



  .about-page .main-img img:nth-child(4) {

    width: 7%;

    top: 62%;

    margin-left: 4%;

  }



  .about-page .main-img img:nth-child(5) {

    left: 80%;

    width: 28%;

    top: 67%;

  }



  .about-page .gray-container.story-gray img.arrow {

    display: block;

    margin: 0 auto 20%;

    width: 1%;

  }



  .about-page .gray-container.story-gray img.slogan {

    display: block;

    margin: 2% auto;

    width: 60%;

  }



  .about-page .gray-container.story-gray .language-part {

    display: none;

    width: 90%;

    margin: 1% auto 6%;

    text-align: center;

    position: relative;

  }



  .about-page .gray-container.story-gray .language-part .language {

    display: block;

    margin-left: 0;

    font-size: 1.8rem;

    letter-spacing: .8rem;

    line-height: 5rem;

    color: #fff;

    background-color: #bc9e7c;

    width: 100%;

    text-align: start;

    padding-left: 2rem;

    box-sizing: border-box;

  }



  .about-page .gray-container.story-gray .language-part .change {

    display: none;

  }



  .about-page .gray-container.story-gray .language-part.open .change {

    display: flex;

    width: 100%;

    flex-direction: column;

    margin-left: 0;

    position: absolute;

    z-index: 2;

  }



  .about-page .gray-container.story-gray .language-part .change h2:first-child {

    margin-right: 0;

    background-color: rgba(255, 255, 255, .8);

    font-size: 1.8rem;

    line-height: 5rem;

    color: black;

    border: 1px solid #bc9e7c;

    padding: 0;

  }



  .about-page .gray-container.story-gray .language-part .change h2 {

    margin-right: 0;

    background-color: rgba(255, 255, 255, .8);

    font-size: 1.8rem;

    line-height: 5rem;

    letter-spacing: .3rem;

    border: 1px solid #bc9e7c;

    border-top: none;

    padding: 0;

  }



  .about-page .gray-container .about-container{

    padding-bottom: 0;

  }



  .about-page .gray-container .about-container img:nth-child(2) {

    width: 7%;

    display: inline-block;

    vertical-align: top;

    margin-left: 5%;

  }



  .about-page .gray-container .about-container img:first-child {

    width: 52%;

    margin-left: -2%;

  }



  .about-page .gray-container .about-container img:nth-child(2) {

    width: 18%;

    height: auto;

    margin-left: 20%;

    margin-top: 8%;

  }



  .about-page .gray-container .about-container img:nth-child(3) {

    width: 90%;

    margin: -50% -25% auto auto;

    display: block;

    opacity: 1;

  }



  .about-page .gray-container .about-container p {

    text-align: initial;

    display: block;

    margin: 0 auto 3%;

    /* writing-mode: initial; */

    width: 90%;

    font-size: 2rem;

    line-height: 2.7rem;

    letter-spacing: .5rem;

    white-space: normal;

  }



  .about-page .gray-container .about-container p::before{

    display: none;

  }



  .about-page .gray-container .story-1 {

    position: relative;

    margin-top: 28%;

  }



  .about-page .gray-container .story-1 img {

    position: absolute;

    width: 55%;

    top: -15%;

    right: -3.5%;

    z-index: 2;

  }



  .about-page .gray-container .story-1 h3 {

    padding: 0;

    box-sizing: border-box;

    width: 45%;

    font-size: 2rem;

    letter-spacing: .5rem;

    line-height: 3rem;

    display: inline-block;

    margin-top: -2rem;

  }



  .about-page .gray-container .story-1 .content {

    padding-left: 2.5rem;

  }



  .about-page .gray-container .story-1 .content h2 {

    font-size: 1.7rem;

    width: 45%;

    letter-spacing: .5rem;

    line-height: 3rem;

    margin-top: 8%;

  }



  .about-page .gray-container .story-1 .content p {

    font-size: 2rem;

    letter-spacing: .3rem;

    line-height: 2.5rem;

    padding-left: 0;

    padding-top: 8%;

  }



  .about-page .gray-container .story-1 .para {

    width: 90%;

    margin: 5% auto;

    font-size: 2rem;

    letter-spacing: .3rem;

    line-height: 2.5rem;

  }



  .about-page .gray-container .story-1 .conclusion {

    width: 95%;

    color: #B6936D;

    font-size: 2rem;

    letter-spacing: .4rem;

    line-height: 2.5rem;

    margin: 5% auto 5% 5%;

    font-weight: bold;

  }



  .about-page .gray-container .story-2 h2 {

    font-size: 2rem;

    letter-spacing: .3rem;

    line-height: 3rem;

    padding-top: 0;

  }



  .about-page .gray-container .story-2 p {

    position: static;

    writing-mode: initial;

    width: 90%;

    font-size: 2rem;

    letter-spacing: .3rem;

    white-space: normal;

    line-height: 2.5rem;

    margin: 5% auto;

    display: block;

  }



  .about-page .gray-container .story-2 h3 {

    position: static;

    writing-mode: initial;

    width: 95%;

    margin-left: 5%;

    font-size: 2rem;

    line-height: 2.5rem;

    white-space: normal;

  }



  .about-page .gray-container .story-2 .line {

    width: 50%;

    margin: 3% auto 2%;

  }



  .about-page .gray-container .story-2 img:nth-child(3) {

    width: 60%;

    margin-left: -3%;

    box-shadow: none;

  }



  .about-page .gray-container .story-2 img:nth-child(4) {

    width: 50%;

    right: 0;

    position: absolute;

    margin-top: 10%;

  }



  p.thanks {

    font-size: 2rem;

    letter-spacing: .3rem;

    line-height: 2.5rem;

    position: relative;

    margin: 5% 0 0;

    padding: 5% 0;

  }



  p.thanks::before {

    content: '';

    display: block;

    background-color: burlywood;

    width: 60%;

    height: 1px;

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    margin: auto;

  }



  p.thanks::after {

    content: '';

    display: block;

    background-color: burlywood;

    width: 60%;

    height: 1px;

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    margin: auto;

  }



  .phone.img-box.video-part {

    margin-top: 10%;

    margin-bottom: 10%;

  }



  .about-page .video-part video:first-child {

    width: 90%;

    margin: 3% 0px -18%;

    position: relative;

    float: right;

    right: -2%;

    outline: none;

    z-index: 2;

    opacity: 0;

  }



  .about-page .video-part img:nth-child(2) {

    width: 95%;

    margin-left: -2%;

    margin-top: -42%;

    z-index: 1;

    position: relative;

  }



  .about-page .video-part img:nth-child(3) {

    width: 40%;

    left: -1.5%;

    top: 60%;

    z-index: 5;

    position: absolute;

    pointer-events: none;

  }









  .about-page .gray-container .information-container {

    overflow: hidden;

  }



  .about-page .gray-container .phone.information-container .infortmation-part {

    width: 65%;

    display: inline-block;

    vertical-align: top;

  }



  .about-page .gray-container .information-container img:first-child {

    width: 3%;

    vertical-align: top;

  }



  .about-page .gray-container .infortmation-part .resturant-info {

    position: relative;

  }



  .about-page .gray-container .infortmation-part .resturant-info::before {

    content: "";

    display: block;

    background-color: burlywood;

    width: 4rem;

    height: 0.1rem;

    bottom: -1rem;

    position: absolute;

    left: 0px;

    right: 0px;

    margin: auto;

  }



  .about-page .gray-container .infortmation-part .resturant-info tr {

    line-height: 3rem;

  }



  .resturant-info tr td {

    letter-spacing: 0.2rem;

  }



  .about-page .gray-container .information-container img:nth-child(2) {

    width: 35%;

    margin-top: -5%;

    margin-left: 0px;

  }



  .about-page .gray-container .map {

    width: 104%;

    margin-left: -2%;

  }



  .about-page .page-end .item-1 {

    width: 50%;

    top: -130%;

    left: 0px;

  }



  .about-page .page-end .item-1:hover img{

    filter:brightness(.4);

  }

  .about-page .page-end .item-1:hover .content h4{

    border: .05rem solid #fff;

    color: #fff;

  }

  .about-page .page-end .item-1:hover .content h4::before{

    background-color: #fff;

  }

  .about-page .page-end .item-1:hover .content h3{

    color: #fff;

  }



  .about-page .page-end .item-1 .content {

    opacity: 0.85;

    top: 15%;

  }



  .about-page .page-end .item-1 .content h3 {

    font-size: 2rem;

    letter-spacing: 1.2rem;

  }



  .about-page .page-end .item-1 .content h4 {

    width: 5.5rem;

    letter-spacing: 0.3rem;

    margin: 2rem auto 0px;

  }



  .about-page .page-end .item-1 .content h4::before {

    width: 3rem;

    margin: -1.2rem auto 0px;

  }



  .about-page .page-end .item-2 {

    width: 50%;

    left: 49.99%;

    top: -130%;

    color: #fff;

  }



  .about-page .gray-container.fix-gray {

    padding-bottom: 15%;

  }



  .about-page .page-end .item-2 .content {

    opacity: .85;

    top: 15%;

  }



  .about-page .page-end .item-2 img {

    filter: brightness(.4);

  }



  .about-page .page-end .item-2 .content h3 {

    font-size: 2rem;

    letter-spacing: 1.2rem;

  }



  .about-page .page-end .item-2 .content h4 {

    border: .05rem solid #fff;

    width: 7.5rem;

    letter-spacing: .3rem;

    margin: 2rem auto 0;

  }



  .about-page .page-end .item-2 .content h4::before {

    background-color: #fff;

    width: 3rem;

    margin: -1.2rem auto 0;

  }



  .about-page .footer-part img:first-child {

    display: none;

  }



  .about-page .footer-part img:nth-child(3) {

    width: 25%;

  }



  .about-page .footer-part footer{

    font-size: 1.5rem;

  }













}









/* 隱藏phone部分 */

@media screen and (min-width: 600px) {

  .about-page header.phone {

    display: none;

  }



  .about-page .phone {

    display: none;

  }



  .about-page .main-img.phone {

    display: none;

  }



  .about-page .gray-container.story-gray img.arrow {

    display: none;

  }



  .about-page .gray-container.story-gray img.slogan {

    display: none;

  }



  .about-page .gray-container.story-gray .phone.language-part {

    display: none;

  }



  .about-page .gray-container .phone.about-container {

    display: none;

  }



  .home-page .gray-container .video-part {

    display: none;

  }



  .phone.video-part {

    display: none;

  }



  .phone.part-title {

    display: none;

  }

}







/* 隱藏computer部分 */

@media screen and (max-width: 600px) {

  .about-page header.computer {

    display: none;

  }



  .about-page .computer {

    display: none;

  }



  .about-page .main-img.computer {

    display: none;

  }



  .about-page .gray-container.story-gray .computer.language-part {

    display: none;

  }



  .about-page .gray-container .computer.about-container {

    display: none;

  }



  .black-container {

    display: none;

  }

}