/* YMK redesign - minimal, fast, readable */
:root{
  --bg:#ffffff;
  --panel:#F4F6F8;
  --panel2:#ffffff;
  --text:#0B0E14;
  --muted:#4B5563;
  --brand:#F59E0B;
  --brand2:#F97316;
  --line:#E5E7EB;
  --ok:#22C55E;
  --shadow: 0 16px 40px rgba(2,6,23,.12);
  --radius: 18px;
  --radiusSm: 12px;
  --max: 1240px;
  --font: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 800px at 20% -10%, rgba(245,158,11,.10), transparent 60%),
                         radial-gradient(900px 700px at 90% 10%, rgba(249,115,22,.08), transparent 55%),
                         var(--bg);
          color:var(--text); font-family:var(--font);}
a{color:inherit;text-decoration:none}
a:hover{opacity:.9}
img{max-width:100%;height:auto}
.container{width:min(var(--max), calc(100% - 40px)); margin-inline:auto;}
.skip{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:16px;top:16px;width:auto;height:auto;background:#fff;color:#000;padding:10px 12px;border-radius:10px;z-index:9999}
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter: blur(10px);border-bottom:1px solid rgba(229,231,235,.95)}
.header__inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:12px}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.brand__mark{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:linear-gradient(135deg, rgba(245,158,11,.95), rgba(249,115,22,.9));
  color:#0B0E14;font-weight:800;letter-spacing:.06em}
.brand__text{font-weight:700;font-size:14px;color:var(--text);opacity:.95}

/* Prevent the header tagline from collapsing into vertical "one character per line" wrapping on small screens */
.brand__text{white-space:normal;line-break:strict}
.brand--footer .brand__mark{width:40px;height:40px;border-radius:12px}
.nav{display:flex;align-items:center;gap:12px}
.nav__panel{display:flex;align-items:center;gap:16px}
.nav__panel a{font-size:14px;color:var(--text);opacity:.92}
.nav__panel a.btn{opacity:1}
.nav__toggle{display:none; background:transparent;border:1px solid rgba(17,24,39,.18);border-radius:12px;padding:10px 12px;color:var(--text)}
.nav__toggleBars{display:block;width:18px;height:12px;position:relative}
.nav__toggleBars::before,.nav__toggleBars::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--text);border-radius:2px}
.nav__toggleBars::before{top:1px}
.nav__toggleBars::after{bottom:1px}
.sr{position:absolute;left:-999px}
@media (max-width: 860px){
  .nav__panel{position:static;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px;
    background:transparent;border:none;border-radius:0;padding:0;min-width:0;box-shadow:none;display:flex;}
  .nav__panel a{padding:8px 8px;border-radius:10px}
}

/* Mobile header: not sticky, prevent ultra-narrow wrap ("vertical" looking text) */
@media (max-width: 640px){
  .header{position:static;backdrop-filter:none}
  .header__inner{flex-direction:column;align-items:flex-start;padding:10px 0}
  .brand{width:100%}
  .brand__logo{height:44px}
  .brand__text{font-size:13px;line-height:1.3;white-space:normal;overflow-wrap:normal;word-break:keep-all}
  .nav{width:100%}
  .nav__panel{gap:10px}
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:14px;
  border:1px solid rgba(255,255,255,.16); font-weight:700}
.btn--sm{padding:10px 12px;border-radius:12px;font-size:14px}
.btn--primary{background:linear-gradient(135deg, rgba(245,158,11,.95), rgba(249,115,22,.9)); color:#0B0E14;border:none}
.btn--ghost{background:transparent}
.hero{padding:56px 0 18px}
.hero__inner{display:grid;grid-template-columns: 1.2fr .8fr;gap:28px;align-items:center}
.kicker{color:rgba(245,158,11,.95);font-weight:700;letter-spacing:.06em;margin:0 0 10px}
.hero h1{font-size:40px;line-height:1.2;margin:0 0 14px}
.hero strong{color:rgba(245,158,11,.95)}
.lead{color:var(--muted);font-size:16px;line-height:1.8;margin:0 0 20px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}
.trust{display:flex;gap:14px;flex-wrap:wrap;list-style:none;padding:0;margin:18px 0 0}
.trust li{color:var(--text);opacity:.92;font-size:14px;border:1px solid rgba(17,24,39,.10);padding:8px 10px;border-radius:999px;background:rgba(0,0,0,.02)}
.card{background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.96));
  border:1px solid rgba(229,231,235,.95); border-radius: var(--radius); padding:18px; box-shadow: 0 10px 26px rgba(2,6,23,.08)}
