/* =========================================================
   UI FIX V11 — service CTA / profile keywords / card outlines
   Loaded LAST. 2026-09-03
   ========================================================= */
:root{
  --v11-yellow:#F2B200;
  --v11-navy:#163F63;
  --v11-ink:#111214;
  --v11-white:#FFFFFF;
  --v11-ivory:#FFF8E8;
}

/* ---------------------------------------------------------
   HOME / SERVICES: "詳しく見る" is an obvious black pill CTA
   on all five service cards. Keep the card itself unchanged.
   --------------------------------------------------------- */
html body.home-page #services .service-card .service-arrow{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-height:44px !important;
  margin-top:18px !important;
  padding:11px 20px !important;
  border:2px solid var(--v11-ink) !important;
  border-radius:999px !important;
  background:var(--v11-ink) !important;
  color:var(--v11-white) !important;
  -webkit-text-fill-color:var(--v11-white) !important;
  font-size:14px !important;
  font-weight:950 !important;
  line-height:1.15 !important;
  letter-spacing:.01em !important;
  box-shadow:none !important;
  opacity:1 !important;
  visibility:visible !important;
}
html body.home-page #services .service-card .service-arrow *{
  color:var(--v11-white) !important;
  -webkit-text-fill-color:var(--v11-white) !important;
}

/* ---------------------------------------------------------
   HOME PROFILE — same language on desktop and mobile:
   facts = plain #keywords, disclosure = unmistakable white button.
   --------------------------------------------------------- */
html body.home-page #profile .profile-points{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:flex-start !important;
  gap:10px 18px !important;
  margin:18px 0 24px !important;
  padding:0 !important;
  list-style:none !important;
}
html body.home-page #profile .profile-points li,
html body.home-page #profile .profile-points li:last-child:nth-child(odd){
  display:inline !important;
  flex:0 1 auto !important;
  width:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--v11-white) !important;
  -webkit-text-fill-color:var(--v11-white) !important;
  font-size:14px !important;
  font-weight:900 !important;
  line-height:1.55 !important;
}
html body.home-page #profile .profile-points li::before{
  content:'#' !important;
  display:inline !important;
  margin-right:2px !important;
  color:var(--v11-white) !important;
  -webkit-text-fill-color:var(--v11-white) !important;
  font-weight:950 !important;
}
html body.home-page #profile .profile-details{
  margin-top:22px !important;
  border:0 !important;
}
html body.home-page #profile .profile-details summary{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  width:100% !important;
  min-height:56px !important;
  padding:15px 22px !important;
  border:2px solid var(--v11-white) !important;
  border-radius:999px !important;
  background:var(--v11-white) !important;
  color:var(--v11-ink) !important;
  -webkit-text-fill-color:var(--v11-ink) !important;
  font-size:15px !important;
  font-weight:950 !important;
  line-height:1.25 !important;
  cursor:pointer !important;
  box-shadow:0 6px 0 rgba(0,0,0,.14) !important;
}
html body.home-page #profile .profile-details summary::after{
  content:'開く ＋' !important;
  color:var(--v11-ink) !important;
  -webkit-text-fill-color:var(--v11-ink) !important;
  font-weight:950 !important;
  white-space:nowrap !important;
}
html body.home-page #profile .profile-details[open] summary::after{
  content:'閉じる −' !important;
}

/* ---------------------------------------------------------
   WHITE CARDS ON IVORY / WHITE SECTIONS:
   use the brand yellow as a clear outline on HOME + all services.
   --------------------------------------------------------- */
html body.home-page .theme-ivory :is(
  .why2-process-card,
  .why2-perspective-card,
  .why2-mobile-stage,
  .why2-mobile-perspective
),
html body.service-page .theme-ivory :is(
  .decision-strip,
  .problem-card,
  .scope-card,
  .strength-card,
  .design-card,
  .use-card,
  .fit-card,
  .audience-card,
  .assurance-item,
  .price-simple-item,
  .why-mobile-flow-card,
  .why-mobile-view-card,
  .why2-process-card,
  .why2-perspective-card
),
html body.service-page .overview-section.theme-ivory .decision-strip{
  border-color:var(--v11-yellow) !important;
  border-width:2px !important;
  border-style:solid !important;
}

/* FAQ and related-service tiles may also be white on light sections. */
html body.service-page .theme-ivory .faq details,
html body.service-page .theme-ivory #related-services a,
html body.service-page #related-services.theme-ivory a{
  border-color:var(--v11-yellow) !important;
}

/* Preserve deliberate top accent while also giving a full yellow edge. */
html body.service-page .theme-ivory :is(.use-card,.scope-card,.price-simple-item){
  border-left:2px solid var(--v11-yellow) !important;
  border-right:2px solid var(--v11-yellow) !important;
  border-bottom:2px solid var(--v11-yellow) !important;
}

/* ---------------------------------------------------------
   Dark mode must not undo any of the deliberate colors above.
   --------------------------------------------------------- */
@media(prefers-color-scheme:dark){
  html body.home-page #services .service-card .service-arrow,
  html body.home-page #services .service-card .service-arrow *{
    background:var(--v11-ink) !important;
    color:var(--v11-white) !important;
    -webkit-text-fill-color:var(--v11-white) !important;
  }
  html body.home-page #profile .profile-points li,
  html body.home-page #profile .profile-points li::before{
    color:var(--v11-white) !important;
    -webkit-text-fill-color:var(--v11-white) !important;
  }
  html body.home-page #profile .profile-details summary,
  html body.home-page #profile .profile-details summary::after{
    background:var(--v11-white) !important;
    color:var(--v11-ink) !important;
    -webkit-text-fill-color:var(--v11-ink) !important;
  }
}

@media(max-width:767px){
  html body.home-page #services .service-card .service-arrow{
    min-height:42px !important;
    padding:10px 18px !important;
    font-size:13px !important;
  }
  html body.home-page #profile .profile-points{
    gap:9px 14px !important;
  }
  html body.home-page #profile .profile-points li{
    font-size:13px !important;
  }
}