@charset "UTF-8";
/* ============common
=============================================== */
html {
  font-size: 100%;
}

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

a {
  text-decoration: none;
}

a:hover {
  opacity: 0.6;
}

ul,
ol {
  list-style-type: none;
}

.wrapper {
  max-width: 412px;
  margin: 0 auto;
}

.flex {
  display: flex;
}

body {
  margin: 0 auto;
  background: #000;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

/* ============ フォント関係
=============================================== */
.dancing-script {
  font-family: "Dancing Script", cursive;
  font-weight: 600;
  font-style: normal;
}

.noto-serif-jp {
  font-family: "Noto Serif JP", serif;
  font-weight: 300;
  font-style: normal;
}

h1,
h2 {
  text-shadow: 3px 3px 2px rgba(94, 94, 94, 0.7);
}

a {
  text-shadow: 2px 2px 2px rgba(80, 80, 80, 0.7);
}

/* ============ 鈍角三角形
=============================================== */
/* 鈍角三角形 上側　白 */
.sec__top__white {
  height: 60px;
  width: 100%;
  -webkit-clip-path: polygon(100% 0, 0 100%, 0 0);
          clip-path: polygon(100% 0, 0 100%, 0 0);
  background-color: rgba(255, 255, 255, 0.95);
  top: 0;
  left: 0;
  z-index: 10;
}

/* 鈍角三角形 下側　白 */
.sec__bottom__white {
  height: 60px;
  width: 100%;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
          clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background-color: rgba(255, 255, 255, 0.95);
  bottom: 0;
  left: 0;
  z-index: 15;
}

/* 鈍角三角形 上側　黒 */
.sec__top__black {
  height: 60px;
  width: 100%;
  -webkit-clip-path: polygon(100% 0, 0 100%, 0 0);
          clip-path: polygon(100% 0, 0 100%, 0 0);
  background-color: rgba(0, 0, 0, 0.95);
  top: 0;
  left: 0;
  z-index: 10;
}

/* 鈍角三角形 下側　黒 */
.sec__bottom__black {
  height: 60px;
  width: 100%;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
          clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background-color: rgba(0, 0, 0, 0.95);
  bottom: 0;
  left: 0;
  z-index: 15;
}

/* 鈍角三角形 上側　黒-2 */
.sec__top__black2 {
  height: 60px;
  width: 100%;
  -webkit-clip-path: polygon(100% 0, 0 100%, 0 0);
          clip-path: polygon(100% 0, 0 100%, 0 0);
  background-color: rgba(0, 0, 0, 0.95);
  top: 0;
  left: 0;
  z-index: 10;
}

/* 鈍角三角形 下側　黒-2 */
.sec__bottom__black2 {
  height: 60px;
  width: 100%;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
          clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background-color: rgba(0, 0, 0, 0.95);
  bottom: 0;
  left: 0;
  z-index: 15;
  border-bottom: 1px solid #000;
}

/* ============costum.css
=============================================== */
/*　ここから重要！　*/
#bg-fix-section {
  border-top: 0px solid #fff;
  /* 100pxは.section-pと同じ値 ！　*/
  border-bottom: 0px solid #fff;
  /* 100pxは.section-pと同じ値 ！　*/
}

/* section3の高さ調整箇所↓ */
.bg-fix {
  height: 75vh;
}

.bg-fix::before {
  content: "";
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  width: 412px;
  max-width: 412px;
  /* .innerのmax-widthと同じ設定 */
  height: 100vh;
  min-height: 500px;
  background-image: url();
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.bg-fix.active::before {
  display: block;
  background-image: url(../img/section-3.png);
}

.bg-fix__txt {
  display: flex;
  /*  */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  height: 100%;
  color: #fff;
  font-size: 1.5rem;
}
.bg-fix__txt .text-box {
  padding: 30px;
  border: 1px solid #fff;
}

.container {
  position: relative;
  height: 300px;
}

.inner-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

/* ============ up/down
=============================================== */
/* upクラスの要素がふわっと上がるアニメーションの初期状態 */
.up {
  opacity: 0;
  transform: translateY(60px);
  /* 下に50pxずらす */
  transition: all 1.2s ease-out;
}

/* upクラスの要素が表示されるときのアニメーション */
.up.animate-up {
  opacity: 1;
  transform: translateY(0);
  /* 元の位置に戻す */
}

/* downクラスの要素がふわっと下がるアニメーションの初期状態 */
.down {
  opacity: 0;
  transform: translateY(-60px);
  /* 上に50pxずらす */
  transition: all 1.2s ease-out;
}

/* downクラスの要素が表示されるときのアニメーション */
.down.animate-down {
  opacity: 1;
  transform: translateY(0);
  /* 元の位置に戻す */
}

/* ============index.scss
=============================================== */
body {
  background-color: #000;
}

#slider {
  width: 100%;
  height: 100vh;
  /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
#slider h1 {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: start;
  font-size: 36px;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  color: #fff;
  font-family: "Renner*", serif;
  font-weight: 200;
}
#slider h1 span {
  font-size: 13px;
}

