@charset "utf-8";
/*-----全部にかけているcss-----*/
* {
    margin: 0;
    padding: 0;
}

html{
  width: 100%;
  max-width: 100%;
  overflow-x: clip; /* iOS 15+ / Safariでhiddenより強力 */
}
/*-----外の大枠-----*/
body {
    /*背景色*/
    background-color: #0a0a0a;
    /*文字色*/
    color: #ffffff;
    /*中央寄せ*/
    text-align: center;
    /*横方向にスクロールさせない*/
    overflow-x: hidden;
    /*フォント指定*/
    font-family: "Shippori Mincho", serif;
    /*文字の太さ*/
    font-weight: 400;
    /*通常、筆記体、斜体などをいじるプロパティ*/
    font-style: normal;
    /*字間*/
    letter-spacing: 0.3vw;
    /*行間*/
    line-height: 2vw;
}

/*-----〇〇-container系全般-----*/
.container {
    /*要素の下に余白*/
    margin-bottom: 5vw;
}
/*-----横並びにしたいものにこのclassをつけています-----*/
.flex {
    /*このクラスがついているものの中身を横並びにする*/
    display: flex;
}

/*-----liタグ全て-----*/
ul li {
    /*箇条書きの点を非表示*/
    list-style: none;
    /*文字の大きさ*/
    font-size: 1.2vw;
    margin-bottom: 0.5vw;
}

/*-----「〜ABOUT〜」のようなもの全てを囲っているdivタグ-----*/
.category-wrapper {
    /*横幅*/
    width: 90%;
    /*要素の余白を指定(上 左右 下)*/
    margin: 0 auto 8vw;
    justify-content: center;
}

/* .fv-sitetitle内のimgタグに対するスタイル */
.fv-sitetitle img {
  width: 30vw;  /* 画像の幅を200pxに指定 */
  height: auto;  /* 高さは自動調整 */
  max-width: 100%;  /* 画面サイズに合わせて最大幅100% */
}

/*-----「〜ABOUT〜」のようなものの「〜」部分-----*/
.category-wrapper img {
    width: 3%;
}
/*-----「〜ABOUT〜」のようなものの文字の部分-----*/
.category {
    margin: 0 2vw;
    font-size: 2vw;
        font-family: "Cinzel Decorative", serif;
        font-weight: 500;
        font-style: normal;
}

/* =========================================
   ハンバーガーメニュー中央揃え修正版
   PC・スマホ両対応
========================================= */
.hamburger-fade {
  position: fixed;
  top: 20px;
  right: 40px;
  z-index: 1000;
  width: 60px;
  height: 60px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;

  /* 中央揃え設定 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px; /* 線と文字の間の余白 */
}

/* 線部分 */
.hamburger-fade__wrapper {
  position: relative;
  width: 28px;
  height: 18px;
  margin: 0; /* 不要なズレ防止 */
}

.hamburger-fade__line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.hamburger-fade__line:nth-child(1) {
  top: 0;
}
.hamburger-fade__line:nth-child(2) {
  bottom: 0;
}

/* MENU文字 */
.hamburger-fade .menu {
  font-size: 11px;
  letter-spacing: 0.3vw;
  color: #ffffff;
  margin: 0;
  text-align: center;
}

/* アクティブ時の変化（線が×になる） */
.hamburger-fade.active .hamburger-fade__line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger-fade.active .hamburger-fade__line:nth-child(2) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ======== スマホ用調整 ======== */
@media (max-width: 767px) {
  .hamburger-fade {
    top: 14px;
    right: 20px;
    width: 50px;
    height: 50px;
    gap: 6px;
  }

  .hamburger-fade__wrapper {
    width: 8vw;
    height: 5vw;
  }

  .hamburger-fade__line {
    height: 2px;
  }

  .hamburger-fade .menu {
    font-size: 3vw;
    letter-spacing: 0.6vw;
  }

  .hamburger-fade.active .hamburger-fade__line:nth-child(1) {
    transform: translateY(0.6vw) rotate(45deg);
  }
  .hamburger-fade.active .hamburger-fade__line:nth-child(2) {
    transform: translateY(-0.6vw) rotate(-45deg);
  }
}


