:root{
  --bg:#FFFFFF;
  --bg2:#FBF8FF;
  --lav:#F3ECFF;
  --lav2:#EDE2FF;

  --p1:#C7B2FF;
  --p2:#B89CFF;
  --p3:#9B7BFF;

  --pink1:#FFC4E1;
  --pink2:#FFB3D6;
  --pink3:#FFD8EE;

  --card:#FFFFFF;
  --cardTint:#FFFDFF;

  --ink:#2A2140;
  --muted:#6D5F91;

  --line: rgba(184,156,255,.20);

  --radius-xl:38px;
  --radius-lg:28px;
  --radius-md:20px;

  --shadow: 0 20px 55px rgba(111, 73, 196, .12);
  --shadow-soft: 0 12px 30px rgba(111, 73, 196, .10);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--ink);
  font-family:"M PLUS Rounded 1c", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height:1.65;

  background:
    radial-gradient(900px 650px at 10% 10%, rgba(199,178,255,.35) 0%, rgba(199,178,255,0) 62%),
    radial-gradient(850px 620px at 92% 12%, rgba(255,196,225,.35) 0%, rgba(255,196,225,0) 62%),
    radial-gradient(900px 680px at 45% 92%, rgba(237,226,255,.55) 0%, rgba(237,226,255,0) 65%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 55%, var(--lav) 100%);
}

a{ color:inherit; text-decoration:none; }

.container{
  width:min(1120px, calc(100% - 40px));
  margin:0 auto;
}

/* ---------------- Header ---------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid var(--line);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand-logo{
  width:34px;
  height:34px;
  object-fit:contain;
  border-radius:12px;
}

.brand-text{
  font-family:"Nunito","M PLUS Rounded 1c",sans-serif;
  font-weight:900;
  letter-spacing:.2px;
  color:var(--ink);
  font-size:20px;
}

.nav{
  display:flex;
  gap:10px;
  align-items:center;
  padding:6px 8px;
  border-radius:999px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(184,156,255,.18);
  box-shadow: 0 10px 22px rgba(111,73,196,.08);
}

.nav-link{
  color: rgba(42,33,64,.70);
  font-weight:900;
  font-size:14px;
  padding:10px 14px;
  border-radius:999px;
}
.nav-link:hover{ background: rgba(255,196,225,.25); }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:12px 18px;
  font-weight:900;
  letter-spacing:.2px;
  user-select:none;
  transition: transform .12s ease, filter .12s ease;
  border: 1px solid rgba(184,156,255,.22);
}

.btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.btn:active{ transform: translateY(0px); }

.btn-solid{
  background: linear-gradient(135deg, var(--p1) 0%, var(--p2) 45%, var(--pink1) 115%);
  color: var(--ink);
  box-shadow: 0 16px 30px rgba(111,73,196,.14);
}

.btn-lg{ padding:13px 22px; font-size:16px; }

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:56px 0 36px;
  background:
    radial-gradient(980px 520px at 18% 18%, rgba(199,178,255,.40) 0%, rgba(199,178,255,0) 62%),
    radial-gradient(950px 560px at 86% 20%, rgba(255,196,225,.38) 0%, rgba(255,196,225,0) 62%);
}

.hero-inner{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:26px;
  align-items:center;
}

.hero-bubbles{
  position:absolute;
  inset:-90px -90px -90px -90px;
  pointer-events:none;
  opacity:.95;
  background:
    radial-gradient(120px 120px at 10% 22%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(150px 150px at 22% 68%, rgba(255,216,238,.65) 0%, rgba(255,216,238,0) 62%),
    radial-gradient(190px 190px at 70% 24%, rgba(237,226,255,.75) 0%, rgba(237,226,255,0) 62%),
    radial-gradient(150px 150px at 88% 72%, rgba(199,178,255,.55) 0%, rgba(199,178,255,0) 62%);
}

/* Cloudy bottom edge */
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:110px;
  pointer-events:none;
  background:
    radial-gradient(120px 60px at 10% 80%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(160px 80px at 26% 90%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 72%),
    radial-gradient(190px 90px at 46% 85%, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 74%),
    radial-gradient(170px 85px at 66% 92%, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 74%),
    radial-gradient(200px 95px at 86% 88%, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 74%);
  filter: blur(.2px);
}