/* ============section-1
=============================================== */
.section_1 .section-1-erea {
  height: 600px;
  background-image: url(../img/section-1.jpg);
  background-size: cover;
  overflow: hidden;
  background-position: center;
}
.section_1 .section-1-erea h2 {
  position: absolute;
  color: #fff;
  top: 13%;
  left: 30px;
  font-size: 2rem;
}
.section_1 .section-1-erea p {
  position: absolute;
  color: rgb(220, 217, 217);
  text-shadow: 1px 1px 2px rgba(71, 71, 71, 0.75);
  bottom: 18%;
  right: 0px;
  left: 0;
  font-size: 1.2rem;
  background-color: rgba(40, 39, 39, 0.35);
  text-align: end;
  border-radius: 10px;
  padding: 20px;
}
.section_1 .section-1-erea h3, .section_1 .section-1-erea h4 {
  color: rgba(0, 0, 0, 0);
  z-index: -100;
  font-size: 1px;
}

/* ============section-2
=============================================== */
.section_2 {
  background-color: rgb(240, 237, 234);
}
.section_2 video {
  display: flex;
  width: 377px;
  height: auto;
  overflow: hidden;
  padding: 0;
  margin: 0 auto 20px;
  z-index: 50;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6);
}
.section_2 .section-2-erea {
  height: 1400px;
  padding: 75px 0 55px;
}
.section_2 .section-2-erea h2 {
  position: absolute;
  color: #fff;
  top: 75px;
  left: 30px;
  font-size: 32px;
  z-index: 100;
}
.section_2 .section-2-erea .s2-p1 {
  position: absolute;
  color: #fff;
  top: 400px;
  left: 25px;
  font-size: 1.05rem;
  text-align: center;
  z-index: 100;
  color: rgb(37, 37, 37);
  text-shadow: 1px 1px 1px rgba(111, 110, 110, 0.3);
  background-color: #fff;
  padding: 10px;
  left: 0;
  right: 0;
  line-height: 1.7rem;
}
.section_2 .section-2-erea .s2-p1 span {
  font-size: 1.45rem;
  display: inline-block;
  margin-bottom: 10px;
}
.section_2 .section-2-erea .inner-2-1 {
  top: 40%;
  left: 15px;
  width: 45%;
  text-align: center;
}
.section_2 .section-2-erea .inner-2-2 {
  top: 50%;
  right: 15px;
  width: 45%;
  text-align: center;
}
.section_2 .section-2-erea .inner-2-3 {
  top: 60%;
  left: 15px;
  width: 45%;
  text-align: center;
}
.section_2 .section-2-erea .inner-2-4 {
  top: 70%;
  right: 15px;
  width: 45%;
  text-align: center;
}

#sec2-btn {
  position: absolute;
  bottom: 5%;
  width: 65%;
  background-color: #FFAD00;
  color: #fff;
  text-align: center;
  padding: 10px 15px;
  border-radius: 45px;
  left: 50%;
  transform: translate(-50%, 0);
  border: 2px solid rgb(255, 255, 255);
}

