@charset "UTF-8";
/* ==============================
   共通設定
============================== */
/* 余白や幅の計算をしやすくする */
* {
  box-sizing: border-box
}
/* ページ内リンクをなめらかにスクロールさせる */
html {
  scroll-behavior: smooth
}
/* ページ全体の基本設定 */
body {
  margin: 0;
  background: #e9e4e1;
  color: #111;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Times New Roman", serif;
  line-height: 1.75
}
/* 画像が親要素からはみ出さないようにする */
img {
  max-width: 100%;
  height: auto;
  display: block
}
/* リンクの下線と文字色を初期化 */
a {
  text-decoration: none;
  color: inherit
}
/* ハンバーガーメニューの中身 */
.global-nav {
  position: fixed;
  top: 104px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 720px;
  background: rgba(255, 255, 255, 0.96);
  z-index: 20;
  padding: 40px 30px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

/* メニューが開いた時 */
.global-nav.is-open {
  opacity: 1;
  visibility: visible;
}

/* メニューリスト */
.global-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* メニュー項目 */
.global-nav li {
  border-bottom: 1px solid #d8d0ca;
}

/* メニューリンク */
.global-nav a {
  display: block;
  padding: 22px 10px;
  font-size: 24px;
  letter-spacing: 0.08em;
}

/* 720px以下の時の位置調整 */
@media(max-width:720px) {
  .global-nav {
    top: 14.45vw;
  }

  .global-nav a {
    font-size: 4vw;
    padding: 4vw 2vw;
  }
}


/* ==============================
   ページ全体
============================== */
/* LP全体を720px幅で中央に配置する */
.page {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  background: #f7f4f4;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(0, 0, 0, .08)
}
/* ==============================
   ヘッダー
============================== */
/* ヘッダー全体 */
.header {
  height: 104px;
  background: #fff;
  position: relative;
  z-index: 10
}
/* ロゴとMENUボタンを横並びにする */
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 21px 28px 14px
}
/* ロゴのサイズ */
.logo {
  margin: 0;
  width: 235px
}
/* MENUボタン全体 */
.menu-btn {
  width: 64px;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-family: Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .26em;
  font-size: 15px;
  cursor: pointer
}

/* ハンバーガー線を入れる箱 */
.hamburger {
  position: relative;
  width: 40px;
  height: 30px;
}

/* 3本線 */
.hamburger i {
  position: absolute;
  left: 0;
  width: 40px;
  height: 4px;
  background: #111;
  transition: .3s;
}

/* 1本目 */
.hamburger i:nth-child(1) {
  top: 0;
}

/* 2本目 */
.hamburger i:nth-child(2) {
  top: 13px;
}

/* 3本目 */
.hamburger i:nth-child(3) {
  top: 26px;
}

/* 開いた時：1本目を中央で回転 */
.menu-btn.is-active .hamburger i:nth-child(1) {
  top: 13px;
  transform: rotate(45deg);
}

/* 開いた時：2本目を消す */
.menu-btn.is-active .hamburger i:nth-child(2) {
  opacity: 0;
}

/* 開いた時：3本目を中央で回転 */
.menu-btn.is-active .hamburger i:nth-child(3) {
  top: 13px;
  transform: rotate(-45deg);
}


/* ==============================
   ファーストビュー
============================== */
/* ファーストビュー全体 */
.fv {
  position: relative;
  background: #eee;
  container-type: inline-size;
  max-width: 720px;
  margin: 0 auto;
}

/* 背景画像 */
.fv-bg {
  width: 100%;
  height: auto
}

/* ファーストビュー内の文章 */
.fv-copy {
  position: absolute;
  top: 9cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 58.33cqw;
  color: #181411;
  text-shadow: 0 1px 1px rgba(255,255,255,.4);
}

.fv-copy h2 {
  text-align: center;
  position: relative;
  left: -2.08cqw;
  margin: 0 0 4.44cqw;
  font-size: 5.55cqw;
  line-height: 1.45;
  letter-spacing: .04em;
  font-weight: 700;
}

.fv-message {
  position: relative;
  left: 4.16cqw;
  width: 45.83cqw;
  margin-left: 8.33cqw;
}

.fv-message p {
  font-size: 2.5cqw;
  line-height: 1.4;
  letter-spacing: .05em;
  margin: 0 0 1.38cqw;
  font-weight: 700;
}

/* 共通のボタン画像サイズ */
.cta {
  display: block;
  width: 454px
}
/* ファーストビューの予約ボタン位置 */
.fv-cta {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 240px
}

/* Instagram・LINE案内エリア */
.sns-intro {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6.25cqw;
  text-align: center;
}

/* SNSアイコンと文章 */
.sns-left {
  width: 50cqw;
  margin: 0 auto;
}