.menu {
    margin: 0 auto;
    font-size: 10px;
    letter-spacing: 0.3vw;
    color: #ffffff;
}
@media (max-width: 767px) {
    .menu {
        margin: 0 auto;
        font-size: 16px;
        letter-spacing: 0.8vw;
    }
}




.nav-fade {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    visibility: hidden;
    z-index: 900;
}

.nav-fade__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #333;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.nav-fade.active {
    visibility: visible;
}

.nav-fade.active .nav-fade__bg {
    opacity: 1;
}

.nav-fade__wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.nav-fade__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline;
}

.nav-fade__item {
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    margin: 0 auto;
    text-align: center;
    justify-content: center;
}

.nav-fade.active .nav-fade__item {
    opacity: 1;
    transform: translateY(0);
}

.nav-fade.active .nav-fade__item:nth-child(1) {
    transition-delay: 0.2s;
}

.nav-fade.active .nav-fade__item:nth-child(2) {
    transition-delay: 0.3s;
}

.nav-fade.active .nav-fade__item:nth-child(3) {
    transition-delay: 0.4s;
}

.nav-fade.active .nav-fade__item:nth-child(4) {
    transition-delay: 0.5s;
}

.nav-fade.active .nav-fade__item:nth-child(5) {
    transition-delay: 0.6s;
}

.nav-fade.active .nav-fade__item:nth-child(6) {
    transition-delay: 0.7s;
}

.nav-fade__link {
    display: inline-block;
    color: #fff;
    font-size: 32px;
    text-decoration: none;
    transition: color 0.3s ease;
    margin-bottom: 4vw;
}
@media (max-width: 767px) {
    .nav-fade__link {
        display: inline-block;
        color: #fff;
        font-size: 32px;
        text-decoration: none;
        transition: color 0.3s ease;
        margin-bottom: 8vw;
    }
}

.nav-fade__link:hover {
    color: #b2b2b2;
}

.nav-fade__info {
    margin-top: auto;
    padding-left: 60px;
    color: #666;
    font-size: 14px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.6s;
}


.nav-fade.active .nav-fade__info {
    opacity: 1;
    transform: translateY(0);
}

.nav-fade__address,
.nav-fade__tel {
    margin: 5px 0;
}


/*--------------------
        FV関係
--------------------*/
/*-----FVの大枠-----*/
.firstview {
    margin-bottom: 80vw;
}
/* ======== トップロゴ上下中央揃え ======== */
.fv-sitetitle {
  position: absolute;
  top: 50%;             /* 画面高さの中央に配置 */
  left: 1vw;            /* 左の位置はそのまま */
  transform: translateY(-50%);  /* 自身の高さの半分分上へずらして真ん中に */
  font-size: 4vw;       /* 既存のサイズ指定は維持 */
  z-index: 10;          /* 画像の上に重ならないように */
}

/*-----FVの画像が入っているdivタグ-----*/
.firstview-img {
    position: absolute;
    top: -4vw;
    right: 32vw;
    z-index: -10;
}
/*-----FVの画像自体-----*/
.firstview-img img {
    width: 200%;
}



/*--------------------
        ABOUT関係
--------------------*/
/*-----aboutの文章-----*/
.about-text {
    font-size: 1.4vw;
    line-height: 3.6vw;
}

