body{
margin:0;
font-family:'Noto Sans JP',sans-serif;
}

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

/* ヘッダー */

header{
position:fixed;
top:0;
width:100%;
z-index:1000;
transition:0.3s;
}

.header-inner{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 60px;
}

.logo{
font-size:28px;
font-weight:900;
color: #4a2c0a;
}

/* ナビ */

.nav{
display:flex;
gap:40px;
list-style:none;
margin:0;
padding:0;
font-weight:600;
color: #5e4200;
}

/* スクロール後ヘッダー */

.header-scroll{
background:#e8952a;
box-shadow:0 2px 10px rgba(0,0,0,0.15);
}

/* ファーストビュー */
.fv{
  background:#f7b347;
  height:100vh;
  display:flex;
  align-items:center;
  padding-top:80px;
  position:relative;
  overflow:hidden;
}

.fv-inner{
  position:relative; /* これ大事 */
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:90%;
  margin:auto;
  height:100%;
}
/* 画像エリア */
.fv-image{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
}
/* 2・3枚目は常に小さい状態を基準にする */
.fv-image .slide:nth-child(2),
.fv-image .slide:nth-child(3) {
  width: 70%;
  height: 70%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
}

/* activeでも transform を変えない */
.fv-image .slide:nth-child(2).active,
.fv-image .slide:nth-child(3).active {
  transform: translate(-50%, -50%) scale(0.7);
}
/* スライド */
.slide{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:contain; /* ← カレー基準で収まる */
  opacity:0;
  transition:opacity 1s ease;
}

.slide.active{
  opacity:1;
}
/* 文字 */
.fv-text {
  position: relative;
  z-index: 2;
}


/* コピー */

.fv-text{
display:flex;
flex-direction:column;
gap:30px;
margin-left: auto;
margin-right: -40px;
}
.copy-box{
  width:auto;          /* ← 固定幅をやめる */
  height:auto;

  background:none;      /* ← グレー背景を消す */
  border-radius:0;      /* ← 角丸も不要なら消す */

  font-size:60px;       /* ← 文字を大きく */
  font-weight:900;      /* ← 太く */
  color:#4a2c0a;        /* ← ブランドカラー */

  display:flex;         /* ← 高さ中央揃え */
  align-items:center;
  white-space:nowrap;  /* ← 改行させない */
}
.copy-box:first-child{
  margin-left:-210px;  /* ← 数字を調整 */
}
.copy-box:nth-child(2){
  margin-left:-190px;   /* ← ここを微調整 */
}
/* 共通 */
.container{
width:90%;
max-width:1100px;
margin:auto;
}

.section-title{
display:inline-block;
background:#f7b347;
padding:10px 30px;
border-radius:10px;
font-weight:700;
margin-bottom:40px;
color: #5e4200;
}

/* こだわり */

/* 中ページ・共通こだわり */
.kodawari{
  background-color:#f8f0e3;
  padding:100px 20px;
  text-align:center;
}

.kodawari-content{
display:flex;
align-items:center;
gap:150px;
margin-left: 80px;
}

.kodawari-image{
position:relative;
}

.curry-main{
width:750px;
max-width: none;
margin-left: -150px;
margin-top: -180px;
}

.steam{
position:absolute;
top:-60px;
left:-40px;
width:120px;
transform: scaleX(-1);
animation: steamMove 4s ease-in-out infinite;
}
.kodawari-text{
margin-left:-200px;
width:650px;
}

.kodawari-text p{
font-size: 19px;
font-weight: 600;
line-height:2;
margin-bottom:30px;
max-width:650px;
color:#5e4200;
}

/* ボタン */

.btn{
display:inline-block;
background:#f3a128;
color: #5e4200;
padding:20px 50px;
border-radius:30px;
font-weight:700;
margin-top: 40px;
box-shadow: 0 6px 10px rgba(0,0,0,0.25);
transition: 0.2s;
}
.btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
}
.btn:active{
transform:translateY(2px);
box-shadow:0 3px 6px rgba(0,0,0,0.2);
}
.btn.center{
display:block;
width:250px;
text-align:center;
margin:60px auto 0;
}

