@charset "UTF-8";

/* =========================
   1. リセット・共通設定
   ブラウザ差をなくすための初期化
   ========================= */

/* すべての要素・疑似要素の余白をリセットし、
   padding・borderを含めたサイズ計算にする */
*, *::before, *::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 画像のはみ出し防止・縦横比維持 */
img{
  max-width: 100%;   /* 親要素より大きくならない */
  height: auto;      /* 縦横比を保つ */
  display: block;    /* 下の謎の余白を消す */
}

/* section要素に余計な余白が入らないようにする */
section{
  margin: 0;
  padding: 0;
}

/* テキストは基本中央揃え */
p{
  text-align: center;
}

/* =========================
   2. スマホファースト（基本）
   ========================= */

/* LP全体のラッパー
/* セクション内のコンテンツ幅を揃える箱 */
.contents {
  width: 100%;
  max-width: 550px;/*中身の最大幅*/
  margin: 0 auto;
  background-color: #fff;
}


/* =========================
   ファーストビュー全体
   ========================= */

/* body自体も375px以下に縮まないようにする */
body {
  margin: 0;
  background-color: #fff; /* スマホ時の余白色 */
}


/* ファーストビューの基準箱
   absolute配置の基準になる */
header {
  position: relative; /* 中のabsolute要素の基準 */
 width: 100%;
  max-width: 550px;
  margin: 0 auto;
  overflow: hidden; /* ← はみ出し防止（重要） */

aspect-ratio: 9 / 16;
}

/* ファーストビュー背景画像
   擬似要素で比率を固定 */
header::before {
  content: "";
position: absolute;
  inset: 0;

  /* 高さを比率で確保（画像比率用） */
  padding-top: 1000px;

  /* 背景画像設定 */
background-image:url("../images/fv kore.png");
  background-size: cover;          /* 画面を埋める */
  background-repeat: no-repeat;
background-position:45% 20%;
 /* 画像を45%分 左に寄せて見せている */
}


/* =========================
   ファーストビュー中央ブロック
   ========================= */

/* ロゴ＋タイトルをまとめた箱
   → ここは「中央の塊」 */
.fv-heading {
  display: flex;
  flex-direction: column;  /* 縦並び */
  align-items: center;     /* 横中央揃え */
  gap: 40px;               /* ロゴとタイトルの間隔 */

  /* 全体を少し上に持ち上げる */
  transform: translateY(-100px);
}
/* ロゴ＋タイトル＋CTA全体を
   画面中央基準に配置 */
