@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%;        /* 画面幅の70% */
  max-width: 550px;   /* 大きくなりすぎ防止 */
  flex-shrink: 0;     /* flexで潰れない */
	
  /* 0 0 15px で「上下左右に15px分」の白いぼかしを広げます */
  /* もしぼかしが弱く感じる場合は、以下のように重ね書きも可能です */
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);
}

/* =========================
   タイトル画像
   ========================= */

/* タイトルのサイズ制御 */
.fv-title {
  width: 100%;        /* 画面幅の70% */
  max-width: 480px;   /* 上限 */
  display: block;
  /* 0 0 15px で「上下左右に15px分」の白いぼかしを広げます */

  /* もしぼかしが弱く感じる場合は、以下のように重ね書きも可能です */
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);
}



/* =========================
   CTAボタン
   ========================= */

/* 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;

  /* fv-center内での位置調整
     ※ transformなのでレイアウト上は元の位置 */
  margin-top: 200px;
  
}

/* =========================
   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%;
}


/* =========================
    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%;
}


/* =========================
    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: 100px 0 30px;
    width: 420px; /* 少し広めに */
    line-height: 1.5;/*行間*/
    font-family:
	"Kiwi Maru", /*フォント*/
	"Hiragino Maru Gothic ProN",/*予備のフォント*/
  "Hiragino Sans",
  "Yu Gothic",
  "Meiryo",
  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;
}

/* =========================
   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;/*セクションタイトル下の空き*/
}

.cards {
display: block; /* flexからblockに変更（Slickが自動で調整するため） */
  gap: 0;         /* スライド間隔はSlickの設定に任せる */
  overflow-x: visible; /* overflow-x: auto は削除 */
  /* scroll-snap-type も削除 */
  scrollbar-width: none;
}
.cards::-webkit-scrollbar {
  display: none;
  }

.card2 {
padding: 30px; /*写真の周りの余白*/
 flex: 0 0 90%;              /* 余ったら広がるか・縮んでいいか・基準となる幅 */
  scroll-snap-align: center;
  box-sizing: border-box;

  background: #fff;
  border-radius: 12px;
}

.card2 img {/*画像*/
  width: 100%;
  height: 300px;        /* ← 写真の高さを決める */
  object-fit: cover;   /* ← トリミング */
  border-radius: 60px;/*写真の角丸*/
}

.card2 p{/*文字サイズ*/
margin: 0;
font-size: 30px;
  font-family: "Kiwi Maru", "Hiragino Maru Gothic ProN", sans-serif;
  color: #603813;
/* 中央揃えを解除し、左揃えにする */
  text-align: left; 
  
  /* テキストの読みやすさのため、少し余白を入れるのがおすすめです */
  padding: 10px 0;
  line-height: 1.6;
}
/* =========================
   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;
  }*/
}