@charset "utf-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* パディングを含めて幅を計算する設定 */
}

html {
  /* スムーススクロールはhtmlタグにするのが一般的 */
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}

/* 共通 */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  /* 横方向のはみ出しのみ隠す */
  overflow-y: auto;
  width: 100%;

  background-color: #FFF176;
  font-family: "Times New Roman", "Zen Maru Gothic", sans-serif, 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

P {
  /* 1. 両端揃えにする */
  text-align: justify;

  /* 2. 日本語の文字間隔を調整する（IE/Edge/Chrome用） */
  text-justify: inter-ideograph;

  /* 3. 単語の途中で不自然な隙間ができるのを防ぐ */
  word-break: break-all;
}


/*
SLIDE MENU
================================================ */
/* 開閉ボタン */
.btn-menu {

  position: fixed;
  right: 1rem;
  top: 1rem;
  z-index: 4;
  padding: .5rem 1rem;
  border: 1px solid #fff;
  background-color: #004CA0;
  border-radius: 50%;
  height: 7rem;
  width: 7rem;
  transition: 0.1s;
  display: flex;
  justify-content: center;
  align-items: center;

}

#menu-close:hover {
  box-shadow: 0 0 1rem #ffffff;
  border-radius: 100px;
  transition: 0;
}

#menu-open:hover {
  box-shadow: 0 0 1rem #004CA0;
  border-radius: 100px;
  transition: 0;
}

.btn-menu svg {
  fill: #fff;
  height: 4rem;
  width: 4rem;
}

/* 閉じるボタン */
#menu-close {
  border: 1px solid #ffffff;
}

#menu-close svg {
  fill: #ffffff;
}

/* スライドメニューパネル */
#menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  /* 十分に高い値に */
  padding: 8rem 2rem 2rem;
  width: max(25vw, 20rem);
  height: 100vh;
  background-color: #004CA0;
  /* box-shadowは開いている時だけ見えるようにJSで制御するか、一旦外すと安定します */
  transform: translateX(100%);
  /* 100vwより100%の方が確実です */
  text-align: center;
  /* transitionはJSのanimateを使う場合は不要ですが、干渉を防ぐため明示的に指定しないか、all 0sにします */
}

.menu-list {
  list-style: none;
}

.menu-list li {
  margin: 4rem 0;
  opacity: 0;
}

.menu-list a {
  color: #ffffff;
  text-decoration: none;
  font-size: 2rem;
  color: #ffffff;
  /* 文字色 */
  display: inline-block;
  /* これがないとリンク範囲が全幅になる */
  font-size: 36px;
  /* 文字サイズ */
  position: relative;
  /* 相対位置指定 */
  text-decoration: none;
  /* デフォルトのテキストの下線を消す */

}

.menu-list a:hover {
  color: #FFF176;

}

.menu-list a::after {
  background-color: #FFF176;
  /* 下線の色 */
  bottom: -4px;
  /* 要素の下端からの距離 */
  content: "";
  /* 要素に内容を追加 */
  height: 2px;
  /* 下線の高さ */
  left: 0;
  /* 要素の左端からの距離 */
  position: absolute;
  /* 絶対位置指定 */
  transform: scale(0, 1);
  /* 下線を横方向に0倍、縦方向に1倍に変形（非表示） */
  transform-origin: left top;
  /* 変形の原点を左上に指定 */
  transition: transform .4s;
  /* 変形をアニメーション化 */
  width: 100%;
  /* 要素の幅 */
}

a:hover::after {
  transform: scale(1, 1);
  /* 下線を横方向に1倍、縦方向に1倍に変形（表示） */
}


/* トップ */
.container {
  /* display: flexなどは不要になるので整理 */
  position: relative;
  width: 100%;
  height: 100vh;
  /* 画面の高さ100% */
  overflow: hidden;
  /* はみ出し防止 */
}

/* メイン画像（スライダー全体） */
.slider {
  width: 100%;
  height: 100%;
  /* 親要素(container)に合わせる */
}

/* Slickの内部構造も高さ100%にする必要があるため追加 */
.slider .slick-list,
.slider .slick-track {
  height: 100%;
}

.slick-img {
  height: 100%;
}

.slick-img img {
  height: 100vh;
  /* 常に画面の高さに合わせる */
  width: 100vw;
  /* 常に画面の横幅に合わせる */
  object-fit: cover;
  /* 比率を保ったまま隙間なく埋める */
}

/* */

/* タイトル文字（Vanilla.） */
.container .title {
  color: #004CA0;
  text-shadow: 0px 0px 10px #ffffff;
  font-size: 120px;
  font-weight: bold;
  line-height: 1;
  /* 行間を詰めると中央に合わせやすくなります */

  position: absolute;
  /* 画面の中央に配置するためのセット */
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);

  z-index: 9998;
  text-align: center;
  white-space: nowrap;
  /* 文字が途中で折れないようにする */
}

