/* 全体設定 */
body, html {
  margin: 0;
  padding: 0;
  font-family: Gudea,Lato,-apple-system, BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,'Noto Sans Japanese','Þ⥴¥·¥Ã¥¯ Medium','Þ⥴¥·¥Ã¥¯ÂÎ','Yu Gothic Medium',YuGothic,'¥Ò¥é¥®¥Î³Ñ¥´ ProN','Hiragino Kaku Gothic ProN','¥á¥¤¥ê¥ª',Meiryo,'£Í£Ó £Ð¥´¥·¥Ã¥¯','MS PGothic',sans-serif;
}




/* アニメーション部分 */

/* フェードインアニメーション定義 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 適用クラス */
.fade-in {
  animation: fadeIn 1.2s ease-out forwards;
  opacity: 0;
}

/* Our Storyの説明箇所のアニメーション */
/* フェードインアニメーション */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 基本フェードイン設定 */
.fadein {
  opacity: 0;
  animation: fadeInUp 1s ease-out forwards;
}

/* 遅延クラス */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.8s; }
.delay-3 { animation-delay: 1.4s; }
.delay-4 { animation-delay: 2.0s; }
.delay-5 { animation-delay: 2.6s; }
.delay-6 { animation-delay: 3.2s; }
.delay-7 { animation-delay: 3.8s; }
.delay-8 { animation-delay: 4.2s; }
/* Our Storyの説明箇所のアニメーションここまで */

.scroll-indicator {
  text-align: center;
  font-size: 1.2rem;
  color: #fff; /* コンセプトテキストと同じ色味 */
  margin-top: 1rem;
}

.arrow {
  display: inline-block;
  animation: bounceDown 1.5s infinite;
}

/* 下に動くリピートアニメーション */
@keyframes bounceDown {
  0%   { transform: translateY(0); opacity: 1; }
  50%  { transform: translateY(10px); opacity: 0.5; }
  100% { transform: translateY(0); opacity: 1; }
}


