:root { --text-strong:#0b0c0e; --text:#111827; --text-dim:#374151; --border:rgba(0,0,0,.08); --chip-bg:rgba(0,0,0,.04); --chip-border:rgba(0,0,0,.08); }
html, body { background:#e5e7eb; color:var(--text-strong); font-family: ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji; }
.hero-grad { background: radial-gradient(1200px 500px at 20% -10%, rgba(0,0,0,0.06), transparent 60%), radial-gradient(900px 500px at 90% -20%, rgba(0,0,0,0.04), transparent 50%); }
.hero-grad {
  background: #fff;
}
.index_bg {
  background-image: url('../assets/header.png');
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: contain; /* または auto、cover など用途に応じて */
  background-size: auto 90%;
  background-color:rgba(255,255,255,0.2);
  background-blend-mode:lighten;
}
/*
h1, .hero-grad-bg p {
  text-shadow: 
  -3px -3px 0 white,
   0px -3px 0 white,
   3px -3px 0 white,
   3px  0px 0 white,
   3px  3px 0 white,
   0px  3px 0 white,
  -3px  3px 0 white,
  -3px  0px 0 white;
}*/
a,button{-webkit-tap-highlight-color:transparent}
.card{background:#fff;border:1px solid var(--border);border-radius:16px}
.card:hover{background:#e5e7eb}
.card_0, .card_00{
  background:#fff;
  border-radius:16px;
}
.card_0 img, .card_00 img{
  margin: 0 auto;
}
.card_1{
  color: #fff;
  background:#0c27bd;
  border-radius:16px;
  background-image: url("../assets/card_1.png");
  background-repeat: no-repeat;
  background-position: right 30px center;
  background-size: auto 70%; /* 必要に応じて cover / contain などに変更 */
}
.card_2{
  text-align: right;
  background:#fff;
  border-radius:16px;
  background-image: url("../assets/card_2.png");
  background-repeat: no-repeat;
  background-position: left 10px center;
  background-size: auto 70%; /* 必要に応じて cover / contain などに変更 */
}
.card_3{
  color: #fff;
  background:#a7a7a7;
  border-radius:16px;
  background-image: url("../assets/card_3.png");
  background-repeat: no-repeat;
  background-position: right 30px center;
  background-size: auto 70%; /* 必要に応じて cover / contain などに変更 */
}
.chip{background:var(--chip-bg);border:1px solid var(--chip-border);color:var(--text-dim)}
.ring-soft{box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.25rem;border-radius:12px;font-weight:600;text-decoration:none;border:1px solid transparent}
.btn,.btn *{transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.btn:active{transform:none}
.btn:hover{box-shadow:none;transform:none}
.btn-primary{background:#000;color:#fff;border-color:#000}
.btn-primary:hover{background:#111}
.btn-secondary{background:#fff;color:var(--text-strong);border-color:rgba(0,0,0,.14)}
.btn-secondary:hover{background:#e5e7eb;border-color:rgba(0,0,0,.18)}
.text-muted{color:var(--text-dim)}
.icon-rounded{aspect-ratio: 1/1;border-radius: 6px;display: block;overflow: hidden;}
footer{background:#fff}
@media (min-width:640px) {
  .mb_br {
    display: none;
  }
}
@media (max-width:639px) {
  .index_bg {
    background-size: 100% auto; /* 要素幅の80%に収める */
    background-color:rgba(255,255,255,0.8);
  }
  .card_0 img, .card_00 img{
    width: 80%;
  }
  .card_1, .card_2, .card_3{
    background-size: auto 50%; /* 必要に応じて cover / contain などに変更 */
    background-position: right 30px bottom 20px;
  }
  .card_2 {
    background-position: left 30px bottom 20px;
  }
}