/* 今月のおすすめボタン */
#open {
  position: absolute;
  /* タイトルの少し下に配置 */
  top: 65%;
  left: 50%;
  transform: translateX(-50%);

  z-index: 9998;
  color: #fff;
  background: #004CA0;
  border: 3px solid #004CA0;
  border-radius: .5rem;
  padding: 1rem 2rem;
  cursor: pointer;
  white-space: nowrap;
}

/* 今月のおすすめフレーバー */

/* ボタン */
#open,
#close {
  color: #fff;
  background: #004CA0;
  border: 3px solid #004CA0;
  border-radius: .5rem;
  padding: 1rem 2rem;
  cursor: pointer;
}


/* 閉じるボタン */
#close {
  width: fit-content;
  /* 文字の幅に合わせる */
  margin-top: 0;
  /* Pタグのマージンで調整するので0でOK */
  padding: 0.8rem 2.5rem;
}

/* 背景 */
#mask {
  position: absolute;
  background: rgba(0, 0, 0, 6);
  position: fixed;
  inset: 0;
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
}

/* モーダル本体 */
#modal {
  background: #fff;
  width: 90%;
  /* スマホ等でもはみ出さないよう横幅を可変に */
  max-width: 500px;
  /* PCで見ても大きくなりすぎない制限 */
  padding: 2rem 1.5rem;
  /* 内側の余白を上下左右バランスよく */
  border-radius: 1rem;
  /* 角丸を少し柔らかめに */

  /* 画面のど真ん中に固定する魔法 */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  z-index: 10000;
  /* 確実に一番上に */
  display: flex;
  /* 中身を縦に並べる */
  flex-direction: column;
  align-items: center;
  /* 左右中央に配置 */

  opacity: 0;
  visibility: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  /* 浮き出たような影を追加 */
}

/* タイトル */
#modal h1 {
  margin-bottom: 1rem;
  /* 下に余白 */
  color: #004CA0;
  font-weight: bold;
  font-size: 2rem;
  /* 画面に合わせて適切なサイズに */
}

/* 画像 */
#modal img {
  width: 100%;
  /* 親要素の幅に合わせる */
  max-width: 300px;
  /* 画像が大きくなりすぎないように */
  height: auto;
  border-radius: .5rem;
  /* 画像も少し角を丸くすると馴染みます */
}

#modal p {
  /* 1. 両端揃えにする */
  text-align: justify;

  /* 2. 日本語の文字間隔を調整する（IE/Edge/Chrome用） */
  text-justify: inter-ideograph;

  /* 3. 単語の途中で不自然な隙間ができるのを防ぐ */
  word-break: break-all;

  /* --- 以下はバランス調整 --- */
  margin: 1.5rem 0;
  font-size: 15px;
  /* 少し大きくすると読みやすい */
  line-height: 1.8;
  /* 行間を広げると高級感が出ます */
  padding: 0 20px;
  /* 横の余白を少し調整 */
  color: #333;
  /* 真っ黒より少しグレーにすると目に優しい */
}

/*  */

.main-container {
  width: 100%;
}

/* 動くアイスクリーム文字1 */
.section__marquee {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
}

.marquee__text {
  margin: 0 auto;
  color: #ffffff;
  text-shadow: 0px 0px 4px #7a7878;
  font-size: 120px;
  display: inline-block;
  padding-right: 0.5em;
  animation: marquee 20s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

/* コンセプト */
/* Vanillaとは, ONLINE SHOP */

.scroll {
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}

.scroll::before {
  background: #004CA0;
  position: absolute;
  content: '';
  display: block;
  inset: 0;
}


.concept {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  margin: 80px auto;
  max-width: 1100px;
}

.concept02 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  margin: 80px auto;
  max-width: 1100px;
}


.concept-img {
  width: 50%;
  text-align: center;
}

.concept-img img {
  width: 100%;
}

h2 {
  color: #004CA0;
  display: flex;
  font-size: 110px;
  font-weight: bold;
  align-items: baseline;
}

.sub1 {
  color: #000000;
  font-size: 50px;
}


.sub2 {
  line-height: 3rem;
  font-size: 20px;

}

.text {
  width: 50%;
}

.button a {
  background: #004CA0;
  border-radius: 9999px;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 20px;
  padding: 25px;
  font-family: "Noto Sans Japanese";
  text-decoration: none;
  color: #fff;
  line-height: 1.8;
  transition: 0.3s ease-in-out;
  font-weight: 500;
  font-size: 24px;
}

.button a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.button a:hover {
  background: #ffffff;
  color: #004CA0;
}

.button a:hover:after {
  right: 1.4rem;
}

/*  */


