@charset "UTF-8";

/* ==========================================================
   Variables - プレミアム&フレッシュ
========================================================== */
:root {
  /* Colors - より鮮やかでリッチな色合いに */
  --c-primary: #339933;
  --c-primary-dark: #297a29;
  --c-primary-light: #ebf5eb;
  --c-primary-grad: linear-gradient(135deg, #42b342 0%, #339933 100%);
  
  --c-accent: #ff8c00;
  --c-accent-grad: linear-gradient(135deg, #ffa726 0%, #ff8c00 100%);
  
  --c-text-main: #2c332e;
  --c-text-sub: #5c6660;
  
  --c-bg-white: #ffffff;
  --c-bg-light: #f7f9f8;
  --c-bg-menu: #fcfbf2; /* さらに上品なペールイエロー */
  --c-border: #e2e8e4;

  /* Typography */
  --font-base: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  
  /* Layout */
  --content-width: 1000px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 50px;

  /* Premium Shadows */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.05);
  --shadow-glass: 0 16px 40px rgba(0, 163, 62, 0.08);
  --shadow-hover: 0 20px 40px rgba(0, 163, 62, 0.12);
  --shadow-glow: 0 0 20px rgba(0, 163, 62, 0.4);
}

/* ==========================================================
   Keyframes (マイクロインタラクション)
========================================================== */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}

@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(0, 163, 62, 0.4); }
  70% { box-shadow: 0 0 0 15px rgba(0, 163, 62, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 163, 62, 0); }
}

@keyframes shine {
  0% { left: -100%; opacity: 0; }
  20% { opacity: 1; }
  100% { left: 200%; opacity: 0; }
}

/* ==========================================================
   Reset & Base
========================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 62.5%; scroll-behavior: smooth; }
body {
  font-family: var(--font-base);
  font-size: 1.6rem;
  line-height: 1.8;
  color: var(--c-text-main);
  background-color: var(--c-bg-white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; }

/* ==========================================================
   Layout Utils
========================================================== */
.l-container { max-width: var(--content-width); margin: 0 auto; padding: 2rem 5vw 0; }
.l-section { padding: clamp(8rem, 10vw, 12rem) 0; position: relative; }

/* ==========================================================
   Typography & Titles
========================================================== */
.c-title {
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  font-weight: 900;
  text-align: center;
  margin-bottom: 5rem;
  line-height: 1.4;
  background: var(--c-primary-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.05em;
  position: relative;
}

.c-title span {
  display: block;
  font-size: 1.4rem;
  color: var(--c-text-sub);
  margin-bottom: 0.5rem;
  letter-spacing: 0.15em;
  font-weight: 700;
  -webkit-text-fill-color: var(--c-text-sub);
}

/* ==========================================================
   Components (Premium Buttons)
========================================================== */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-primary-grad);
  color: var(--c-bg-white);
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 900;
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1rem, 5vw, 4.5rem);
  border-radius: var(--radius-pill);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  width: 100%;
  max-width: 420px;
  box-shadow: 0 8px 24px rgba(0, 163, 62, 0.25);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.2);
}

/* ボタンのシャインエフェクト */
.c-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-25deg);
  animation: shine 4s infinite; /* 定期的にキラッと光る */
}

.c-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 163, 62, 0.35);
  background: linear-gradient(135deg, #10e360 0%, #008f36 100%);
}

.c-btn-wrap {
  text-align: center;
  margin-top: 3rem;
  position: relative;
}

.c-btn-wrap--pulse .c-btn {
  animation: pulseGlow 2.5s infinite;
}

/* メニュー内専用の少し小さめボタン */
.c-btn--sm {
  padding: 1.6rem 3rem;
  font-size: 1.6rem;
}

/* ==========================================================
   Hero
========================================================== */
.p-hero {
  background-color: var(--c-bg-white);
  text-align: center;
  position: relative;
}

.p-hero__logo {
  text-align: left;
  padding: 1.5rem 0 1.5rem 2vw; /* 左に少しスペース */
  max-width: var(--content-width);
  margin: 0 auto;
}

.p-hero__logo img {
  width: clamp(180px, 30vw, 270px);
  height: auto;
  transition: transform 0.3s ease;
}

.p-hero__logo a:hover img {
  transform: scale(1.05);
}