/* コンセプト */

.concept{
background-color: #f8f0e3;
text-align:center;
padding:120px 0;
}
.section-title{
    margin-top: -40px;
}
.concept-text{
font-size: 19px;
font-weight: 600;
max-width:650px;
margin:40px auto;
line-height:2;
color: #5e4200;
}

/* メニュー */

.menu-preview{
display:flex;
justify-content:center;
gap:100px;
margin-top:60px;
}
.menu-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: translateY(-10px);
}
.menu-item:hover img{
    filter: drop-shadow(0 15px 15px rgba(0,0,0,0.2));
}
.menu-item img{
width:200px;
margin-bottom:10px;
}

.menu-item p{
background:#f3a128;
color: #5e4200;
padding:6px 12px;
display:inline-block;
}
@keyframes steamMove{

0%{
transform: scaleX(-1) translateY(0);
opacity:0.8;
}

50%{
transform: scaleX(-1) translateY(-10px);
opacity:1;
}

100%{
transform: scaleX(-1) translateY(0);
opacity:0.8;
}

}
/* スパイスパララックス */

.spice-parallax{
height:500px;
background-image:url("image/jawa-kakushi.png");
background-size:cover;
background-position:center;
background-attachment:fixed;
position:relative;
}

/* 黒オーバーレイ */

.spice-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
}


/* 店舗概要 */

.shop-info{
background:#f8f0e3;
background-size:cover;
padding:100px 20px;
text-align:center;
}

.shop-title{
display:inline-block;
background:#c7b79d;
color:white;
padding:6px 80px;
font-size:24px;
margin-bottom:40px;
}


/* テーブル */

.info-table{
width:100%;
max-width:700px;
margin:0 auto;
border-collapse:collapse;
}

.info-table th,
.info-table td{
padding:18px;
border-bottom:1px solid #3d3d3d;
text-align:left;
}

.info-table th{
width:180px;
color:#555;
}


/* Google map */

.map{
margin-top:60px;
}
/* フッター */

.footer{
  background:#f7b347;
  padding:120px 40px 160px;
  position:relative;
  overflow:hidden;
}

.footer-inner{
  max-width:1100px;
  margin:0 auto;
  text-align:center;
  position:relative;
}

/* 上段 */

.footer-top{
  display:flex;
  width:100%; 
  justify-content:center; /* ← 中央基準にする */
  align-items:flex-start;
  gap:30px;              /* ← ここだけ触る */
  font-weight:600;
  color:#333;
}

.footer-shop{
  font-size:20px;
  margin: 0;
  font-weight: 700;
  color: #5e4200;
}

.footer-info{
  font-size:14px;
  line-height:1.8;
  text-align:right;
  margin: 0;
  color: #5e4200;
}

/* 線 */

.footer-line{
  width:60%;
  max-width:500px;
  height:1px;
  background:#333;
  margin:30px auto;
}

/* ナビ */

.footer-nav{
  display:flex;
  justify-content:center;
  gap:40px;
}

.footer-nav a{
  font-size:14px;
  font-weight:600;
  color:#5e4200;
}
/* 中ページ ファーストビュー */

.page-fv{
  background:#f7b347;
  padding:40px 20px 60px;
}

.page-fv-inner{
  max-width:1100px;
  margin:0 auto;
  position:relative;
  text-align:center;
}

/* カレーイラスト */

.page-fv-image img{
  width:500px;
  max-width:100%;
  display:block;
  margin:0 auto;
}

/* タイトル帯 */