/*--------------------
    feature関係
--------------------*/
/*-----featureの大枠-----*/
.feature-container {
    height: 210vw;
}
/*-----１つ目の画像-----*/
.img1 {
    width: 30vw;
    height: 18vw;
    object-fit: cover;
    position: relative;
    top: 10vw;
    left: 20vw;
}
/*-----１つ目の画像の下の四角-----*/
.color-box1 {
    width: 12vw;
    height: 16vw;
    background-color: #AFAA98;
    position: relative;
    top: 4vw;
    left: 50vw;
    z-index: -10;
}
/*-----１つ目の文章-----*/
.feature-txt1 {
    position: relative;
    top: 0vw;
    left: 16vw;
    text-align: left;
    font-size: 1.4vw;
    letter-spacing: 0.4vw;
    margin-bottom: 0.5vw;
}
/*-----２つ目の画像-----*/
.img2 {
    width: 24vw;
    height: 20vw;
    object-fit: cover;
    position: relative;
    top: 8vw;
    right: 20vw;
}
/*-----２つ目の文章-----*/
.feature-txt2 {
    position: relative;
    top: 16vw;
    left: 44vw;
    text-align: left;
    font-size: 1.4vw;
    letter-spacing: 0.4vw;
    margin-bottom: 0.5vw;
}
/*-----３枚目の画像(２枚目画像下部)-----*/
.img3 {
    width: 20vw;
    height: 8vw;
    object-fit: cover;
    position: relative;
    right: 10vw;
    top: -2vw;
}
/*-----４枚目の画像(２つ目文章下部)-----*/
.img4 {
    width: 36vw;
    position: relative;
    top: 26vw;
    left: 16vw;
}
/*-----4枚目の画像の下の四角-----*/
.color-box2 {
    width: 20vw;
    height: 8vw;
    background-color: #AFAA98;
    position: relative;
    top: 20vw;
    left: 50vw;
    z-index: -10;
}
/*-----5枚目の画像-----*/
.img5 {
    width: 28vw;
    height: 16vw;
    object-fit: cover;
    position: relative;
    top: 16vw;
    right: 14vw;
}
/*-----6枚目の画像-----*/
.img6 {
    width: 16vw;
    position: relative;
    top: 32vw;
}
/*-----6枚目の画像の下の四角-----*/
.color-box3 {
    width: 12vw;
    height: 4vw;
    background-color: #AFAA98;
    position: relative;
    top: 29vw;
    left: 64vw;
    z-index: -10;
}
/*-----３つ目の文章-----*/
.feature-txt3 {
    position: relative;
    top: 36vw;
    left: 20vw;
    text-align: left;
    font-size: 1.6vw;
    letter-spacing: 0.4vw;
    margin-bottom: 0.5vw;
}
/*-----7枚目の画像-----*/
.img7 {
    width: 30vw;
    position: relative;
    top: 40vw;
    left: 30vw;
}
/*-----7枚目の画像の下の四角-----*/
.color-box4 {
    width: 16vw;
    height: 10vw;
    background-color: #AFAA98;
    position: relative;
    top: 32vw;
    left: 60vw;
    z-index: -10;
}

/*------------------------------------------------
        下からフェードインするのに必要なcss
------------------------------------------------*/
/*-----初期設定-----*/
.box {
    /*要素を非表示*/
    opacity: 0;
    visibility: hidden;
    /*どのくらいの時間をかけて表示させるか*/
    transition: all 1s;
    /*表示したい位置から少し下にずらしておく*/
    transform: translateY(150px);
}
/*-----画面内に要素が入った時の動きを指定-----*/
.is-active {
    /*要素を表示させる*/
    opacity: 1;
    visibility: visible;
    /*元の位置に戻す*/
    transform: translateY(0);
}

/*-----------------------------------------------
    様々なテキストがフェードインするのに必要なcss
------------------------------------------------*/
/*-----初期設定-----*/
.text {
    /*要素を非表示*/
    opacity: 0;
    visibility: hidden;
    /*どのくらいの時間をかけて表示させるか*/
    transition: all 1s;
}
/*-----画面内に要素が入った時の動きを指定-----*/
.is-active-txt {
    /*要素を表示させる*/
    opacity: 1;
    visibility: visible;
}


.items {
    width: 95%;
    margin: 0 auto;
    justify-content: center;
}

.wrapper {
    width: fit-content;
}

.category-mini {
    text-align: left;
    margin-bottom: 1.2vw;
    font-size: 1.6vw;
}

