html {
  
}
html, body { margin:0; }

body {
  position: relative;
  text-align: center;
  font-family: 
    -apple-system, BlinkMacSystemFont,  /* macOS用サンセリフ */
    "Manrope", Roboto, Helvetica,      /* 英文用 */
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif; /* 和文用 */
  background-image: url(../img/star.png);
  background-repeat: repeat-y;      /* ← 縦方向にだけ繰り返す */
  background-size: 100% auto;       /* ← 横幅を常に100%、高さは比率維持 */
  background-position: top center;  /* （必要に応じて）位置を調整 */
}

a {

}
img {

}

button {

}
button:focus {

}
/* =====================================================
Layout
===================================================== */
.br-pc {
  display: block;
}

.br-sp {
  display: block;
}


/* =====================================================
Content
===================================================== */

h1 {
  width: 456px;
  height: 149px;
  background-image: url(../img/logo.svg);
  text-indent: -9999px;         /* テキストを画面外へ */
  overflow: hidden;             /* 念のため隠す */
  white-space: nowrap;          /* 折り返さない */
  margin: 0 auto;
  margin-top:50px;
}

#main {
  width: 1200px;
  height: 450px;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 40px;
  background-image: url(../img/bg_main.png);
  background-size: 1047px 428px;   /* 要素のサイズにフィット */
  background-position: center center; /* ← 中央に配置 */
  background-repeat: no-repeat;     /* ← 繰り返さない */
  text-indent: -9999px;
  overflow: hidden;
}

#mainCont {
  width: 1200px;
  height: auto;
  background-color: #000;
  border: 6px solid #fff;
  box-sizing: border-box;
  border-radius: 10px;
  margin: 0 auto;
  padding-top: 20px;
  margin-bottom: 60px;
}

#mainCont h2 {
  color: #fff;
  font-size: 28px;
  line-height: 1.4em;
  margin-bottom: 20px;
}

#mainCont h3 {
  position: relative;
  width: 90%;
  text-align: center;      /* 文字の位置を中央に */
  font-size: 17px;         /* 文字サイズ */
  color: #000;             /* 文字色（黒） */
  margin: 0 auto;        /* 上下の余白はお好みで */
  margin-bottom: 20px;
}

/* ライン（横いっぱい） */
#mainCont h3::before {
  content: "";
  position: absolute;
  top: 50%;                /* h3の縦中央 */
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;        /* 白いライン */
  transform: translateY(-50%);
  z-index: 0;
}

/* 黄色いボックス */
#mainCont h3 span {
  display: inline-block;
  width: 230px;
  height: 30px;
  line-height: 30px;       /* テキストを縦中央に */
  background: #ff0;        /* 黄色いボックス */
  position: relative;
  z-index: 1;              /* ラインより前に */
  box-sizing: border-box;  /* 枠線を付けるなら便利 */
}

#map {
  width: 930px;
  height: auto;
  margin: 0 auto;
  margin-bottom: 60px;
}

#mainCont h4 {
  color: #fff;
  font-size: 23px;
  margin-bottom: 20px;
}

#menuLi {                  /* ← 横幅を90%に */
  max-width: 1200px;              /* （任意）広がりすぎを防ぐ */
  margin: 0 auto;                 /* 中央寄せ */
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 360px); /* 3列 */
  grid-auto-rows: 360px;
  justify-content: center;        /* 残りスペースを均等にして中央揃え */
  column-gap: 20px; /* 横だけ20px */
  row-gap: 0;       /* 縦は0 */
  margin: 0 auto;
  margin-bottom: 50px;
}

#menuLi li {
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: 360px 360px;   /* 要素のサイズにフィット */
  background-position: center center; /* ← 中央に配置 */
  background-repeat: no-repeat;     /* ← 繰り返さない */
  text-indent: -9999px;
  overflow: hidden;
}

#sFusaya {background-image: url(../img/sfusaya.svg);}
#sOoyama {background-image: url(../img/sooyama.svg);}
#sHakatatorikawa {background-image: url(../img/shakatatorikawa.svg);}
#sTakobashi {background-image: url(../img/stakobashi.svg);}
#sYoshimi {background-image: url(../img/syoshimi.svg);}
#sPasta {background-image: url(../img/spasta.svg);}
#sYebisu {background-image: url(../img/syebisu.svg);}
#sAki {background-image: url(../img/saki.svg);}
#sTatanba {background-image: url(../img/statanba.svg);}
#sTamago {background-image: url(../img/stamago.svg);}
#sTavery {background-image: url(../img/stavery.svg);}