.page-fv-title{
  display:inline-block;
  background:#e8952a;
  color:white;
  font-size:24px;
  font-weight:700;
  padding:10px 40px;
  border-radius:6px;

  position:absolute;      /* ← ここが最大の変更点 */
  top:120px;               /* ← 数字で上下位置を決める */
  left:50%;
  transform:translateX(-50%);
}
/* 共通 */

.about,
.kodawari{
background-color: #f8f0e3;
padding:100px 20px;
text-align: center;
}

.section-title{
display:inline-block;
background:#f3a128;
padding:10px 40px;
margin-bottom:40px;
font-size:20px;
text-align: center;
}


/* 横並び */

.about-flex{
display:flex;
align-items:center;
justify-content:center;
gap:60px;
}

/* 逆配置（こだわり用） */

.about-flex.reverse{
flex-direction:row-reverse;
}


/* 画像 */
.about-img{
width:400px;   /* ← 全部このサイズに揃う */
}

.about-img img{
width:100%;
height:260px;   /* ← 高さも固定して揃える */
object-fit:cover;  /* ← トリミングしていい感じに */
display:block;
border-radius:10px;
}
.kodawari .about-img{
  margin-left: 50px;
}
.kodawari .about-flex{
  justify-content: flex-start;
}

/* テキスト */

.about-text{
max-width:500px;
}

.about-text p{
line-height:2;
color:#5e4200;
}
.kodawari .about-text{
  margin-left: 40px;
}
/* メニュー背景 */

.menu-section{
background-color: #f8f0e3;
padding:120px 20px;
text-align:center;
}


/* 白カード */

.menu-box{
background:white;
max-width:800px;
margin:0 auto;
padding:70px 80px;
position:relative;
}


/* タイトル */

.menu-title{
display: flex;
justify-content: center;
gap:120px;
text-align: left;
color: #4a2c0a;
}


/* 横並び */

.menu-flex{
display:flex;
justify-content:space-between;
gap:60px;
text-align:left;
}


/* サブタイトル */

.menu-sub{
background:#c9b89c;
padding:8px 0;
margin-bottom:20px;
width: 300px;
text-align: center;
display: block;
color: #4a2c0a;
}


/* 画像 */

.menu-img{
width:160px;
display:block;
margin:0 auto 14px;
}


/* リスト */

.menu-list{
list-style:none;
padding:0;
margin-bottom:30px;
}

.menu-list li{
margin-bottom:6px;
}


/* 注意文 */

.menu-note{
text-align:center;
margin-top:30px;
}


/* 蓄音機 */

.gramophone{
width:120px;
position:absolute;
bottom:-20px;
right:-20px;
}
.menu-left,
.menu-right{
  width: 320px;
  text-align: center;
}
.menu-flex{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:80px;
}
.about,
.kodawari{
  background-image: none !important;
  background-color: #f8f0e3;
}
.sp-page-title {
  display: none;
}
/* PC版では何もしない */
.sp-br::after {
  content: "";
  display: none;
}
/* PCでは改行を消す */
.sp-br::after {
  content: "";
  display: none;
}
/* =========================
   PC / SP 表示切り替え
========================= */

.pc-only {
  display: flex;
}

.sp-only {
  display: none;
}
/* =========================
   ○ハンバーガーメニュー
========================= */

.hamburger {
  width: 48px;
  height: 48px;
  border-radius: 50%;              /* ← 丸にする */
  background: #f3a128;             /* ← ブランドカラー */
  border: none;
  cursor: pointer;

  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;                        /* ← 線の間隔 */

  box-shadow: 0 6px 10px rgba(0,0,0,0.25);
  transition: 0.2s;
}

.hamburger:hover {
  transform: translateY(-2px);
}

.hamburger span {
  width: 24px;
  height: 2px;
  background: #4a2c0a;             /* ← 濃いブラウン */
  border-radius: 2px;
  display: block;
  margin: 5px 0 5px 4px;
}

/* =========================
   SPメニュー：PCでは非表示
========================= */

.sp-menu {
  display: none;
}
/* =========================
   スマホ版（768px以下）
========================= */

