@charset "UTF-8";

/* ============ Root & Reset ============ */
:root{
  --bg: #ffffff;
  --bg-alt: #f7f7f9;
  --text: #222;
  --muted: #6b7280;
  --line: #e5e7eb;
  --brand: #0f172a;      /* ほぼ黒に近い紺：高級感 */
  --accent: #b45309;     /* カラメル/焦がしバター系のアクセント */
  --accent-2:#8b5cf6;    /* サブアクセント（軽く使用） */
  --card: #fff;
  --shadow: 0 10px 25px rgba(0,0,0,.06);
  --radius: 16px;
  --radius-lg: 20px;
  --container: clamp(16px, 4vw, 40px);
}

a {
text-decoration:none;
}

*{box-sizing:border-box}
html,body{height:100%}
html{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
  background: var(--bg);
  color: var(--text);
  scroll-behavior: smooth;
}
body{margin:0; line-height:1.6}

/* Utilities */
.container{max-width:1200px;margin:0 auto;padding:0 var(--container)}
.section{padding:72px 0}
.section.alt{background:var(--bg-alt)}
.section-head{margin-bottom:28px}
.section-head h2{font-size: clamp(24px, 3.4vw, 36px); margin:0 0 8px}
.section-sub{color:var(--muted); margin:0}

/* ============ Header ============ */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand .logo{height:50px; display:block}
.logo-sm{height:80px}

.main-nav ul{display:flex;gap:20px;align-items:center; margin:0; padding:0; list-style:none}
.main-nav a{display:block; padding:8px 10px; text-decoration:none; color:var(--text); border-radius:10px}
.main-nav a:hover{background:var(--bg-alt)}
.main-nav .highlight a{background:var(--brand); color:#fff}
.main-nav .highlight a:hover{opacity:.9}

/* Mobile menu (checkbox hack) */
.nav-toggle {display:none}

.hamburger {
  display:none;
  cursor:pointer;
  width:44px;
  height:44px;
  padding:10px;          /* ← クリック範囲確保 */
  box-sizing:border-box;
}

.hamburger span {
  display:block;
  width:22px;
  height:2px;
  background:#111;
  margin:5px auto;       /* ← 自動で中央寄せ＋余白 */
  transition:.25s;
}

@media (max-width: 860px){
  .hamburger {display:block}   /* ← flexじゃなくblockに！ */
  .main-nav {
    position: fixed; inset: 0 0 auto 0; top:68px;
    background: #fff; border-top:1px solid var(--line);
    height: calc(100vh - 68px); overflow:auto;
    transform: translateY(-6%); opacity:0; pointer-events:none;
    transition: transform .25s ease, opacity .25s ease;
  }
  .main-nav ul {flex-direction:column; padding:20px}
.nav-toggle:checked ~ .hamburger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  transform-origin: center;  /* ← 回転基準を中央に */
}

.nav-toggle:checked ~ .hamburger span:nth-child(2) {
  opacity: 0;
}

.nav-toggle:checked ~ .hamburger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  transform-origin: center;  /* ← こっちも中央に */
}

  .nav-toggle:checked ~ .main-nav{transform:none; opacity:1; pointer-events:auto}
}

/* ============ Hero ============ */
.hero {
  position: relative; /* 疑似要素を重ねるために必要 */
  padding: 48px 0 24px;
  overflow: hidden;   /* 念のためはみ出し防止 */
}
.hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; gap:40px; align-items:center}
.eyebrow{color:var(--accent); letter-spacing:.06em; font-weight:600; margin:0 0 8px}
.hero h1{font-size: clamp(28px, 4.6vw, 52px); line-height:1.15; margin:.1em 0 .3em}
.hero .sub{color:var(--muted); font-size:clamp(14px, 1.7vw, 18px)}
.cta-row{display:flex; gap:12px; margin:18px 0 10px; flex-wrap:wrap}
.trust{display:flex; gap:16px; flex-wrap:wrap; color:#374151; font-size:14px; margin-top:10px}
.trust span{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; background:var(--bg-alt); border-radius:999px; border:1px solid var(--line)}
.hero-art img {
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.9),
    0 0 40px rgba(255, 255, 255, 0.6),
    0 0 80px rgba(255, 255, 255, 0.4);
}

.sp-br{display:none}
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 左側だけに表示したいなら幅を調整 */
  height: 100%;
  background: url("images/hero-bg.png") no-repeat top left;
  background-size: cover;
  opacity: 0.6; /* 半透明にしたい場合（画像そのままなら不要） */
  pointer-events: none; /* クリックの邪魔をしない */
  z-index: 0;
}
/* Heroの中身を前面に */
.hero-inner {
  position: relative;
  z-index: 1;
}
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr; gap:28px}
  .sp-br{display:inline}
}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; cursor:pointer;
  padding:12px 18px; border-radius:12px; border:1px solid var(--line); font-weight:600}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--brand); color:#fff; border-color:var(--brand)}
.btn-ghost{background:#fff; color:var(--brand)}
.btn-lg{padding:16px 22px; font-size:18px}
.btn-block{width:100%}

/* ============ LINE & SNS ============ */
/* HeroのLINEボタン */
.hero .btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  margin-top: 20px;
  padding: 14px 20px;
  font-size: 16px;
  background: #06C755;
  color: #fff;
  border: none;
  border-radius: 999px; /* pill形状 */
  font-weight: 700;
  transition: background .2s;
}
.hero .btn-line i {
  font-size: 20px;
}
.hero .btn-line:hover {
  background: #05b24a;
}
.line-cta {
  margin: 16px 0;
}
/* FooterのLINE・SNS */
.footer-col .btn-line {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 260px;
  margin: 12px auto;
  padding: 12px 16px;
  font-size: 15px;
  background: #06C755;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 600;
}
.footer-col .btn-line:hover {
  background: #05b24a;
}