.p-hero__img {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ==========================================================
   Campaign Section (Glassmorphism)
========================================================== */
.p-campaign {
  background-color: var(--c-bg-light);
  position: relative;
  padding-bottom: 6rem;
}

.p-campaign__inner {
  /* グラスモーフィズムでプレミアム感を演出 */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  
  border-radius: var(--radius-lg);
  padding: clamp(4rem, 5vw, 6rem);
  box-shadow: var(--shadow-glass);
  text-align: center;
  max-width: 840px;
  margin: 3rem auto 0; /* 画像の文字を隠さないように余白を取る */
  position: relative;
  z-index: 2;
}

.p-campaign__catch {
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 900;
  color: var(--c-primary-dark);
  margin-bottom: 2.5rem;
  line-height: 1.5;
}

.p-campaign__desc {
  font-size: 1.6rem;
  margin-bottom: 3.5rem;
  color: var(--c-text-main);
  text-align: left;
  line-height: 1.9;
}

.p-campaign__period {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--c-accent);
  font-weight: 900;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  margin-bottom: 3rem;
  border: none;
  background: none;
  padding: 0;
  line-height: 1.4;
}

.p-campaign__period::before,
.p-campaign__period::after {
  content: '✦';
  color: var(--c-accent);
  font-size: 1.6rem;
}

.p-campaign__notes {
  margin-top: 4rem;
  font-size: 1.3rem;
  color: var(--c-text-sub);
  text-align: left;
  background-color: rgba(245, 245, 245, 0.8);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
}

/* ==========================================================
   Menu Section
========================================================== */
.p-menu {
  background-color: var(--c-bg-menu);
  position: relative;
  overflow: hidden;
}

/* 背景のふんわりした光の演出（疑似要素） */
.p-menu::before {
  content: '';
  position: absolute;
  top: -10%;
  left: -5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
  z-index: 0;
}

.p-menu .l-container { position: relative; z-index: 1; }

.p-menu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 3.5rem;
}

/* Menu Cards */
.p-menu-card {
  background: linear-gradient(145deg, #ffffff, #fdfdfd);
  border-radius: var(--radius-lg);
  padding: 5rem 3rem 4rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), 
              box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.p-menu-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

/* Badge */
.p-menu-card__badge-wrap {
  position: absolute;
  top: -18px;
  left: 0;
  width: 100%;
  text-align: center;
}

.p-menu-card__badge {
  display: inline-block;
  background: var(--c-accent-grad);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 900;
  padding: 0.8rem 3rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 16px rgba(255, 140, 0, 0.2);
  letter-spacing: 0.05em;
}

.p-menu-card__title {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--c-primary-dark);
  margin-bottom: 1.5rem;
  line-height: 1.4;
  text-align: center;
}

.p-menu-card__desc {
  font-size: 1.5rem;
  color: var(--c-text-sub);
  margin-bottom: 3.5rem;
  text-align: center;
  line-height: 1.6;
}

/* Target Box */
.p-menu-card__target {
  background-color: var(--c-bg-light);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 3rem 2.5rem;
  margin-bottom: 3.5rem;
  flex-grow: 1;
}

.p-menu-card__target-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--c-primary);
  margin-bottom: 2rem;
  display: inline-block;
  position: relative;
}

.p-menu-card__target-title::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: rgba(0, 163, 62, 0.15);
  border-radius: 4px;
}

.p-menu-card__list li {
  font-size: 1.4rem;
  color: var(--c-text-main);
  margin-bottom: 1.2rem;
  padding-left: 2rem;
  position: relative;
  line-height: 1.5;
}

.p-menu-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--c-primary);
}

/* ==========================================================
   Savings Box
========================================================== */
.p-savings {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  padding: clamp(4rem, 5vw, 6rem);
  margin-top: 6rem;
  box-shadow: var(--shadow-md);
  text-align: center;
  border: 1px solid #fff;
}

.p-savings__title {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--c-primary-dark);
  margin-bottom: 4rem;
}

.p-savings__images {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

.p-savings__images img {
  width: 100%;
  max-width: 800px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease;
}

.p-savings__images img:hover {
  transform: scale(1.02);
}

/* ==========================================================
   Booth Section
========================================================== */
.p-booth {
  background-color: #f4fbf6; /* さらに明るく爽やかなライトグリーン */
  position: relative;
  overflow: hidden;
  padding: clamp(10rem, 12vw, 14rem) 0;
}

.p-booth::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0,163,62,0.04) 0%, rgba(0,163,62,0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

.p-booth__container {
  display: flex;
  align-items: center;
  gap: 6rem;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .p-booth__container { flex-direction: column; }
}

.p-booth__content { flex: 1; }

.p-booth .c-title {
  text-align: left;
  margin-bottom: 3.5rem;
  /* HTML側で販売をくくっているので、これ以上不自然な改行はされません */
}

.p-booth__date {
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  font-weight: 900;
  color: var(--c-primary-dark);
  display: inline-block;
  margin-bottom: 3rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  border-left: 5px solid var(--c-primary);
  padding-left: 1.5rem;
}

.p-booth__text {
  font-size: 1.6rem;
  margin-bottom: 4rem;
  line-height: 1.8;
  color: var(--c-text-main);
}

/* ガラポン箱をチケット風に */
.p-booth__garapon {
  background: var(--c-bg-white);
  border: 2px solid var(--c-accent);
  padding: 2.5rem;
  border-radius: var(--radius-md);
  box-shadow: 4px 4px 0 rgba(255, 140, 0, 0.15); /* ポップなずらし影 */
  position: relative;
  transform: rotate(-1deg);
}

.p-booth__garapon-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
}