/* ============section-4
=============================================== */
.section_4 .section-4-erea {
  height: 100vh;
  background-image: url(../img/section-4.png);
  background-size: cover;
  overflow: hidden;
  background-position: center;
}
.section_4 .section-4-erea h2 {
  position: absolute;
  color: #fff;
  width: 100%;
  top: 20%;
  text-align: center;
  font-size: 26px;
}
.section_4 .section-4-erea a {
  position: absolute;
  display: flex;
  padding: 12px 40px;
  border-radius: 30px;
  background-color: #FFAD00;
  color: #fff;
  font-size: 1.25rem;
  bottom: 12%;
  right: 16%;
  left: 16%;
  text-align: center;
  justify-content: center;
  border: 2px solid rgb(255, 255, 255);
  filter: drop-shadow(2px 2px 4px rgba(232, 156, 156, 0.7));
}
.section_4 .section-4-erea h3, .section_4 .section-4-erea h4 {
  color: rgba(0, 0, 0, 0);
  z-index: -100;
  font-size: 1px;
}

/* ============section-6
=============================================== */
#bg-fix-section2 {
  border-top: 0px solid #fff;
  border-bottom: 0px solid #fff;
  /* ーーーーーーー モーニング ーーーーーーー */
  /* ーーーーーーー ランチ ーーーーーーー */
  /* ーーーーーーー カフェ ーーーーーーー */
  /* ーーーーーーー ディナー ーーーーーーー */
  /* ーーーーーーー main-img ーーーーーーー */
}
#bg-fix-section2 .bg-fix2 {
  height: 620px;
  border-bottom: 4px dotted #000;
}
#bg-fix-section2 .sec6-1 {
  padding-top: 60px;
}
#bg-fix-section2 .sec6-3 {
  border-bottom: none;
}
#bg-fix-section2 .sec6-3 .text__bottom_left3 {
  padding-bottom: 55px;
}
#bg-fix-section2 .sec6-4 {
  border-bottom: none;
  display: none;
}
#bg-fix-section2 .sec6-4 .text__bottom_right4 {
  padding-bottom: 50px;
}
#bg-fix-section2 .bg-fix2::before {
  content: "";
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  overflow: hidden;
  width: 100%;
  max-width: 412px;
  /* .innerのmax-widthと同じ設定 */
  height: 100vh;
  min-height: 500px;
  background-image: url(../img/section6-bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#bg-fix-section2 .bg-fix2.active::before {
  display: block;
  background-image: url(../img/section6-bg.png);
}
#bg-fix-section2 .h2_right {
  text-align: end;
  padding-top: 5%;
  padding-right: 7%;
  font-size: 2.8rem;
}
#bg-fix-section2 .p_right {
  text-align: end;
  padding-top: 1%;
  padding-right: 7%;
  font-size: 1.4rem;
}
#bg-fix-section2 .h2_left {
  padding-top: 5%;
  padding-left: 7%;
  font-size: 2.8rem;
}
#bg-fix-section2 .p_left {
  padding-top: 1%;
  padding-left: 7%;
  font-size: 1.4rem;
}
#bg-fix-section2 .img-top-left1 {
  width: 35%;
  height: auto;
  top: 11%;
  left: 3%;
  z-index: 20;
}
#bg-fix-section2 .text__top_right1 {
  top: 29%;
  right: 5%;
  z-index: 20;
  width: 60%;
  text-align: end;
}
#bg-fix-section2 .img-bottom-right1 {
  width: 62%;
  height: auto;
  bottom: 31%;
  right: 3%;
  z-index: 20;
}
#bg-fix-section2 .text__bottom_left1 {
  bottom: 4%;
  left: 5%;
  z-index: 20;
  width: 90%;
}
#bg-fix-section2 .img-top-right2 {
  width: 40%;
  height: auto;
  top: 5%;
  right: 3%;
  z-index: 20;
}
#bg-fix-section2 .text__top_left2 {
  top: 26%;
  left: 5%;
  z-index: 20;
  width: 80%;
}
#bg-fix-section2 .img-bottom-left2 {
  width: 55%;
  height: auto;
  bottom: 33%;
  left: 4%;
  z-index: 20;
}
#bg-fix-section2 .text__bottom_right2 {
  bottom: 5%;
  right: 5%;
  z-index: 20;
  width: 90%;
}
#bg-fix-section2 .img-top-left3 {
  width: 40%;
  height: auto;
  top: 6%;
  left: 3%;
  z-index: 20;
}
#bg-fix-section2 .text__top_right3 {
  top: 26%;
  right: 5%;
  z-index: 20;
  width: 60%;
  text-align: end;
}
#bg-fix-section2 .img-bottom-right3 {
  width: 43%;
  height: auto;
  bottom: 33%;
  right: 4%;
  z-index: 20;
}
#bg-fix-section2 .text__bottom_left3 {
  bottom: 4%;
  left: 5%;
  z-index: 20;
  width: 90%;
}
#bg-fix-section2 .sec6-4 {
  display: none;
}
#bg-fix-section2 .sec6-4 .img-top-right4 {
  width: 40%;
  height: auto;
  top: 6%;
  right: 3%;
  z-index: 20;
}
#bg-fix-section2 .sec6-4 .text__top_left4 {
  top: 22%;
  left: 5%;
  z-index: 20;
  width: 80%;
}
#bg-fix-section2 .sec6-4 .img-bottom-left4 {
  width: 48%;
  height: auto;
  bottom: 31%;
  left: 3%;
  z-index: 20;
}
#bg-fix-section2 .sec6-4 .img-bottom-right4-2 {
  width: 15%;
  height: auto;
  bottom: 25%;
  right: 8px;
  z-index: 20;
}
#bg-fix-section2 .sec6-4 .text__bottom_right4 {
  bottom: 1%;
  right: 5%;
  z-index: 20;
  width: 90%;
}
#bg-fix-section2 .sec6_img_left {
  height: 220px;
  width: 260px;
  -webkit-clip-path: polygon(0 0, 55% 0, 100% 100%, 0% 100%);
          clip-path: polygon(0 0, 55% 0, 100% 100%, 0% 100%);
  background-color: rgba(255, 255, 255, 0.6);
  border-bottom: 10px solid rgba(0, 0, 0, 0.4);
  top: 35%;
  left: 0;
  z-index: 10;
}
#bg-fix-section2 .sec6_img_right {
  height: 220px;
  width: 260px;
  -webkit-clip-path: polygon(45% 0, 100% 0, 100% 100%, 0% 100%);
          clip-path: polygon(45% 0, 100% 0, 100% 100%, 0% 100%);
  background-color: rgba(255, 255, 255, 0.6);
  border-bottom: 10px solid rgba(0, 0, 0, 0.4);
  top: 35%;
  right: 0;
  z-index: 10;
}