#stampBox {
  width: 90%;
  margin: 0 auto;
}

#stampBox h5 {
  color: #fff;
  font-size: 17px;
  line-height: 1.3em;
  text-align: left;
  background-repeat: no-repeat;
  float: left;
  padding-left: 45px;
  padding-right: 20px;
  box-sizing: border-box;
  background-position: left top; /* ← 中央に配置 */
}

.step1 {
  width: 45%;
  height: 250px;
  background-image: url(../img/step11.png);
  background-size: 306px 225px;
}
.step2 {
  width: 55%;
  height: 250px;
  background-image: url(../img/step23.png);
  background-size: 580px 224px;
}
.step3 {
  width: 100%;
  height: 50px;
  background-image: url(../img/step3.png);
  background-size: 30px 30px;
}

#stampBox p {
  font-size: 15px;
  color: #fff;
  text-align: left;
  line-height: 1.4em;
  margin-bottom: 50px;
}


#presLi {                  /* ← 横幅を90%に */
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;  /* 横並びを中央に */
  column-gap: 30px;
  row-gap: 0px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  margin-top: 50px;
}

#presLi li {
  width: 210px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: left top; /* ← 中央に配置 */
  background-repeat: no-repeat;     /* ← 繰り返さない */
  background-size: 100%;
  text-indent: -9999px;
  overflow: hidden;
}

#gTorikawa {background-image: url(../img/gift/gift1.png);}
#gPasta {background-image: url(../img/gift/gift2.png);}
#gTatanba {background-image: url(../img/gift/gift3.png);}
#gAki {background-image: url(../img/gift/gift4.png);}
#gTakobashi {background-image: url(../img/gift/gift5.png);}
#gYebisu {background-image: url(../img/gift/gift6.png);}
#gTavery {background-image: url(../img/gift/gift7.png);}

.mainP {
  width: 90%;
  font-size: 15px;
  color: #fff;
  text-align: left;
  line-height: 1.4em;
  margin: 0 auto;
  margin-bottom: 50px;
}

#storyBox {
  width: 100%;
}

#storyBox h2 {
  width: 374px;
  height: 280px;
  background-image: url(../img/ti_story.svg);
  background-repeat: no-repeat;
  margin: 0 auto;
}

/* ブラウザ横幅いっぱい */
.full-screen {
  width: 100%;
  margin: 0 auto;
}

/* スライドの箱：固定幅650px＋左右20pxマージン＝隣との間隔40px */
.full-screen .slide {
  width: 650px;             /* variableWidthで効く固定幅 */
  margin: 0 20px;           /* ← これでスライド間が40pxになる */
  box-sizing: border-box;
}

/* 画像サイズ（すでに650px固定ならそのままでもOK） */
.full-screen .slide img {
  display: block;
  width: 100%;
  height: auto;             /* 高さ同一なら fixed 値でもOK */
}

/* デフォのslick-listは overflow:hidden なので
   前後スライドは見切れます（意図どおり） */


.full-screen {
  position: relative; /* ← slick-dots を絶対配置するため */
}

/* ドット全体の位置と配置 */
.full-screen .slick-dots {
  position: absolute;
  top: -40px;                /* スライドより40px上 */
  left: 50%;                 /* ビューポートの中央へ */
  transform: translateX(-50%); /* 自身の幅の半分を戻して中央揃え */
  display: flex !important;  /* 横並び */
  justify-content: center;   /* flexで中央寄せ（補助） */
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ドットのスタイル */
.full-screen .slick-dots li button {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ccc;       /* 通常色 */
  border: none;
  font-size: 0;
  cursor: pointer;

  font-size: 0;            /* ← テキストを消す一番簡単な方法 */
  line-height: 0;          /* 念のため */
  color: transparent;      /* 文字色を透明に */
  overflow: hidden;        /* 念のためテキストがはみ出さないように */
  padding: 0;
}

/* 1) いっそ消す */
.full-screen .slick-dots li button::before {
  display: none !important;
}


/* アクティブなドット */
.full-screen .slick-dots li.slick-active button {
  background: #ffff00;    /* 好きな色 */
}

.slick-track {
  transition-timing-function: ease-in-out;  /* or ease-in / cubic-bezier(...) */
}



#footer {
  margin-top: 60px;
  width: 100%;
  height: auto;
}

