@charset "UTF-8";
/* CSS Document */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cinzel&display=swap");
html {
  font-size: 62.5%;
  overflow-x: hidden; }

body {
  overflow-x: hidden;
  color: #000;
  list-style: none;
  box-sizing: border-box;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif,'メイリオ', Verdana, 'Hiragino Kaku Gothic ProN', Meiryo;
  font-weight: 500;
  margin: 0; }

main {
  transition: all .5s;
  overflow-x: hidden; }

h1 {
  margin: 0;
  font-size: 3.6rem;
  letter-spacing: 0.15em;
  font-weight: 400;
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; }
  @media (max-width: 1050px) {
    h1 {
      font-size: 2.6rem; } }
  @media (max-width: 768px) {
    h1 {
      font-size: 2.2rem; } }

h2 {
  margin: 0;
  font-size: 3.6rem;
  font-family: 'Cinzel', serif;
  color: #603813;
  font-weight: 400; }
  @media (max-width: 1050px) {
    h2 {
      font-size: 3rem; } }

h3 {
  margin: 0;
  font-size: 2.6rem;
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  margin: 0;
  letter-spacing: 0.15em;
  font-weight: 400; }
  @media (max-width: 1050px) {
    h3 {
      font-size: 2.2rem; } }

h4 {
  font-size: 2.2rem;
  font-weight: 400;
  margin: 0;
  letter-spacing: 0.15em; }
  @media (max-width: 1050px) {
    h4 {
      font-size: 2rem; } }
  @media (max-width: 768px) {
    h4 {
      font-size: 1.8rem; } }

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

img {
  max-width: 100%; }

p {
  margin: 0;
  letter-spacing: 0.1em;
  font-weight: 500;
  line-height: 2.2em;
  font-size: 1.6rem; }
  @media (max-width: 768px) {
    p {
      font-size: 1.4rem; } }

ul {
  list-style: none;
  padding: 0;
  margin: 0; }

@media (max-width: 1050px) {
  .pc-img {
    display: none !important; } }

@media (max-width: 768px) {
  .pc-img2 {
    display: none !important; } }

.md-img {
  display: none; }
  @media (max-width: 1050px) {
    .md-img {
      display: block; } }

.sp-img {
  display: none !important; }
  @media (max-width: 768px) {
    .sp-img {
      display: block !important; } }

/* CSS Document */
.top-about > .button {
  margin-bottom: 1rem; }

.top-about-text {
  padding: 17rem 0;
  text-align: center; }
  .top-about-text h4 {
    margin-bottom: 3rem;
    position: relative;
    display: inline-block;
    padding-bottom: 1rem;
    background-image: repeating-linear-gradient(45deg, transparent 0px 5px, #f4f2ec 0px 10px);
    background-repeat: no-repeat;
    background-size: 100% 1rem;
    background-position: bottom; }
  @media (max-width: 1050px) {
    .top-about-text {
      padding: 13rem 0; } }
  @media (max-width: 768px) {
    .top-about-text {
      padding: 10rem 0; } }

.top-about-main {
  display: flex;
  max-width: 80%;
  flex-direction: row-reverse;
  margin-bottom: 7rem; }
  @media (max-width: 1050px) {
    .top-about-main {
      max-width: 90%; } }
  @media (max-width: 768px) {
    .top-about-main {
      display: block;
      max-width: initial;
      margin-bottom: 5rem; } }

.top-about-r {
  width: 30%;
  margin-left: 5rem;
  text-align: center; }
  .top-about-r img {
    width: 240px; }
  @media (max-width: 768px) {
    .top-about-r {
      width: 140px;
      margin: 0 auto;
      padding-top: 5rem; } }

.slick-dots {
  bottom: 25px !important; }

.slick-dots li button:before {
  font-size: 15px !important; }

.slick-dots li.slick-active button:before {
  color: #f4f2ec !important; }

.top-about-l {
  width: 70%; }
  @media (max-width: 768px) {
    .top-about-l {
      width: 100%; } }
  .top-about-l ul {
    display: flex;
    justify-content: space-between;
    background: linear-gradient(180deg, transparent 0%, #fff 30%, #f4f2ec 30%, #f4f2ec 100%);
    padding: 0 5rem 3rem 0; }
    @media (max-width: 768px) {
      .top-about-l ul {
        padding: 0 3rem 3rem; } }
    .top-about-l ul li {
      width: 32%; }

.top-slider {
  position: relative; }
  .top-slider h1 {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 3rem;
    color: #fff;
    letter-spacing: 0.2em;
    writing-mode: vertical-rl;
    position: absolute;
    top: 40%;
    height: 290px;
    line-height: 2em;
    text-shadow: 1px 1px 10px gray; }
    @media (max-width: 1050px) {
      .top-slider h1 {
        font-size: 2.6rem;
        top: 35%; } }
    @media (max-width: 768px) {
      .top-slider h1 {
        top: 30%;
        font-size: 2.4rem; } }
  .top-slider::after {
    content: url("../images/top/top-white.png");
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%); }

.ta-text {
  max-width: 560px;
  margin-left: 18rem; }
  @media (max-width: 1050px) {
    .ta-text {
      margin-left: 8rem; } }
  @media (max-width: 768px) {
    .ta-text {
      margin-left: 0;
      padding: 0 3rem;
      max-width: initial; } }
  .ta-text h2 {
    margin: 7rem 0 3rem; }

.top-concept {
  position: relative;
  background: #f4f2ec;
  background-size: cover; }
  .top-concept::before {
    content: url("../images/top/top-bg-t.png");
    position: absolute;
    top: -1.5px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%); }
    @media (max-width: 768px) {
      .top-concept::before {
        content: url("../images/top/top-bg-tsp.png"); } }
  .top-concept::after {
    content: url("../images/top/top-bg-b.png");
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%); }
  .top-concept div {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    padding: 30rem 3rem 25rem; }
    @media (max-width: 768px) {
      .top-concept div {
        padding: 12rem 3rem 20rem; } }
  .top-concept h4 {
    margin: 5rem 0 3rem;
    font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; }