.item {
    display: inline-flex;
    gap: 2vw;
}

.menu {
    text-align: left;
    width: fit-content;
    margin: 0 auto 0 2vw;
}

.price {
    text-align: right;
    margin: 0;
}

.kihon-kurashiki {
    display: inline;
    margin-left: 6.2vw;
}

.border-tate {
    height: 12vw;
    border: 0.5px solid #ffffff;
    margin: 0 2vw;
}

.border-tate2 {
    height: 18vw;
    border: 0.5px solid #ffffff;
    margin: 0 2vw;
}

.s-item {
    gap: 8vw;
}

.service-item img {
    width: 5vw;
    height: 5vw;
    margin: 0 2vw 3vw 0;
}

.s-item-txt {
    line-height: 5vw;
    font-size: 1.2vw;
}

.food {
    line-height: 3vw;
    text-align: left;
}

.what-txt-wrapper {
    width: 70%;
    margin: 0 auto;
    font-size: 1.2vw;
    line-height: 2.8vw;
    letter-spacing: 0.2vw;
    text-align: justify;
}

.cdc-link {
    width: 12vw;
    height: 4vw;
    color: #0a0a0a;
    background-color: #ffffff;
    line-height: 4vw;
    border-radius: 1vw;
    margin-top: 2vw;
    margin-left: auto;
    text-decoration: none;
}

.cdc-link p {
    text-align: center;
}

.access-wrapper {
    width: 80%;
    margin: 0 auto;
}

.honten {
    margin-bottom: 6vw;
}

.access {
    justify-content: center;
    text-align: left;
}

.access-txt {
    width: 50%;
    margin: auto 0;
}

.tenmei {
    margin-bottom: 4vw;
    font-size: 2vw;
}

.access-item {
    font-size: 1.2vw;
    line-height: 2.4vw;
}

.access-category {
    margin-right: 2vw;
}

.sns {
    gap: 1vw;
    margin: 2vw 0 0 2vw;
}

.instagram {
    width: 3vw;
    height: 3vw;
    background-color: #ffffff;
    border-radius: 20%;
    text-align: center;
}

.instagram img {
    width: 2vw;
    position: relative;
    top: 19%;
}

.twitter {
    width: 3vw;
    height: 3vw;
    background-color: #ffffff;
    border-radius: 20%;
    text-align: center;
}

.twitter img {
    width: 1.6vw;
    position: relative;
    top: 21%;
}

.map {
    width: 36vw;
    height: 28vw;
}
.copylight {
    margin: 2vw auto;
}