/* 動くアイスクリーム文字２ */
.section__marquee2 {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
}

.marquee__text2 {
  margin: 0 auto;
  color: #ffffff;
  text-shadow: 0px 0px 4px #7a7878;
  font-size: 120px;
  display: inline-block;
  padding-right: 0.5em;
  animation: marquee2 20s linear infinite;
}

@keyframes marquee2 {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0%);
  }
}




/* メニュー */
h3 {
  color: #004CA0;
  margin: 80px;
  font-size: 86px;
  text-align: center;
  border-bottom: 3px solid #004CA0;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 30px;
}

.menu .flavor {
  text-align: center;
  width: 26%;
  margin-bottom: 80px;
}

.menu .flavor img {
  width: 200px;
}

.menu .flavor img:hover {
  box-shadow: 0 0 1rem #4a4457;
  border-radius: 100px;
  transition: 0;
}

.menu p {
  font-size: 25px;
  text-align: center;
  margin-top: 30px;
}

/* フッター */

footer {
  width: 100%;
  height: 300px;
  background-color: #004CA0;
  color: #fff;
  display: flex;
  flex-direction: column;
  font-size: 18px;
  text-align: center;
}

footer h4 {
  margin-top: 30px;
  font-size: 80px;
}

footer p {
  margin-top: 20px;
  text-align: center;
  line-height: 1.75rem;
}


/* ==============================================
   Responsive Styles (Max-width: 800px)
   ============================================== */
@media screen and (max-width: 800px) {

  /* --- 画面全体の横揺れ防止 --- */
  html,
  body {
    overflow-x: hidden;
    width: 100%;
  }

  /* --- メイン画像（全画面） --- */
  .container {
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  .slick-img img {
    height: 100vh;
    width: 100%;
    /* 100vwから100%に変更 */
    object-fit: cover;
  }

  /* --- タイトルとボタンの中央配置 --- */
  .container .title {
    font-size: 62px;
    /* スマホ用にサイズダウン */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  #open {
    top: 58%;
    /* タイトルの少し下 */
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    padding: 0.8rem 1.2rem;
  }

  /* --- ナビゲーションボタン --- */
  .btn-menu {
    width: 4rem;
    /* サイズを適正化 */
    height: 4rem;
    top: 1rem;
    right: 1rem;
  }

  .btn-menu svg {
    height: 2rem;
    width: 2rem;
  }

  /* --- スライドメニューパネル --- */
  #menu-panel {
    width: 100%;
    padding-top: 100px;
    /* 左右のパディングを0にして中央寄せを確実に */
    text-align: center;
    justify-items: center;
    z-index: 9999;
  }

  .menu-list {
    padding: 0;
    margin: 0;
    width: 100%;
  }

  .menu-list a {
    font-size: 28px;
    /* スマホで読みやすいサイズ */
    line-height: 2rem;
  }

  /* --- モーダル（中央配置の修正） --- */
  #modal {
    width: 90%;
    max-width: none;
    padding: 1.5rem;
    position: fixed;
    /* insetではなく中央配置ロジックに統一 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  #modal h1 {
    font-size: 24px;
  }

  #modal p {
    font-size: 10px;
    padding: 0 10px;
    /* 左右の余白を少し詰めて文字を揃える */
  }

  /* --- マーキー（流れる文字） --- */
  .marquee__text,
  .marquee__text2 {
    font-size: 78px;
    /* スマホではかなり小さくしないと圧迫感が出ます */
  }

  /* --- コンセプト・ショップセクション --- */
  .concept {
    flex-direction: column;
    gap: 20px;
    margin: 40px auto;
    padding: 0 20px;
    width: 100%;

  }

  .concept02 {
    flex-direction: column-reverse;
    gap: 20px;
    margin: 40px auto;
    padding: 0 20px;
    width: 100%;
  }

  .concept-img,
  .text {
    width: 100%;
  }

  .concept-img img {
    width: 100%
  }

  h2 {
    font-size: 50px;
    justify-content: center;
  }

  .sub1 {
    font-size: 20px;
  }


  .sub2 {
    text-align: center;
    line-height: 2.8;
    font-size: 12px;
  }

  .button a {
    max-width: none;
    padding: 10px;
  }

  /* --- メニューリスト（2列表示） --- */
  h3 {
    font-size: 40px;
    margin: 40px auto;
  }

  .menu {
    padding: 0 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 30px;
    flex-direction: column;
  }

  .menu .flavor {
    width: 100%;
    margin-bottom: 30px;
  }

  .menu .flavor img {
    width: 100%;
    /* 画像サイズを調整 */
  }

  .menu p {
    font-size: 31px;
    margin-top: 15px;
  }

  /* --- フッター --- */
  footer {
    padding: 30px 10px;
    height: auto;
  }

  footer h4 {
    font-size: 40px;
  }
}