/* SNSアイコンを横並び */
.sns-icons {
  display: flex;
  justify-content: center;
  gap: 35px;
  margin-bottom: 18px;
}

/* SNSアイコンサイズ */
.sns-icons img {
  width: 10.41cqw;
  height: 10.41cqw;
}

/* SNS案内の文章 */
.sns-intro p {
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: 2.5cqw;
  line-height: 1.7;
  margin: 0;
}

/* プレゼント画像 */
.gift {
  position: absolute;
  right: -7cqw;
  bottom: -6cqw;
  width: 50cqw;
}


/* ==============================
   セクション共通
============================== */
/* 各セクションの基本余白 */
.section {
  padding: 70px 36px
}
/* セクションタイトル共通 */
.section-title {
  margin: 0;
  text-align: center;
  font-size: 39px;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.2
}
/* セクションタイトル横のアイコン */
.section-title span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 28px;
}
/* セクションタイトル内のアイコン画像 */
.section-title img {
  width: 13.88cqw;
}

.beginner-title {
  transform: translateX(2.77cqw);
}

.reservation-title {
  transform: translateX(3cqw);
}

.beginner {
  background: #f7f3f4;
  padding-top: 60px;
  padding-bottom: 60px;
  container-type: inline-size;
}

/* ==============================
   初めての方へ
============================== */
/* 初めての方へセクション */
.beginner {
  background: #f7f3f4;
  padding-top: 60px;
  padding-bottom: 60px
}
/* 説明文の幅と文字サイズ */
.lead-text {
  width: 450px;
  margin: 45px auto 43px;
  font-size: 25px;
  line-height: 1.9;
  letter-spacing: .02em
}
/* 説明文の段落余白 */
.lead-text p {
  margin: 0 0 36px
}
/* メイン写真 */
.main-photo {
  width: 444px;
  margin: 0 auto
}
/* 3つの特徴を横並び */
.feature-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 70px;
  text-align: center;
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif
}
/* 特徴アイコン */
.feature-item img {
  height: 83px;
  width: auto;
  margin: 0 auto 18px
}
/* 特徴説明文 */
.feature-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75
}
/* ==============================
   来店予約について
============================== */
/* 来店予約セクション */
.reservation {
  background: #f6f5d9;
  padding-top: 76px;
  padding-bottom: 80px
  container-type: inline-size;
}
/* 予約タイトル横のアイコン */
.reservation-title img {
  width: 108px
}
/* 予約説明文 */
.reservation-lead {
  margin: 60px auto 46px;
  width: 520px;
  font-size: 27px;
  line-height: 1.75;
  letter-spacing: .02em;
}
/* 横長写真 */
.wide {
  width: 654px
}
/* 予約の3つのメリット */
.reserve-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  text-align: center;
  margin: 83px 0 70px;
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif
}
/* 予約メリットのアイコン */
.reserve-point img {
  height: 75px;
  width: auto;
  margin: 0 auto 18px;
}
/* 予約メリットの文章 */
.reserve-point p {
  margin: 0;
  font-size: 17px;
  line-height: 1.8
}
/* 予約ボタンを中央に配置 */
.reserve-cta {
  margin: 0 auto
}
/* ==============================
   FLOOR
============================== */
/* フロア紹介セクション */
.floor {
  background: #e9e4e1;
  position: relative;
  padding: 92px 18px 78px
}
/* 猫のしっぽ画像 */
.cat-tail {
  position: absolute;
  right: -5px;
  top: 0;
  width: 230px
}
/* FLOOR見出し部分 */
.floor-head {
  text-align: center;
  margin-bottom: 58px
}
/* FLOORの英字タイトル */
.floor-head h2 {
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 30px;
  line-height: 1;
  margin: 0 0 11px;
  font-weight: 400
}
/* FLOORの説明文 */
.floor-head p {
  font-size: 18px;
  margin: 0;
  line-height: 1.2
}
/* 各フロアカード */
.floor-card {
  margin: 0 0 58px
}
/* フロア名 */
.floor-card h3 {
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 18px;
  padding-left: 0
}
/* 1F、2Fなどの大きな数字 */
.floor-card h3 span {
  font-size: 40px;
  margin-right: 3px;
  vertical-align: baseline
}
/* フロア写真 */
.floor-card img {
  width: 670px;
  border-radius: 35px
}
/* 詳しくはこちらボタン */
.more-btn {
  display: block;
  width: 436px;
  margin: 18px auto 0
}
/* ==============================
   SERVICE
============================== */
/* サービス紹介セクション */
.service {
  position: relative;
  background: #e9e4e1;
  padding: 178px 32px 85px
}
/* 猫の手画像 */
.cat-paw {
  position: absolute;
  left: -88px;
  top: 0;
  width: 315px
}
/* SERVICEタイトル */
.service-title {
  text-align: center;
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  font-weight: 400;
  font-size: 38px;
  line-height: 1;
  margin: 0 0 105px
}
/* SERVICEタイトル下の日本語 */
.service-title span {
  display: block;
  font-family: "Yu Mincho", serif;
  font-size: 20px;
  margin-top: 10px
}
/* サービスを2列で並べる */
.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 78px;
  column-gap: 20px;
  text-align: center;
  color: #8f8076
}
/* サービスアイコン */
.service-item img {
  height: 120px;
  width: auto;
  margin: 0 auto 16px
}
/* サービス英字 */
.service-item p {
  margin: 0;
  font-family: Arial, "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 22px;
  letter-spacing: .18em;
  line-height: 1.35;
  font-weight: 700
}
/* サービス日本語 */
.service-item span {
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 19px;
  letter-spacing: .12em;
  font-weight: 700
}
/* Instagram・LINE案内画像の箱 */
.instagram-area {
  background: #fff;
  margin: 118px auto 0;
  width: 647px
}
/* ==============================
   フッター
============================== */
/* フッター全体 */
.footer {
  background: #928173;
  color: #fff;
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 14px;
  padding: 34px 29px 38px;
  align-items: start
}
/* フッターロゴ */
.footer-logo {
  width: 214px;
  margin-bottom: 28px;
  filter: brightness(0)
}
/* フッター内の店舗情報 */
.footer p {
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.4
}
/* アクセスマップ画像 */
.map {
  width: 228px;
  margin-top: 18px
}
/* 店舗外観画像 */
.shop-photo {
  width: 396px;
  border-radius: 36px;
  justify-self: end
}