@media (max-width: 540px) {
  .p-booth__garapon-inner {
    flex-direction: column-reverse;
    text-align: center;
    gap: 1.5rem;
  }
}

.p-booth__garapon-text {
  flex: 1;
}

.p-booth__garapon-img {
  flex: 0 0 100px;
  animation: float 4s ease-in-out infinite; /* ガラポン画像も少し弾ませる */
}

.p-booth__garapon-img img {
  width: 100%;
  max-width: 120px;
  margin: 0 auto;
}

.p-booth__garapon-title {
  font-weight: 900;
  font-size: 1.8rem;
  color: var(--c-accent);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.p-booth__image-wrap {
  flex: 0.9;
  text-align: center;
  position: relative;
}

/* 画像をポラロイド写真風に */
.p-booth__image-wrap img {
  position: relative;
  z-index: 1;
  background-color: #fff;
  padding: 1.5rem 1.5rem 6rem 1.5rem; /* 下部を広めに */
  border-radius: 4px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  max-width: 90%;
  margin: 0 auto;
  transform: rotate(3deg);
  animation: float 6s ease-in-out infinite;
}

/* ポラロイドを留めるテープ風のあしらい */
.p-booth__image-wrap::after {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 100px;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  z-index: 2;
}

/* ==========================================================
   Activities Section
========================================================== */
.p-activities {
  background-color: var(--c-bg-white);
  padding-top: 8rem;
}

.p-activity-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8rem; /* ゆったりとした余白 */
  align-items: center;
  margin-bottom: 12rem;
  background-color: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
}

.p-activity-item:hover {
  transform: none;
  box-shadow: none;
}

.p-activity-item:nth-child(even) { 
  grid-template-columns: 1fr 1fr;
}

.p-activity-item:nth-child(even) .p-activity-item__content {
  grid-column: 2;
  grid-row: 1;
}

.p-activity-item:nth-child(even) .p-activity-item__images {
  grid-column: 1;
  grid-row: 1;
}

@media (max-width: 768px) {
  .p-activity-item, .p-activity-item:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 4rem;
    margin-bottom: 8rem;
  }
  .p-activity-item .p-activity-item__content,
  .p-activity-item:nth-child(even) .p-activity-item__content {
    grid-column: 1;
    grid-row: 1;
  }
  .p-activity-item .p-activity-item__images,
  .p-activity-item:nth-child(even) .p-activity-item__images {
    grid-column: 1;
    grid-row: 2;
  }
}

.p-activity-item__content { 
  position: relative;
}

.p-activity-item__images { 
  position: relative; 
  display: flex;
  gap: 2rem;
}

.p-activity-item__images img {
  width: 100%;
  border-radius: 4px; /* クリーンなほんのり角丸 */
  object-fit: cover;
  box-shadow: var(--shadow-sm); /* 上品な薄い影のみ */
}

.p-activity-item__images--multi {
  flex-direction: column;
  gap: 1.5rem;
}

.p-activity-item__images--multi img { 
  width: 100%; 
}

/* タイトルの上に装飾を追加 */
.p-activity-item__content::before {
  content: 'ACTIVITY';
  display: block;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--c-primary);
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
}

.p-activity-item__title {
  font-size: clamp(2.2rem, 3vw, 2.8rem);
  font-weight: 900;
  color: var(--c-text-main);
  margin-bottom: 3rem;
  line-height: 1.5;
}

.p-activity-item__text {
  font-size: 1.6rem;
  color: var(--c-text-sub);
  line-height: 2;
  letter-spacing: 0.03em;
}

/* ==========================================================
   Footer
========================================================== */
.l-footer {
  background-color: var(--c-primary);
  color: var(--c-bg-white);
  text-align: center;
  padding: 8rem 0 5rem;
  font-size: 1.4rem;
  position: relative;
}

/* フッター上部のオレンジ線を削除 */

.l-footer__logo {
  margin-bottom: 4rem;
}

.l-footer__logo img {
  width: clamp(220px, 50vw, 320px);
  margin: 0 auto;
  filter: brightness(0) invert(1);
}

.l-footer__copy {
  letter-spacing: 0.15em;
  font-weight: 700;
  opacity: 0.9;
}

/* ==========================================================
   Animations
========================================================== */
.js-fadein {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.js-fadein.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================
   Utilities
========================================================== */
.u-sp-br { display: none; }
.u-pc-br { display: block; }

@media (max-width: 768px) {
  .u-sp-br { display: block; }
  .u-pc-br { display: none; }
}