#footer ul {
  margin: 0 auto;
  display: flex;                 /* 横並びにする */
  justify-content: center;       /* 中央寄せ */
  align-items: center;           /* 縦位置を揃える */
  gap: 40px;                     /* バナー同士の間隔 */
  padding: 0;
  list-style: none;              /* ポチを消す */
}

#footer ul li {
  width: 320px;
  height: 180px;
}


#footer ul li img {
  display: block;
  max-width: 100%;               /* 親幅を超えないように */
  height: auto;
}

#footer p {
  color: #fff;
  margin: 40px auto;
}

:root {
    --overlay: rgba(0,0,0,.9);
    --size: 28px;           /* ハンバーガーの幅 */
    --bar-h: 2px;           /* 線の太さ */
    --gap: 7px;             /* 線の隙間 */
    --anim: 260ms ease;
  }


 body.menu-open { overflow: hidden; } /* モーダル中はスクロール禁止 */

  /* ハンバーガーボタン（右上固定） */
  .hamburger {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 2000; /* オーバーレイより上 */
    width: calc(var(--size) + 12px);
    height: calc(var(--size) + 12px);
    display: grid;
    place-items: center;
    border: none;
    background: transparent;
    cursor: pointer;
  }
  .hamburger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

  /* マウスクリック時のフォーカス枠を消す */
.hamburger:focus {
  outline: none;
  box-shadow: none;
}

  /* 3本線の見た目 */
  .hamburger .bars {
    position: relative;
    width: var(--size);
    height: calc(var(--bar-h)*3 + var(--gap)*2);
  }
  .hamburger .bars::before,
  .hamburger .bars::after,
  .hamburger .bar {
    content:"";
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--bar-h);
    background: #ffff00;
    transition: transform var(--anim), opacity var(--anim), top var(--anim);
    will-change: transform, opacity, top;
  }
  .hamburger .bar      { top: calc(var(--bar-h) + var(--gap)); } /* 中線 */
  .hamburger .bars::before { top: 0; }
  .hamburger .bars::after  { top: calc(var(--bar-h)*2 + var(--gap)*2); }

  /* 開いた状態（Xに変形） */
  .hamburger[aria-expanded="true"] .bar { opacity: 0; }
  .hamburger[aria-expanded="true"] .bars::before {
    top: calc(var(--bar-h) + var(--gap));
    transform: rotate(45deg);
  }
  .hamburger[aria-expanded="true"] .bars::after {
    top: calc(var(--bar-h) + var(--gap));
    transform: rotate(-45deg);
  }

  /* オーバーレイ（黒モーダル） */
  .menu-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    display: none;             /* 初期は非表示 */
    z-index: 1000;
  }
  .menu-overlay.is-active { display: block; }

  /* メニュー本体（中央に表示） */
  .menu-panel {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 1002;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  pointer-events: none;
  }
.menu-panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;   /* ← この場合は付けてOK（中身だけに限定しないなら） */
}

  .menu-card {
    text-align: center;
    padding: 24px 32px;
    animation: fadeIn var(--anim);
    pointer-events: auto;
  }

#menu-title {
  width: 260px;
  height: 85px;
  background-image: url(../img/logo.svg);
  background-size: 260px 85px;
  text-indent: -9999px;         /* テキストを画面外へ */
  overflow: hidden;             /* 念のため隠す */
  white-space: nowrap;          /* 折り返さない */
  margin: 0 auto;
  margin-bottom: 40px;
}



  .menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 30px;
  }
  .menu-list a {
    color: #fff;
    text-decoration: none;
    font-size: 22px;
  }
  .menu-list a:hover {
    color: #ffff00
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* 低モーション環境 */
  @media (prefers-reduced-motion: reduce) {
    .hamburger .bars::before,
    .hamburger .bars::after,
    .hamburger .bar,
    .menu-card { transition: none; animation: none; }
  }









  /* 初期状態：少し下＆薄い */
.fade-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}

/* 表示状態：通常位置＆不透明 */
.fade-up.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* アニメ控えめ設定の人には瞬時表示 */
@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}