/* ============section-7
=============================================== */
/* ============section-8
=============================================== */
.section_8 {
  background: #f8f8f8;
}
.section_8 h2 {
  padding-left: 30px;
  padding-top: 65px;
  text-shadow: none;
  font-size: 28px;
}
.section_8 h3 {
  padding-left: 35px;
  font-size: 28px;
}
.section_8 .flex {
  padding: 40px 0px;
  justify-content: space-evenly;
}
.section_8 .flex .line {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.section_8 .flex .line a {
  width: 25%;
}
.section_8 .flex .line a img {
  width: 100%;
}
.section_8 .flex .line p {
  padding: 5px;
  text-align: center;
}
.section_8 .flex .sns {
  width: 25%;
  text-align: center;
}
.section_8 .flex .sns p {
  padding: 5px;
}
.section_8 .flex .sns img {
  border-radius: 25px;
}

/* ============section-8
=============================================== */
.section_9 {
  background: #f8f8f8;
}
.section_9 h2 {
  font-size: 32px;
  text-shadow: none;
  padding-left: 30px;
  padding-top: 65px;
}
.section_9 .sec9-inner {
  width: 93%;
  margin: 20px auto;
  text-align: end;
}
.section_9 .sec9-inner a, .section_9 .sec9-inner p {
  padding: 10px;
  color: #030303;
}
.section_9 .sec9-inner a {
  border-bottom: 1px solid #000;
  text-shadow: none;
}
.section_9 .map {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  padding: 40px 0 85px;
}
.section_9 .map iframe {
  margin: 0 auto;
  border: 1px solid #000;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6);
}

/* ============footer
=============================================== */
footer {
  background-color: #000;
  width: 100%;
}
footer .footer-area {
  display: flex;
  justify-content: center;
  padding: 45px 2px 30px;
}
footer .footer-area img {
  display: block;
  width: 55%;
}
footer .copy {
  display: flex;
  padding-bottom: 15px;
  justify-content: center;
  color: #fff;
}
/*# sourceMappingURL=style.css.map */