/* ==============================
   TOPへ戻るボタン
============================== */

.page-top{
  position:fixed;
  right:20px;
  bottom:30px;

  width:50px;
  height:50px;

  background:#928173;
  color:#fff;

  border-radius:50%;

  display:flex;
  justify-content:center;
  align-items:center;

  font-size:20px;

  opacity:0;
  visibility:hidden;

  transition:.3s;

  z-index:100;
}

/* 表示状態 */
.page-top.show{
  opacity:1;
  visibility:visible;
}

/* ホバー */
.page-top:hover{
  transform:translateY(-3px);
}


/* ==============================
   スマホ用調整
   720px以下の画面ではvwで縮小
============================== */
@media(max-width:720px) {
  /* ページ幅を画面いっぱいにする */
  .page {
    max-width: none
  }
  
  .header {
    height: 14.45vw
  }
  .header-inner {
    padding: 2.9vw 3.9vw 1.9vw
  }
  .logo {
    width: 32.6vw
  }
  .menu-btn {
    width: 8.9vw;
    gap: .97vw;
    font-size: 2.08vw
  }
 
  .cta {
    width: 63.05vw
  }
  .fv-cta {
    bottom: 34vw
  }
  
  .section {
    padding-left: 5vw;
    padding-right: 5vw
  }
  .beginner {
    padding-top: 8.3vw;
    padding-bottom: 8.3vw
  }
  .section-title {
    font-size: 5.41vw
  }
  .lead-text {
    width: 62vw;
    font-size: 3.47vw;
    margin: 6.25vw auto 5.97vw
  }
  .lead-text p {
    margin-bottom: 5vw
  }
  
  .nowrap {
    white-space: nowrap;
}
  
  .main-photo {
    width: 61.66vw
  }
  .feature-list {
    gap: 3.05vw;
    margin-top: 9.72vw
  }
  .feature-item img {
    height: 11.52vw
  }
  .feature-item p {
    font-size: 2.08vw
  }
  .reservation {
    padding-top: 10.55vw;
    padding-bottom: 11.1vw
  }
  .reservation-title img {
    width: 15vw
  }
  .reservation-lead {
    width: 72vw;
    font-size: 3.75vw;
    margin: 8.33vw auto 6.38vw
  }
  .wide {
    width: 90.83vw
  }
  .reserve-points {
    gap: 4.16vw;
    margin: 11.52vw 0 9.72vw
  }
  .reserve-point img {
  height: 10.5vw;
}
  .reserve-point p {
    font-size: 2.36vw
  }
  .floor {
    padding: 12.77vw 2.5vw 10.83vw
  }
  .cat-tail {
    width: 31.94vw
  }
  .floor-head {
    margin-bottom: 8.05vw
  }
  .floor-head h2 {
    font-size: 4.16vw
  }
  .floor-head p {
    font-size: 2.5vw
  }
  .floor-card {
    margin-bottom: 8.05vw
  }
  .floor-card h3 {
    font-size: 2.36vw;
    margin-bottom: 2.5vw
  }
  .floor-card h3 span {
    font-size: 5.55vw
  }
  .floor-card img {
    width: 93.05vw;
    border-radius: 4.86vw
  }
  .more-btn {
    width: 60.55vw
  }
  .service {
    padding: 24.72vw 4.44vw 11.8vw
  }
  .cat-paw {
    left: -12.22vw;
    width: 43.75vw
  }
  .service-title {
    font-size: 5.27vw;
    margin-bottom: 14.58vw
  }
  .service-title span {
    font-size: 2.77vw
  }
  .service-grid {
    row-gap: 10.83vw
  }
  .service-item img {
    height: 16.66vw
  }
  .service-item p {
    font-size: 3.05vw
  }
  .service-item span {
    font-size: 2.63vw
  }
  .instagram-area {
    width: 89.86vw;
    margin-top: 16.38vw
  }
  .footer {
    grid-template-columns: 34.7vw 1fr;
    gap: 1.94vw;
    padding: 4.72vw 4.02vw 5.27vw
  }
  .footer-logo {
    width: 29.7vw;
    margin-bottom: 3.88vw
  }
  .footer p {
    font-size: 2.22vw
  }
  .map {
    width: 31.66vw
  }
  .shop-photo {
    width: 55vw;
    border-radius: 5vw
  }
}