.footer-col .social-icons {
  display: flex;
  justify-content: center;
  gap: 18px;
  font-size: 22px;
  margin-top: 10px;
}
.footer-col .social-icons a {
  color: var(--text);
}
.footer-col .social-icons a:hover {
  color: var(--accent);
}


.social-icons {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  font-size: 22px;
  justify-content:center;
}
.social-icons a {
  color: var(--text);
  transition: color .2s;
}
.social-icons a:hover {
  color: var(--accent);
}


/* ============ Product Cards ============ */
.product-grid{
  display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:20px;
}
@media (max-width: 1100px){ .product-grid{grid-template-columns: repeat(3, minmax(0,1fr));} }
@media (max-width: 720px){ .product-grid{grid-template-columns: repeat(2, minmax(0,1fr));} }
@media (max-width: 480px){ .product-grid{grid-template-columns: 1fr;} }

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow: var(--shadow); transition:.2s}
.card:hover{transform: translateY(-3px)}
.card-img{width:100%; aspect-ratio: 4/3; object-fit: cover}
.card-body{padding:16px}
.card h3{margin:0 0 6px; font-size: clamp(16px, 2.5vw, 20px)}
.card .desc{color:var(--muted); margin:0 0 12px}
.tags{display:flex; gap:8px; flex-wrap:wrap; padding:0; margin:0 0 12px; list-style:none}
.tags li{font-size:12px; background:var(--bg-alt); border:1px solid var(--line); padding:4px 8px; border-radius:999px}
.price-row{display:flex; align-items:baseline; gap:8px; margin:10px 0 14px}
.price{font-weight:800; font-size:18px}
.unit{color:var(--muted)}
.badge, .badge-new{
  position:absolute; margin:10px; padding:6px 10px; border-radius:999px; font-size:12px; color:#fff; background:var(--brand)
}
.product{position:relative}
.badge-new{background:var(--accent)}

.category-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.chip{display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; border:1px solid var(--line); text-decoration:none; color:var(--text); background:#fff}
.chip:hover{background:var(--bg-alt)}

/* ============ Ribbon ============ */
.ribbon{background: #111; color:#fff; padding:10px 0}
.ribbon-inner{display:flex; gap:16px; align-items:center; justify-content:space-between}
.ribbon .press{display:flex; gap:18px; align-items:center; list-style:none; margin:0; padding:0}
.ribbon .press img{height:22px; opacity:.9; filter: invert(1)}
.ribbon strong{color:#fff}

/* ============ Blog Cards ============ */
.blog-grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:22px}
@media (max-width: 900px){ .blog-grid{grid-template-columns: 1fr 1fr} }
@media (max-width: 560px){ .blog-grid{grid-template-columns: 1fr} }

.card.blog .meta{color:var(--muted); font-size:12px; margin:6px 0 10px}
.text-link{color:var(--brand); text-decoration:none; font-weight:600}
.text-link:hover{text-decoration:underline}
.more-row{display:flex; justify-content:center; margin-top:16px}

/* ============ About ============ */
.about{display:grid; grid-template-columns: 1.1fr .9fr; gap:30px; align-items:center}
.about img{width:100%; border-radius:var(--radius-lg); box-shadow: var(--shadow); object-fit:cover}
.bullets{margin:12px 0 0; padding-left:20px}
@media (max-width: 900px){ .about{grid-template-columns: 1fr} }

/* ============ FAQ ============ */
.faq{background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:10px 0}
.faq summary{cursor:pointer; font-weight:700}
.faq p{margin:10px 0 0; color:var(--muted)}

/* ============ CTA Banner ============ */
.cta{background:linear-gradient(180deg, #fff, #f5f7fb); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.cta-inner{padding:52px 0; text-align:center}
.cta h2{font-size: clamp(22px, 3.6vw, 36px); margin:0 0 8px}
.cta p{color:var(--muted); margin:0 0 16px}

/* ============ Footer ============ */
.site-footer{border-top:1px solid var(--line); background:#fff}
.footer-inner{display:grid; grid-template-columns: 1.1fr .6fr .9fr; gap:24px; padding:28px 0}
.footer-col h4{margin:0 auto 8px}
.footer-center{text-align:center}
.foot-links{list-style:none; margin:0; padding:0}
.foot-links a{text-decoration:none; color:var(--text)}
.foot-links a:hover{text-decoration:underline}
.newsletter{display:flex; gap:8px}
.newsletter input{flex:1; padding:10px 12px; border:1px solid var(--line); border-radius:10px}
.newsletter .btn{white-space:nowrap}
.copyright{padding:12px 0; border-top:1px solid var(--line); color:var(--muted); text-align:center}
@media (max-width: 820px){ .footer-inner{grid-template-columns: 1fr 1fr} .site-footer{text-align:center;} }
@media (max-width: 560px){ .footer-inner{grid-template-columns: 1fr} }

/* ============ Accessibility & Motion ============ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion: reduce){
  *{animation: none !important; transition: none !important}
}