/* ===== ライフデザイン バナー ===== */
:root{
  --navy:#1f2b50;
  --ink:#3a3f4f;
}
*{ box-sizing:border-box; }
/* html,body{ margin:0; padding:0; }
body{
  background:#eef1f5;
  font-family:"Noto Sans JP", sans-serif;
  color:#333;
  -webkit-font-smoothing:antialiased;
  padding:48px 20px;
} */

/* ===== 外枠 ===== */
.banner{
  position: relative;
  background: white;
  display: flex;
  flex-wrap: wrap;
  max-width: 1305px;
  margin: 0 auto;
  padding: 26px 36px 28px 64px;
  border: 3px solid #1f2b50;
  border-radius: 30px;
  box-shadow: 8px 8px #1f2b50;
  overflow: hidden;
  min-height: 416px;
  max-height: 416px;
}

/* 背景写真レイヤー（角丸でクリップ） */
.banner__bg{
  position:absolute;
  inset:0;
  background-image:url("/img/life_design_crop.jpg");
  background-size:cover;
  background-position:58% top;
  z-index:0;
}
/* 左側を白くフェードさせてテキストを読みやすく */
.banner__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(100deg,
      rgba(255,255,255,0.72) 0%,
      rgba(255,255,255,0.55) 24%,
      rgba(255,255,255,0.28) 44%,
      rgba(255,255,255,0.06) 60%,
      rgba(255,255,255,0) 76%);
}

/* ===== コンテンツ ===== */
.banner__inner{
  position:relative;
  z-index:1;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.eyebrow{
  font-family:"M PLUS Rounded 1c", sans-serif;
  font-weight:700;
  font-size:clamp(14px, 1.4vw, 18px);
  letter-spacing:0.14em;
  color:var(--navy);
  opacity:.78;
  margin:0 0 2px;
  padding-left:.18em;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
}

.title{
  font-family:"M PLUS Rounded 1c", sans-serif;
  font-weight:900;
  font-size:clamp(34px, 4.6vw, 58px);
  letter-spacing:0.08em;
  line-height:1.0;
  color:#fff;
  margin:0 0 16px;
  -webkit-text-stroke:1px rgba(31,43,80,.55);
  text-shadow:
    1px 1px 0 rgba(31,43,80,.45),
    -1px 1px 0 rgba(31,43,80,.45),
    1px -1px 0 rgba(31,43,80,.45),
    -1px -1px 0 rgba(31,43,80,.45),
    0 3px 12px rgba(31,43,80,.30);
}

/* 説明ボックス */
.lead{
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(2px);
  border-radius:6px;
  padding:16px 26px 18px;
  max-width:780px;
  box-shadow:0 6px 24px rgba(31,43,80,.07);
}
.lead__head{
  font-weight:700;
  font-size:clamp(16px, 1.7vw, 21px);
  color:var(--navy);
  margin:0 0 8px;
  letter-spacing:.02em;
  line-height:1.5;
}
.lead__head::before{
  content:"";
  display:inline-block;
  width:5px;
  height:1.05em;
  background:var(--navy);
  border-radius:3px;
  margin-right:12px;
  vertical-align:-0.16em;
}
.lead__body{
  font-size:clamp(13px, 1.3vw, 15px);
  line-height:1.85;
  color:#41464f;
  margin:0;
  text-wrap:pretty;
}

/* ===== CTAボタン ===== */
.cta-wrap{
  margin-top:18px;
}
.cta{
  display:inline-flex;
  align-items:center;
  gap:16px;
  font-family:"M PLUS Rounded 1c", sans-serif;
  font-weight:700;
  font-size:clamp(15px, 1.6vw, 20px);
  letter-spacing:.02em;
  color:#fff;
  text-decoration:none;
  background:var(--navy);
  border:3px solid var(--navy);
  border-radius:999px;
  padding:14px 30px;
  box-shadow:4px 4px 0 rgba(31,43,80,.28);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.cta__icon{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#fff;
  color:var(--navy);
}
.cta__icon svg{ width:14px; height:14px; }
.cta:hover{
  opacity: 1;
  transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 rgba(31,43,80,.30);
  background:#27355f;
}
.cta:active{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 rgba(31,43,80,.30);
}

/* ===== レスポンシブ ===== */
@media (max-width: 760px){
  body{ padding:28px 14px; }
  .banner{
    padding:26px 22px 38px 28px;
    border-radius:22px;
    box-shadow:6px 6px #1f2b50;
    min-height:0;
    max-height:none;
  }
  .banner__bg{ background-position:62% top; }
  .banner__bg::after{
    background:
      linear-gradient(180deg,
        rgba(255,255,255,0.50) 0%,
        rgba(255,255,255,0.38) 48%,
        rgba(255,255,255,0.46) 100%),
      linear-gradient(100deg,
        rgba(255,255,255,0.55) 0%,
        rgba(255,255,255,0.22) 55%,
        rgba(255,255,255,0.08) 100%);
  }
  .lead{ max-width:none; padding:18px 18px 20px; background:rgba(255,255,255,0.86); }
  .title{ font-size:clamp(30px, 9.5vw, 50px); letter-spacing:.06em; white-space:nowrap; margin-bottom:22px; }
  .eyebrow{ font-size:clamp(13px, 3.6vw, 18px); }
  .lead__head{ font-size:clamp(16px, 4.4vw, 20px); }
  .lead__body{ font-size:clamp(13px, 3.6vw, 15px); line-height:1.9; }
  .cta{ width:100%; justify-content:center; padding:16px 18px; font-size:clamp(13px, 3.8vw, 17px); }
}