@media(min-width:721px) {
  .fv-copy {
    width: 420px;
  }

  .fv-copy h2 {
    left: -15px;
    margin: 0 0 32px;
    font-size: 40px;
  }

  .fv-message {
    left: 30px;
    width: 330px;
    margin-left: 60px;
  }

  .fv-message p {
    font-size: 18px;
    margin: 0 0 10px;
  }
}


/* ==============================
   ファーストビュー演出
   キャッチコピーを1文字ずつ下から表示
============================== */

/* キャッチコピー全体 */
.fv-title {
  overflow: hidden;
}

/* JSで1文字ずつ分解された文字 */
.fv-title span {
  display: inline-block;

  /* 最初は少し下に隠す */
  transform: translateY(30px);

  /* 最初は透明 */
  opacity: 0;

  /* 下から出てくる動き */
  transition: 
    transform 1s ease,
    opacity 1s ease;
}

/* 表示開始後の文字 */
.fv-title.is-show span {
  transform: translateY(0);
  opacity: 1;
}


/* ==============================
   ファーストビュー演出
   説明文を最初は非表示
============================== */

/* 最初の状態：下にずらして透明 */
.fv-message {
  opacity: 0;
  transform: translateY(20px);

  /* ふわっと出る動き */
  transition:
    opacity 1.2s ease,
    transform 1.2s ease;
}

/* 表示された状態 */
.fv-message.is-show {
  opacity: 1;
  transform: translateY(0);
}


/* ==============================
   FV予約ボタン・SNSエリア演出
   最初は隠して、あとから一緒にふわっと表示
============================== */

/* 予約ボタンの最初の状態 */
.fv-cta {
  position: absolute;
  left: 50%;
  bottom: 240px;

  opacity: 0;
  transform: translateX(-50%) translateY(30px);

  transition:
    opacity 1.2s ease,
    transform 1.2s ease;
}

/* スマホ時の予約ボタン位置 */
@media(max-width:720px) {
  .fv-cta {
    bottom: 34vw;
  }
}

/* SNSエリアの最初の状態 */
.sns-intro {
  opacity: 0;
  transform: translateY(30px);

  transition:
    opacity 1.2s ease,
    transform 1.2s ease;
}

/* 予約ボタンが表示された状態 */
.fv-cta.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* SNSエリアが表示された状態 */
.sns-intro.is-show {
  opacity: 1;
  transform: translateY(0);
}


/* ==============================
   予約ボタンを3回ふわっと上下させる
============================== */

/* is-float が付いた時だけ実行 */
.fv-cta.is-float {
  animation: ctaFloat 1.8s ease-in-out 3;
}

/* 上下する動き */
@keyframes ctaFloat {

  /* 開始位置 */
  0% {
    transform: translateX(-50%) translateY(0);
  }

  /* 少し上に移動 */
  50% {
    transform: translateX(-50%) translateY(-8px);
  }

  /* 元の位置に戻る */
  100% {
    transform: translateX(-50%) translateY(0);
  }

}

/* ==============================
   FV NEW OPEN演出
   説明文のあとにふわっと表示
============================== */

/* NEW OPEN全体 */
.fv-open {
  position: absolute;
  top: 24cqw;
  right: 5cqw;
  width: 28cqw;

  opacity: 0;
  transform: translateY(20px);

  transition:
    opacity 1.2s ease,
    transform 1.2s ease;
}

/* 表示された状態 */
.fv-open.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* NEW OPEN画像 */
.fv-open-main {
  width: 100%;
}

/* 日付画像 */
.fv-open-sub {
  width: 70%;
  margin: 1cqw auto 0;
}



/* ==============================
   Fade Up
============================== */

.fade-up{
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

.fade-up.show{
  opacity: 1;
  transform: translateY(0);
}