.fv-center {
width: 100%;
  max-width: 550px;
  position: absolute;
  top: 15%;               /* 縦位置の基準 */
  left: 50%;
  transform: translate(-50%); /* 完全中央補正 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* =========================
   ロゴ画像
   ========================= */
.logo {
  width: 25%;
  max-width: 550px;
  flex-shrink: 0;
  /* 白いぼかし */
  filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px #fff);

  /* アニメーション設定 */
  opacity: 0;
  transform: translateY(20px);
  animation: juwa-logo 1.2s ease-out forwards; /* ←名前を確認 */
}

/* =========================
   タイトル画像
   ========================= */
.fv-title {
  width: 100%;
  max-width: 480px;
  display: block;
  /* 白いぼかし */
  filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px #fff) drop-shadow(0 0 15px #fff) drop-shadow(0 0 15px #fff);

  /* アニメーション設定 */
  opacity: 0;
  transform: translateY(20px);
  animation: juwa-title 1.2s ease-out 0.5s forwards; /* ←ロゴと違う名前にする */
}

/* --- アニメーションのルール（これがないと表示されません） --- */

/* ロゴ用の動き */
@keyframes juwa-logo {
  0% {
    opacity: 0;
    transform: translateY(20px);
    filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px #fff) blur(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px #fff) blur(0);
  }
}

/* タイトル用の動き */
@keyframes juwa-title {
  0% {
    opacity: 0;
    transform: translateY(20px);
    filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px #fff) drop-shadow(0 0 15px #fff) drop-shadow(0 0 15px #fff) blur(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px #fff) drop-shadow(0 0 15px #fff) drop-shadow(0 0 15px #fff) blur(0);
  }
}

/* =========================
   CTAボタン
   ========================= */
.cta {
  display: inline-block;
  padding: 30px 65px;
  background-color: #EA5A28;
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  font-weight: bold;
  font-size: 27px;
  margin-top: 200px;
  
  /* --- アニメーション設定 --- */
  opacity: 0;
  transform: translateY(20px);
  /* 名前を juwa-cta に変更します */
  animation: juwa-cta 1.2s ease-out 1s forwards; 
}

/* --- CTA専用のアニメーションルールを追加 --- */
@keyframes juwa-cta {
  0% {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* =========================
   mainエリア
   ========================= */

main {
  margin-top: 0;
  padding: 0;
}

/* =========================
    1.提案セクション
   ========================= */


  /* 波背景とファーストビューのつなぎ */
.teian{

  background-image: url("../images/1.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
}

/* 提案セクション内の余白調整 */
.teian .container{
  padding-top: 140px;
  padding-bottom: 60px;
}

/* 提案文の文字設定 */
.text-box{
  display: inline-block;
  max-width: 100%;
  font-size: 27px;
}
.teian-text{
padding: 60px 0;/*上下の余白*/
  width: 350px; /* 少し広めに */
    line-height: 2;/*行間*/
    font-family:
	"Kiwi Maru", /*フォント*/
	"Hiragino Maru Gothic ProN",/*予備のフォント*/
  "Hiragino Sans",
  "Yu Gothic",
  "Meiryo",
  sans-serif;
	color: #603813;

}

/* サンド画像 */
.sand{
  display: block;
  margin: 0 auto 0;/*上、左右、下*/
  width: 320px;
  max-width: 80%;
}

/*ここからアニメーション指示*/

/* 提案セクションのタイトル初期状態 */
.teian h2 img {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(10px);
  transition: all 1.5s ease-out; /* ふわ〜っと動く時間 */
}

/* 表示された時に追加するクラス */
.teian h2 img.is-show {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* サンド画像の初期状態 */
.sand {
  display: block;
  margin: 0 auto;
  width: 320px;
  max-width: 80%;
  
  /* 初期状態：少し下で透明、かつ少し小さくしておく */
  opacity: 0;
  transform: translateY(50px) scale(0.9);
  filter: blur(5px);
  transition: all 3s cubic-bezier(0.22, 1, 0.36, 1); /* なめらかな動き */
}

/* 画面に出た時の動き */
.sand.is-show {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* アニメーションの定義 */
@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(50px); /* 50px下から開始 */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseSand {
  0% { transform: scale(1); }
  50% { transform: scale(1.01); } /* わずかに拡大 */
  100% { transform: scale(1); }
}

/* サンド画像にアニメーションを適用 */
.himitu .pan img { /* .himitu内の.panの中のimgに適用 */
  opacity: 0; /* 最初は非表示 */
  animation: 
    slideInUp 1s ease-out forwards, /* 下からふわっと現れる */
    pulseSand 3s infinite ease-in-out 1s forwards; /* 1秒遅れて脈動開始 */
  animation-delay: 0.5s; /* ページ読み込みから0.5秒遅れて開始 */
}
/* =========================
    2.おいしさの秘密
   ========================= */
   /* 以下、各セクションの背景・余白指定 */
.himitu{
  padding: 110px 0;/*上下と左右*/
  background: linear-gradient(-120deg, #FDF1B3, #FFD9BE);
  
}

.pan{
position: relative;
min-height: 300px;/*absolute を包む「高さ確保用の箱」*/
}

.hukidasi1{
position: absolute;
left: 0;
top:0;
width:45%;
}

.hukidasi2{
position: absolute;
right: 0;
top:0;
width:45%;
}

.hukidasi3{
position: absolute;/*基準から移動*/
left: 0;
bottom:0;
width:45%;
}

/*ここからアニメーション*/
/* 「おいしさの秘密」タイトルの初期状態 */
.himitu h2 img {
  opacity: 0;
  transform: scale(0.3); /* 最初は小さく */
  filter: blur(0);       /* 元気な印象にするためボケは無し */
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* バウンドするような動き */
}

/* 画面に登場した時の状態 */
.himitu h2 img.is-show {
  opacity: 1;
  transform: scale(1); /* 標準サイズに勢いよく拡大 */
}

/* --- おいしさの秘密：アニメーション設定 --- */

/* 1. 中央のサンド（弾ける登場） */
.main-sandwich {
  display: block;
  margin: 50px auto 0;
  width: 85%;
  max-width: 450px;
  opacity: 0;
  transform: translateY(40px) scale(0.8);
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.main-sandwich.is-show {
  opacity: 1;
  transform: translateY(0) scale(1);
  /* 登場後にゆらゆら動かす */
  animation: sandwich-hero 3s ease-in-out infinite alternate 0.8s;
}

/* 2. 吹き出し共通設定（最初は透明） */
.hukidasi1, .hukidasi2, .hukidasi3 {
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hukidasi1.is-show, .hukidasi2.is-show, .hukidasi3.is-show {
  opacity: 1;
}

/* 各吹き出しに角度と個別の揺れを設定 */
.hukidasi1 { transform: scale(0.5) rotate(-8deg); }
.hukidasi1.is-show { 
  transform: scale(1) rotate(-8deg);
  animation: fuwa-left 3s ease-in-out infinite alternate;
}

.hukidasi2 { transform: scale(0.5) rotate(10deg); }
.hukidasi2.is-show { 
  transform: scale(1) rotate(10deg);
  animation: fuwa-right 4s ease-in-out infinite alternate;
}

.hukidasi3 { transform: scale(0.5) rotate(5deg); }
.hukidasi3.is-show { 
  transform: scale(1) rotate(5deg);
  animation: fuwa-left 3.5s ease-in-out infinite alternate;
}

/* --- アニメーションの動き定義 --- */
@keyframes sandwich-hero {
  0% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1.03) rotate(1deg); filter: brightness(1.1); }
}

@keyframes fuwa-left {
  0% { transform: rotate(-8deg) translateY(0); }
  100% { transform: rotate(-5deg) translateY(-10px); }
}

@keyframes fuwa-right {
  0% { transform: rotate(10deg) translateY(0); }
  100% { transform: rotate(13deg) translateY(-12px); }
}
/* =========================
    3.値段
   ========================= */
.nedan{
  padding: 90px 0;/*セクション上下・左右の余白*/
  background-image: url(../images/3.png);
  margin-top: -70px; /* ← 波の高さ分だけマイナス */
  padding-top: 120px; /* ← 中のコンテンツが隠れないように戻す */
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
}
.maru{
position: relative;/*白丸・日本語・サンドが基準*/
top:90px;
min-height: 450px;
}

.ama{/*あまーいタレ*/
position: absolute;/*基準から移動*/
left: 0;
top:-25%;
}

.aburage{/*サンドの画像*/
position: absolute;
left:0;
top:-3%;
}
.kakaku{
left:0
}
/*商品紹介文 */
.nedan-text{
padding: 110px 0 30px;
    width: 410px; /* 少し広めに */
    line-height: 1.7;/*行間*/
max-width: 90%;        /* スマホではみ出さないようガード */
  margin: 0 auto;        /* 塊自体を中央に寄せる */
  text-align: left;      /* ★ここが左揃えの指示です */
  display: block;        /* 左揃えを確実に効かせるために必要 */
  font-family: "Kiwi Maru", "Hiragino Maru Gothic ProN", sans-serif;
  color: #603813;
}
.hoto1{/*写真１*/
display: block;
 border-radius:9999px;
 width:70%;
margin-left: 25px;
/*transform: rotate(-3deg)*//*写真1の角度*/
 
}
.tategak-box1{/*文字のボックス*/
background-color: #8b5a2b; /* 茶色 */
  padding: 25px 20px;
  border-radius: 9999px;
  writing-mode: vertical-rl; /*  縦書き*/
  color: #fff;
  font-size: 15px;
      transform: rotate(2deg);
    flex-shrink: 0; /* ←（潰れ防止） */
}
.tategaki-text1{/*文字*/
  writing-mode: vertical-rl;   /* 縦書き */
  text-orientation: upright;   /* 縦書きのとき、文字を1文字ずつ正しい向きで立てて表示して */
  font-family: "Kiwi Maru", "Hiragino Maru Gothic ProN", sans-serif;
  font-size: 30px;
  color: #FFF;
}

.photo-text{/*文字と写真のセット*/
  display: flex;
  align-items: center;   /* 縦方向中央揃え */
  gap: 20px;             /* 写真と文字の間隔 */
  width:100%;        /* ← セット全体の幅 */
  margin: 20px auto  0;/*上・左右・下*/
}
.photo-text.reverse{
  flex-direction: row; /* 左に縦書き・右に写真 */
}
.tyui1{/*注意書き*/
text-align:right;
  margin:30px 60px 0 30px;
  font-size: 12px;
  color: #603813;
}
/* --- 値段セクション：「あま〜いタレ」の修正版 --- */
.ama {
  position: absolute;
  left: 0;
  top: -25%;
  /* width: 100% を削除し、画像本来のサイズを活かす */
  width: auto; 
  
  /* 初期状態 */
  opacity: 0;
  /* 左からスライドさせるが、サイズは極端に小さくしない */
  transform: translateX(-50px); 
  filter: blur(5px); /* 少しボカすと筆の動きっぽくなります */
  transition: opacity 1s ease-out, transform 1s cubic-bezier(0.23, 1, 0.32, 1), filter 1s ease-out;
}

/* 登場時 */
.ama.is-show {
  opacity: 1;
  transform: translateX(0) scale(1); /* サイズを確実に1（100%）に戻す */
  filter: blur(0);
}
/* =========================
   4トッピング
   ========================= */
.sct{/*セクションタイトルの下の空き*/
margin-bottom: 50px;
}

.topping{/*トッピングセクション　上下の余白*/
  padding: 90px 0;
  background-color: #FBE1BF;
}
.card{/*スライド写真1つの幅*/
width:240px;
margin: 0 20px;/*写真上下・左右の間隔*/
}
.card p{
  margin-top: 30px; /* テキスト全部に指示 */
      color: #603813;
}

.card-text{/*CSSでそれぞれサイズ指定*/
  margin-top: 8px;
  line-height: 1.4;
  font-family: "Kiwi Maru", "Hiragino Maru Gothic ProN", sans-serif;
}

/* トッピング名（いちばん目立たせる） */
.topping-name{
  display: block;
  width: 100%;
  font-size: 27px;
  font-weight: bold;
}
.topping-desc{/*説明文にマージンを効かせる*/
  display: block;     /* ← marginを効かせるため */
  margin-top: 2px;    /* ← 好きな間隔に調整 */
}
/* 説明文 */
.topping-desc{
  font-size: 20px;
}

/* 値段 */
/* 価格全体のベース設定 */
.topping-price {
  font-size: 32px; /* 数字を目立たせるために少し大きくしても良いでしょう */
  font-weight: bold;
  display: block;
  margin-bottom: 20px;
  color: #603813;
  font-family: "Kiwi Maru", sans-serif;
}

/* 「＋」と「円」に共通のスタイル */
.price-symbol, 
.price-unit {
  font-size: 18px;    /* 数字より小さく設定 */
  font-weight: normal; /* 太さを少し抑える */
  vertical-align: baseline; /* 位置の微調整が必要ならここを調整 */
}

/* 「＋」だけに個別の調整（もし数字より少し浮いて見えるなら） */
.price-symbol {
  margin-right: 2px;
}

/* 「円」だけに個別の調整 */
.price-unit {
  margin-left: 2px;
}

.hoto2{/*写真１*/
display: block;
 border-radius:9999px;
 width:65%;
margin-right: 30px;/*写真の右に空きを入れる*/
}

.tategak-box2{/*文字のボックス*/
background-color: #8b5a2b; /* 茶色 */
  padding: 25px 20px;
  margin-left: 30px;/*文字のボックス左に空きを入れる*/
  border-radius: 9999px;
  writing-mode: vertical-rl; /*  縦書き*/
  color: #fff;
  font-size: 15px;
      transform: rotate(-2deg);
    flex-shrink: 0; /* ←（潰れ防止） */
}
.tategaki-text2{/*文字*/
  writing-mode: vertical-rl;   /* 縦書き */
  text-orientation: upright;   /* 縦書きのとき、文字を1文字ずつ正しい向きで立てて表示して */
  font-family: "Kiwi Maru", "Hiragino Maru Gothic ProN", sans-serif;
  font-size:30px;
  color: #FFF;
}
.tyui2{/*注意書き2*/
text-align:right;
  margin:10px 60px 20px 30px;
  font-size: 12px;
  color: #603813;
}
/* =========================
   5. お客様の声
   ========================= */

.koe {
  padding: 100px 0;
  background-color: #FAF8EB;
}

.koet {
  margin-bottom: 50px;
}

/* Slickのスライド（カード）の高さを一番長いものに強制的に揃える */
.cards .slick-track {
  display: flex !important;
  align-items: stretch !important;
}

.cards .slick-list {
  padding: 0 10% !important; /* 左右のチラ見え設定 */
}

.card2 {
  padding: 30px; 
  margin: 0 10px;
  background: #fff;
  box-sizing: border-box;
  
  /* ① カードの高さを揃えるための設定 */
  height: auto !important; 
  display: flex !important;
  flex-direction: column;

  /* ② カード自体の角丸 */
  border-radius: 30px; 
}

.card2 img {
  width: 100%;
  height: 250px;        /* 写真の高さを少し抑えて整える */
  object-fit: cover;
  
  /* ② 写真の角丸（カードの30pxに合わせて少し控えめにすると綺麗です） */
  border-radius: 20px; 
  margin-bottom: 20px;
}

.card2 p {
  margin: 0;
  font-size: 24px;      /* 30pxだと大きすぎて高さが出すぎるため、少し調整 */
  font-family: "Kiwi Maru", "Hiragino Maru Gothic ProN", sans-serif;
  color: #603813;
  text-align: left;
  line-height: 1.6;
  
  /* 文字量が少なくても、下の余白を埋めるように広がる設定 */
  flex-grow: 1;
}

/* Slickのドット（下の丸）の位置調整 */
.slick-dots {
  bottom: -40px;
}
/* =========================
   6購入方法
   ========================= */

.kounyu{
  background-image: url("../images/6.png");/*背景画像*/
    padding: 20px 0;/*セクション上下・左右の余白*/
  margin-top: -70px; /* ← 波の高さ分だけマイナス */
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
}

.ira1{/*① イラストの位置*/
position: relative;
min-height: 300px;/*absolute を包む「高さ確保用の箱」*/
margin:60px 0 30px 20px;/*上・右・下・左*/
width:70%;
}

.m1{/*①丸の位置*/
position: absolute;
left: 4%;/*右*/
top:-10%;
width:30%;
}

.txt1{/*①テキストの位置*/
position: absolute;
left: 65%;/*左*/
top:45%;
width:60%;
}

.ira2{/*②イラストの位置*/
position: relative;
margin:0 0 0 140px;/*上・右・下・左*/
min-height: 300px;/*absolute を包む「高さ確保用の箱」*/
width:70%;
}

.m2{/*②丸の位置*/
position: absolute;
right: 0%;
top:-15%;
width:30%;

}

.txt2{/*②テキストの位置*/
position: absolute;
right:60%;
top:-3%;
width:75%;
}

.ira3{/*③イラストの位置*/
position: relative;
min-height: 300px;/*absolute を包む「高さ確保用の箱」*/
margin:30px 0 90px 20px;/*上・右・下・左*/
width:75%;
}

.m3{/*③丸の位置*/
position: absolute;
left: 4%;/*右*/
top:-10%;
width:30%;
}

.txt3{/*③テキストの位置*/
position: absolute;
left: 60%;/*左*/
top:55%;
width:75%;
}

/* =========================
   お店紹介
   ========================= */
.omise{
	background-image: url("../images/7.png");
	padding: 110px 0 60px 0;/*セクション上下・左右の余白*/
  margin-top: -70px; /* ← 波の高さ分だけマイナス */
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
}

.omise-text{
	display: block;
  margin: 0 auto;
	padding: 20px 0;
  text-align: center;
	width:420px;
    line-height: 1.5;
    font-family: "Kiwi Maru", /*フォント*/
		"Hiragino Maru Gothic ProN",/*予備のフォント*/
		"Hiragino Sans",
		"Yu Gothic",
		"Meiryo",
		sans-serif;
    color: #603813;
}

.omise-img{
  display: block;
  margin: 40px auto;/*block要素を中央にしたいときの公式*/
  width:80%;
  height: 300px;        /* ← 写真の高さを決める */
  object-fit: cover;   /* ← トリミング */
  border-radius: 60px;/*写真の角丸*/
}


/* =========================
   出店スケジュール
   ========================= */

.suke{
  background-image: url("../images/8.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;

  padding-top: 120px;
  padding-bottom: 40px;
   margin-top: -70px;
}

.suke-insta{
  display: flex;
  align-items: center;
  justify-content: center;
  gap:15px;
  padding: 10px 0;
}

.insta-text{/*文字だけを右にずらす*/
  margin:0;  /* ← 数字を増やすほど右へ */
	font-size: 22px;
	line-height: 1;
}

/* 出店スケジュール内のタグ風文字 */
.suke .suke-badge{/*最新情報をチェック*/
  display: inline-block;
  padding: 15px 29px;          /* 縦 横 */
  background-color: #FFFFFF; /* 白 */
  color: #603813;             /* 文字色 */
  border-radius: 9999px;      /* 角丸（カプセル） */
  font-size: 20px;
  font-family: "Kiwi Maru", "Hiragino Maru Gothic ProN", sans-serif;
}


.suke-note{
  margin: 20px 0;
  font-size:13px;
  color: #603813;
  font-family: "Kiwi Maru", "Hiragino Maru Gothic ProN", sans-serif;
}

.suke-insta img{/*インスタアイコン*/
  width: 60px;
  transform: translateY(2px);
  margin: 0 auto;
   display: block;/*インライン要素特有のベースライン揃えが消える*/
}

.suke-week{/*今週の出店*/
  font-size:33px;
  margin-bottom: 20px;
  color: #603813;
  font-family: "Kiwi Maru", "Hiragino Maru Gothic ProN", sans-serif;
}

.suke-card{
  font-size: 25px;
  width: 90%;
  max-width: 420px;
  margin: 0 auto;
  padding: 30px;
  background: #fff;
  border-radius: 30px;
}

.map-btn{/*グーグルボタン*/
  display: block;        /* ← block にする */
  width: fit-content;    /* ← 中身の幅だけ */
  margin: 20px auto 25px;/* ← 左右 auto で中央 */
  padding: 13px 25px;
  background-color: #7A4A1D;
  color: #fff;
   font-family: "Kiwi Maru", "Hiragino Maru Gothic ProN", sans-serif;
  text-decoration: none;
  border-radius: 9999px;
  font-size: 18px;
}

.suke-card hr{
  border: none;
  border-top: 1px dashed #C6A57A;
  margin: 20px 0;
}



/* =========================
   フッター
   ========================= */

footer{
  padding: 40px 0;
  background-color:#603813;
  background-size: contain;
  background-repeat: no-repeat;
} 

.sns{/*インスタアイコン*/
  width:50px;
  transform: translateY(2px);
  margin: 0 auto;
	padding-bottom: 30px 0;
   display: block;
  align-items: center;
}

small{
	font-size: 10px;
	color: #FFFFFF;
}
/* =========================
   5. PC表示（768px以上）
   ========================= */
@media screen and (min-width: 768px) {

  /* PCではロゴを固定サイズに */
/*  .logo {
    width: 300px;
  }*/

  /* タイトルは大きめ表示 */
/*  .fv-title {
    width: 1000px;
    max-width: 90vw;
  }*/

  /* CTAをPC用に調整 */
/*  .cta {
    font-size: 40px;
    padding: 24px 80px;
    margin-top: 500px;
  }*/

  /* PC背景 */
/*body {
    background-image: url("../images/pc-bg.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }*/

/*  .contents {
    max-width: 100%;
    margin: 0 auto;
  }*/
}

/* --- トッピングスライド（スクロールバー非表示・スワイプ優先版） --- */
.tp-v2 {
  overflow-x: auto;            /* 横スクロールを許可 */
  overflow-y: hidden;          /* 縦は隠す */
  white-space: nowrap;         /* 子要素を横並びに */
  -webkit-overflow-scrolling: touch; /* iOSでの滑らかなスクロール */
  padding: 20px 0;
  
  /* スクロールバーを非表示にする設定 */
  scrollbar-width: none;       /* Firefox用 */
  -ms-overflow-style: none;    /* IE, Edge用 */
  
  /* スワイプを邪魔しないための設定 */
  touch-action: pan-x;         /* 横方向の操作をブラウザに任せる */
  cursor: grab;
}

/* Chrome, Safari用のスクロールバー非表示設定 */
.tp-v2::-webkit-scrollbar {
  display: none;
}

.tp-scroll {
  display: inline-flex;
}

.tp-v2 .card {
  width: 240px;
  margin: 0 20px;
  flex-shrink: 0;
  white-space: normal;
  
  /* カード内の文字や画像に触れてもスワイプできるようにする */
  pointer-events: auto; 
  user-select: auto; 
  -webkit-user-select: auto;
}

/* 画像自体のドラッグ（保存しようとする動き）がスワイプを邪魔しないように設定 */
.tp-v2 .card img {
  pointer-events: none;      /* 画像を掴むのではなくスクロールを優先 */
  -webkit-user-drag: none;
}