.top-point {
  text-align: center;
  margin: 7rem 0 15rem; }
  @media (max-width: 768px) {
    .top-point {
      margin: 0 0 10rem; } }

.top-point-main {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 3rem; }
  .top-point-main ul {
    display: flex;
    justify-content: space-between;
    margin: 5rem 0 5rem; }
    @media (max-width: 768px) {
      .top-point-main ul {
        display: block; } }
    .top-point-main ul li {
      width: 30%; }
      .top-point-main ul li:nth-child(2) {
        margin-top: 8rem; }
        @media (max-width: 768px) {
          .top-point-main ul li:nth-child(2) {
            margin-top: 0; } }
      @media (max-width: 768px) {
        .top-point-main ul li {
          width: 100%;
          margin-bottom: 5rem; } }
    .top-point-main ul p {
      text-align: start;
      padding-top: 1.2rem; }
      @media (max-width: 768px) {
        .top-point-main ul p {
          width: 300px;
          margin: 0 auto; } }

.top-point-title {
  width: 453px;
  margin: 0 auto; }
  @media (max-width: 768px) {
    .top-point-title {
      width: 310px; } }

.top-bg {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 3rem; }

.top-menu-main {
  max-width: 920px;
  margin: 0 auto;
  padding: 12rem 3rem 10rem; }
  @media (max-width: 768px) {
    .top-menu-main {
      padding: 10rem 3rem 5rem; } }
  .top-menu-main ul {
    display: flex;
    justify-content: space-around; }
    @media (max-width: 768px) {
      .top-menu-main ul {
        flex-wrap: wrap;
        justify-content: space-around; } }
    .top-menu-main ul li {
      width: 20%; }
      @media (max-width: 768px) {
        .top-menu-main ul li {
          width: 120px;
          margin: 0.5rem; } }

.top-menu-title {
  max-width: 650px;
  margin: 0 auto; }
  .top-menu-title h2 {
    text-align: center; }
  .top-menu-title p {
    margin: 5rem 0 7rem; }

.instagram {
  background: #f4f2ec;
  margin: 15rem 0;
  padding: 10rem 3rem 5rem; }

.insta-main {
  max-width: 920px;
  margin: 0 auto;
  text-align: center; }
  .insta-main img {
    margin: 3rem 0 5rem; }

.top-bg2 {
  background: url("../images/top/fix-bg.jpg");
  background-repeat: no-repeat;
  padding: 10rem 0;
  background-size: cover;
  background-position: center;
  margin: 15rem 0;
  background-attachment: fixed; }
  @media (max-width: 768px) {
    .top-bg2 {
      background-attachment: initial; } }
  .top-bg2 p {
    writing-mode: vertical-rl;
    color: #fff;
    height: 200px;
    margin: 0 auto;
    line-height: 2.5em; }
    @media (max-width: 768px) {
      .top-bg2 p {
        max-height: 185px;
        font-size: 1.4rem; } }

.top-contact-main {
  max-width: 920px;
  margin: 0 auto; }
  .top-contact-main ul {
    display: flex;
    justify-content: center; }
    @media (max-width: 768px) {
      .top-contact-main ul {
        display: block; } }
    .top-contact-main ul li {
      width: 30%;
      text-align: center;
      margin: 0 8rem; }
      @media (max-width: 768px) {
        .top-contact-main ul li {
          width: 100%;
          margin: 0 auto; }
          .top-contact-main ul li:nth-child(1) {
            padding-bottom: 10rem; } }

.hotpepper-icon {
  width: 70%;
  margin: 3rem 0; }
  @media (max-width: 768px) {
    .hotpepper-icon {
      width: 160px; } }

.mail-icon {
  width: 31%;
  margin: 3rem 0; }
  @media (max-width: 768px) {
    .mail-icon {
      width: 70px; } }

/* CSS Document */
@media (max-width: 1050px) {
  .menu-text {
    padding: 0 3rem; } }