.hero-copy{ position:relative; max-width: 540px; }

.logo-row{
  display:flex;
  gap:14px;
  align-items:center;
}

.logo-big{
  width:58px;height:58px;
  display:grid;place-items:center;
  border-radius:22px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(184,156,255,.18);
  box-shadow: var(--shadow-soft);
}

.logo-big-img{
  width:44px;
  height:44px;
  object-fit:contain;
  display:block;
}

.h1{
  margin:0;
  font-family:"Nunito","M PLUS Rounded 1c",sans-serif;
  font-weight:900;
  font-size:56px;
  line-height:1.0;
  letter-spacing:.2px;
  color: var(--ink);
}

.subtitle{
  margin:12px 0 16px;
  font-size:22px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:.1px;
  color: rgba(42,33,64,.78);
}

.mission-card{
  margin-top:18px;
  padding:24px 26px;
  border-radius: 38px;
  background:
    radial-gradient(420px 220px at 15% 20%, rgba(255,196,225,.55) 0%, rgba(255,196,225,0) 60%),
    radial-gradient(520px 260px at 90% 10%, rgba(199,178,255,.65) 0%, rgba(199,178,255,0) 62%),
    rgba(255,255,255,.92);
  border: 1px solid rgba(184,156,255,.26);
  box-shadow: 0 26px 70px rgba(111,73,196,.18);
  position:relative;
}

.mission-card::before{
  content:"✦";
  position:absolute;
  top: 16px;
  right: 18px;
  font-weight: 900;
  color: rgba(184,156,255,.65);
}

.mission-title{
  font-size:20px;
  font-weight:900;
  letter-spacing:.2px;
  margin-bottom:10px;
}

.mission-text{
  margin:0;
  font-size:17px;
  line-height:1.8;
  font-weight:900;
  color: rgba(42,33,64,.72);
}

.hero-micro{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.chip{
  padding:9px 14px;
  border-radius:999px;
  background: rgba(255,255,255,.85);
  border:1px solid rgba(184,156,255,.18);
  color: rgba(42,33,64,.68);
  font-weight:900;
  font-size:13px;
  box-shadow: 0 10px 18px rgba(111,73,196,.08);
}

.hero-visual{ position:relative; }

.visual-card{
  position:relative;
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(184,156,255,.18);
  padding:14px;
  box-shadow: var(--shadow);
  overflow:hidden;
}

.visual-bubble{
  position:absolute;
  inset:-60px -60px -60px -60px;
  pointer-events:none;
  background:
    radial-gradient(320px 320px at 18% 40%, rgba(255,196,225,.55) 0%, rgba(255,196,225,0) 62%),
    radial-gradient(360px 360px at 70% 18%, rgba(199,178,255,.65) 0%, rgba(199,178,255,0) 64%),
    radial-gradient(320px 320px at 82% 82%, rgba(255,216,238,.62) 0%, rgba(255,216,238,0) 62%);
  opacity:.95;
}

.hero-image{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 30px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(184,156,255,.14);
  object-fit: cover;
}

/* ---------------- Sections ---------------- */
.section{ padding:62px 0; }

.section-soft{
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(237,226,255,.55) 0%, rgba(237,226,255,0) 65%),
    radial-gradient(900px 420px at 90% 0%, rgba(255,216,238,.45) 0%, rgba(255,216,238,0) 65%),
    rgba(255,255,255,.55);
  border-top: 1px solid rgba(184,156,255,.16);
  border-bottom: 1px solid rgba(184,156,255,.16);
}

.section-head{ margin-bottom:18px; }

.h2{
  margin:0 0 10px;
  color: var(--ink);
  font-size:34px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:.2px;
  font-family:"Nunito","M PLUS Rounded 1c",sans-serif;
}