.card h3{margin:4px 0 10px;font-size:18px}
.muted{color:var(--muted)}
.small{font-size:12px}
.list{margin:12px 0 0;padding-left:18px;color:var(--text);opacity:.92}
.list li{margin:6px 0}
.photo{padding:18px}
.photo__top{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
/* v11-like bottom layout: badge (left) + metric (right) then ideal text */
.photo__btm{display:block}
.photo__btmRow{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.photo__mid{margin:16px 0}
\.line{height:10px;border-radius:999px;background:rgba(2,6,23,.06);margin:10px 0}
.line:nth-child(2){width:78%}
.line:nth-child(3){width:62%}
.badge{font-size:12px;font-weight:800;padding:6px 10px;border-radius:999px;background:rgba(2,6,23,.06);border:1px solid rgba(2,6,23,.08)}
.badge--good{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.3);color:rgba(34,197,94,.95)}
.metric__label{font-size:12px;color:var(--muted)}
.metric__value{font-size:28px;font-weight:800}
.photo__hint{margin-top:12px;color:rgba(167,176,192,.9);font-size:12px}
.section{padding:54px 0}
.section--alt{background:linear-gradient(180deg, rgba(2,6,23,.02), rgba(255,255,255,0))}
.section__head{margin-bottom:18px}
.section__head h2{font-size:28px;margin:0 0 10px}
.section__head p{margin:0;color:var(--muted);line-height:1.8}
.grid{display:grid;gap:16px}
.grid--3{grid-template-columns: repeat(3, 1fr)}
@media (max-width: 960px){
  .hero__inner{grid-template-columns: 1fr;gap:18px}
  .hero h1{font-size:34px}
  .grid--3{grid-template-columns: 1fr}
}
.ctaBand{margin-top:18px;padding:18px;border-radius: var(--radius);
  border:1px solid rgba(245,158,11,.25);
  background: radial-gradient(700px 180px at 10% 10%, rgba(245,158,11,.15), transparent 60%),
              rgba(255,255,255,.03);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ctaBand h3{margin:0 0 6px}
.ctaBand p{margin:0}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.steps li{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius: var(--radiusSm);
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)}
.steps__n{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;
  background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.35);color:rgba(245,158,11,.95);font-weight:900}