.menu-text .mt {
  text-align: center;
  margin: 0 0 10rem; }
  @media (max-width: 768px) {
    .menu-text .mt {
      margin: 5rem 0; } }
  .menu-text .mt h3 {
    margin-bottom: 3rem; }
  .menu-text .mt a {
    text-decoration: underline;
    color: #5c3e26; }
    .menu-text .mt a:hover {
      opacity: 0.5;
      transition: 0.3s; }

.menu-bg {
  background: #f4f2ec; }

.tab {
  display: flex;
  flex-wrap: wrap; }
  @media (max-width: 768px) {
    .tab {
      max-width: 500px;
      margin: 0 auto;
      padding-bottom: 5rem;
      justify-content: center; } }

.tab li a {
  display: block;
  width: 100px;
  text-align: center;
  background: #ddd;
  margin: 0 2px;
  padding: 10px 20px;
  font-size: 1.6rem; }
  .tab li a:nth-child(1) {
    margin-left: 0; }

@media (max-width: 768px) {
  .tab li {
    margin: 0.5rem 1rem; } }

/*liにactiveクラスがついた時の形状*/
.tab li.active a {
  background: #f4f2ec; }

/*エリアの表示非表示と形状*/
.area {
  position: relative;
  display: none;
  /*はじめは非表示*/
  opacity: 0;
  /*透過0*/
  background: #f4f2ec;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 3rem 5rem; }
  .area h3 {
    text-align: center;
    padding: 10rem 0 8rem; }
    .area h3 span {
      font-size: 1.8rem; }

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
  display: block;
  /*表示*/
  animation-name: displayAnime;
  /*ふわっと表示させるためのアニメーション*/
  animation-duration: 2s;
  animation-fill-mode: forwards; }

@keyframes displayAnime {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
.menu-item {
  margin-bottom: 10rem; }
  @media (max-width: 768px) {
    .menu-item {
      margin-bottom: 5rem; } }

.menu-in-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 3rem; }
  @media (max-width: 768px) {
    .menu-in-top {
      display: block; } }

.menu-left {
  width: 53%; }
  .menu-left h4 {
    font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
    color: #5c3e26;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #5c3e26;
    margin-bottom: 3rem; }
  @media (max-width: 768px) {
    .menu-left {
      width: 100%;
      margin-bottom: 3rem; } }

.menu-right {
  width: 42%; }
  @media (max-width: 768px) {
    .menu-right {
      width: initial;
      max-width: 350px;
      margin: 0 auto; } }

.menu-c {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 2rem; }
  .menu-c p {
    width: 135px;
    text-align: center;
    border-radius: 10px;
    background: #f4f2ec;
    color: #5c3e26;
    margin: 0.5rem; }
    @media (max-width: 768px) {
      .menu-c p {
        width: 110px; } }

.menu-in-bottom ul {
  margin-top: 2rem; }
  .menu-in-bottom ul li {
    display: flex;
    border-top: 1px solid #808080;
    border-bottom: 1px solid #808080;
    margin: 0.2rem 0; }
    @media (max-width: 768px) {
      .menu-in-bottom ul li {
        display: block; } }
    .menu-in-bottom ul li > .gray {
      width: 40%;
      text-align: center;
      background: #ddd;
      display: table;
      padding: 2rem 0; }
      @media (max-width: 768px) {
        .menu-in-bottom ul li > .gray {
          width: 100%;
          padding: 1rem 0; } }
      .menu-in-bottom ul li > .gray h4 {
        display: table-cell;
        vertical-align: middle;
        color: #5c3e26;
        font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; }
    .menu-in-bottom ul li > .price {
      width: 60%;
      text-align: center;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center; }
      @media (max-width: 768px) {
        .menu-in-bottom ul li > .price {
          width: 100%;
          padding: 1rem 0; } }
      .menu-in-bottom ul li > .price h4 {
        width: 60%;
        color: #5c3e26;
        font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; }
      .menu-in-bottom ul li > .price > .button {
        margin: 1rem 0; }

.menu-bg2 {
  height: 400px;
  background: url("../images/menu/menu-bg.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center; }
  @media (max-width: 1050px) {
    .menu-bg2 {
      height: 280px; } }
  @media (max-width: 768px) {
    .menu-bg2 {
      height: 170px;
      background-attachment: initial;
      margin-top: 5rem; } }

.float-button__wrap {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 50px;
  z-index: 10; }

.float-button__wrap img {
  width: 200px;
  height: 200px;
  transition: 0.3s; }
  @media (max-width: 1050px) {
    .float-button__wrap img {
      width: 150px;
      height: 150px; } }
  .float-button__wrap img:hover {
    opacity: 0.6; }

.reserve-btn-sp a {
  color: #fff;
  font-weight: bold;
  padding: 2rem;
  font-size: 1.6rem;
  background: #988575;
  display: block;
  text-align: center; }

.area2 {
  background: #f4f2ec;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 3rem;
  border-bottom: 1px solid #ccc; }
  .area2 h3 {
    text-align: start;
    padding: 2rem 3rem 2rem 5rem; }
    .area2 h3 span {
      font-size: 1.2rem;
      letter-spacing: 0em; }

/*アコーディオン全体*/
.accordion-area li {
  margin: 40px 0; }

.accordion-area section {
  border: 1px solid #ccc; }

/*アコーディオンタイトル*/
.title {
  position: relative;
  /*+マークの位置基準とするためrelative指定*/
  cursor: pointer;
  font-weight: normal;
  padding: 3% 3% 3% 50px;
  transition: all 1s ease;
  font-size: 1.6rem; }

/*アイコンの＋と×*/
.title::before,
.title::after {
  position: absolute;
  content: '';
  width: 15px;
  height: 2px;
  background-color: #5c3e26; }

.title::before {
  top: 48%;
  left: 15px;
  transform: rotate(0deg); }

.title::after {
  top: 48%;
  left: 15px;
  transform: rotate(90deg); }

/*　closeというクラスがついたら形状変化　*/
.title.close::before {
  transform: rotate(45deg); }

.title.close::after {
  transform: rotate(-45deg); }

/*アコーディオンで現れるエリア*/
.box {
  display: none;
  /*はじめは非表示*/ }

/* CSS Document */
.about-top-title {
  margin: 10rem 0 0 !important; }
  @media (max-width: 1050px) {
    .about-top-title {
      margin: 5rem 0 0 !important; } }

.about-text {
  position: relative;
  background: #f4f2ec;
  padding: 0 3rem; }
  .about-text::before {
    content: url("../images/top/top-bg-t.png");
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%); }
    @media (max-width: 768px) {
      .about-text::before {
        content: url("../images/top/top-bg-tsp.png"); } }
  .about-text::after {
    content: url("../images/about/about-bgw.png");
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%); }
    @media (max-width: 768px) {
      .about-text::after {
        content: url("../images/about/about-bgw-sp.png"); } }
  @media (max-width: 1050px) {
    .about-text {
      margin: 0; } }

.about-text-main {
  max-width: 920px;
  margin: 0 auto;
  padding: 20rem 0 30rem;
  text-align: center; }
  .about-text-main h3 {
    margin-bottom: 7rem; }
    @media (max-width: 768px) {
      .about-text-main h3 {
        margin-bottom: 3rem; } }
  @media (max-width: 768px) {
    .about-text-main {
      padding: 10rem 0 15rem; } }

.feature-main {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 3rem; }
  .feature-main h2 {
    text-align: center;
    margin-bottom: 10rem; }
    @media (max-width: 768px) {
      .feature-main h2 {
        margin-bottom: 8rem; } }

.feature-in {
  display: flex;
  justify-content: space-between; }
  @media (max-width: 768px) {
    .feature-in {
      display: block; } }

.feature-text {
  width: 45%; }
  @media (max-width: 768px) {
    .feature-text {
      width: 100%; } }
  .feature-text h3 {
    margin-bottom: 2rem;
    color: #5c3e26; }

.feature-in-img {
  width: 45%; }
  @media (max-width: 768px) {
    .feature-in-img {
      max-width: 400px;
      margin: 0 auto;
      width: initial;
      padding-top: 5rem; } }

.feature-image {
  position: relative;
  margin-top: 5rem; }
  .feature-image:after {
    content: url("../images/about/illust.svg");
    position: absolute;
    bottom: 0;
    right: 20%; }
    @media (max-width: 580px) {
      .feature-image:after {
        content: url("../images/about/illust-sp.svg");
        right: 0; } }

.photo-2 {
  width: 45%;
  display: flex;
  justify-content: space-between; }
  .photo-2 div {
    width: 45%; }
    .photo-2 div:nth-child(2) {
      margin-top: 3rem; }
  @media (max-width: 768px) {
    .photo-2 {
      width: 80%;
      max-width: 330px; } }

.feature-bottom {
  margin: 20rem 0; }
  @media (max-width: 768px) {
    .feature-bottom {
      margin: 10rem 0; } }

.about-menu {
  display: flex;
  justify-content: space-between; }
  @media (max-width: 768px) {
    .about-menu {
      display: block; } }

.about-menu-img {
  width: 45%; }
  @media (max-width: 768px) {
    .about-menu-img {
      width: initial;
      max-width: 400px;
      margin: 0 auto;
      padding-top: 5rem; } }

.about-menu-text {
  width: 45%; }
  @media (max-width: 768px) {
    .about-menu-text {
      width: initial; } }
  .about-menu-text h3 {
    margin-bottom: 2rem;
    color: #5c3e26; }
  .about-menu-text > .button {
    margin-top: 5rem;
    text-align: start; }
    @media (max-width: 768px) {
      .about-menu-text > .button {
        text-align: center; } }

.about-bg {
  height: 400px;
  background: url("../images/top/fix-bg.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center; }
  @media (max-width: 1050px) {
    .about-bg {
      height: 280px; } }
  @media (max-width: 768px) {
    .about-bg {
      height: 170px;
      background-attachment: initial; } }

.about-point {
  margin: 15rem 0; }
  @media (max-width: 768px) {
    .about-point {
      margin: 10rem 0 0; } }

.point-in {
  margin: 10rem 0 0; }
  .point-in li {
    position: relative;
    margin: 10rem 0 0; }
    @media (max-width: 768px) {
      .point-in li {
        margin: 5rem 0 0; } }
  @media (max-width: 768px) {
    .point-in {
      margin: 3rem 0 0; } }

.frame {
  position: relative;
  margin-bottom: 5rem; }

.point-top {
  max-width: 560px;
  margin: 0 auto;
  text-align: center; }
  .point-top h4 {
    display: inline-block;
    color: #5c3e26;
    font-weight: bold;
    margin-bottom: 3rem;
    background-image: repeating-linear-gradient(45deg, transparent 0px 5px, #f4f2ec 0px 10px);
    background-repeat: no-repeat;
    background-size: 100% 1rem;
    background-position: bottom; }
  @media (max-width: 768px) {
    .point-top {
      width: 85%;
      margin: 0 auto;
      padding: 0 3rem 0; } }
  .point-top p {
    text-align: start; }

.point-contents {
  width: 100%;
  /* コンテンツが増えたら修正 */
  display: flex;
  justify-content: center;
  /* これは消す */
  padding: 8rem 0 0;
  background: linear-gradient(180deg, #f4f2ec 85%, #fff 30%, transparent 30%, transparent 100%);
  margin-top: 5rem; }
  @media (max-width: 768px) {
    .point-contents {
      padding: 6rem 0 5rem 1rem;
      width: 810px;
      margin-top: 2rem; } }
  .point-contents li {
    width: 360px;
    padding: 5rem 3rem;
    box-shadow: 0px 5px 20px grey;
    border-radius: 30px;
    align-items: center;
    margin: 2rem;
    background: #fff; }
    @media (max-width: 1050px) {
      .point-contents li {
        padding: 3rem; } }
    @media (max-width: 768px) {
      .point-contents li {
        width: 270px; } }
  .point-contents h6 {
    display: inline-block;
    border-radius: 10px;
    font-size: 1.6rem;
    padding: 1rem 2rem;
    background: #5c3e26;
    color: #fff;
    width: 200px;
    text-align: center;
    margin: -2rem 0 1.5rem; }
  .point-contents h5 {
    color: red;
    font-size: 2rem; }

.point-img {
  text-align: center; }

.contents-text {
  text-align: center; }
  @media (max-width: 768px) {
    .contents-text {
      text-align: center; } }
  .contents-text p {
    text-align: start; }

.scroll {
  width: 100%;
  position: relative;
  overflow-x: scroll;
  position: relative;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none; }
  .scroll::-webkit-scrollbar {
    display: none; }

.message {
  text-align: center;
  background: url("../images/about/point-bg.jpg");
  background-size: cover;
  background-position: bottom;
  padding: 0 3rem; }
  @media (max-width: 1050px) {
    .message {
      background-position: bottom left -25rem; } }
  @media (max-width: 768px) {
    .message {
      background: url("../images/about/point-bg-sp.jpg");
      background-position: bottom left;
      background-size: cover; } }
  .message h2 {
    margin-bottom: 3rem; }

.message-text {
  padding: 15rem 0;
  max-width: 430px;
  margin: 0 auto; }
  @media (max-width: 768px) {
    .message-text {
      padding: 8rem 0; } }

.scroll-nav::before {
  position: absolute;
  top: 60px;
  right: 20%;
  z-index: 100; }
  @media (max-width: 768px) {
    .scroll-nav::before {
      content: url("../images/about/scroll.svg");
      top: 215px;
      right: 5%; } }
  @media (max-width: 500px) {
    .scroll-nav::before {
      top: 248px; } }
  @media (max-width: 380px) {
    .scroll-nav::before {
      top: 280px; } }

.red {
  color: red;
  font-size: 1.8rem;
  display: block;
  text-align: center; }

/* CSS Document */
.address-main {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 3rem 12rem; }
  @media (max-width: 768px) {
    .address-main {
      padding: 0 3rem 5rem; } }

.address-text {
  display: flex;
  align-items: center;
  margin-top: 7rem; }
  @media (max-width: 768px) {
    .address-text {
      display: block; } }
  .address-text div {
    width: 50%;
    padding: 0 5rem;
    text-align: center; }
    .address-text div:nth-child(1) {
      border-right: 0.5px solid #603813; }
      @media (max-width: 768px) {
        .address-text div:nth-child(1) {
          border-right: 0;
          border-bottom: 0.5px solid #603813;
          padding: 0 0 2rem;
          margin-bottom: 2rem; } }
    @media (max-width: 768px) {
      .address-text div {
        width: 300px;
        margin: 0 auto;
        padding: 0; } }
    .address-text div h5 {
      font-size: 1.2rem;
      margin: 0;
      font-weight: 500; }

.root {
  margin-bottom: 30rem;
  padding: 0 3rem; }
  @media (max-width: 768px) {
    .root {
      margin-bottom: 80%; } }

.root-in {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  background: #f4f2ec;
  border-radius: 60px;
  padding: 8rem 5rem; }
  @media (max-width: 768px) {
    .root-in {
      padding: 8rem 5rem 10rem; } }
  .root-in ul {
    display: flex;
    justify-content: space-between; }
    @media (max-width: 768px) {
      .root-in ul {
        display: block; } }
    .root-in ul li {
      width: 45%; }
      @media (max-width: 768px) {
        .root-in ul li {
          width: 100%; } }

.means h4 {
  margin-bottom: 1rem; }
.means span {
  color: #603813;
  font-weight: 800; }

.bold {
  color: #000 !important; }

.parking {
  margin-top: 5rem; }
  @media (max-width: 768px) {
    .parking {
      margin: 3rem 0 5rem;
      padding-bottom: 3rem;
      border-bottom: 0.5px solid #603813; } }

.access-img {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: -255px;
  left: 0;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%); }
  @media (max-width: 768px) {
    .access-img {
      left: 0;
      top: 95%;
      bottom: initial; } }
  .access-img img {
    max-width: 300px; }
    @media (max-width: 768px) {
      .access-img img {
        max-width: 70%; } }

.access-map {
  margin: 5rem 0 0 3rem; }
  @media (max-width: 768px) {
    .access-map {
      margin: 5rem 0;
      text-align: center; } }

.car-info {
  margin-top: 5rem; }
  .car-info > .red {
    text-align: start; }

/* CSS Document */
.staff-title {
  margin: 0 0 10rem;
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  display: inline-block;
  padding-bottom: 1rem;
  background-image: repeating-linear-gradient(45deg, transparent 0px 5px, #f4f2ec 0px 10px);
  background-repeat: no-repeat;
  background-size: 100% 1rem;
  background-position: bottom; }
  @media (max-width: 768px) {
    .staff-title {
      margin: 0 0 5rem; } }

.staff-main {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  padding: 0 3rem; }
  .staff-main ul li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10rem; }
    @media (max-width: 768px) {
      .staff-main ul li {
        display: block; } }

.staff-photo {
  width: 35%; }
  @media (max-width: 768px) {
    .staff-photo {
      width: initial;
      max-width: 280px;
      margin: 0 auto; } }
  .staff-photo img {
    width: 70%; }

.staff-profile {
  width: 60%;
  text-align: start; }
  @media (max-width: 768px) {
    .staff-profile {
      width: initial;
      margin-top: 3rem; } }

.name {
  border-bottom: 1px solid #603813; }
  .name h4 {
    font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; }
  .name p {
    font-family: 'Cinzel', serif; }

.profile-in {
  margin-top: 2.5rem; }

/* CSS Document */
.sort-btn {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  padding: 0 3rem 13rem;
  max-width: 920px;
  margin: 0 auto; }
  .sort-btn li {
    border: 1px solid #988575;
    border-radius: 30px;
    cursor: pointer;
    padding: 1.5rem 0;
    margin: 1rem;
    font-size: 1.6rem;
    width: 160px;
    text-align: center; }
    @media (max-width: 768px) {
      .sort-btn li {
        font-size: 1.4rem; } }
  @media (max-width: 1050px) {
    .sort-btn {
      justify-content: center;
      padding: 0 3rem 1rem; } }

.sort-btn li.active {
  /*ボタンに現在地＝activeというクラス名がついたら背景色を変更*/
  background: #988575;
  color: #fff; }

/*横幅が480px以下になった際の指定*/
@media only screen and (max-width: 480px) {
  .sort-btn {
    justify-content: space-between; }

  .sort-btn li {
    width: 48%;
    margin: 0 0 10px 0;
    text-align: center; } }
/*＝＝＝Muuriのレイアウトのための調整 */
.grid {
  position: relative;
  /*並び替えの基準点を指定*/
  max-width: 920px;
  margin: 0 auto; }

/*各画像の横幅などの設定*/
.item {
  display: block;
  position: absolute;
  width: 28%;
  /*横並びで3つ表示*/
  z-index: 1;
  margin: 2rem; }
  @media (max-width: 1050px) {
    .item {
      width: 44%; } }
  @media (max-width: 768px) {
    .item {
      margin: 1rem; } }

/*内側のボックスの高さが崩れないように維持*/
.item-content {
  position: relative;
  width: 100%;
  height: 100%; }

/*画像の横幅を100%にしてレスポンシブ化*/
.grid img {
  width: 100%;
  height: auto;
  vertical-align: bottom; }

/*＝＝＝fancyboxサムネイル背景と画像選択時の枠線の指定*/
.fancybox-thumbs {
  background: transparent !important; }

.fancybox-thumbs__list a:before {
  border: 6px solid #FA999B; }

/* CSS Document */
.cr2 {
  color: #000; }

.form-main {
  padding-bottom: 15rem; }
  .form-main p {
    text-align: center; }
    .form-main p a {
      text-decoration: underline; }
      .form-main p a:hover {
        opacity: 0.5;
        transition: 0.3s; }

.contact-form {
  padding: 0 15rem 0; }
  @media (max-width: 1050px) {
    .contact-form {
      margin: 0rem 5rem;
      padding: 0 3rem 0; } }
  @media (max-width: 768px) {
    .contact-form {
      margin: 0; } }

.contact-title {
  text-align: center; }
  .contact-title h1 {
    margin: 0;
    padding-top: 10rem; }

.contact-top h2 {
  text-align: center; }

form {
  max-width: 950px;
  width: calc(100% - 10px);
  margin: 0 auto;
  font-size: 1.6rem;
  padding-top: 5rem; }

.contact-item {
  display: grid;
  align-items: center;
  padding-top: 20px;
  margin-bottom: 3rem; }

.label {
  width: 280px;
  padding-left: 10px; }

.label-required {
  color: red;
  font-weight: nomal;
  font-size: 18px; }

input[type="text"], input[type="email"] {
  border: solid 1px #aaa;
  padding: 10px;
  font-size: 15px;
  width: 98%;
  margin-top: 1rem; }
  @media (max-width: 768px) {
    input[type="text"], input[type="email"] {
      width: auto; } }

select {
  appearance: none;
  cursor: pointer;
  border: solid 1px #aaa;
  padding: 10px;
  font-size: 15px;
  color: #000;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  font-weight: 200; }

textarea {
  border: solid 1px #aaa;
  padding: 10px;
  height: 250px;
  width: auto;
  font-size: 15px;
  margin-top: 1rem; }

.btn {
  text-align: center; }
  @media (max-width: 768px) {
    .btn {
      margin-top: 5rem; } }

.btn :hover {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .4s;
  transition: all .4s; }

.button-c {
  background: #988575;
  cursor: pointer;
  color: white;
  font-size: 17px;
  font-weight: bold;
  padding: 10px 10px;
  width: 200px;
  border-radius: 10px;
  margin-top: 8rem;
  border: 1px;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif,'メイリオ', Verdana, 'Hiragino Kaku Gothic ProN', Meiryo; }
  @media (max-width: 768px) {
    .button-c {
      margin-top: 3rem; } }

.button-c:hover {
  opacity: 0.5; }

.contact-pd {
  padding: 15rem 0 2rem !important; }
  @media (max-width: 768px) {
    .contact-pd {
      padding: 5rem 0 2rem !important; } }

#formWrap {
  width: 700px;
  margin: 0 auto;
  color: #555;
  line-height: 120%;
  font-size: 90%; }

table.formTable {
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse; }

table.formTable td, table.formTable th {
  border: 1px solid #ccc;
  padding: 10px; }

table.formTable th {
  width: 30%;
  font-weight: normal;
  text-align: left; }

p.error_messe {
  margin: 5px 0;
  color: red; }

/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width: 572px) {
  #formWrap {
    width: 95%;
    margin: 0 auto; }

  table.formTable th, table.formTable td {
    width: auto;
    display: block; }

  table.formTable th {
    margin-top: 5px;
    border-bottom: 0; }

  form input[type="submit"], form input[type="reset"], form input[type="button"] {
    display: block;
    width: 100%;
    height: 40px; } }
/* CSS Document */
/* CSS Document */
.privacy a {
  text-decoration: underline; }
  .privacy a:hover {
    color: blue;
    transition: 0.3s; }

.privacy-policy {
  padding: 10rem 0;
  margin: 0 auto;
  max-width: 920px; }

.pp-box {
  margin-bottom: 5rem; }
  .pp-box h2 {
    font-size: 2.2rem; }

.back {
  text-align: center;
  margin-top: 10rem; }
  .back a {
    font-size: 2rem;
    padding: 1rem 5rem;
    border: 1px solid #000; }

.flex {
  display: flex;
  display: flex; }
  .flex input {
    margin: 0 1rem 0 3rem; }
  .flex input {
    margin: 0 1rem 0 3rem; }
  @media (max-width: 768px) {
    .flex {
      display: grid; } }

.flex-c {
  justify-content: center;
  text-align: end;
  display: flex; }
  .flex-c input {
    margin: 0 1rem 0 3rem; }
  .flex-c label {
    width: auto;
    font-size: 1.6rem; }

/* CSS Document */
.mainblur {
  filter: blur(8px); }

#g-nav {
  position: fixed;
  z-index: -1;
  opacity: 0;
  /*はじめは透過0*/
  /*ナビの位置fと形状*/
  top: 0;
  width: 100%;
  height: 100vh;
  /*ナビの高さ*/
  background: rgba(152, 133, 117, 0.3);
  /*背景を少し透過させる*/
  /*動き*/
  transition: all 0.3s; }

/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive {
  opacity: 1;
  z-index: 1000; }

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list {
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  /*表示する高さ*/
  overflow: auto;
  -webkit-overflow-scrolling: touch; }

/*ナビゲーション*/
#g-nav ul {
  display: none;
  /*はじめは非表示*/
  /*ナビゲーション天地中央揃え*/
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

#g-nav.panelactive ul {
  display: flex;
  flex-wrap: wrap;
  width: 300px; }

/*リストのレイアウト設定*/
#g-nav li {
  list-style: none;
  text-align: center;
  width: 150px;
  font-family: 'Cinzel', serif; }
  #g-nav li:hover {
    opacity: 0.6;
    transition: 0.6s; }

#g-nav li a {
  color: #fff;
  font-size: 1.6rem;
  text-decoration: none;
  padding: 10px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: bold; }

/*========= ボタンのためのCSS ===============*/
.openbtn1 {
  position: fixed;
  z-index: 9999;
  /*ボタンを最前面に*/
  top: 10px;
  right: 10px;
  cursor: pointer;
  width: 60px;
  height: 60px; }

/*×に変化*/
.openbtn1 span {
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 14px;
  height: 2px;
  border-radius: 2px;
  background-color: #666;
  width: 50%; }

.openbtn1 span:nth-of-type(1) {
  top: 20px; }

.openbtn1 span:nth-of-type(2) {
  top: 29px; }

.openbtn1 span:nth-of-type(3) {
  top: 38px; }

.openbtn1.active span:nth-of-type(1) {
  top: 22px;
  left: 14px;
  transform: translateY(6px) rotate(-45deg);
  width: 50%; }

.openbtn1.active span:nth-of-type(2) {
  opacity: 0; }

.openbtn1.active span:nth-of-type(3) {
  top: 34px;
  left: 14px;
  transform: translateY(-6px) rotate(45deg);
  width: 50%; }

.nav-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: 140px;
  top: 10%; }
  @media (max-width: 768px) {
    .nav-logo {
      width: 128px; } }

.nav-sns {
  display: flex;
  align-items: center;
  width: 200px;
  margin: 0 auto;
  padding: 0 5rem;
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%); }
  .nav-sns div {
    margin: 0 2rem; }
    .nav-sns div img {
      width: 80px; }
    .nav-sns div:hover {
      opacity: 0.8;
      transition: 0.6s; }

.nav-button p {
  color: #fff !important;
  width: 200px;
  margin: 0 auto;
  justify-content: center;
  position: absolute;
  top: 77%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%); }

#header {
  height: 85px;
  width: 100%;
  padding: 1.5rem 0 0; }

.header-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  margin: 0 auto; }
  @media (max-width: 768px) {
    .header-in {
      width: 95%; } }
  @media (max-width: 768px) {
    .header-in ul {
      display: none; } }
  .header-in ul li a {
    display: flex;
    align-items: center;
    margin: 0.5rem 0; }
    .header-in ul li a:hover {
      opacity: 0.6;
      transition: 0.6s; }
  .header-in ul li img {
    margin: 0 1rem 0 0;
    width: 25px; }
  .header-in ul li p {
    color: #5c3e26; }

.top-logo img {
  height: 60px; }
  @media (max-width: 768px) {
    .top-logo img {
      height: 40px; } }

.wagaya {
  text-align: center;
  background: #f4f2ec;
  padding: 5rem 3rem;
  margin-top: 12rem; }
  .wagaya a {
    display: inline-block; }
  .wagaya img:hover {
    opacity: 0.6;
    transition: 0.6s; }
  @media (max-width: 768px) {
    .wagaya {
      margin-top: 5rem; } }

/* フッター */
#footer {
  background: #5c3e26; }
  #footer p {
    color: #fff;
    text-align: center; }

@media (max-width: 768px) {
  .copyright {
    margin-top: 5rem;
    font-size: 1.2rem;
    text-align: center; } }

.footer-main {
  padding: 5rem;
  display: flex;
  justify-content: space-between; }
  @media (max-width: 768px) {
    .footer-main {
      display: block;
      padding: 5rem 3rem 3rem; } }

.footer-left {
  width: 240px;
  text-align: center;
  margin-top: auto; }
  .footer-left p {
    font-size: 1.2rem; }
  @media (max-width: 768px) {
    .footer-left {
      margin: 0 auto; } }

.footer-logo {
  margin-bottom: 2rem; }
  .footer-logo img {
    width: 130px; }

.footer-contact {
  display: flex;
  justify-content: end;
  padding: 0 0 2rem 5rem;
  border-bottom: 1px solid #fff;
  margin-bottom: 5rem; }
  @media (max-width: 768px) {
    .footer-contact > .button p {
      padding: 1.5rem 1rem; } }
  @media (max-width: 768px) {
    .footer-contact {
      display: block;
      padding: 0 0 2rem; } }

.footer-sns {
  display: flex;
  align-items: center;
  width: 21%;
  margin-left: 3rem; }
  .footer-sns div:nth-child(2) {
    margin-left: 1rem; }
  .footer-sns div:hover {
    opacity: 0.8;
    transition: 0.6s; }
  @media (max-width: 768px) {
    .footer-sns {
      margin: 0 auto;
      width: 115px; } }

.footer-info {
  text-align: end; }
  @media (max-width: 768px) {
    .footer-info {
      text-align: center; } }
  .footer-info div {
    display: flex;
    justify-content: center;
    align-items: center; }
    @media (max-width: 768px) {
      .footer-info div {
        justify-content: center; } }
    .footer-info div img {
      width: 17px;
      height: 17px;
      margin-right: 1rem; }

.button {
  text-align: center; }
  .button p {
    display: inline-block;
    border: solid 1px #988575;
    padding: 1.5rem 4rem;
    color: #988575;
    border-radius: 10px; }
    .button p:hover {
      color: #fff;
      background: #988575;
      transition: 0.6s; }
    @media (max-width: 1050px) {
      .button p {
        padding: 1.5rem 2rem; } }

@media (max-width: 768px) {
  .b-button {
    margin: 3rem 0; } }
.b-button p {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #c6b198;
  border: none; }
  @media (max-width: 768px) {
    .b-button p {
      width: 190px;
      margin: 0 auto; } }
  .b-button p img {
    margin-right: 1rem;
    width: 25px;
    height: 25px; }

.page-top {
  margin-top: 8rem; }
  .page-top h2 {
    margin: 10rem 0;
    text-align: center; }
    @media (max-width: 1050px) {
      .page-top h2 {
        margin: 5rem 0; } }
    @media (max-width: 768px) {
      .page-top h2 {
        width: 100%; } }
  .page-top div {
    width: 85%;
    margin-left: auto; }
    @media (max-width: 768px) {
      .page-top div {
        margin-left: auto; } }
  @media (max-width: 768px) {
    .page-top {
      display: block;
      margin-top: 0; } }

.hp-link {
  font-size: 1.2rem; }
  .hp-link a {
    text-decoration: underline;
    color: #fff; }

/* CSS Document */
.fadeUpTrigger, .fadeLeftTrigger, .blurTrigger, .fadeRightTrigger {
  opacity: 0; }

.blur {
  animation-name: blurAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0; }
  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1; } }
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.blurTrigger {
  opacity: 0; }

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
.fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px); }
  to {
    opacity: 1;
    transform: translateX(0); } }
.fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px); }
  to {
    opacity: 1;
    transform: translateX(0); } }
.img-wrap.on {
  overflow: hidden;
  position: relative;
  animation-fill-mode: forwards; }

.img-wrap.on:before,
.img-wrap.on:after {
  animation: 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: 1; }

.img-wrap.on:before {
  animation-name: img-wrap-before;
  left: 0;
  right: 50%; }

.img-wrap.on:after {
  animation-name: img-wrap-after;
  left: 50%;
  right: 0; }

@keyframes img-wrap-before {
  100% {
    transform: translateY(100%); } }
@keyframes img-wrap-after {
  100% {
    transform: translateY(-100%); } }
.delay-time02 {
  animation-delay: 0.2s; }

.delay-time03 {
  animation-delay: 0.3s; }

.delay-time04 {
  animation-delay: 0.4s; }

.delay-time05 {
  animation-delay: 0.5s; }

.delay-time06 {
  animation-delay: 0.6s; }

.delay-time07 {
  animation-delay: 0.7s; }

.zoomIn {
  animation-name: zoomInAnime;
  animation-duration: 0.8s;
  animation-fill-mode: forwards; }

@keyframes zoomInAnime {
  from {
    transform: scale(0.6);
    opacity: 0; }
  to {
    transform: scale(1);
    opacity: 1; } }
#insta {
  max-width: 920px;
  margin: 0 auto; }

#insta ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }

#insta li {
  list-style: none;
  width: 280px;
  height: 280px;
  margin: 1rem;
  overflow: hidden; }

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

#insta li a {
  position: relative;
  display: block; }

#insta li a .like {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0px;
  color: #fff;
  opacity: 0.6;
  text-shadow: 0 0 7px #000; }

#insta h1 {
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  padding: 30px;
  color: #333; }