.lead{
  margin:0;
  color: rgba(42,33,64,.64);
  font-weight:900;
}

.h3{
  margin:0 0 8px;
  font-size:18px;
  font-weight:900;
  color: var(--ink);
  font-family:"Nunito","M PLUS Rounded 1c",sans-serif;
}

.p{
  margin:0;
  color: rgba(42,33,64,.62);
  font-weight:900;
}

/* ---------------- Why cards ---------------- */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  margin-top:20px;
}

.card{
  background: linear-gradient(180deg, var(--card) 0%, var(--cardTint) 100%);
  border-radius: var(--radius-xl);
  padding:20px 18px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(184,156,255,.18);
  position:relative;
  overflow:hidden;
}

.card::before{
  content:"";
  position:absolute;
  inset:-40px -40px auto auto;
  width:180px;height:180px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,196,225,.30) 0%, rgba(255,196,225,0) 62%);
}

/* Why icons (floating circle) */
#why,
#why .container,
#why .grid-3,
#why .card{
  overflow: visible;
}

#why .grid-3{
  margin-top: 85px;
}

#why .card{
  text-align: center;
  padding-top: 86px;
}

#why .icon{
  width: 157px;
  height: 157px;
  border-radius: 50%;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  position: absolute;
  top: -66px;
  left: 50%;
  transform: translateX(-50%);

  background: rgba(255,255,255,.98);
  z-index: 2;

  border: 3px solid rgba(184,156,255,.28);
  box-shadow: 0 18px 40px rgba(111,73,196,.16);
}

#why .icon-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
}

/* ---------------- Product ---------------- */
.product-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  margin-top:20px;
}

.product-card{
  background: linear-gradient(180deg, var(--card) 0%, var(--cardTint) 100%);
  border-radius: var(--radius-xl);
  padding:20px 18px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(184,156,255,.18);
  position:relative;
  overflow:hidden;

  display:flex;
  flex-direction:column;
}

.product-card::after{
  content:"";
  position:absolute;
  inset:-70px -70px auto auto;
  width:240px;height:240px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,196,225,.26) 0%, rgba(255,196,225,0) 62%);
}

.product-top{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:12px;
  position:relative;
  z-index:1;
  min-height: 78px;
}

.product-badge{
  width:44px;
  height:44px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-weight:900;
  color: rgba(42,33,64,.78);
  background: linear-gradient(135deg, rgba(199,178,255,.70) 0%, rgba(255,196,225,.55) 100%);
  border: 1px solid rgba(184,156,255,.18);
  box-shadow: 0 14px 28px rgba(111,73,196,.10);
  flex: 0 0 auto;
}

.product-title .h3{ margin:0; }
.product-sub{
  margin-top:2px;
  font-weight:900;
  font-size:12.5px;
  color: rgba(42,33,64,.50);
}

.product-media{
  margin: 12px 0 14px;
  border-radius: 28px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(184,156,255,.16);
  padding:12px;
  box-shadow: 0 18px 40px rgba(111,73,196,.10);
  position:relative;
  overflow:hidden;
  z-index:1;

  height: clamp(280px, 22vw, 330px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-media .screen{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  border-radius: 18px;
}

/* Therapist dashboard: stacked 2 screens */
.product-media.media-stack{
  display:grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap:12px;
  align-items:stretch;
  justify-items:stretch;
  height: clamp(360px, 26vw, 460px);
}

.product-media.media-stack .screen{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:18px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(184,156,255,.14);
}

/* Feature list */
.feature-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
  position:relative;
  z-index:1;
}

.feature-list li{
  position:relative;
  padding-left:28px;
  font-weight:900;
  color: rgba(42,33,64,.62);
  line-height:1.55;
}

.feature-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:2px;
  width:18px;
  height:18px;
  border-radius:8px;
  display:grid;
  place-items:center;
  font-size:12px;
  color: rgba(42,33,64,.74);
  background: rgba(199,178,255,.42);
  border: 1px solid rgba(184,156,255,.18);
}