.steps h3{margin:0 0 6px;font-size:16px}
.steps p{margin:0}
.profile{display:grid;grid-template-columns: 1.2fr .8fr;gap:16px;align-items:start}
.profile__side .btn{margin-top:8px}
.pillRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.pill{font-size:12px;font-weight:700;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10)}
@media (max-width: 960px){ .profile{grid-template-columns: 1fr} }
.accordion details{padding:14px}
.accordion summary{cursor:pointer;font-weight:700}
.accordion p{margin:10px 0 0;line-height:1.8}
.contact{display:grid;grid-template-columns: 1fr 1fr;gap:16px;align-items:start}
.contact__box{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.contact__item{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:14px;border:1px solid rgba(229,231,235,.95);background:#fff}

/* Calendly embed card */
.calendlyCard{margin-top:14px;padding:16px}
.calendlyCard__head{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.calendlyCard__title{font-weight:900}
.calendly-inline-widget{width:100%}
.form label{display:block;margin:10px 0 0;font-weight:700;font-size:13px}
.form input,.form textarea{width:100%;margin-top:6px;padding:12px 12px;border-radius:12px;
  border:1px solid rgba(229,231,235,.95);background:#fff;color:var(--text);outline:none}
.form input:focus,.form textarea:focus{border-color:rgba(245,158,11,.55)}
.form button{margin-top:12px;width:100%}
@media (max-width: 960px){ .contact{grid-template-columns: 1fr} }
@media (max-width: 560px){ .calendly-inline-widget{height: 680px !important} }
.footer{padding:26px 0;border-top:1px solid rgba(229,231,235,.95);background:#fff}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer__links{display:flex;gap:14px}
.footer__links a{color:var(--muted);font-size:14px}


/* ---- Enhancements: diagnosis + sticky CTA + form status ---- */
.diag{display:grid;grid-template-columns: 1.1fr .9fr;gap:16px;align-items:start}
.diag__grid{display:grid;grid-template-columns: 1fr 1fr;gap:12px;margin:12px 0}
.diag label{font-weight:700;font-size:13px;display:block}
.diag input{width:100%;margin-top:6px;padding:12px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);color:var(--text);outline:none}
.diag input:focus{border-color:rgba(245,158,11,.55)}
.diag__result{margin-top:12px;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)}
@media (max-width: 960px){ .diag{grid-template-columns:1fr} .diag__grid{grid-template-columns:1fr} }

.contact__item--note{justify-content:space-between;align-items:flex-start;gap:12px}
.contact__title{font-weight:800}

.form__status{margin-top:10px}

.stickyCta{position:fixed;left:0;right:0;bottom:0;display:none;gap:10px;justify-content:center;align-items:center;
  padding:12px 14px;z-index:60;background:rgba(255,255,255,.92);backdrop-filter: blur(10px);border-top:1px solid rgba(229,231,235,.95)}
.stickyCta__btn{flex:1;max-width:520px;text-align:center;padding:14px 16px;border-radius:14px;font-weight:900;
  background:linear-gradient(135deg, rgba(245,158,11,.95), rgba(249,115,22,.9));color:#0B0E14}
.stickyCta__btn--ghost{background:transparent;color:var(--text);border:1px solid rgba(17,24,39,.16)}
@media (max-width: 960px){ .stickyCta{display:flex} body{padding-bottom:74px} }


/* Added: logo, profile photo, pricing */
.brand__logo{height:57px;width:auto;display:block}
.brand--footer .brand__logo{height:51px}

/* Thanks page: slightly larger logo for readability */
/* Thanks page: make the logo 0.75x compared with the main pages */
.page--thanks .header .brand__logo{height:58.5px}
.page--thanks .footer .brand__logo{height:51.75px}

.profile__intro{display:flex;gap:16px;align-items:flex-start;margin-top:10px}
.profile__photo{width:160px;aspect-ratio:1/1;border-radius:16px;object-fit:cover;border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.profile__bio p{margin-top:0}

.priceBox{margin-top:14px;padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)}
.priceBox__label{font-weight:800;letter-spacing:.06em;color:rgba(245,158,11,.95);font-size:12px}
.priceBox__row{display:flex;justify-content:space-between;gap:10px;margin-top:8px}
.priceBox__item{color:var(--text);opacity:.92;font-size:13px}
.priceBox__price{font-weight:800;font-size:14px}
.priceBox__note{margin-top:8px;color:var(--muted);font-size:12px}

@media (max-width: 860px){
  .profile__intro{flex-direction:column}
  .profile__photo{width:140px}
}




/* --- Added for packs (image-only cards) and details --- */
.grid--2{grid-template-columns: repeat(2, 1fr)}
@media (max-width: 960px){ .grid--2{grid-template-columns:1fr} }

.servicesGrid{align-items:stretch}
.serviceCard{display:block;border-radius: var(--radius);overflow:hidden;border:1px solid rgba(229,231,235,.95);background:#fff;box-shadow: 0 10px 26px rgba(2,6,23,.06)}
.serviceCard img{display:block;width:100%;height:auto}
.serviceCard:hover{transform: translateY(-1px)}

.photo__bullets{margin:0;padding-left:18px;color:var(--text);opacity:.92;font-size:14px;line-height:1.7}
.photo__bullets li{margin:6px 0}
.photo__ideal{margin-top:10px;display:flex;flex-direction:column;gap:6px;max-width:none;text-align:left}
.photo__idealSub{color:var(--muted);font-size:12px;font-weight:700}
.metric--ok .metric__value{color:rgba(34,197,94,.95)}

/* --- Added: outline button / service card meta / hero card sizing --- */
.btn--outline{background:#fff;border:1px solid rgba(17,24,39,.18);color:var(--text)}
.btn--outline:hover{background:rgba(2,6,23,.03)}

.hero__media{display:flex;justify-content:flex-end}

.serviceCard--link{transition:transform .15s ease, box-shadow .15s ease}
.serviceCard--link:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(2,6,23,.10)}
.serviceCard__meta{padding:14px 16px}
.serviceCard__meta h3{margin:0 0 6px;font-size:18px}
.serviceCard__meta p{margin:0;color:var(--muted);line-height:1.7;font-size:14px}

/* --- Added: cases list subline --- */
/* Align the "月商…" line with the main line (no extra indent). */
.caseSub{display:inline;margin-left:0;padding-left:0;color:var(--muted);font-weight:700}

/* Keep long company names inside the card. */
#cases .list:not(.vendors) li{overflow-wrap:anywhere;word-break:break-word}

/* 主な取引実績：会社名を折り返さない（狭い画面では折り返し許可） */
.vendors li{white-space:nowrap;overflow-wrap:normal;word-break:normal}
@media (max-width: 960px){
  .vendors li{white-space:normal}
}

/* 「他多数」を箇条書き本文の開始位置に合わせる */
.listMore{margin:10px 0 0;padding-left:18px}

/* --- Form confirmation "page" (modal) --- */
.confirmOverlay{position:fixed;inset:0;background:rgba(2,6,23,.45);display:none;align-items:center;justify-content:center;padding:16px;z-index:9999}
.confirmOverlay[data-open="true"]{display:flex}
.confirmCard{width:100%;max-width:760px;border-radius:18px}
.confirmTitle{font-weight:900;font-size:16px}
.confirmList{margin-top:14px;display:grid;gap:10px}
.confirmRow{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:start}
.confirmKey{color:var(--muted);font-weight:800}
.confirmVal{white-space:pre-wrap;line-height:1.7}
.confirmActions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
@media (max-width: 520px){
  .confirmRow{grid-template-columns:1fr;gap:6px}
  .confirmActions{flex-direction:column-reverse}
}


/* --- Redesign: Hero background image + centered copy --- */
.hero.hero--bg{
  position: relative;
  padding: 96px 0 64px;
  background-color: #f8fafc;
  background-image: url("./assets/hero.jpg");
  background-image: image-set(
    url("./assets/hero.avif") type("image/avif"),
    url("./assets/hero.jpg") type("image/jpeg")
  );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero.hero--bg::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.32);
}
.hero__inner--center{ position: relative; }
.hero__copy--center{
  position: relative;
  max-width: 960px;
  margin: 0 auto;
}
.hero__eyebrow{
  margin: 0 0 10px;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: 28px;
  color: rgba(11,14,20,.35);
}
.hero__title{
  margin: 0 0 12px;
  font-size: 46px;
  line-height: 1.15;
  color: rgba(11,14,20,.35);
}
.hero__subtitle{
  margin: 0 0 22px;
  font-size: 20px;
  color: rgba(11,14,20,.78);
  font-weight: 700;
}
.hero__desc{
  margin: 0 0 26px;
  font-size: 18px;
  line-height: 1.9;
  color: #0B0E14;
}
.hero__proof{
  margin: 0 0 18px;
  font-size: 18px;
  color: rgba(11,14,20,.92);
  font-weight: 700;
}
.hero__cta--center{ display:flex; gap:12px; flex-wrap:wrap; }

@media (max-width: 720px){
  .hero.hero--bg{ padding: 72px 0 44px; }
  .hero__eyebrow{ font-size: 22px; }
  .hero__title{ font-size: 34px; }
  .hero__subtitle{ font-size: 18px; }
  .hero__desc, .hero__proof{ font-size: 16px; }
}

/* --- Redesign: Profile simple layout --- */
.profile.profile--simple{ display:block; }
.profile.profile--simple .profile__card{ width:100%; }
.profile.profile--simple .profile__intro{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: start;
}
.profile.profile--simple .profile__photo{
  width: 180px;
  height: 180px;
  border-radius: 999px;
  object-fit: cover;
}
.profile.profile--simple .profile__lead{
  font-weight: 800;
  font-size: 18px;
  margin-top: 8px;
}
@media (max-width: 720px){
  .profile.profile--simple .profile__intro{ grid-template-columns: 1fr; }
}

/* Override: legacy hero grid */
.hero__inner{ grid-template-columns: 1fr !important; }


/* --- Quick check (on-page diagnosis) --- */
.quickcheck{padding:18px}
.quickcheck__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:start}
.quickcheck__list{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:10px}
.quickcheck__list li{padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.03)}
.quickcheck__list label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.quickcheck__list input[type="checkbox"]{margin-top:4px;transform:scale(1.15)}
.quickcheck__result{border:1px solid rgba(17,24,39,.14);border-radius:16px;padding:16px;background:#ffffff}
.quickcheck__scoreValue{font-size:44px;font-weight:800;letter-spacing:.02em;line-height:1;margin:6px 0}
.qcUnit{font-size:18px;font-weight:700;margin-left:6px;opacity:.85}
.quickcheck__message{margin:10px 0 14px;line-height:1.7}
@media (max-width: 900px){
  .quickcheck__grid{grid-template-columns:1fr}
  .quickcheck__result{order:-1}
}


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

/* --- Hero contrast boost --- */
.hero{
  position: relative;
  background-size: cover;
  background-position: center;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.50);
}
.hero > *{ position: relative; z-index: 1; }

/* --- Hero typography colors --- */
.hero-kicker{ color:#f59e0b; font-weight:700; }
.hero-headline{ color:#111; font-weight:900; }
.hero-sub{ color:#111; font-weight:700; }


/* --- Quickcheck score visibility --- */
.qc-result, .result-card, .score-card, #resultCard, #resultPanel, .result-panel{
  background: #ffffff !important;
  border: 2px solid #111 !important;
  color: #111 !important;
}


/* --- hero text color (orange + black) --- */
.hero__eyebrow{ color:#f59e0b; font-weight:800; }
.hero__title{ color:#111827; }
.hero__title .accent{ color:#f59e0b; }
.hero__subtitle{ color:#111827; font-weight:700; }

/* --- quickcheck result readability --- */
.quickcheck__result{
  background: #ffffff !important;
  border: 1px solid rgba(17,24,39,.14) !important;
}
.quickcheck__result .muted{ color: rgba(17,24,39,.72) !important; }
.quickcheck__scoreValue{ color:#111827 !important; }



/* vFix: FAQ button aligned with accordion */
#faq .section__cta{padding-left:18px;margin-top:14px;}

.hero__desc{color:#0B0E14;}