/* アニメーション定義 */
@keyframes slideUp {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 選択画像にアニメーションを適用 */
.option {
  animation: slideUp 0.8s ease-out forwards;
  opacity: 0;
}

/* 3つの選択画像　遅延をつけて順番に出現 */
.option:nth-child(1) {
  animation-delay: 0.4s;
}
.option:nth-child(2) {
  animation-delay: 0.4s;
}
.option:nth-child(3) {
  animation-delay: 0.4s;
}

/* 個人・業務用画像にも同じアニメーションを適用 */
.type {
  animation: slideUp 0.8s ease-out forwards;
  opacity: 0;
}

/* 遅延をつけて3つの選択画像の後に出現 */
.type:nth-child(1) { animation-delay: 1.2s; }
.type:nth-child(2) { animation-delay: 1.2s; }


@keyframes dramaticFadeIn {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(1.2);
    filter: blur(8px);
  }
  60% {
    opacity: 0.6;
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.dramatic-fade {
  opacity: 0;
  animation: dramaticFadeIn 1.0s ease-out forwards;
  color:#fff;
  text-align: center;
}


/* js テキストスクロールフェードインアニメーション */
.fade-trigger {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-trigger.visible {
  opacity: 1;
  transform: translateY(0);
}
/* js テキストスクロールフェードインアニメーション ここまで */


/* 画像ポップアップアニメーション */
.anim-box.popup.is-animated {
  animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
 
@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
  80%, 100% {
    opacity: 1;
  }
}
 
/* 画像ポップアップアニメーション */


/* アニメーション部分　ここまで */

h1 {
  text-align: center;
  color: #fff; /* ← .concept-text と同じ色味に統一 */
}

h1 .concept-text {
  text-align: center;
  color: #fff; /* ← .concept-text と同じ色味に統一 */
}


h2 {
  text-align: center;
  color: #333; /* ← .concept-text と同じ色味に統一 */
  font-size: 1.8rem;
  margin-top: 3rem;
  margin-bottom: 1rem;

}

h3 {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #333; /* コンセプトテキストと統一 */
}

 .titletext{
  color: #fff;
  max-width:800px ;
  line-height: 2;
  
}
/* 本文セクションの最大幅と余白 */
section {
  /* max-width: 1000px; */
  margin: 0 auto;
  /* padding: 0 30px; */
  box-sizing: border-box;
}

/* 固定背景セクション */
.hero {
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 120%;
  background: url("https://gigaplus.makeshop.jp/mightyleaf/newdesign20250924/img/bg.jpg") center / cover no-repeat;
  transform: translateY(0);
  will-change: transform;
}



/* .hero {
  background-image: url("https://gigaplus.makeshop.jp/mightyleaf/newdesign20250924/img/bg.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  height: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
} */
/* 黒の半透明レイヤー 
.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.6); 
  z-index: 1;
} */

/* 中身を上に表示するため */
.hero > * {
  position: relative;
  z-index: 2;
}
.hero .overlay {
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
}


.hero2 {
  background-image: url("https://gigaplus.makeshop.jp/mightyleaf/newdesign20250924/img/bg02.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
    height: auto;
  position: relative;
  display: flex;
}
/* 黒の半透明レイヤー */
.hero2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* 黒を40%透過 */
  z-index: 1;
}

/* 中身を上に表示するため */
.hero2 > * {
  position: relative;
  z-index: 2;
}
.hero2 .overlay {
  background-color: rgba(255, 255, 255, 0.0);
  padding: 2rem;
  text-align: center;
}




/* 下寄せ（BOTTOM） */
.hero3{
  background-image: url('https://gigaplus.makeshop.jp/mightyleaf/newdesign20250924/img/bg.jpg');
  background-position: bottom center;
  background-size: cover;
  background-repeat: no-repeat;
}


/* 固定白色背景セクション */
/* 白背景セクション全体（横幅制限なし） */
.white-bg {
  background-color: #fff;
  padding: 3rem 0;
  width: 100%;
}

/* 中身だけ横幅制限（PC最大1000px、スマホ左右30px） */
/* .content-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 30px;
  box-sizing: border-box;
} */
/* .concept-text {
  font-size: 2rem;
  color: #fff;
} */

/* 3つの選択画像 */
.three-options {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  flex-wrap: wrap;
}
.option img {
  width: 100%;
  max-width: 300px;
  border-radius: 8px;
}

/* 個人・業務用 */
/* .customer-types {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
  flex-wrap: wrap;
}
.type img {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
} */
 .customer-types {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2rem 0;
}

.type-button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.4s ease;
}

.type-button img {
  width: 100%;
  max-width: 400px;
  border-radius: 0px;
  display: block;
  transition: transform 0.4s ease;
}

/* 白レイヤーを重ねる */
.type-button::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(255, 255, 255, 0.4); /* 白を薄く被せる */
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: 8px;
}

/* ラベル */
.type-button span {
  margin-top: 0.5rem;
  font-size: 1.1rem;
  color: #333;
  transition: color 0.4s ease;
}

/* ホバー時の演出 */
.type-button:hover {
  transform: scale(1.05);
}
.type-button:hover::after {
  opacity: 1;
}
.type-button:hover span {
  color: #666;
}


/* ルースティー・ティーパウチ */
.tea-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* PCでは最大5枚並び */
  gap: 1rem;
  padding: 1rem 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.tea-grid img {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}
.tea-grid img:hover {
  transform: scale(1.05);
}

/* スマホ対応：最大2枚並び */
@media (max-width: 768px) {
  .tea-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* お知らせ枠 */
.news {
  background-color: #e8e9d8;
  padding: 2rem;
  text-align: center;
}
.news h2 {
  text-align: center;
  color: #333;
  font-size: 1.8rem;
}
.news-box {
  border: 1px solid #ccc;
  padding: 1rem;
  background-color: #e8e9d8;
  border-radius: 6px;
  max-width: 800px;
  margin:0 auto;
}

.storytext{
      max-width:800px ;
      text-align: center;
      margin: 0 auto;
      line-height: 2;
}

.list-wrapper {
  text-align: center; /* ulを中央に配置 */
}

.centered-list {
  max-width:800px ;
  line-height: 2;
  display: inline-block; /* ulを中央にするためにインライン化 */
  text-align: left;      /* liの中身は左揃え */
  padding: 0;
  margin: 0;
  list-style: none;
}




/* お知らせ枠 */
/* .news {
  background-color: #fff;
  padding: 2rem;
  text-align: center;
}
.news-box {
  border: 1px solid #ccc;
  padding: 1rem;
  background-color: #f9f9f9;
  border-radius: 6px;
} */

/* 下部背景 */
.hero.bottom {
  height: 50vh;
}

/* レスポンシブ対応 ここからスマホ */
@media (max-width: 768px) {

/* .hero {
  background-image: url("https://gigaplus.makeshop.jp/mightyleaf/newdesign20250924/img/bg_sp.jpg");
  background-size: contain;
  background-attachment: scroll;
  background-position: center;
  height: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: top center;
  background-repeat: no-repeat;
}

  
  .three-options,
  .customer-types {
    flex-direction: column;
    align-items: center;
  } */

/* 黒の半透明レイヤー 
.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;
}*/

/* 中身を上に表示するため */
/* .hero > * {
  position: relative;
  z-index: 2;
}
.hero .overlay {
  background-color: rgba(255, 255, 255, 0.0);
  text-align: center;
  margin-top: 0px;
} */



}
 .concept-text {
  text-align: center;
  color: #fff; /* ← .concept-text と同じ色味に統一 */
  width: 90%;
}

 .concept-text img{
  width: 90%;
}

/* .pouch-table {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
  padding: 2rem;
}
.row {
  display: contents;
}
.label {
  font-weight: bold;
  color: #333;
}
.desc {
  color: #444;
}

.tea-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  padding: 2rem;
  animation: fadeUp 1s ease-out forwards;
  opacity: 0;
}
@keyframes fadeUp {
  0% { transform: translateY(30px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
} */
.pouch-table {
  width: 100%;
  max-width: 1000px;
  margin: 2rem auto;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.6;
}

.pouch-table th,
.pouch-table td {
  padding: 1rem;
  border-bottom: 1px solid #ccc;
  vertical-align: top;
}

.pouch-table th {
  width: 30%;
  background-color: #fff;
  font-weight: bold;
  color: #333;
  text-align: left;
}

.pouch-table td {
  color: #444;
}

.tea-images {
text-align: center;
}

.video{
    text-align: center;
    width: 100%;
    margin: 0 auto;
}

/* js テキストスクロールフェードインアニメーション */
.fade-trigger {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-trigger.visible {
  opacity: 1;
  transform: translateY(0);
  margin: 1em;
}
/* js テキストスクロールフェードインアニメーション ここまで */

 .customer-types {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2rem 0;
  width: 90%;
}
.type-button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.4s ease;
}

.type-button img {
  width: 100%;
  max-width: 400px;
  border-radius: 0px;
  display: block;
  transition: transform 0.4s ease;
}

/* 白レイヤーを重ねる */
.type-button::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(255, 255, 255, 0.4); /* 白を薄く被せる */
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: 8px;
}

/* ラベル */
.type-button span {
  margin-top: 0.5rem;
  font-size: 1.1rem;
  color: #333;
  transition: color 0.4s ease;
}

/* ホバー時の演出 */
.type-button:hover {
  transform: scale(1.05);
}
.type-button:hover::after {
  opacity: 1;
}
.type-button:hover span {
  color: #666;
}

@keyframes dramaticFadeIn {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(1.2);
    filter: blur(8px);
  }
  60% {
    opacity: 0.6;
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.dramatic-fade {
  opacity: 0;
  animation: dramaticFadeIn 1.0s ease-out forwards;
  color:#fff;
  width: 90%;
  margin: 0 auto;
  text-align: center;

}

/* スライド　ここから */
.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slides img {
  width: 100%;
  display: none;
}

.dots {
  text-align: center;
  margin-top: 10px;
}

.dots span {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #ccc;
  border-radius: 50%;
  margin: 0 5px;
}

/* 表示切り替え */
@media screen and (min-width: 768px) {
  .pc { display: block; }
  .sp { display: none; }
}

@media screen and (max-width: 767px) {
  .pc { display: none; }
  .sp { display: block; }
}





/* スライド　ここまで */

/* 共通スタイル */
.responsive-img {
  width: 100%;
  height: auto;
}

/* PCのみ高さを固定（例：400px） */
@media screen and (min-width: 1200px) {
  .responsive-img {
    height: 50%;
    width: 50%;
    text-align: center;
    margin: 0 auto;
    object-fit: cover;
  }
}


/* 共通：まず両方非表示にしておく */
.pc-img,
.sp-img {
  display: none;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* PC表示（768px以上） */
@media screen and (min-width: 768px) {
  .pc-img {
    display: block;
  }
}

/* スマホ表示（767px以下） */
@media screen and (max-width: 767px) {
  .sp-img {
    display: block;
}