/* ---------------- Connect ---------------- */
.connect-card{
  margin-top:22px;
  border-radius: var(--radius-xl);
  padding: 28px 26px;

  background:
    radial-gradient(520px 260px at 12% 18%, rgba(255,216,238,.55) 0%, rgba(255,216,238,0) 62%),
    radial-gradient(540px 280px at 92% 12%, rgba(199,178,255,.60) 0%, rgba(199,178,255,0) 64%),
    rgba(255,255,255,.78);
  border: 1px solid rgba(184,156,255,.18);
  box-shadow: var(--shadow);

  display:grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  gap:18px;
  align-items:center;
  text-align:left;

  max-width: 980px;
  margin-left:auto;
  margin-right:auto;
}

.connect-head .h3{
  font-size: 22px;
  margin-bottom: 10px;
}
.connect-head .p{
  font-size: 16px;
  line-height: 1.6;
  color: rgba(42,33,64,.64);
}

.connect-img{
  width:100%;
  height: clamp(200px, 18vw, 260px);
  object-fit: contain;
  display:block;

  border-radius: 28px;
  border: 1px solid rgba(184,156,255,.16);
  background: rgba(255,255,255,.65);
  margin:0;
}

/* ---------------- Team ---------------- */
#team .section-head{ margin-bottom: 32px; }

.team-grid{
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 92px;
  align-items: stretch;
  overflow: visible;
}

.team-person{
  position: relative;
  grid-column: span 2;
  padding: 96px 18px 20px;
  background: linear-gradient(180deg, var(--card) 0%, var(--cardTint) 100%);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(184,156,255,.18);
  overflow: visible;
}

.team-person:nth-child(4){ grid-column: 2 / span 2; }
.team-person:nth-child(5){ grid-column: 4 / span 2; }

.team-face{
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
  width: 112px;
  height: 112px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.95);
  border: 3px solid rgba(184,156,255,.28);
  box-shadow: 0 18px 40px rgba(111,73,196,.16);
  z-index: 3;
}

.team-face img{
  width: 78px;
  height: 78px;
  object-fit: contain;
  display: block;
}

.team-body{ text-align:left; position:relative; z-index:1; }

.role{
  font-weight:900;
  color: rgba(42,33,64,.50);
  font-size:13px;
  margin-top:2px;
  margin-bottom:8px;
}

/* ---------------- Contact ---------------- */
.contact{ padding:68px 0 76px; }

.contact-card{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,196,225,.35);
  border-radius: var(--radius-xl);
  padding:30px 20px;
  box-shadow: var(--shadow);
  text-align:left;
}

.contact-form{
  margin-top: 18px;
  display: grid;
  gap: 14px;
}

.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field{ display: grid; gap: 8px; }

.label{
  font-weight: 900;
  color: rgba(42,33,64,.70);
  font-size: 13.5px;
}

.input,
.textarea{
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(184,156,255,.24);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 26px rgba(111,73,196,.08);
  padding: 12px 14px;
  font-family: inherit;
  font-weight: 800;
  color: rgba(42,33,64,.82);
  outline: none;
}

.textarea{
  resize: vertical;
  min-height: 140px;
}

.input:focus,
.textarea:focus{
  border-color: rgba(255,196,225,.65);
  box-shadow: 0 16px 34px rgba(255,196,225,.22);
}

/* Footer */
.footer{
  padding:18px 0 30px;
  color: rgba(42,33,64,.55);
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-weight:900;
  font-size:13px;
}

/* =========================
   Responsive: Tablet
   ========================= */