@media screen and (max-width: 768px) {
.hamburger {
    display: flex;   /* ← スマホでだけ表示 */
  }
  /* 表示切り替え */
  .pc-only {
    display: none;
  }

  .sp-only {
    display: block;
  }

  /* ヘッダー */
  .header-inner {
    padding: 16px 20px;
  }

  .logo {
    font-size: 22px;
  }

  /* SPメニュー */
  .sp-menu {
    position: fixed;
    top: 72px;
    left: 0;
    width: 100%;
    height: calc(100vh - 72px);
    background: rgba(255,255,255,0.95);
    display: none;
    z-index: 999;
  }

  .sp-menu ul {
    list-style: none;
    padding: 40px 20px;
    text-align: center;
  }

  .sp-menu li {
    margin-bottom: 24px;
  }

  .sp-menu a {
    font-size: 18px;
    font-weight: 600;
    color: #4a2c0a;
  }

  .sp-menu.active {
    display: block;
  }
  .copy-box {
    font-size: 32px;
    white-space: normal;
    text-align: center;
    margin-left: 0 !important;
  }

  /* こだわり */
  .kodawari-content {
    flex-direction: column;
    gap: 40px;
    margin-left: 0;
  }

  .curry-main {
    width: 100%;
    margin: 0;
  }

  .kodawari-text {
    width: 100%;
    margin-left: 0;
    margin-top: 290px; /* ← 好きなだけ下げてOK */
  }
.kodawari-text p {
    font-size: 12px;   /* ← 小さくする */
    line-height: 1.9;  /* ← 少し詰めると読みやすい */
  }
  .kodawari-text .btn {
    font-size: 13px;        /* ← 文字を小さく */
    padding: 12px 28px;     /* ← 高さ・横幅を縮める */
    border-radius: 24px;    /* ← 丸みも少し控えめ */
  }
 
  /* メニュー */
  .menu-preview {
    flex-direction: column;
    gap: 40px;
  }

  /* フッター */
  .footer-top {
    flex-direction: column;
    text-align: center;
  }

  .footer-info {
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .copy-box {
    writing-mode: vertical-rl;
    text-orientation: upright;
  }
}
@media screen and (max-width: 768px) {



  /* ▼ 文章を画面中央に */
  .fv-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(5%, -50%);

    display: flex;
    flex-direction: row-reverse; /* 右：この一皿に、左：受け継がれる〜 */
    gap: 24px;
  }

  .copy-box {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 40px;
    line-height: 1.3;
    letter-spacing: 0.1em;
    color: #4a2c0a;
    margin: 0;
  }

  /* 左側（受け継がれる〜）を少し下げる */
  .copy-box.line2 {
    margin-top: 2.5em;
  }
}
@media screen and (max-width: 768px) {

 

  .section-title {
    padding: 10px 24px;   /* ← 高さ＆横幅を縮める */
    font-size: 24px;     /* ← 文字も少し小さく */
    border-radius: 14px;  /* ← 角丸も控えめに */
  }
   /* 親は基準点だけにする */
  .kodawari-image {
    position: relative;
    overflow: visible;   /* ← もう隠さない */
  }

  /* 画像をレイアウトから切り離す */
  .curry-main {
    position: absolute;   /* ← ★これが決定打 */
    left: 50%;
    top: -120px;

    width: 150vw;         /* ← %ではなく vw */
    max-width: none;

    transform: translateX(-48%);
  }
  html,
  body {
    overflow-x: hidden; /* ← 横スク完全封鎖 */
  }
  .steam {
    position: absolute;
    left: calc(50% - 220px); /* ← ★これで確実に左 */
    top: -50px;
    width: 80px;
    z-index: 2;
    pointer-events: none;
  }
  .concept {
    padding-top: 10px;   /* ← 120px → 60px */
  }
  .concept-text {
    margin-top: 5px; 
    font-size: 12px;   /* ← kodawari-text と同じ */
    line-height: 1.9;  /* ← 行間も統一 */
  }
  .concept .btn.center {
    font-size: 13px;        /* 文字サイズ */
    padding: 12px 28px;     /* 高さと左右の余白 */
    border-radius: 24px;    /* 角丸 */
    
    display: inline-block;  /* ← 元々のまま */
    width: auto;            /* ← 横幅を文字＋paddingにフィット */
    max-width: 250px;       /* ← 必要に応じて制限 */
    text-align: center;     /* 中央揃え */
    margin: 40px auto 0;    /* 上下マージン＋中央寄せ */
  }
   /* スパイスパララックスごと非表示 */
  .spice-parallax {
    display: none; /* セクション自体を非表示に */
  }

  .spice-overlay {
    display: none; /* 念のためオーバーレイも非表示 */
  }
   .shop-info {
    padding-top: 0px; /* 上の余白を短く */
    padding-bottom: 60px; /* 下はお好みで調整 */
  }

  .shop-title {
    font-size: 18px;
    padding: 3px 80px;
    margin-top: 0; /* paddingで調整するのでマージンは0でOK */
  }
  /* 店舗概要テーブルをスマホ用に小さく */
  .info-table {
    width: 90%;             /* 横幅を少し縮める */
    max-width: 100%;
    margin: 0 auto;
    font-size: 14px;        /* 全体の文字サイズ */
    border-spacing: 0;      /* セル間隔をリセット */
  }

  .info-table th,
  .info-table td {
    padding: 8px 6px;       /* 行の高さを縮める */
    line-height: 1.5;       /* 読みやすさを確保 */
    font-weight: 500;       /* 少し軽めに */
  }

  .info-table th {
    width: 120px;            /* PCより少し小さめに */
    color: #555;
    text-align: left;
  }

  .info-table td {
    text-align: left;
    color: #5e4200;
  }
   /* フッターの中の情報だけ非表示 */
  .footer-top,
  .footer-line,
  .footer-nav {
    display: none;
  }
  .photo-marquee {
    overflow: hidden;          /* 横スクロールバーを隠す */
    width: 100%;
    margin: 0 0 20px;
    position: relative;
    padding-bottom: 0;
  }

  .marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 20s linear infinite; /* アニメーション */
  }

  .marquee-track img {
    width: 150px;             /* 写真のサイズ */
    height: auto;
    display: block;
  }

  /* アニメーション定義 */
  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  .call-number {
    font-size: 20px;
    font-weight: bold;
    color: #000;
  }

  .call-label {
    font-size: 13px;
    color: #000;
  }

  body {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
.page-fv{
  display: none;
}
  .sp-page-title {
    display: block;
    background-color: #f7b347;
    color: #4a2c0a;
    text-align: left;
    padding: 8px 16px;
    font-weight: 500;
    font-size: 16px;
    margin-top: 72px;
  }
 /* 横並びを縦並びにする */
  .about-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  /* 写真 */
  .about-img {
    width: 100%;
    text-align: center;
  }

  .about-img img {
    display: block;
    margin: 0 auto;
    width: 80%;
    max-width: 320px;
    height: auto;
    border-radius: 0;
  }

  /* 本文 */
  .about-text {
    width: 90%;
    margin-top: 10px;
  }

  .about-text p {
    font-size: 11px;
    line-height: 1.9;
  }
   .sp-br::after {
    content: "\A";      /* 改行 */
    white-space: pre;   /* 改行を有効化 */
    display: inline;
  }
    .section-title {
    margin-top: -0px;   /* h2を上に移動 */
    font-size: 1.2rem;   /* スマホ用に文字サイズも調整可能 */
  }

  /* 上の親要素に余白がある場合はこっちも調整 */
  .about-text {
    padding-top: 0;      /* 親の上余白をなくす */
    margin-top: 0;       /* 親の上マージンもなくす */
  }
   .kodawari-title {
    position: relative;
    top: -120px;        /* 上に移動 */
    font-size: 1.2rem; /* スマホ文字サイズ */
    margin-top: 0;     /* 念のためリセット */
  }
    /* こだわり画像を上に寄せて中央揃え */
  .kodawari-img {
    width: 100%;
    text-align: center;      /* 親divを中央寄せ */
    margin: 0 auto;          /* 上下左右中央 */
    position: relative;
    top: -120px;              /* ↑ここで画像を上にあげる量を調整 */
    left: -15%;
  }

  .kodawari-img img {
    display: block;
    margin: 0 auto;          /* 画像自体も中央 */
    width: 80%;              /* じゃわとは画像と同じ幅 */
    max-width: 320px;        /* 同じ制限 */
    height: auto;
    border-radius: 0;        /* 四角 */
  }
   .sp-br::after {
    content: "\A";        /* 改行コード */
    white-space: pre;     /* 改行を有効化 */
    display: inline;
  }
  .kodawari .about-text{
    margin-top: -110px;
    margin-left: 5%;
    padding-top: 0;
  }
  /* メニュー全体 */
  .menu-flex {
    flex-direction: column;
  }

  .menu-left,
  .menu-right {
    width: 100%;
  }

  /* ボックス余白 */
  .menu-box {
    padding: 20px;
    margin-top: -50px;
  }

  /* タイトル中央 */
  .menu-title {
    text-align: center;
    font-size: 22px;
    margin-bottom: 20px;
  }
.menu-sub {
    display: inline-block;   /* ボックス幅は文字＋paddingのまま */
    text-align: left;        /* 文字を左に */
    margin: 20px 0 20px 0;   /* 上下マージンだけにして */
    padding: 2px 12px;
    background: #c7b299;
    color: #333;

    position: relative;      /* 微調整用 */
    left: -10px;             /* ボックスごと左に10px移動 */
  }

  /* 画像中央＆サイズ調整 */
  .menu-img {
    width: 100%;
    max-width: 250px;
    display: block;
    margin: 0 auto 15px;
  }

  /* リスト中央寄せ */
  .menu-list {
    text-align: center;
    padding: 0;
    list-style: none;
  }

  .menu-list li {
    margin-bottom: 10px;
    font-size: 14px;
  }

  /* ファーストビュー */
  .page-fv-title {
    font-size: 18px;
    text-align: center;
  }

  .page-fv-image img {
    width: 120px;
  }
}
/* ==========================================
   スマホ固定電話バー：100%表示対応・最強版
============================================ */
@media screen and (max-width: 768px) {
  .sp-fixed-call {
    /* 表示の強制 */
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    /* 固定位置の指定：bottomではなくtopからの計算で「場外」を防ぐ */
    position: fixed !important;
    top: calc(100vh - 70px) !important; 
    top: calc(100dvh - 70px) !important; /* 最新スマホのバー対策 */
    left: 0 !important;

    /* サイズと装飾 */
    width: 100% !important;
    height: 70px !important;
    background-color: #f3a128 !important; /* ブランドカラー */
    z-index: 2147483647 !important; /* 他の要素に絶対に負けない重なり順 */
    box-shadow: 0 -4px 12px rgba(0,0,0,0.2);

    /* iPhoneのホームバー（下の棒）が重ならないための余白 */
    padding-bottom: env(safe-area-inset-bottom) !important;
    box-sizing: content-box !important;
  }

  .sp-fixed-call a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 70px !important;
    text-decoration: none !important;
    color: #4a2c0a !important; /* 濃いブラウン */
    gap: 12px;
  }

  .sp-fixed-call .icon { font-size: 24px; }
  .sp-fixed-call .text { font-size: 14px; font-weight: bold; }
  .sp-fixed-call .number { font-size: 18px; font-weight: 900; }

  /* コンテンツがバーに隠れないようにbodyの底上げ */
  body {
    padding-bottom: 120px !important;
  }
}

