@charset "utf-8";


:root{
  /* バナーの高さ（ここだけ触ればOK） */
  --hero-h: clamp(66px, 6vw, 96px);

  /* レイアウト */
  --wrap-w: 920px;
  --radius: 18px;

  /* 色 */
  --bg: #efe2cf;
  --card: rgba(255,255,255,.92);
  --stroke: rgba(0,0,0,.10);
  --text: #1a1a1a;
  --muted: rgba(0,0,0,.68);

  /* 影 */
  --shadow: 0 14px 38px rgba(0,0,0,.14);
  --shadow2: 0 10px 24px rgba(0,0,0,.10);

  /* ボタン */
  --btn: rgba(255,255,255,.88);
  --btn-hover: rgba(255,255,255,1);
  --btn-stroke: rgba(0,0,0,.16);
}

@media (max-width: 520px){
  :root{
    /* モバイルはさらに少し細く */
    --hero-h: clamp(56px, 12vw, 80px);
    --radius: 16px;
  }
}

*,
*::before,
*::after{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  margin: 0;
  color: var(--text);
 background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,244,230,.70), rgba(255,244,230,0)),
    radial-gradient(900px 500px at 90% 0%, rgba(245,225,200,.55), rgba(245,225,200,0)),
    var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
               "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  line-height: 1.65;
}

img{ max-width: 100%; height: auto; display: block; }


.hero{
  width: 100%;
  height: var(--hero-h);
  background-image: url("../img/banner.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right top;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
/* Layout */
.wrap{
  width: min(var(--wrap-w), calc(100% - 28px));
  margin-inline: auto;
  padding: 22px 0 46px;
}

.card{
  background: var(--card)
	  rgba(243, 231, 214, .90);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  backdrop-filter: blur(6px);
  }

@media (max-width: 520px){
  .wrap{ padding: 18px 0 36px; }
  .card{ padding: 18px; }
}

/* Top */
.top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin-bottom: 14px;
}

.logo{
  width: clamp(140px, 18vw, 200px);
  height: auto;
}

.badges{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

@media (max-width: 520px){
  .top{
    flex-direction: column;
    align-items: flex-start;
  }
  .badges{
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
 .hero{
    background-position: right center;
  }
.badge{
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.75);
  color: rgba(0,0,0,.78);
  font-size: 12px;
  letter-spacing: .08em;
  font-weight: 700;
  white-space: nowrap;
}

/* Text */
h1{
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.25;
  margin: 0 0 10px;
  letter-spacing: .02em;
}

p{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14.5px;
}

strong{ color: rgba(0,0,0,.78); }

/* Grid */
.grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 760px){
  .grid{ grid-template-columns: 1fr; }
}

.box{
  border: 1px solid var(--stroke);
  border-radius: calc(var(--radius) - 6px);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow2);
  padding: 16px;
}

.label{
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 12px;
  color: rgba(0,0,0,.70);
  margin-bottom: 10px;
}

/* CTA buttons */
.cta{
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--btn-stroke);
  background: var(--btn);
  color: rgba(0,0,0,.86);
  text-decoration: none;
  transition: transform .08s ease, background .18s ease, border-color .18s ease;
}

.btn:hover{
  background: var(--btn-hover);
  border-color: rgba(0,0,0,.22);
}

.btn:active{
  transform: translateY(1px);
}

.btn:focus-visible{
  outline: 3px solid rgba(0,0,0,.18);
  outline-offset: 2px;
}

/* Footer */
footer{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.08);
  color: rgba(0,0,0,.48);
  font-size: 12px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce){
  .btn{ transition: none; }
}