@media (max-width: 980px){
  .container{ width:min(1120px, calc(100% - 36px)); }

  .hero-inner{
    grid-template-columns: 1fr;
    gap:18px;
  }
  .hero-copy{ max-width: none; }
  .h1{ font-size: 48px; }
  .subtitle{ font-size: 20px; }

  .grid-3{ grid-template-columns: repeat(2, 1fr); }

  .product-grid{ grid-template-columns: repeat(2, 1fr); }
  .product-media{ height: clamp(300px, 58vw, 520px); }
  .product-media.media-stack{ height: clamp(420px, 80vw, 640px); }

  .connect-card{
    max-width: 720px;
    grid-template-columns: 1fr;
    text-align:center;
    padding: 24px 20px;
  }
  .connect-img{ height: clamp(220px, 55vw, 360px); }

  .team-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 76px;
  }
  .team-person{
    grid-column: span 1;
    padding-top: 90px;
  }
  .team-person:nth-child(4),
  .team-person:nth-child(5){
    grid-column: span 1;
  }
  .team-face{
    width: 104px;
    height: 104px;
    top: -38px;
  }
  .team-face img{
    width: 72px;
    height: 72px;
  }

  .footer-inner{ flex-direction:column; align-items:flex-start; }
}

/* =========================
   Responsive: Mobile
   ========================= */
@media (max-width: 760px){
  .header-inner{
    flex-wrap: wrap;
    gap: 10px;
  }
  .nav{
    width: 100%;
    justify-content: center;
    order: 3;
  }

  .form-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 620px){
  .container{ width:min(1120px, calc(100% - 28px)); }

  .section{ padding: 52px 0; }
  .h2{ font-size: 30px; }

  .h1{ font-size: 42px; }
  .subtitle{ font-size: 18px; }
  .mission-card{ padding: 20px 18px; border-radius: 32px; }
  .mission-title{ font-size: 18px; }
  .mission-text{ font-size: 16px; }

  /* Why: float icon is big, so scale down */
  #why .grid-3{ margin-top: 68px; }
  #why .card{ padding-top: 78px; }
  #why .icon{
    width: 132px;
    height: 132px;
    top: -56px;
  }

  .grid-3{ grid-template-columns: 1fr; }

  .product-grid{ grid-template-columns: 1fr; }
  .product-media{ height: auto; }
  .product-media .screen{ height: auto; }
  .product-media.media-stack{ height: auto; }

  .connect-card{ padding: 22px 18px; }
  .connect-head .h3{ font-size: 20px; }
  .connect-head .p{ font-size: 15px; }

  .team-grid{
    grid-template-columns: 1fr;
    row-gap: 64px;
  }
  .team-person{
    grid-column: auto;
    padding-top: 84px;
  }
  .team-face{
    width: 96px;
    height: 96px;
    top: -34px;
  }
  .team-face img{
    width: 66px;
    height: 66px;
  }

  .contact-card{ padding: 24px 16px; }
}
/* ===== TEAM avatar: no square, cut-out circle look ===== */
#team .team-face{
  overflow: visible !important;              /* 外側の影を見せる */
  background: rgba(255,255,255,.96) !important;
  border: 3px solid rgba(184,156,255,.30) !important;

  /* くりぬき風: 外側にふわっと影 + 輪郭 */
  box-shadow:
    0 18px 40px rgba(111,73,196,.16),
    0 0 0 8px rgba(255,255,255,.80);         /* 外側の白いリング */
}

#team .team-face img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;              /* 顔写真なら cover の方が自然 */
  border-radius: 999px !important;           /* ← これで■が消える */
  display: block;

  /* 内側リング（くりぬき感を強める） */
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.92);
}

/* ===== LinkedIn link (footer) ===== */
.social-link{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:10px 14px;
  border-radius:999px;

  background: rgba(255,255,255,.70);
  border: 1px solid #0A66C2(184,156,255,.18);
  box-shadow: 0 10px 22px rgba(111,73,196,.08);

  color: #0A66C2(42,33,64,.74);
  font-weight: 900;
  font-size: 14px;

  transition: transform .12s ease, filter .12s ease;
}

.social-link:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.li-icon{
  width: 18px;
  height: 18px;
  display:block;
  fill: currentColor;
}
/* ===== Header icon button (LinkedIn) ===== */
.icon-btn{
  width: 42px;
  height: 42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(184,156,255,.22);
  box-shadow: 0 10px 22px rgba(111,73,196,.08);

  color: rgba(42,33,64,.74);
  transition: transform .12s ease, filter .12s ease;
}