/* PC（769px以上）では完全に消す */
@media screen and (min-width: 769px) {
  .sp-fixed-call {
    display: none !important;
  }
}
/* ==========================================
   スマホ固定電話バー（画像デザイン版）
============================================ */
@media screen and (max-width: 768px) {
  .sp-fixed-call {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 72px;

    background: #f7b347; /* 画像に近いベージュ */
    z-index: 2147483647;

    display: flex;
    align-items: center;
  }

  .sp-fixed-call .call-btn {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
  }

  /* 左：電話アイコンブロック */
  .sp-fixed-call .call-icon {
    width: 72px;
    height: 100%;
    background: #c9b89c; /* 黄色 */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .sp-fixed-call .call-icon img {
    width: 28px;
    height: auto;
  }

  /* 右：電話番号 */
  .sp-fixed-call .call-number {
    flex: 1;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #000;
  }

  /* 固定バー分の余白 */
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
}

/* PCでは完全非表示 */
@media screen and (min-width: 769px) {
  .sp-fixed-call {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .footer {
    display: none;
  }
}
/* =========================
   スマホ版：余白カット & 固定バー
========================= */
@media screen and (max-width: 768px) {

  /* 写真スクロール：下の余白を完全に殺す */
  .photo-marquee {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    line-height: 0;      /* 画像下の隙間対策 */
    font-size: 0;        /* 隙間対策 */
    background: #fdfaf0; /* 背景色がある場合はコンテンツと同じ色に */
  }

  .marquee-track {
    display: flex;
    margin: 0;
    padding: 0;
  }

  .marquee-track img {
    width: 150px;
    height: auto;
    display: block;      /* inlineの隙間を消す */
    margin: 0;
  }

  /* スマホ固定電話バー（デザイン再現版）
     top計算だと背後に隙間が見えることがあるため、
     確実に「底」に張り付く設定にします
  */
  .sp-fixed-call {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    bottom: 0 !important; /* bottom: 0 に戻し、dvhで高さを制御 */
    width: 100% !important;
    height: 72px !important;
    background: #c9b89c !important; /* 右側のベージュ */
    z-index: 2147483647 !important;
    box-shadow: 0 -3px 12px rgba(0,0,0,0.2);
    padding-bottom: env(safe-area-inset-bottom); /* iPhoneのバー対策 */
  }

  .sp-fixed-call .call-btn {
    display: flex !important;
    align-items: center;
    width: 100%;
    height: 72px;
    text-decoration: none;
  }

  /* 左：オレンジのアイコンエリア */
  .sp-fixed-call .call-icon {
    width: 72px !important;
    height: 72px !important;
    background: #f7b347 !important; /* 画像に近いオレンジ */
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .sp-fixed-call .call-icon img {
    width: 32px !important;
    height: auto;
  }

  /* 右：電話番号エリア */
  .sp-fixed-call .call-number {
    flex: 1;
    text-align: center;
    font-size: 22px !important;
    font-weight: 900 !important;
    letter-spacing: 0.1em;
    color: #000 !important;
    font-family: 'Noto Sans JP', sans-serif;
  }

  /* 余白ができないようにbodyの下側を固定バーの分だけ確保 */
  body {
    padding-bottom: 80px !important;
    margin-bottom: 0 !important;
  }

  /* フッターは非表示 */
  .footer {
    display: none !important;
  }
}
/* =========================
   写真スクロール直下の余白を完全に消す
========================= */
@media screen and (max-width: 768px) {

  /* 写真スクロール */
  .photo-marquee {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
  }

  .marquee-track {
    margin: 0 !important;
    padding: 0 !important;
  }

  .marquee-track img {
    display: block;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
  }

  /* 写真スクロールの直後に余白を作らせない */
  .photo-marquee + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* =========================
     bodyの余白は「電話バー分だけ」に統一
  ========================= */
  body {
    padding-bottom: 72px !important; /* 電話バーの高さ */
    margin-bottom: 0 !important;
  }

  /* =========================
     電話固定バーを完全に下に密着
  ========================= */
  .sp-fixed-call {
    bottom: 0 !important;
    margin: 0 !important;
  }
}
/* =========================
   スマホ版ファーストビュー【完全安定】
========================= */
@media screen and (max-width: 768px) {

  .fv{
    position: relative;   /* ← ★重要 */
    height: 100svh;
    padding-top: 0;
    overflow: hidden;     /* ← ★画像はみ出し防止 */
  }

  .fv-inner{
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
  }

  .fv-image{
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .fv-image img{
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    margin: 0;
    filter: none;
    display: block;
  }

  .fv-text{
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
  }
}
/* --- PC版の微調整 --- */
@media screen and (min-width: 769px) {
  .fv-image {
    width: 1000px;
    margin-left: -280px;
    margin-top: -120px;
  }
  .slide-img {
    filter: drop-shadow(0 25px 35px rgba(0,0,0,0.25));
  }
}

/* --- スマホ版の微調整（既存の安定設定を維持） --- */
@media screen and (max-width: 768px) {
  .fv-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    margin: 0;
  }
  .slider-wrapper {
    height: 100%;
  }
  .slide-img {
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}
/* ファーストビュー */
.fv{
  background:#f7b347;
  height:100vh;
  display:flex;
  align-items:center;
  padding-top:80px;
  position:relative;
  overflow:hidden;
}

.fv-inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:90%;
  margin:auto;
  height:100%;
}

.fv-image{
  position:absolute;
  inset:0;
}
@media screen and (max-width: 768px) {

  /* ファーストビュー */
  .fv {
    position: relative;
    height: 100svh;
    overflow: hidden;
    padding-top: 0;
  }

  /* 画像の親 */
  .fv-image {
    position: absolute;
    inset: 0;
    overflow: visible; /* ← はみ出しOK */
  }

  /* カレー画像（全スライド共通） */
  .fv-image .slide {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 150vw;        /* ← ★ここが最大サイズ */
    max-width: 150vw;    /* ← 制限を同じに */
    height: auto;

    transform: translate(-50%, -50%);
    object-fit: contain; /* ← 見切れさせない */
  }
  
}
@media screen and (max-width: 768px) {

  /* 2・3枚目 */
  .fv-image .slide:nth-child(2),
  .fv-image .slide:nth-child(3) {
    width: 115vw;   /* ← 横幅をしっかり確保 */
    transform: translate(-50%, -50%) scale(0.8);
  }

  /* activeでも同じ（ブレ防止） */
  .fv-image .slide:nth-child(2).active,
  .fv-image .slide:nth-child(3).active {
    transform: translate(-50%, -50%) scale(0.8);
  }
  
}
@media screen and (max-width: 768px) {

  /* 1枚目（カレー）だけ大きく */
  .fv-image .slide:first-child {
    width: 180vw;        /* ← 好きなだけ上げてOK */
    max-width: none;     /* ← 制限解除 */
    height: auto;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* activeでも同じ（切り替えブレ防止） */
  .fv-image .slide:first-child.active {
    transform: translate(-50%, -50%);
  }

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

  .fv-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* ← 正式な中央 */
    z-index: 10;                      /* ← 画像より必ず上 */
    pointer-events: none;             /* 念のため */
  }

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

  .fv-image {
    z-index: 1;
  }

  .fv-image .slide {
    z-index: 1;
  }

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

  .fv-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(10%, -30%); /* ← ここだけ変更 */
    z-index: 10;
  }
.copy-box{
  -webkit-text-stroke: 0.4px rgba(255, 245, 220, 0.9); /* 生成り */
  text-shadow:
    0 2px 6px rgba(0,0,0,0.35);
  paint-order: stroke fill;
}
}