@media (max-width: 767px) {
    /*-----liタグ全て-----*/
ul li {
    /*箇条書きの点を非表示*/
    list-style: none;
    /*文字の大きさ*/
    font-size: 2vw;
    margin-bottom: 4vw;
}


/*--------------------
        FV関係
--------------------*/
/*-----FVの大枠-----*/
.firstview {
    margin-bottom: 110vw;
}
/*-----FVに書かれている店名-----*/
.fv-sitetitle {
    position: absolute;
    top: 40vw;
    left: 3vw;
}
/*-----FVの画像が入っているdivタグ-----*/
.firstview-img {
    position: absolute;
    top: 10vw;
    right: 70vw;
    z-index: -10;
}
/*-----FVの画像自体-----*/
.firstview-img img {
    width: 500%;
}
/* .fv-sitetitle内のimgタグに対するスタイル */
.fv-sitetitle img {
  width: 30vw;  /* 画像の幅を200pxに指定 */
  height: auto;  /* 高さは自動調整 */
  max-width: 100%;  /* 画面サイズに合わせて最大幅100% */
}
/*-----「〜ABOUT〜」のようなもの全てを囲っているdivタグ-----*/
.category-wrapper {
    /*横幅*/
    width: 90%;
    /*要素の余白を指定(上 左右 下)*/
    margin: 0 auto 8vw;
    justify-content: center;
}

/*--------------------
        ABOUT関係
--------------------*/
/*-----「〜ABOUT〜」のようなものの「〜」部分-----*/
.category-wrapper img {
    width: 7%;
}
/*-----「〜ABOUT〜」のようなものの文字の部分-----*/
.category {
    margin: 0 2vw;
    font-size: 3vw;
        font-family: "Cinzel Decorative", serif;
        font-weight: 500;
        font-style: normal;
}
/*-----aboutの文章-----*/
.about-text {
    font-size: 2.2vw;
    line-height: 5vw;
}
/*--------------------
    feature関係
--------------------*/
/*-----featureの大枠-----*/
.feature-container {
    height: 210vw;
}
/*-----１つ目の画像-----*/
.img1 {
    width: 34vw;
    height: 20vw;
    object-fit: cover;
    position: relative;
    top: 10vw;
    left: 28vw;
}
/*-----１つ目の画像の下の四角-----*/
.color-box1 {
    width: 12vw;
    height: 16vw;
    background-color: #AFAA98;
    position: relative;
    top: 4vw;
    left: 56vw;
    z-index: -10;
}
/*-----１つ目の文章-----*/
.feature-txt1 {
    position: relative;
    top: 0vw;
    left: 8vw;
    text-align: left;
    font-size: 2vw;
    letter-spacing: 0.6vw;
    margin-bottom: 1.7vw;
}

/*-----２つ目の文章-----*/
.feature-txt2 {
    position: relative;
    top: 16vw;
    left: 44vw;
    text-align: left;
    font-size: 2vw;
    letter-spacing: 0.6vw;
    margin-bottom: 1.7vw;
}

/*-----３つ目の文章-----*/
.feature-txt3 {
    position: relative;
    top: 36vw;
    left: 20vw;
    text-align: left;
    font-size: 2.4vw;
    letter-spacing: 0.6vw;
    margin-bottom: 1.9vw;
}

.items {
    width: 95%;
    margin: 0 auto;
    justify-content: center;
    display: inline;
}

.wrapper {
    width: 100%;
    margin: 0 auto;
}

.category-mini {
    text-align: center;
    margin-bottom: 6vw;
    font-size: 2.8vw;
}

.item {
    display: inline-flex;
    gap: 2vw;
}

.menu {
    text-align: left !important;
    width: fit-content;
    margin: 0 auto 0 2vw;
}

.price {
    text-align: right;
    margin: 0;
}

.kihon-kurashiki {
    display: block;
    margin-left: 12.4vw;
    margin-bottom: 4vw;
}

.border-tate {
    width: 36vw;
    height: 0vw;
    border: 0.5px solid #ffffff;
    margin: 5vw auto;
}

.border-tate2 {
    width: 62vw;
    height: 0vw;
    border: 0.5px solid #ffffff;
    margin: 5vw auto;
}

.s-item {
    gap: 8vw;
}

.service-item img {
    width: 8vw;
    height: 8vw;
    margin: 0 2vw 6vw 0;
}

.s-item-txt {
    line-height: 5vw;
    font-size: 2vw;
}

.food {
    line-height: 3vw;
    text-align: left;
}

.what-txt-wrapper {
    width: 70%;
    margin: 0 auto;
    font-size: 2vw;
    line-height: 4vw;
    letter-spacing: 0.2vw;
    text-align: justify;
}

.cdc-link {
    width: 18vw;
    height: 6vw;
    color: #0a0a0a;
    background-color: #ffffff;
    line-height: 4vw;
    border-radius: 1vw;
    margin-top: 2vw;
    margin-left: auto;
    text-decoration: none;
}

.cdc-link p {
    text-align: center;
    padding-top: 1vw;
}

.access-wrapper {
    width: 80%;
    margin: 0 auto;
}

.honten {
    margin-bottom: 12vw;
}

.access {
    display: block;
    justify-content: center;
    text-align: left;
}

.access-txt {
    width: 80%;
    margin: auto 0;
}

.tenmei {
    margin-bottom: 4vw;
    font-size: 2.5vw;
}

.access-item p {
    font-size: 2vw;
    line-height: 4vw;
}

.access-category {
    margin-right: 2vw;
}

.sns {
    gap: 4vw;
    margin: 4vw 0 0 2vw;
}

.instagram {
    width: 10vw;
    height: 10vw;
    background-color: #ffffff;
    border-radius: 20%;
    text-align: center;
}

.instagram img {
    width: 8vw;
    position: relative;
    top: 15%;
}

.twitter {
    width: 10vw;
    height: 10vw;
    background-color: #ffffff;
    border-radius: 20%;
    text-align: center;
}

.twitter img {
    width: 6.5vw;
    position: relative;
    top: 19%;
}

.map {
    width: 44vw;
    height: 28vw;
    margin-left: 40vw;
    margin-top: -10vw;
}
.copylight {
    font-size: 2vw;
    margin: 2vw auto;
}
}