.icon-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.icon-btn:active{
  transform: translateY(0px);
}

.icon-btn .li-icon{
  width: 18px;
  height: 18px;
  display:block;
  fill: currentColor;
}
/* ===== LinkedIn blue for header icon ===== */
.icon-btn{
  color: #0A66C2; /* LinkedIn blue */
  border-color: rgba(10,102,194,.25);
}

.icon-btn:hover{
  filter: none;
  background: rgba(10,102,194,.08);
  border-color: rgba(10,102,194,.35);
}

.icon-btn:active{
  background: rgba(10,102,194,.12);
}

/* =========================
   Mobile fixes: dashboard + why icon overlap
   ========================= */
@media (max-width: 620px){

  /* --- WHY: 丸アイコンが文字と被らないように（1カラム用） --- */
  #why .grid-3{
    margin-top: 82px !important; /* セクション見出しとの距離 */
    gap: 92px !important;        /* ここが重要: カード間を広げて重なり防止 */
  }

  #why .card{
    padding-top: 96px !important; /* アイコンの下から文字が始まるように */
  }

  #why .icon{
    width: 124px !important;
    height: 124px !important;
    top: -54px !important;        /* はみ出し量を少し抑えて重なりにくく */
  }

  /* --- PRODUCT: Therapist dashboard が下に寄るのを修正 --- */
  .product-media{
    align-items: flex-start !important; /* 画像を上寄せに */
  }

  .product-media.media-stack{
    height: auto !important;
    grid-template-rows: auto auto !important; /* モバイルでは自然な高さに */
    align-content: start !important;
  }

  .product-media.media-stack .screen{
    height: auto !important; /* 100%固定を解除 */
  }
}

/* ===== Footer LinkedIn: blue ===== */
.social-link{
  color: #0A66C2;
  border-color: rgba(10,102,194,.22);
}

.social-link:hover{
  filter: none;
  background: rgba(10,102,194,.08);
  border-color: rgba(10,102,194,.34);
}

.social-link:active{
  background: rgba(10,102,194,.12);
}

h1 {
  text-align: center;
  margin: 35px 0 20px 0 !important;
}

/* =========================
   Connect steps (polish)
   ========================= */
.connect-steps{
  list-style:none;
  padding:0;
  margin:16px 0 0;
  display:grid;
  gap:12px;
}

.connect-step-item{
  display:flex;
  align-items:flex-start;
  gap:12px;

  padding:12px 14px;
  border-radius:22px;

  background: rgba(255,255,255,.76);
  border: 1px solid rgba(184,156,255,.18);
  box-shadow: 0 14px 28px rgba(111,73,196,.08);

  position:relative; /* ← これも重複してたのでここに統合 */
}

.connect-step-badge{
  width:34px;
  height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  flex:0 0 auto;

  font-weight:900;
  color: rgba(42,33,64,.78);
  background: linear-gradient(135deg, rgba(199,178,255,.75) 0%, rgba(255,196,225,.55) 100%);
  border: 1px solid rgba(184,156,255,.22);
  box-shadow: 0 12px 22px rgba(111,73,196,.10);
}

/* つながって見える縦ライン（カード側に1本だけ） */
.connect-step-item:not(:last-child)::after{
  content:"";
  position:absolute;
  left:31px;
  top:46px;
  bottom:-12px;
  width:2px;
  border-radius:2px;
  background: linear-gradient(
    to bottom,
    rgba(184,156,255,.42) 0%,
    rgba(184,156,255,.22) 60%,
    rgba(184,156,255,.10) 100%
  );
}

.connect-step-text{
  font-weight:900;
  color: rgba(42,33,64,.70);
  line-height:1.55;
  padding-top:3px;
}

@media (max-width: 980px){
  .connect-steps{
    text-align:left;
    max-width:520px;
    margin-left:auto;
    margin-right:auto;
  }
}