<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --pink:#4a7fb5; --pink-lt:#e4eef7; --pink-md:#8ab4d8;
  --beige:#edf3f9; --beige2:#dceaf4;
  --brown:#1a3a5c; --brown-lt:#3a6590; --gray:#555;
  --white:#fff;
  --font-jp:'Noto Sans JP',sans-serif;
  --font-serif:'Noto Serif JP',serif;
}

body{font-family:var(--font-jp);background:transparent;color:#333;overflow-x:hidden;}

.page-wrap{background:transparent;}

.hero,.hero-image-wrap{width:100%;overflow:hidden;}
.hero-img-coffee{width:100%;height:auto;display:block;}


/* FLAVORS */
.flavors-section { padding:60px 5%; background:transparent; }
.flavors-heading { text-align:center; margin-bottom:36px; }
.flavors-heading h2 { font:36px/1.3 var(--font-serif); margin-bottom:14px; color:#1a3a5c; }
.flavors-heading p { font-size:17px; color:#3a6590; }

.flavors-carousel-wrap { position:relative; }
.flavors-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:10;
  width:44px; height:44px; border:0; border-radius:50%;
  background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:#1a3a5c; cursor:pointer; transition:.2s; flex-shrink:0;
}
.flavors-arrow:hover { background:#edf3f9; }
.flavors-arrow.prev { left:-22px; }
.flavors-arrow.next { right:-22px; }
.flavors-arrow:disabled { opacity:.3; cursor:default; }
.flavors-overflow { overflow:hidden; cursor:grab; user-select:none; border-radius:4px; }
.flavors-overflow:active { cursor:grabbing; }
.flavors-track { display:flex; gap:16px; transition:transform .38s cubic-bezier(.4,0,.2,1); will-change:transform; }
.flavor-card { flex-shrink:0; background:#f2f7fc; border-radius:18px; padding:6px 6px 16px; text-align:center; }
.flavor-card a { display:block; text-decoration:none; }
.flavor-card img { width:100%; height:220px; object-fit:cover; border-radius:14px; margin-bottom:14px; display:block; }
.flavor-card h3 { font:700 16px var(--font-jp); margin-bottom:6px; color:#1a3a5c; }
.flavor-card p { font-size:14px; color:#4a7299; letter-spacing:.5px; }
.flavors-dots { display:flex; justify-content:center; gap:7px; margin-top:22px; }
.flavors-dot {
  width:8px; height:8px; border:0; border-radius:50%;
  background:#b8cfe0; cursor:pointer; transition:.2s;
}
.flavors-dot.active { background:#1a3a5c; transform:scale(1.2); }

/* PROBLEM */
.problem { background:var(--beige); padding:48px 60px; }
.section-eyebrow {
  text-align:center; font-size:20px; color:var(--brown-lt);
  letter-spacing:2px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.section-eyebrow::before,
.section-eyebrow::after { content:''; display:block; width:24px; height:1px; background:var(--pink-md); }
.problem-inner { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.problem-inner p { font-size:18px; color:var(--brown); line-height:2.2; }
.problem-img { width:100%; border-radius:12px; height:320px; object-fit:cover; display:block; }

/* INTRO / FEATURES */
.intro { background:transparent; padding:56px 60px 48px; text-align:center; }
.intro-title {
  font-family:var(--font-serif); font-size:28px; color:var(--brown); font-weight:700;
  margin-bottom:14px; display:flex; align-items:center; justify-content:center; gap:8px; line-height:1.3;
}
.intro-title .deco-leaf { font-size:22px; color:var(--pink-md); flex-shrink:0; }
.intro-sub {
  font-size:16px; color:var(--brown-lt); margin-bottom:32px;
  display:flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap;
}
.intro-sub::before,
.intro-sub::after {
  content:''; flex:1; height:1px;
  background:repeating-linear-gradient(to right,var(--pink-md) 0px,var(--pink-md) 3px,transparent 3px,transparent 7px);
}
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feature-card {
  border:1.5px solid var(--pink-md); border-radius:14px; overflow:hidden;
  text-align:left; background:transparent; display:flex; flex-direction:column;
}
.feature-icon-row { display:flex; align-items:flex-start; gap:8px; padding:16px 14px 0; }
.feature-icon {
  width:32px; height:32px; border:1.5px solid var(--pink-md); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; margin-top:1px;
}
.feature-title { font-size:15px; font-weight:700; color:var(--brown); line-height:1.5; }
.feature-desc { font-size:13px; color:var(--gray); line-height:1.7; padding:10px 14px 16px; flex:1; }
.feature-img { width:100%; height:180px; object-fit:cover; display:block; margin-top:auto; }

/* STEPS */
.steps { background:var(--beige); padding:48px 60px; }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }
.step-item { text-align:center; }
.step-num {
  width:36px; height:36px; background:var(--pink); color:white; border-radius:50%;
  font-size:16px; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 10px;
}
.step-label { font-size:16px; font-weight:700; color:var(--brown); margin-bottom:10px; }
.step-img { width:100%; border-radius:12px; height:200px; object-fit:cover; display:block; margin-bottom:12px; }
.step-desc { font-size:13px; color:var(--gray); line-height:1.7; }
.step-finish {
  position:relative; background:var(--pink-lt); border-radius:14px; padding:16px;
  margin-top:20px; display:flex; align-items:center; justify-content:center; gap:20px; overflow:hidden;
}
.step-finish-badge {
  background:var(--pink); color:white; border-radius:50%;
  width:80px; height:80px; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; line-height:1.4; text-align:center;
}
.step-finish-badge .big { font-size:22px; }
.step-finish-img { flex:1; height:160px; object-fit:cover; border-radius:10px; min-width:0; }

/* SCENE */
.scene { background:transparent; padding:56px 60px; text-align:center; }
.scene-title {
  font:700 26px var(--font-serif); color:var(--brown);
  margin-bottom:24px; display:flex; align-items:center; justify-content:center; gap:8px;
}
.scene-title .deco { color:var(--pink-md); font-size:14px; }
.scene-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:28px; }
.scene-card { position:relative; border-radius:12px; overflow:hidden; }
.scene-card-img { width:100%; height:220px; object-fit:cover; display:block; }
.scene-card-label {
  position:absolute; inset:0 auto auto 0;
  background:rgba(26,58,92,.65); color:#fff;
  font-size:14px; font-weight:700; padding:10px 14px; text-align:center;
}
.scene-tagline { font:700 30px var(--font-serif); color:var(--brown); text-align:center; }

/* REVIEWS */
.reviews { background:var(--beige); padding:48px 60px; }
.reviews-title { text-align:center; font-size:22px; font-weight:700; color:var(--brown); margin-bottom:24px; }
.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.review-card { background:#fff; border-radius:12px; padding:20px 18px; }
.stars { color:#f0b429; font-size:16px; margin-bottom:8px; }
.review-heading { font-size:16px; font-weight:700; color:var(--brown); margin-bottom:8px; line-height:1.4; }
.review-text { font-size:14px; color:var(--gray); line-height:1.7; margin-bottom:14px; }
.review-footer { display:flex; align-items:center; justify-content:space-between; }
.reviewer-label { font-size:13px; color:#999; }
.reviewer-avatar {
  width:44px; height:44px; border-radius:50%; background:var(--pink-lt);
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
}
.reviewer-avatar img { width:100%; height:100%; object-fit:cover; }
.review-note { text-align:center; font-size:12px; color:#aaa; margin-top:10px; }

/* PRODUCT GRID */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:30px 0;}

.product-card{text-align:center;padding:15px;background:transparent;border-radius:10px;overflow:hidden;font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho","MS Mincho",serif;}
.product-name{margin-top:10px;font-size:17px;font-weight:bold;letter-spacing:.05em;color:#333;}
.product-price{margin-top:6px;font-size:16px;font-weight:bold;color:#a07c52;letter-spacing:.03em;}
.product-desc{margin-top:10px;font-size:14px;line-height:1.8;color:#333;}

.product-image{position:relative;display:block;overflow:hidden;border-radius:8px;}
.product-image img{width:100%;display:block;transition:opacity .3s ease,transform .3s ease;}
.product-image .hover-img{position:absolute;inset:0;opacity:0;}

@media(hover:hover){
.product-image:hover .hover-img{opacity:1;}
.product-image:hover img:first-child{opacity:0;}
.product-image:hover img{transform:scale(1.03);}
}

/* PRODUCT SECTION WRAPPER */
.product-section-wrap{max-width:1200px;margin:0 auto;padding:80px 5%;font-family:'Yu Gothic','Hiragino Kaku Gothic ProN',sans-serif;}
.lp-h2{font-weight:bold;font-size:20px;color:#006837;margin-bottom:0;text-align:center;}
.lp-h2-sub{text-align:center;margin-bottom:0;}
</style>