/* ================================
   モバイル全体の可読性アップ
   ※ style.css の一番最後に追記
================================ */
@media (max-width: 767px) {
  /* ベースの可読サイズを確保（14px〜18pxの範囲で自動調整） */
  html { font-size: clamp(14px, 3.8vw, 18px); }

  /* 行間と文字間隔を自然に */
  body {
    line-height: 1.8;
    letter-spacing: 0.2vw;
    overflow-wrap: anywhere;   /* 長い単語でのはみ出し対策 */
    word-break: keep-all;      /* 日本語の不自然な改行を抑える */
  }

  /* セクション見出し */
  .category { /* ABOUT / SYSTEM など */
    font-size: clamp(18px, 5.5vw, 24px);
  }
  .category-mini { /* 小見出し */
    font-size: clamp(16px, 4.5vw, 20px);
    text-align: center; /* 既存と整合をとる */
  }

  /* 本文・リスト */
  ul li {
    font-size: clamp(14px, 3.6vw, 16px);
    margin-bottom: 3.2vw; /* 既存 4vw よりやや詰める場合は調整可 */
  }
  .about-text {
    font-size: clamp(14px, 3.8vw, 17px);
    line-height: 1.9;
  }
  .what-txt-wrapper {
    font-size: clamp(14px, 3.6vw, 16px);
    line-height: 1.9;
    letter-spacing: 0.15vw;
  }

  /* サービスのアイテム文言 */
  .s-item-txt {
    font-size: clamp(13px, 3.4vw, 15px);
    line-height: 1.8;
  }

  /* アクセス（店舗名・詳細） */
  .tenmei {
    font-size: clamp(18px, 5.2vw, 22px);
  }
  .access-item p,
  .access-item {
    font-size: clamp(14px, 3.6vw, 16px);
    line-height: 1.9;
  }

  /* ナビゲーションのリンク（メニューオーバーレイ） */
  .nav-fade__link {
    font-size: clamp(20px, 7vw, 28px); /* 既存は固定32px */
    margin-bottom: 6vw;                /* 既存8vw → 6vwに微調整 */
  }

  /* ハンバーガーの "MENU" ラベルだけ個別に（他の .menu へ影響しないよう限定） */
  .hamburger-fade .menu {
    font-size: clamp(12px, 3.2vw, 14px);
    letter-spacing: 0.4vw;
    margin: 0;
  }

  /* ボタン風のCDCリンク（高さ固定をやめる） */
  .cdc-link {
    width: auto;               /* 固定幅をやめる */
    height: auto;              /* 固定高さをやめる */
    padding: 2.5vw 4vw;        /* 余白でボタン感 */
    line-height: 1.6;          /* 行間リセット */
    border-radius: 2vw;
    display: inline-block;
    font-size: clamp(13px, 3.4vw, 15px);
  }
  .cdc-link p { padding: 0; }  /* 既存の余白上書き */

  /* フッターのコピーライト */
  .copylight {
    font-size: clamp(12px, 3.2vw, 14px); /* 既存 2vw を上書き */
  }
}