@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

:root{
  --bg:#091b24;
  --bg2:#0d222c;
  --green:#48d9b6;
  --paper:#f4f3ee;
  --text:#1d2930;
  --muted:#68747a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Inter","Noto Sans JP",sans-serif;color:var(--text);background:var(--paper);line-height:1.75}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.container{width:min(1240px,calc(100% - 48px));margin:auto}

/* ==========================================================
   HERO
   最新生成画像をそのまま表示するため、比率を絶対に崩さない。
   ========================================================== */
.hero-faithful{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#081821;
  line-height:0;
}
.hero-faithful>img{
  width:100%;
  height:auto;
  display:block;
}

/* 生成画像内のメニュー・ボタンをクリック可能にする透明ホットスポット */
.hero-hotspots{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
}
.hotspot{
  position:absolute;
  display:block;
  pointer-events:auto;
  background:transparent;
}

/* 1840 x 800 を基準にした相対配置 */
.hotspot.about{left:48.7%;top:1.2%;width:6.2%;height:5.7%}
.hotspot.vision{left:55.5%;top:1.2%;width:6.2%;height:5.7%}
.hotspot.program{left:62.4%;top:1.2%;width:6.2%;height:5.7%}
.hotspot.group-link{left:69.4%;top:1.2%;width:6.2%;height:5.7%}
.hotspot.company{left:76.1%;top:1.2%;width:5.4%;height:5.7%}
.hotspot.contact-link-hotspot{left:81.4%;top:1.1%;width:8%;height:5.8%}
.hotspot.cta-about{left:12.6%;top:74.0%;width:10.5%;height:7.1%}
.hotspot.cta-group{left:23.6%;top:74.0%;width:11.2%;height:7.1%}

/* ==========================================================
   LOWER SECTIONS
   ========================================================== */
.section{padding:110px 0}
.light{background:var(--paper)}
.dark,.section.group{background:linear-gradient(145deg,#0a171f,#102a34);color:#fff}
.section-head{max-width:780px;margin-bottom:54px}
.section-head.centered{text-align:center;margin-inline:auto}
.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:700;color:#148e70;margin:0 0 15px}
.eyebrow.green{color:var(--green)}
.section h2,.contact h2{font-size:48px;line-height:1.35;letter-spacing:-.035em;margin:0 0 22px}
.section h2 em{font-style:normal;color:#75e1c3}
.section-head>p:last-child,.vision-copy>p{color:var(--muted)}
.dark .vision-copy>p,.section.group .section-head>p:last-child{color:rgba(255,255,255,.65)}

.approach-grid,.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.approach-grid article,.steps article{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:20px;padding:27px;min-height:230px}
.approach-grid span,.steps b{color:#159474;font-size:12px}
.approach-grid h3,.steps h3{font-size:18px;line-height:1.5;margin:25px 0 10px}
.approach-grid p,.steps p{font-size:13px;color:var(--muted);margin:0}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.vision-copy ul{margin:28px 0 0;padding:0;list-style:none}
.vision-copy li{margin:8px 0}
.vision-copy li:before{content:"—";color:var(--green);margin-right:10px}

.group-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.group-grid article{height:360px;position:relative;overflow:hidden;border-radius:18px;background:#15313c}
.group-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.group-grid article:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(4,14,20,.92))}
.group-grid article>div{position:absolute;z-index:2;left:24px;right:24px;bottom:22px}
.group-grid small{font-size:9px;letter-spacing:.14em;color:#61dcbc}
.group-grid h3{font-size:20px;margin:7px 0 5px}
.group-grid p{font-size:12px;color:rgba(255,255,255,.68);margin:0}
.placeholder{background:radial-gradient(circle at 30% 30%,#2b7c7c,#15313c 55%,#0c1c24)!important}

.company dl{margin:0}
.company dl div{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:20px 0;border-top:1px solid rgba(0,0,0,.12)}
.company dl div:last-child{border-bottom:1px solid rgba(0,0,0,.12)}
.company dt{font-size:12px;color:#7b878b}
.company dd{margin:0;font-size:14px}

.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;font-size:12px;font-weight:700}
.button-primary{background:var(--green);color:#071812}
.contact{text-align:center;padding:100px 0;background:#0a1d26;color:#fff}
.contact>div>p:not(.eyebrow){color:rgba(255,255,255,.62)}
.contact .button{margin-top:20px}

footer{background:#07131a;color:#fff;padding:28px 0}
.footer-inner{display:flex;justify-content:space-between;gap:20px;align-items:center}
.footer-inner small{color:rgba(255,255,255,.35)}

@media(max-width:980px){
  .approach-grid,.steps{grid-template-columns:repeat(2,1fr)}
  .group-grid{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr;gap:36px}
}

.mobile-site-header,
.mobile-hero{
  display:none;
}

@media(max-width:760px){
  .container{width:min(100% - 32px,1240px)}

  /* PC用完成画像はスマホでは非表示。PC画像ファイル自体は一切変更しない。 */
  .hero-faithful{display:none}

  /* -----------------------------
     MOBILE HEADER
     ----------------------------- */
  .mobile-site-header{
    display:flex;
    position:sticky;
    top:0;
    z-index:100;
    height:64px;
    align-items:center;
    justify-content:space-between;
    padding:0 16px;
    background:rgba(6,19,27,.97);
    border-bottom:1px solid rgba(255,255,255,.08);
    color:#fff;
  }
  .mobile-brand{
    display:flex;
    align-items:center;
    gap:9px;
    font-weight:700;
    font-size:18px;
    line-height:1;
  }
  .mobile-brand small{
    font-size:10px;
  }
  .mobile-brand-mark{
    width:36px;
    height:36px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:11px;
    background:
      radial-gradient(circle at 35% 30%,#72ebd4 0 8%,#1ca58f 28%,#136279 58%,#0b2936 100%);
    box-shadow:0 0 18px rgba(67,220,193,.24),inset 0 0 0 1px rgba(255,255,255,.20);
  }
  .mobile-menu-button{
    position:relative;
    z-index:102;
    width:42px;
    height:42px;
    border:0;
    padding:9px;
    background:none;
  }
  .mobile-menu-button span{
    display:block;
    height:1px;
    background:#fff;
    margin:6px 0;
    transition:.25s;
  }
  .mobile-nav{
    position:fixed;
    z-index:101;
    left:0;
    right:0;
    top:64px;
    padding:16px 20px 24px;
    display:flex;
    flex-direction:column;
    background:#071821;
    border-bottom:1px solid rgba(255,255,255,.08);
    transform:translateY(-120%);
    opacity:0;
    pointer-events:none;
    transition:.28s ease;
  }
  .mobile-nav.is-open{
    transform:none;
    opacity:1;
    pointer-events:auto;
  }
  .mobile-nav a{
    color:#fff;
    font-size:14px;
    font-weight:600;
    padding:12px 4px;
    border-bottom:1px solid rgba(255,255,255,.07);
  }

  /* -----------------------------
     MOBILE HERO
     separate image for smartphone
     ----------------------------- */
  .mobile-hero{
    display:block;
    position:relative;
    min-height:760px;
    overflow:hidden;
    background:#081821;
    color:#fff;
  }
  .mobile-hero-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }
  .mobile-hero-shade{
    position:absolute;
    inset:0;
    background:
      linear-gradient(180deg,
        rgba(5,18,26,.88) 0%,
        rgba(5,18,26,.63) 32%,
        rgba(5,18,26,.14) 55%,
        rgba(5,18,26,.22) 78%,
        rgba(5,18,26,.86) 100%);
  }
  .mobile-hero-content{
    position:relative;
    z-index:2;
    padding:54px 22px 38px;
  }
  .mobile-kicker{
    margin:0 0 15px;
    color:#52dfba;
    font-size:9px;
    font-weight:700;
    letter-spacing:.16em;
  }
  .mobile-hero h1{
    margin:0;
    font-size:44px;
    line-height:1.23;
    letter-spacing:-.045em;
  }
  .mobile-hero h1 em{
    font-style:normal;
    color:#5be0bc;
  }
  .mobile-lead{
    margin:24px 0 0;
    max-width:340px;
    color:rgba(255,255,255,.82);
    font-size:13px;
    line-height:1.85;
  }
  .mobile-actions{
    position:absolute;
    left:22px;
    right:22px;
    top:665px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .mobile-actions a{
    min-height:46px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 10px;
    font-size:11px;
    font-weight:700;
    background:#46d9b3;
    color:#071812;
  }
  .mobile-actions a+ a{
    background:rgba(7,24,33,.48);
    border:1px solid rgba(255,255,255,.37);
    color:#fff;
  }

  .section{padding:78px 0}
  .section h2,.contact h2{font-size:35px}
  .approach-grid,.steps,.group-grid{grid-template-columns:1fr}
  .group-grid article{height:320px}
  .company dl div{grid-template-columns:95px 1fr}
  .footer-inner{display:block}
  .footer-inner small{display:block;margin-top:8px}
}


/* ----------------------------------------------------------
   PC HERO navigation hover underline
   画像内のメニューテキストはそのまま。
   透明ホットスポットの下側にアクセントラインだけ表示する。
   ---------------------------------------------------------- */
@media (min-width: 761px) {
  .hero-hotspots .hotspot:not(.contact-link-hotspot)::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: #48d9b6;
    transform: scaleX(0);
    transform-origin: center;
    opacity: 0;
    transition: transform .22s ease, opacity .22s ease;
  }

  .hero-hotspots .hotspot:not(.contact-link-hotspot):hover::after,
  .hero-hotspots .hotspot:not(.contact-link-hotspot):focus-visible::after {
    transform: scaleX(1);
    opacity: 1;
  }

  /* 上部メニューは少し短め、CTAは下線を出さない */
  .hero-hotspots .cta-about::after,
  .hero-hotspots .cta-group::after {
    display: none;
  }
}

/* スマホドロワーメニューもマウス操作時は下線 */
.mobile-nav a {
  position: relative;
}
.mobile-nav a::after {
  content: "";
  position: absolute;
  left: 4px;
  bottom: 6px;
  width: 0;
  height: 1px;
  background: #48d9b6;
  transition: width .2s ease;
}
.mobile-nav a:hover::after,
.mobile-nav a:focus-visible::after {
  width: 42px;
}


/* ==========================================================
   MOBILE HERO / FINAL FAITHFUL
   スマホ用確定画像をアスペクト比そのままで表示
   ========================================================== */
.mobile-hero-faithful{
  display:none;
}

@media (max-width:760px){
  /* PC用Heroは非表示 */
  .hero-faithful{
    display:none !important;
  }

  /* 旧スマホ用HTMLレイアウトは使用しない */
  .mobile-site-header,
  .mobile-hero{
    display:none !important;
  }

  .mobile-hero-faithful{
    display:block;
    position:relative;
    width:100%;
    overflow:hidden;
    background:#071821;
    line-height:0;
  }

  .mobile-hero-faithful > img{
    display:block;
    width:100%;
    height:auto;
  }

  /* 941x1672 の確定画像に合わせた透明操作領域 */
  .mobile-menu-hotspot{
    position:absolute;
    z-index:20;
    top:1.6%;
    right:4.0%;
    width:9.5%;
    height:5.2%;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
  }

  .mobile-hotspot{
    position:absolute;
    z-index:15;
    display:block;
  }

  .mobile-cta-about{
    left:4.2%;
    bottom:3.15%;
    width:44.5%;
    height:6.3%;
  }

  .mobile-cta-group{
    right:4.1%;
    bottom:3.15%;
    width:44.2%;
    height:6.3%;
  }

  /* ハンバーガー押下時のメニュー */
  .mobile-nav-overlay{
    position:absolute;
    z-index:19;
    top:7.1%;
    right:3.5%;
    width:min(280px,72%);
    padding:12px 18px 16px;
    display:flex;
    flex-direction:column;
    background:rgba(6,20,28,.97);
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    box-shadow:0 18px 45px rgba(0,0,0,.36);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
  }

  .mobile-nav-overlay.is-open{
    opacity:1;
    visibility:visible;
    transform:none;
  }

  .mobile-nav-overlay a{
    position:relative;
    color:#fff;
    font-size:13px;
    line-height:1.4;
    font-weight:600;
    padding:12px 2px;
    border-bottom:1px solid rgba(255,255,255,.07);
  }

  .mobile-nav-overlay a:last-child{
    border-bottom:0;
  }

  .mobile-nav-overlay a::after{
    content:"";
    position:absolute;
    left:2px;
    bottom:7px;
    width:0;
    height:1px;
    background:#48d9b6;
    transition:width .2s ease;
  }

  .mobile-nav-overlay a:hover::after,
  .mobile-nav-overlay a:focus-visible::after{
    width:42px;
  }
}


/* ==========================================================
   CONTACT FORM
   ========================================================== */
.contact-form-section{
  text-align:left;
  padding:110px 0;
  background:
    radial-gradient(circle at 12% 20%,rgba(56,196,171,.09),transparent 30%),
    linear-gradient(135deg,#081821 0%,#0b222b 55%,#081922 100%);
  color:#fff;
}

.contact-layout{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:90px;
  align-items:start;
}

.contact-copy{
  position:sticky;
  top:110px;
}

.contact-copy h2{
  margin-bottom:22px;
}

.contact-copy>p:not(.eyebrow){
  margin:0;
  max-width:510px;
  color:rgba(255,255,255,.66);
  font-size:14px;
  line-height:1.9;
}

.contact-guide{
  margin-top:34px;
  padding-top:25px;
  border-top:1px solid rgba(255,255,255,.10);
}

.contact-guide>span{
  display:block;
  margin-bottom:13px;
  color:#54dfba;
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
}

.contact-guide ul{
  list-style:none;
  padding:0;
  margin:0;
}

.contact-guide li{
  position:relative;
  padding:6px 0 6px 18px;
  color:rgba(255,255,255,.70);
  font-size:13px;
}

.contact-guide li::before{
  content:"";
  position:absolute;
  left:0;
  top:17px;
  width:7px;
  height:1px;
  background:#48d9b6;
}

.contact-form-wrap{
  padding:38px 42px 42px;
  border:1px solid rgba(86,222,190,.24);
  border-radius:22px;
  background:
    linear-gradient(145deg,rgba(22,58,68,.98) 0%,rgba(14,43,53,.98) 100%);
  box-shadow:
    0 30px 80px rgba(0,0,0,.28),
    0 0 0 1px rgba(72,217,182,.035) inset;
}

.contact-form{
  display:grid;
  gap:22px;
}

.form-row{
  display:grid;
  grid-template-columns:165px 1fr;
  gap:22px;
  align-items:center;
}

.form-row-message{
  align-items:start;
}

.form-row label{
  display:flex;
  align-items:center;
  gap:9px;
  color:rgba(255,255,255,.90);
  font-size:13px;
  font-weight:600;
}

.form-row label small{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.48);
  font-size:8px;
  font-weight:600;
}

.form-row label small.required{
  background:rgba(72,217,182,.16);
  color:#63e3c1;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.13);
  border-radius:10px;
  outline:none;
  background:rgba(255,255,255,.075);
  color:#fff;
  font:inherit;
  font-size:14px;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select{
  height:50px;
  padding:0 14px;
}

.contact-form textarea{
  display:block;
  min-height:170px;
  padding:13px 14px;
  resize:vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border-color:rgba(72,217,182,.72);
  background:rgba(255,255,255,.075);
  box-shadow:0 0 0 3px rgba(72,217,182,.08);
}

.contact-form select{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}

.contact-form select option{
  color:#1b282e;
  background:#fff;
}

.select-wrap{
  position:relative;
}

.select-wrap::after{
  content:"";
  position:absolute;
  right:17px;
  top:50%;
  width:7px;
  height:7px;
  border-right:1px solid #66dec0;
  border-bottom:1px solid #66dec0;
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}

.form-honeypot{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip:rect(1px,1px,1px,1px)!important;
  white-space:nowrap!important;
}

.privacy-check{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  margin-top:2px;
  color:rgba(255,255,255,.70);
  font-size:12px;
  cursor:pointer;
}

.privacy-check input{
  width:16px;
  height:16px;
  accent-color:#48d9b6;
}

.form-submit{
  width:100%;
  min-height:58px;
  border:0;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  background:#48d9b6;
  color:#071812;
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}

.form-submit:hover{
  transform:translateY(-2px);
  background:#67e2c3;
  box-shadow:0 14px 35px rgba(72,217,182,.18);
}

.form-submit i{
  font-style:normal;
  font-size:17px;
}

.form-note{
  margin:0;
  text-align:center;
  color:rgba(255,255,255,.38);
  font-size:10px;
}

@media(max-width:980px){
  .contact-layout{
    grid-template-columns:1fr;
    gap:42px;
  }

  .contact-copy{
    position:static;
  }
}

@media(max-width:760px){
  .contact-form-section{
    padding:76px 0;
  }

  .contact-layout{
    gap:32px;
  }

  .contact-copy>p:not(.eyebrow){
    font-size:13px;
  }

  .contact-guide{
    margin-top:26px;
  }

  .contact-form-wrap{
    padding:26px 18px 28px;
    border-radius:17px;
  }

  .contact-form{
    gap:20px;
  }

  .form-row{
    display:block;
  }

  .form-row label{
    margin-bottom:8px;
  }

  .privacy-check{
    justify-content:flex-start;
  }

  .form-submit{
    min-height:54px;
  }
}


/* ==========================================================
   APPROACH SECTION - visual redesign
   ========================================================== */
.section-approach{
  overflow:hidden;
  background:var(--paper);
}

.approach-showcase{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:44px;
  align-items:end;
  margin-bottom:42px;
}

.approach-copy{
  padding-right:10px;
}

.approach-copy h2{
  margin-bottom:24px;
  font-size:62px;
  line-height:1.22;
  letter-spacing:-.05em;
}

.approach-copy>p{
  margin:0;
  max-width:760px;
  color:var(--muted);
  font-size:15px;
  line-height:2;
}

.approach-note{
  margin-top:30px;
  display:flex;
  align-items:flex-start;
  gap:16px;
}

.approach-note-line{
  width:56px;
  height:2px;
  margin-top:11px;
  background:linear-gradient(90deg,#159474 0%,rgba(21,148,116,.15) 100%);
  flex:0 0 auto;
}

.approach-note strong{
  display:block;
  color:#1b2d35;
  font-size:17px;
  line-height:1.6;
}

.approach-note small{
  display:block;
  margin-top:6px;
  color:#159474;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.approach-visual{
  position:relative;
  min-height:470px;
}

.approach-visual::before{
  content:"";
  position:absolute;
  inset:auto 0 28px 24px;
  height:180px;
  background:radial-gradient(circle at 50% 50%,rgba(72,217,182,.14),rgba(72,217,182,0) 72%);
  filter:blur(8px);
  pointer-events:none;
}

.approach-visual-main{
  position:relative;
  margin-left:48px;
  border-radius:34px;
  overflow:hidden;
  clip-path:polygon(16% 0,100% 0,100% 100%,0 100%,0 18%);
  box-shadow:0 30px 70px rgba(17,35,44,.13);
}

.approach-visual-main img{
  width:100%;
  height:430px;
  object-fit:cover;
}

.approach-visual-sub{
  position:absolute;
  top:-10px;
  right:-14px;
  width:42%;
  border-radius:28px;
  overflow:hidden;
  clip-path:polygon(18% 0,100% 0,100% 100%,0 100%,0 20%);
  box-shadow:0 24px 55px rgba(11,28,35,.12);
  border:8px solid rgba(255,255,255,.7);
}

.approach-visual-sub img{
  width:100%;
  height:255px;
  object-fit:cover;
}

.approach-visual-badge{
  position:absolute;
  left:0;
  bottom:20px;
  width:244px;
  height:244px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:26px;
  color:#fff;
  background:radial-gradient(circle at 35% 28%,rgba(24,117,98,.95) 0%,rgba(8,82,68,.98) 62%,rgba(8,70,59,.98) 100%);
  box-shadow:0 26px 60px rgba(10,77,66,.22);
}

.approach-visual-badge span{
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  opacity:.78;
}

.approach-visual-badge strong{
  display:block;
  margin:16px 0 12px;
  font-size:24px;
  line-height:1.55;
  letter-spacing:.02em;
}

.approach-visual-badge small{
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  opacity:.76;
}

.approach-cards{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.approach-card{
  position:relative;
  background:#fff;
  border:1px solid rgba(7,29,39,.06);
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 18px 44px rgba(17,35,44,.06);
  transition:transform .24s ease,box-shadow .24s ease;
}

.approach-card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 52px rgba(17,35,44,.10);
}

.approach-card-media{
  position:relative;
  height:190px;
  overflow:hidden;
  background:#e6ecea;
}

.approach-card-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(7,29,39,.04) 0%,rgba(7,29,39,.16) 100%);
}

.approach-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.approach-card-num{
  position:absolute;
  left:18px;
  top:10px;
  z-index:2;
  color:rgba(255,255,255,.95);
  font-size:76px;
  line-height:1;
  font-weight:300;
  letter-spacing:-.08em;
  text-shadow:0 3px 14px rgba(12,25,32,.10);
}

.approach-card-icon{
  position:absolute;
  left:22px;
  bottom:-24px;
  z-index:2;
  width:56px;
  height:56px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  box-shadow:0 10px 25px rgba(17,35,44,.12);
  color:#159474;
  font-size:20px;
  font-weight:700;
}

.approach-card-body{
  padding:38px 24px 26px;
}

.approach-card-body small{
  display:block;
  margin-bottom:12px;
  color:#159474;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
}

.approach-card-body h3{
  margin:0 0 12px;
  font-size:18px;
  line-height:1.5;
}

.approach-card-body p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.85;
}

@media(max-width:1180px){
  .approach-showcase{
    grid-template-columns:1fr;
    gap:26px;
  }

  .approach-copy h2{
    font-size:54px;
  }

  .approach-copy>p{
    max-width:none;
  }

  .approach-visual{
    min-height:500px;
  }

  .approach-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:760px){
  .section-approach{
    padding-top:84px;
  }

  .approach-showcase{
    gap:20px;
    margin-bottom:26px;
  }

  .approach-copy h2{
    font-size:42px;
    line-height:1.28;
  }

  .approach-copy>p{
    font-size:14px;
    line-height:1.92;
  }

  .approach-note{
    margin-top:22px;
    gap:12px;
  }

  .approach-note-line{
    width:40px;
  }

  .approach-note strong{
    font-size:15px;
  }

  .approach-visual{
    min-height:auto;
    display:grid;
    gap:14px;
  }

  .approach-visual::before{
    inset:auto 0 0 0;
    height:120px;
  }

  .approach-visual-main{
    margin-left:0;
    border-radius:24px;
    clip-path:none;
  }

  .approach-visual-main img{
    height:220px;
  }

  .approach-visual-sub{
    position:relative;
    top:auto;
    right:auto;
    width:100%;
    border-radius:22px;
    clip-path:none;
    border:0;
  }

  .approach-visual-sub img{
    height:180px;
  }

  .approach-visual-badge{
    position:relative;
    left:auto;
    bottom:auto;
    width:100%;
    height:auto;
    min-height:132px;
    border-radius:24px;
    align-items:flex-start;
    text-align:left;
    padding:22px 24px;
  }

  .approach-visual-badge strong{
    margin:10px 0 8px;
    font-size:22px;
    line-height:1.5;
  }

  .approach-cards{
    grid-template-columns:1fr;
    gap:16px;
  }

  .approach-card-media{
    height:172px;
  }

  .approach-card-num{
    font-size:68px;
  }
}


/* ==========================================================
   HERO CTA - business succession consultation
   元Hero画像は変更せず、左CTAだけHTML/CSSで上書き
   ========================================================== */
@media (min-width:761px){
  .hotspot.cta-consult{
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#48d9b6;
    color:#071812;
    font-size:clamp(10px,.72vw,14px);
    font-weight:700;
    line-height:1.2;
    text-align:center;
    letter-spacing:.01em;
    box-shadow:0 8px 24px rgba(72,217,182,.10);
    transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
  }

  .hotspot.cta-consult span{
    display:block;
    padding:0 10px;
    white-space:nowrap;
  }

  .hotspot.cta-consult:hover,
  .hotspot.cta-consult:focus-visible{
    transform:translateY(-2px);
    background:#63e2c1;
    box-shadow:0 12px 28px rgba(72,217,182,.18);
  }

  .hero-hotspots .hotspot.cta-consult::after{
    display:none !important;
  }
}

@media (max-width:760px){
  .mobile-cta-consult{
    display:flex !important;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#48d9b6;
    color:#071812;
    font-size:clamp(10px,3vw,14px);
    font-weight:700;
    line-height:1.2;
    text-align:center;
    letter-spacing:-.01em;
    z-index:16;
  }

  .mobile-cta-consult span{
    display:block;
    padding:0 8px;
    white-space:nowrap;
  }
}


/* ==========================================================
   APPROACH - generated visual
   実在グループ会社写真ではなく、承継を表現した生成イメージを使用
   ========================================================== */
.approach-visual-generated{
  min-height:455px;
}

.approach-visual-generated .approach-visual-main{
  margin-left:0;
  overflow:visible;
  clip-path:none;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}

.approach-visual-generated .approach-visual-main img{
  width:100%;
  height:auto;
  max-height:455px;
  object-fit:contain;
  object-position:center;
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(
    90deg,
    transparent 0%,
    #000 7%,
    #000 92%,
    transparent 100%
  );
  mask-image:linear-gradient(
    90deg,
    transparent 0%,
    #000 7%,
    #000 92%,
    transparent 100%
  );
}

.approach-visual-generated .approach-visual-badge{
  left:10px;
  bottom:8px;
  width:210px;
  height:210px;
  background:radial-gradient(circle at 35% 28%,rgba(26,139,115,.94),rgba(7,82,68,.97) 68%);
  border:1px solid rgba(255,255,255,.38);
  box-shadow:0 22px 48px rgba(10,77,66,.20);
}

.approach-visual-generated .approach-visual-badge strong{
  font-size:21px;
}

/* 1枚の生成画像をカードごとに異なる位置でトリミング */
.approach-card-media img.approach-crop-brand{
  object-position:16% 52%;
  transform:scale(1.10);
}

.approach-card-media img.approach-crop-management{
  object-position:46% 48%;
  transform:scale(1.18);
}

.approach-card-media img.approach-crop-technology{
  object-position:7% 40%;
  transform:scale(1.32);
}

.approach-card-media img.approach-crop-uniqueness{
  object-position:84% 50%;
  transform:scale(1.13);
}

.approach-card-media img[class^="approach-crop-"]{
  transition:transform .35s ease;
}

.approach-card:hover .approach-card-media img.approach-crop-brand{
  transform:scale(1.14);
}
.approach-card:hover .approach-card-media img.approach-crop-management{
  transform:scale(1.22);
}
.approach-card:hover .approach-card-media img.approach-crop-technology{
  transform:scale(1.36);
}
.approach-card:hover .approach-card-media img.approach-crop-uniqueness{
  transform:scale(1.17);
}

@media(max-width:760px){
  .approach-visual-generated{
    min-height:auto;
  }

  .approach-visual-generated .approach-visual-main img{
    max-height:none;
    -webkit-mask-image:linear-gradient(
      180deg,
      transparent 0%,
      #000 6%,
      #000 94%,
      transparent 100%
    );
    mask-image:linear-gradient(
      180deg,
      transparent 0%,
      #000 6%,
      #000 94%,
      transparent 100%
    );
  }

  .approach-visual-generated .approach-visual-badge{
    width:100%;
    height:auto;
    left:auto;
    bottom:auto;
    margin-top:8px;
  }
}


/* ==========================================================
   APPROACH OPTION 1 - adopted mockup faithfully recreated
   ========================================================== */
.approach-option1{
  position:relative;
  overflow:hidden;
  background:var(--paper);
  padding:82px 0 74px;
}

.approach-option1-inner{
  position:relative;
}

.approach-option1-top{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(480px,.92fr);
  gap:48px;
  align-items:start;
}

.approach-label{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
  color:#0d8e73;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
}

.approach-label i{
  width:42px;
  height:1px;
  background:#1ca88b;
  display:block;
}

.approach-option1-copy h2{
  margin:0 0 24px;
  max-width:760px;
  font-size:58px;
  line-height:1.18;
  letter-spacing:-.05em;
  color:#122b3d;
}

.approach-option1-copy>p{
  margin:0;
  max-width:760px;
  color:#67767f;
  font-size:14px;
  line-height:2;
}

.approach-option1-visuals{
  position:relative;
  min-height:335px;
  margin-top:-82px;
}

.approach-slash{
  position:absolute;
  overflow:hidden;
  background:#dce9e7;
}

.approach-slash img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.approach-slash-main{
  left:28px;
  top:0;
  width:54%;
  height:320px;
  clip-path:polygon(25% 0,100% 0,75% 100%,0 100%);
}

.approach-slash-main img{
  object-position:center 40%;
}

.approach-top-message{
  position:absolute;
  right:8%;
  top:68px;
  color:#72949a;
  font-size:11px;
  line-height:2.05;
  letter-spacing:.22em;
  font-weight:600;
}

.approach-top-message:before{
  content:"";
  position:absolute;
  left:-18px;
  top:0;
  width:1px;
  height:72px;
  background:#149b80;
  transform:skewX(-18deg);
  transform-origin:top;
}

.approach-slash-side{
  right:0;
  top:180px;
  width:43%;
  height:190px;
  clip-path:polygon(18% 0,100% 0,82% 100%,0 100%);
  opacity:.96;
}

.approach-jp-message{
  position:absolute;
  right:3%;
  top:305px;
  z-index:3;
  color:#153345;
  font-size:14px;
  line-height:1.8;
  letter-spacing:.08em;
  font-weight:600;
  text-align:left;
}

.approach-jp-message:before{
  content:"";
  position:absolute;
  left:-18px;
  top:0;
  width:1px;
  height:58px;
  background:#149b80;
  transform:skewX(-18deg);
  transform-origin:top;
}

.approach-option1-flow{
  position:relative;
  height:50px;
  margin:6px 0 -8px;
}

.approach-option1-flow span{
  position:absolute;
  left:-48px;
  right:-48px;
  top:25px;
  height:2px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      #22bea4 5%,
      #22bea4 96%,
      transparent 100%);
  opacity:.85;
}

.approach-option1-flow span:after{
  content:"";
  position:absolute;
  right:3%;
  top:-6px;
  width:12px;
  height:12px;
  border-top:2px solid #22bea4;
  border-right:2px solid #22bea4;
  transform:rotate(45deg);
}

.approach-option1-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  position:relative;
  z-index:2;
}

.approach-option1-card{
  position:relative;
  min-height:355px;
  padding:0 0 26px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(15,52,63,.06);
  overflow:visible;
  box-shadow:0 14px 34px rgba(29,54,64,.05);
}

.approach-card-top{
  position:relative;
  height:170px;
  overflow:visible;
}

.approach-card-top b{
  position:absolute;
  left:24px;
  top:25px;
  z-index:2;
  color:#c9dfdc;
  font-size:56px;
  font-weight:500;
  line-height:1;
  letter-spacing:-.07em;
}

.approach-card-top b:after{
  content:"";
  display:block;
  width:45px;
  height:1px;
  margin-top:15px;
  background:#b9d4d0;
}

.approach-card-slash{
  position:absolute;
  right:-4px;
  top:-14px;
  width:66%;
  height:178px;
  overflow:hidden;
  clip-path:polygon(22% 0,100% 0,82% 100%,0 100%);
  background:#dfe7e5;
}

.approach-card-slash img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.approach-option1-card:nth-child(1) .approach-card-slash img{object-position:55% 50%}
.approach-option1-card:nth-child(2) .approach-card-slash img{object-position:50% 50%}
.approach-option1-card:nth-child(3) .approach-card-slash img{object-position:52% 47%}
.approach-option1-card:nth-child(4) .approach-card-slash img{object-position:54% 48%}

.approach-card-icon{
  position:absolute;
  left:26px;
  top:142px;
  z-index:4;
  width:54px;
  height:54px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#0b8e76;
  border:8px solid var(--paper);
  color:#fff;
  font-size:15px;
  font-weight:700;
  box-shadow:0 6px 14px rgba(11,142,118,.08);
}

.approach-card-text{
  padding:24px 26px 0;
}

.approach-card-text h3{
  margin:0 0 12px;
  font-size:20px;
  line-height:1.5;
  color:#112c3d;
}

.approach-card-text p{
  margin:0;
  color:#687983;
  font-size:13px;
  line-height:1.85;
}

.approach-option1-foot{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  margin-top:42px;
  color:#769095;
}

.approach-option1-foot span{
  width:70px;
  height:1px;
  background:#b8cac7;
}

.approach-option1-foot small{
  font-size:10px;
  letter-spacing:.18em;
}

@media(max-width:1100px){
  .approach-option1-top{
    grid-template-columns:1fr;
  }

  .approach-option1-visuals{
    min-height:390px;
    margin-top:0;
  }

  .approach-option1-copy h2{
    font-size:50px;
  }

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

@media(max-width:760px){
  .approach-option1{
    padding:70px 0 64px;
  }

  .approach-option1-copy h2{
    font-size:40px;
    line-height:1.25;
  }

  .approach-option1-copy>p{
    font-size:13px;
    line-height:1.9;
  }

  .approach-option1-visuals{
    min-height:330px;
    margin-top:8px;
  }

  .approach-slash-main{
    left:0;
    width:70%;
    height:260px;
  }

  .approach-top-message{
    right:0;
    top:42px;
    font-size:9px;
  }

  .approach-slash-side{
    right:-16px;
    top:175px;
    width:58%;
    height:145px;
  }

  .approach-jp-message{
    top:270px;
    right:2%;
    font-size:12px;
  }

  .approach-option1-flow{
    display:none;
  }

  .approach-option1-cards{
    grid-template-columns:1fr;
    gap:22px;
    margin-top:22px;
  }

  .approach-option1-card{
    min-height:auto;
  }

  .approach-card-top{
    height:180px;
  }

  .approach-card-slash{
    height:185px;
  }

  .approach-card-text{
    padding-top:28px;
    padding-bottom:5px;
  }

  .approach-option1-foot{
    justify-content:flex-start;
    margin-top:30px;
  }
}


/* ==========================================================
   APPROACH OPTION 1 - refinement
   文字の被り解消 / 斜線角度の統一 / 右側ビジュアルの整理
   ========================================================== */
.approach-option1 .approach-option1-visuals{
  min-height:470px;
  margin-top:-36px;
}

.approach-option1 .approach-slash{
  box-shadow:0 14px 34px rgba(18,43,61,.06);
}

.approach-option1 .approach-slash-main{
  left:0;
  top:0;
  width:56%;
  height:344px;
  clip-path:polygon(16% 0,100% 0,84% 100%,0 100%);
}

.approach-option1 .approach-slash-main img{
  object-position:center 34%;
}

.approach-option1 .approach-top-message{
  right:8%;
  top:96px;
  color:#7a96a0;
  font-size:11px;
  line-height:2.15;
  letter-spacing:.24em;
  text-transform:uppercase;
}

.approach-option1 .approach-top-message::before{
  left:-24px;
  top:2px;
  width:1px;
  height:78px;
  transform:skewX(-20deg);
}

.approach-option1 .approach-slash-side{
  right:28px;
  top:220px;
  width:45%;
  height:174px;
  clip-path:polygon(16% 0,100% 0,84% 100%,0 100%);
  opacity:1;
}

.approach-option1 .approach-slash-side img{
  object-position:center 52%;
}

.approach-option1 .approach-jp-message{
  right:24px;
  top:404px;
  max-width:260px;
  padding-left:18px;
  color:#173446;
  font-size:15px;
  line-height:1.78;
  letter-spacing:.06em;
  font-weight:700;
}

.approach-option1 .approach-jp-message::before{
  left:0;
  top:4px;
  width:1px;
  height:54px;
  transform:skewX(-20deg);
}

.approach-option1 .approach-option1-flow{
  margin:18px 0 8px;
}

.approach-option1 .approach-option1-flow span{
  left:-20px;
  right:-20px;
}

.approach-option1 .approach-option1-flow span::after{
  right:2%;
}

@media(max-width:1100px){
  .approach-option1 .approach-option1-visuals{
    min-height:450px;
    margin-top:8px;
  }

  .approach-option1 .approach-slash-main{
    width:60%;
    height:320px;
  }

  .approach-option1 .approach-top-message{
    right:4%;
    top:62px;
  }

  .approach-option1 .approach-slash-side{
    right:0;
    top:208px;
    width:48%;
    height:160px;
  }

  .approach-option1 .approach-jp-message{
    top:378px;
    right:0;
  }
}

@media(max-width:760px){
  .approach-option1 .approach-option1-visuals{
    min-height:390px;
    margin-top:12px;
  }

  .approach-option1 .approach-slash-main{
    left:0;
    width:68%;
    height:252px;
    clip-path:polygon(15% 0,100% 0,85% 100%,0 100%);
  }

  .approach-option1 .approach-top-message{
    right:2px;
    top:36px;
    font-size:9px;
    line-height:2;
  }

  .approach-option1 .approach-top-message::before{
    left:-18px;
    height:64px;
  }

  .approach-option1 .approach-slash-side{
    right:0;
    top:182px;
    width:56%;
    height:132px;
    clip-path:polygon(15% 0,100% 0,85% 100%,0 100%);
  }

  .approach-option1 .approach-jp-message{
    top:326px;
    right:0;
    max-width:200px;
    padding-left:14px;
    font-size:12px;
    line-height:1.7;
  }

  .approach-option1 .approach-jp-message::before{
    height:44px;
  }
}


/* ==========================================================
   APPROACH OPTION 2 - visual landscape style
   ========================================================== */
.approach-option2{
  position:relative;
  overflow:hidden;
  background:var(--paper);
  padding:86px 0 76px;
}

.approach2-inner{
  position:relative;
}

.approach2-top{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);
  gap:32px;
  align-items:start;
}

.approach2-copy{
  position:relative;
  z-index:2;
  padding-top:8px;
}

.approach2-label{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
  color:#0c9074;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
}

.approach2-label i{
  width:42px;
  height:1px;
  background:#22a98c;
}

.approach2-copy h2{
  margin:0 0 24px;
  color:#12283b;
  font-size:57px;
  line-height:1.2;
  letter-spacing:-.05em;
}

.approach2-copy>p{
  margin:0;
  max-width:670px;
  color:#65747d;
  font-size:14px;
  line-height:2;
}

.approach2-hero{
  position:relative;
  min-height:430px;
  margin-top:-86px;
  overflow:hidden;
  border-bottom-left-radius:42px;
  clip-path:polygon(20% 0,100% 0,100% 100%,0 100%,8% 72%);
}

.approach2-hero img{
  width:100%;
  height:430px;
  object-fit:cover;
  object-position:center 56%;
}

.approach2-hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(244,243,238,.05) 0%,
      rgba(244,243,238,0) 28%,
      rgba(9,111,99,.08) 50%,
      rgba(8,117,105,.84) 100%);
}

.approach2-message{
  position:absolute;
  right:34px;
  top:118px;
  width:190px;
  color:#fff;
  text-align:left;
}

.approach2-message strong{
  display:block;
  font-size:19px;
  line-height:1.7;
  letter-spacing:.08em;
}

.approach2-message span{
  display:block;
  width:34px;
  height:1px;
  margin:24px 0 16px;
  background:rgba(255,255,255,.78);
}

.approach2-message small{
  display:block;
  font-size:9px;
  line-height:1.7;
  letter-spacing:.16em;
  opacity:.78;
}

.approach2-cards{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:-6px;
}

.approach2-card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(18,42,55,.05);
  box-shadow:0 14px 36px rgba(22,42,51,.06);
}

.approach2-media{
  position:relative;
  height:188px;
  overflow:hidden;
  background:#d9e3e0;
}

.approach2-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.approach2-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(5,28,35,.02),rgba(5,28,35,.22));
}

.approach2-media b{
  position:absolute;
  z-index:2;
  left:20px;
  top:12px;
  color:rgba(255,255,255,.95);
  font-size:70px;
  line-height:1;
  font-weight:300;
  letter-spacing:-.08em;
}

.approach2-media small{
  position:absolute;
  z-index:2;
  left:26px;
  bottom:18px;
  color:#fff;
  font-size:9px;
  letter-spacing:.14em;
}

.approach2-icon{
  position:absolute;
  z-index:4;
  left:24px;
  top:160px;
  width:56px;
  height:56px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:7px solid var(--paper);
  background:#fff;
  color:#0a977c;
  font-weight:700;
  font-size:15px;
  box-shadow:0 9px 24px rgba(16,67,62,.10);
}

.approach2-body{
  padding:39px 24px 28px;
}

.approach2-body h3{
  margin:0 0 12px;
  color:#132a3b;
  font-size:20px;
  line-height:1.5;
}

.approach2-body p{
  margin:0;
  color:#687983;
  font-size:13px;
  line-height:1.85;
}

.approach2-footer-note{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  margin-top:40px;
  color:#73888e;
}

.approach2-footer-note span{
  width:68px;
  height:1px;
  background:#b2c4c1;
}

.approach2-footer-note small{
  font-size:10px;
  letter-spacing:.12em;
}

@media(max-width:1100px){
  .approach2-top{
    grid-template-columns:1fr;
    gap:30px;
  }

  .approach2-copy h2{
    font-size:50px;
  }

  .approach2-hero{
    margin-top:0;
    min-height:370px;
  }

  .approach2-hero img{
    height:370px;
  }

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

@media(max-width:760px){
  .approach-option2{
    padding:70px 0 62px;
  }

  .approach2-copy h2{
    font-size:40px;
  }

  .approach2-copy>p{
    font-size:13px;
    line-height:1.9;
  }

  .approach2-hero{
    min-height:300px;
    clip-path:polygon(12% 0,100% 0,100% 100%,0 100%,4% 72%);
    border-bottom-left-radius:26px;
  }

  .approach2-hero img{
    height:300px;
  }

  .approach2-message{
    top:68px;
    right:20px;
    width:155px;
  }

  .approach2-message strong{
    font-size:15px;
  }

  .approach2-cards{
    grid-template-columns:1fr;
    margin-top:24px;
  }

  .approach2-media{
    height:175px;
  }

  .approach2-icon{
    top:147px;
  }

  .approach2-footer-note{
    justify-content:flex-start;
  }
}


/* ==========================================================
   APPROACH OPTION 3 - circular visual style
   ========================================================== */
.approach-option3{
  position:relative;
  overflow:hidden;
  background:var(--paper);
  padding:88px 0 74px;
}

.approach3-inner{
  position:relative;
}

.approach3-top{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(520px,1.05fr);
  gap:46px;
  align-items:start;
}

.approach3-copy{
  position:relative;
  z-index:2;
  padding-top:14px;
}

.approach3-label{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
  color:#0a8d73;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
}

.approach3-label i{
  width:42px;
  height:1px;
  background:#20a98c;
}

.approach3-copy h2{
  margin:0 0 24px;
  color:#10283a;
  font-size:57px;
  line-height:1.2;
  letter-spacing:-.05em;
}

.approach3-copy>p{
  margin:0;
  max-width:690px;
  color:#67767f;
  font-size:14px;
  line-height:2;
}

.approach3-subcopy{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-top:28px;
  color:#17977e;
}

.approach3-subcopy>span{
  width:48px;
  height:1px;
  margin-top:8px;
  background:#22a98c;
}

.approach3-subcopy small{
  font-size:9px;
  line-height:1.7;
  letter-spacing:.2em;
}

.approach3-visual{
  position:relative;
  min-height:470px;
  margin-top:-88px;
}

.approach3-circle{
  position:absolute;
  overflow:hidden;
  border-radius:50%;
}

.approach3-circle img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.approach3-circle-main{
  left:24px;
  top:0;
  width:420px;
  height:420px;
  box-shadow:0 26px 60px rgba(25,55,65,.08);
}

.approach3-circle-main::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(23,151,126,.14);
}

.approach3-circle-landscape{
  right:4px;
  top:235px;
  width:220px;
  height:220px;
  border:10px solid rgba(244,243,238,.92);
  box-shadow:0 20px 45px rgba(24,50,61,.07);
}

.approach3-circle-message{
  left:230px;
  top:158px;
  width:235px;
  height:235px;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:26px;
  text-align:center;
  color:#fff;
  background:
    radial-gradient(circle at 35% 25%,#167e68 0%,#096a58 58%,#075546 100%);
  border:1px solid rgba(255,255,255,.32);
  box-shadow:0 18px 42px rgba(5,82,68,.18);
}

.approach3-circle-message strong{
  font-size:20px;
  line-height:1.7;
  letter-spacing:.06em;
  font-weight:500;
}

.approach3-circle-message span{
  width:34px;
  height:1px;
  margin:18px 0 13px;
  background:rgba(255,255,255,.75);
}

.approach3-circle-message small{
  font-size:8px;
  line-height:1.6;
  letter-spacing:.18em;
}

.approach3-sideword{
  position:absolute;
  right:-2px;
  top:64px;
  color:#95a9ac;
  font-size:9px;
  line-height:1.7;
  letter-spacing:.2em;
}

.approach3-sideword::after{
  content:"";
  display:block;
  width:48px;
  height:1px;
  margin-top:15px;
  background:#9bb2b5;
}

.approach3-visual::before,
.approach3-visual::after{
  content:"";
  position:absolute;
  border:1px solid rgba(27,160,134,.28);
  border-radius:50%;
  pointer-events:none;
}

.approach3-visual::before{
  left:-26px;
  top:-24px;
  width:500px;
  height:500px;
}

.approach3-visual::after{
  left:55px;
  top:40px;
  width:390px;
  height:390px;
  opacity:.55;
}

.approach3-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:18px;
}

.approach3-card{
  min-height:278px;
  padding:24px 25px 23px;
  border-radius:17px;
  background:#fff;
  border:1px solid rgba(18,42,55,.05);
  box-shadow:0 14px 36px rgba(22,42,51,.055);
}

.approach3-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:14px;
}

.approach3-card-head>div{
  display:flex;
  align-items:center;
  gap:12px;
}

.approach3-card-head b{
  color:#098f76;
  font-size:18px;
  line-height:1;
}

.approach3-card-head div>span{
  width:48px;
  height:1px;
  background:#159f84;
}

.approach3-card-head i{
  width:46px;
  height:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#f1f3f0;
  color:#0b947a;
  font-style:normal;
  font-size:18px;
}

.approach3-card h3{
  margin:0 0 12px;
  color:#112a3b;
  font-size:20px;
  line-height:1.5;
}

.approach3-card p{
  margin:0;
  min-height:74px;
  color:#687983;
  font-size:13px;
  line-height:1.85;
}

.approach3-more{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:18px;
  color:#0b967b;
  font-size:9px;
  font-weight:700;
  letter-spacing:.18em;
}

.approach3-more span{
  font-size:17px;
  line-height:1;
}

.approach3-foot{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:15px;
  margin-top:38px;
  color:#8da0a4;
}

.approach3-foot span{
  width:68px;
  height:1px;
  background:#b3c5c3;
}

.approach3-foot small{
  font-size:9px;
  letter-spacing:.18em;
}

@media(max-width:1120px){
  .approach3-top{
    grid-template-columns:1fr;
  }

  .approach3-copy h2{
    font-size:50px;
  }

  .approach3-visual{
    min-height:480px;
    margin-top:8px;
    max-width:700px;
    margin-left:auto;
    margin-right:auto;
  }

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

@media(max-width:760px){
  .approach-option3{
    padding:70px 0 62px;
  }

  .approach3-copy h2{
    font-size:40px;
  }

  .approach3-copy>p{
    font-size:13px;
    line-height:1.9;
  }

  .approach3-visual{
    min-height:390px;
  }

  .approach3-circle-main{
    left:0;
    width:300px;
    height:300px;
  }

  .approach3-circle-message{
    left:145px;
    top:140px;
    width:185px;
    height:185px;
  }

  .approach3-circle-message strong{
    font-size:16px;
  }

  .approach3-circle-landscape{
    right:0;
    top:235px;
    width:150px;
    height:150px;
    border-width:7px;
  }

  .approach3-sideword{
    top:22px;
    right:0;
    font-size:7px;
  }

  .approach3-visual::before{
    width:345px;
    height:345px;
  }

  .approach3-visual::after{
    left:35px;
    top:32px;
    width:280px;
    height:280px;
  }

  .approach3-cards{
    grid-template-columns:1fr;
    gap:16px;
    margin-top:24px;
  }

  .approach3-card p{
    min-height:0;
  }

  .approach3-foot{
    justify-content:flex-start;
  }
}


/* ==========================================================
   APPROACH OPTION 4 - inheritance pathway
   ========================================================== */
.approach-option4{
  position:relative;
  overflow:hidden;
  background:var(--paper);
  padding:90px 0 78px;
}

.approach4-inner{
  position:relative;
}

.approach4-intro{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);
  gap:54px;
  align-items:center;
}

.approach4-copy{
  position:relative;
  z-index:3;
}

.approach4-label{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
  color:#0b9075;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
}

.approach4-label i{
  width:44px;
  height:1px;
  background:#21a98c;
}

.approach4-copy h2{
  margin:0 0 24px;
  color:#10293b;
  font-size:58px;
  line-height:1.18;
  letter-spacing:-.05em;
}

.approach4-copy>p{
  margin:0;
  max-width:690px;
  color:#677780;
  font-size:14px;
  line-height:2;
}

.approach4-keyword{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:30px;
  color:#098f76;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
}

.approach4-keyword b{
  color:#a2b8b4;
  font-weight:400;
}

.approach4-visual{
  position:relative;
  min-height:500px;
  margin-top:-42px;
}

.approach4-visual-frame{
  position:absolute;
  right:0;
  top:0;
  width:88%;
  height:470px;
  overflow:hidden;
  border-radius:42px 42px 42px 150px;
  clip-path:polygon(13% 0,100% 0,100% 100%,0 100%,0 15%);
  box-shadow:0 30px 70px rgba(19,52,61,.11);
}

.approach4-visual-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:55% center;
}

.approach4-visual-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg,
      rgba(244,243,238,.02) 0%,
      rgba(5,112,98,.06) 48%,
      rgba(4,89,78,.26) 100%);
}

.approach4-visual-copy{
  position:absolute;
  right:30px;
  bottom:34px;
  z-index:4;
  width:240px;
  padding:22px 24px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:20px;
  background:rgba(7,84,72,.74);
  backdrop-filter:blur(8px);
  color:#fff;
}

.approach4-visual-copy small{
  display:block;
  margin-bottom:12px;
  font-size:8px;
  line-height:1.6;
  letter-spacing:.18em;
  opacity:.76;
}

.approach4-visual-copy strong{
  display:block;
  font-size:18px;
  line-height:1.65;
  font-weight:600;
  letter-spacing:.04em;
}

.approach4-orbit{
  position:absolute;
  border:1px solid rgba(23,162,137,.30);
  border-radius:50%;
  pointer-events:none;
}

.approach4-orbit-a{
  left:1%;
  top:40px;
  width:380px;
  height:380px;
}

.approach4-orbit-b{
  left:9%;
  top:105px;
  width:260px;
  height:260px;
  opacity:.55;
}

.approach4-process{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:18px;
  padding-top:48px;
}

.approach4-line{
  position:absolute;
  left:6%;
  right:6%;
  top:15px;
  height:2px;
  background:linear-gradient(90deg,#19a98d,#55d2bb);
}

.approach4-line::after{
  content:"";
  position:absolute;
  right:-1px;
  top:-5px;
  width:10px;
  height:10px;
  border-top:2px solid #55d2bb;
  border-right:2px solid #55d2bb;
  transform:rotate(45deg);
}

.approach4-node{
  position:absolute;
  top:50%;
  width:13px;
  height:13px;
  margin-top:-6.5px;
  border-radius:50%;
  border:3px solid var(--paper);
  background:#18a88c;
  box-shadow:0 0 0 1px rgba(24,168,140,.25);
}

.approach4-node.node-1{left:8%}
.approach4-node.node-2{left:36%}
.approach4-node.node-3{left:64%}
.approach4-node.node-4{left:92%}

.approach4-card{
  position:relative;
  min-height:350px;
  overflow:hidden;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(18,45,56,.05);
  box-shadow:0 14px 36px rgba(21,46,57,.06);
  transition:transform .24s ease,box-shadow .24s ease;
}

.approach4-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 48px rgba(21,46,57,.10);
}

.approach4-card-image{
  height:155px;
  overflow:hidden;
  background:#dbe6e3;
}

.approach4-card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}

.approach4-card:hover .approach4-card-image img{
  transform:scale(1.04);
}

.approach4-card-content{
  padding:20px 24px 26px;
}

.approach4-card-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:11px;
}

.approach4-card-meta b{
  color:#0c987d;
  font-size:24px;
  line-height:1;
}

.approach4-card-meta small{
  color:#7e9998;
  font-size:8px;
  font-weight:700;
  letter-spacing:.14em;
}

.approach4-card h3{
  margin:0 0 11px;
  color:#112b3c;
  font-size:19px;
  line-height:1.5;
}

.approach4-card p{
  margin:0;
  color:#687a83;
  font-size:13px;
  line-height:1.85;
}

.approach4-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  margin-top:40px;
  color:#7b9296;
}

.approach4-footer span{
  width:72px;
  height:1px;
  background:#b5c7c4;
}

.approach4-footer small{
  font-size:9px;
  letter-spacing:.18em;
}

@media(max-width:1120px){
  .approach4-intro{
    grid-template-columns:1fr;
    gap:30px;
  }

  .approach4-copy h2{
    font-size:50px;
  }

  .approach4-visual{
    min-height:450px;
    margin-top:0;
  }

  .approach4-visual-frame{
    width:100%;
    height:430px;
  }

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

  .approach4-line{
    display:none;
  }
}

@media(max-width:760px){
  .approach-option4{
    padding:70px 0 62px;
  }

  .approach4-copy h2{
    font-size:40px;
  }

  .approach4-copy>p{
    font-size:13px;
    line-height:1.9;
  }

  .approach4-keyword{
    gap:7px;
    font-size:8px;
  }

  .approach4-visual{
    min-height:375px;
  }

  .approach4-visual-frame{
    height:350px;
    border-radius:26px 26px 26px 80px;
    clip-path:polygon(10% 0,100% 0,100% 100%,0 100%,0 12%);
  }

  .approach4-visual-copy{
    right:14px;
    bottom:18px;
    width:190px;
    padding:16px 18px;
  }

  .approach4-visual-copy strong{
    font-size:15px;
  }

  .approach4-orbit-a{
    width:280px;
    height:280px;
  }

  .approach4-orbit-b{
    width:190px;
    height:190px;
  }

  .approach4-process{
    grid-template-columns:1fr;
    gap:16px;
    padding-top:10px;
  }

  .approach4-card{
    min-height:auto;
  }

  .approach4-card-image{
    height:170px;
  }

  .approach4-footer{
    justify-content:flex-start;
  }
}


/* ==========================================================
   APPROACH OPTION 5 - generated photo composition
   ========================================================== */
.approach-option5{
  position:relative;
  overflow:hidden;
  background:var(--paper);
  padding:88px 0 74px;
}

.approach5-inner{
  position:relative;
}

.approach5-top{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(600px,1.18fr);
  gap:36px;
  align-items:start;
}

.approach5-copy{
  position:relative;
  z-index:3;
  padding-top:8px;
}

.approach5-label{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
  color:#0a8d73;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
}

.approach5-label i{
  width:48px;
  height:1px;
  background:#179d82;
}

.approach5-copy h2{
  margin:0 0 24px;
  color:#10283a;
  font-size:58px;
  line-height:1.2;
  letter-spacing:-.05em;
}

.approach5-copy>p{
  margin:0;
  max-width:620px;
  color:#61727c;
  font-size:14px;
  line-height:2;
}

.approach5-tagline{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-top:30px;
  color:#91a2a6;
}

.approach5-tagline>span{
  width:52px;
  height:1px;
  margin-top:8px;
  background:#178f78;
}

.approach5-tagline small{
  font-size:8px;
  line-height:1.75;
  letter-spacing:.22em;
}

.approach5-visual{
  position:relative;
  min-height:495px;
  margin-top:-88px;
}

.approach5-main-photo{
  position:absolute;
  left:0;
  top:0;
  width:83%;
  height:465px;
  overflow:hidden;
  border-radius:0 0 0 150px;
  clip-path:ellipse(78% 86% at 62% 40%);
  box-shadow:0 26px 64px rgba(25,49,59,.10);
}

.approach5-main-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 45%;
}

.approach5-main-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,rgba(244,243,238,.02),rgba(8,77,72,.06));
}

.approach5-english{
  position:absolute;
  left:8%;
  top:54px;
  z-index:4;
  color:rgba(255,255,255,.75);
  font-size:9px;
  line-height:1.75;
  letter-spacing:.22em;
}

.approach5-message-circle{
  position:absolute;
  z-index:6;
  right:0;
  top:36px;
  width:210px;
  height:210px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px;
  text-align:left;
  color:#fff;
  background:
    radial-gradient(circle at 32% 25%,#15977f 0%,#0c7c69 54%,#096050 100%);
  border:1px solid rgba(255,255,255,.32);
  box-shadow:0 18px 44px rgba(9,96,80,.18);
}

.approach5-message-circle strong{
  font-size:21px;
  line-height:1.65;
  letter-spacing:.05em;
  font-weight:500;
}

.approach5-message-circle>span{
  width:42px;
  height:1px;
  margin:16px 0 12px;
  background:rgba(255,255,255,.68);
  align-self:flex-start;
}

.approach5-message-circle small{
  align-self:flex-start;
  font-size:8px;
  line-height:1.55;
  letter-spacing:.20em;
  opacity:.78;
}

.approach5-landscape{
  position:absolute;
  z-index:5;
  right:-6px;
  bottom:0;
  width:42%;
  height:200px;
  overflow:hidden;
  border-radius:18px 0 0 18px;
  box-shadow:0 20px 48px rgba(22,50,60,.08);
}

.approach5-landscape img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 58%;
}

.approach5-landscape::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(244,243,238,.04),rgba(14,124,105,.05));
}

.approach5-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:18px;
}

.approach5-card{
  overflow:hidden;
  border-radius:15px;
  background:#fff;
  border:1px solid rgba(18,42,55,.05);
  box-shadow:0 12px 30px rgba(22,42,51,.05);
  transition:transform .22s ease,box-shadow .22s ease;
}

.approach5-card:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 44px rgba(22,42,51,.09);
}

.approach5-card-media{
  position:relative;
  height:150px;
  margin:12px 12px 0;
  overflow:hidden;
  border-radius:2px;
}

.approach5-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}

.approach5-card:hover .approach5-card-media img{
  transform:scale(1.035);
}

.approach5-card-no{
  position:absolute;
  left:-2px;
  top:0;
  width:58px;
  padding:6px 10px 8px;
  background:rgba(255,255,255,.93);
}

.approach5-card-no b{
  display:block;
  color:#17384a;
  font-size:18px;
  line-height:1;
  font-weight:500;
}

.approach5-card-no span{
  display:block;
  width:24px;
  height:1px;
  margin-top:9px;
  background:#17384a;
}

.approach5-card-body{
  padding:15px 20px 23px;
}

.approach5-card-body h3{
  margin:0 0 10px;
  color:#112a3c;
  font-size:18px;
  line-height:1.5;
}

.approach5-card-body p{
  margin:0;
  color:#657680;
  font-size:12.5px;
  line-height:1.85;
}

.approach5-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  margin-top:36px;
  color:#8b9ca0;
}

.approach5-footer span{
  width:74px;
  height:1px;
  background:#b5c7c4;
}

.approach5-footer small{
  font-size:8px;
  letter-spacing:.18em;
}

@media(max-width:1120px){
  .approach5-top{
    grid-template-columns:1fr;
    gap:28px;
  }

  .approach5-copy h2{
    font-size:50px;
  }

  .approach5-visual{
    margin-top:0;
    min-height:465px;
  }

  .approach5-main-photo{
    width:80%;
  }

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

@media(max-width:760px){
  .approach-option5{
    padding:70px 0 62px;
  }

  .approach5-copy h2{
    font-size:40px;
  }

  .approach5-copy>p{
    font-size:13px;
    line-height:1.9;
  }

  .approach5-visual{
    min-height:410px;
    margin-top:10px;
  }

  .approach5-main-photo{
    width:86%;
    height:330px;
    clip-path:ellipse(84% 86% at 58% 42%);
    border-radius:0 0 0 90px;
  }

  .approach5-message-circle{
    width:150px;
    height:150px;
    top:18px;
    right:0;
    padding:18px;
  }

  .approach5-message-circle strong{
    font-size:15px;
  }

  .approach5-message-circle>span{
    margin:10px 0 8px;
  }

  .approach5-message-circle small{
    font-size:6.5px;
  }

  .approach5-english{
    top:32px;
    left:5%;
    font-size:7px;
  }

  .approach5-landscape{
    width:56%;
    height:130px;
    bottom:2px;
  }

  .approach5-cards{
    grid-template-columns:1fr;
    gap:16px;
    margin-top:24px;
  }

  .approach5-card-media{
    height:170px;
  }

  .approach5-footer{
    justify-content:flex-start;
  }
}


/* ==========================================================
   APPROACH OPTION 5 REFRESH - rebuilt from scratch
   ========================================================== */
.approach-option5-refresh{
  position:relative;
  overflow:hidden;
  background:var(--paper);
  padding:88px 0 74px;
}

.approach5r-inner{
  position:relative;
}

.approach5r-top{
  display:grid;
  grid-template-columns:minmax(0,.84fr) minmax(620px,1.16fr);
  gap:34px;
  align-items:start;
}

.approach5r-copy{
  position:relative;
  z-index:3;
  padding-top:10px;
}

.approach5r-label{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
  color:#0a8d73;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
}

.approach5r-label i{
  width:48px;
  height:1px;
  background:#179d82;
}

.approach5r-copy h2{
  margin:0 0 24px;
  color:#10283a;
  font-size:58px;
  line-height:1.2;
  letter-spacing:-.05em;
}

.approach5r-copy > p{
  margin:0;
  max-width:620px;
  color:#61727c;
  font-size:14px;
  line-height:2;
}

.approach5r-subline{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:28px;
  color:#8fa1a4;
}

.approach5r-subline span{
  width:58px;
  height:1px;
  background:#179d82;
}

.approach5r-subline small{
  font-size:8px;
  line-height:1.7;
  letter-spacing:.20em;
}

.approach5r-visual{
  position:relative;
  min-height:500px;
  margin-top:-90px;
}

.approach5r-main{
  position:absolute;
  left:0;
  top:0;
  width:83%;
  height:455px;
  overflow:hidden;
  border-radius:40px 40px 130px 40px;
  box-shadow:0 26px 64px rgba(25,49,59,.10);
}

.approach5r-main img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
}

.approach5r-main-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(8,35,45,.30) 0%, rgba(8,35,45,.12) 22%, rgba(8,35,45,0) 50%),
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 100%);
}

.approach5r-english{
  position:absolute;
  left:34px;
  top:34px;
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:6px;
  width:180px;
  padding:14px 16px;
  border-radius:12px;
  background:rgba(5, 28, 36, .22);
  backdrop-filter:blur(4px);
}

.approach5r-english span{
  color:rgba(255,255,255,.92);
  font-size:10px;
  line-height:1.2;
  letter-spacing:.20em;
}

.approach5r-badge{
  position:absolute;
  z-index:4;
  right:38px;
  top:34px;
  width:248px;
  height:248px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:0 38px;
  color:#fff;
  background:radial-gradient(circle at 30% 25%, #1aa289 0%, #10856f 56%, #0b6d5c 100%);
  box-shadow:0 20px 48px rgba(7,94,79,.18);
}

.approach5r-badge strong{
  display:block;
  font-size:18px;
  line-height:1.7;
  letter-spacing:.05em;
  font-weight:600;
}

.approach5r-badge i{
  display:block;
  width:42px;
  height:1px;
  margin:16px 0 14px;
  background:rgba(255,255,255,.70);
}

.approach5r-badge small{
  display:block;
  font-size:8px;
  line-height:1.7;
  letter-spacing:.18em;
  opacity:.85;
}

.approach5r-subcard{
  position:absolute;
  z-index:5;
  right:0;
  bottom:0;
  width:41%;
  height:200px;
  overflow:hidden;
  border-radius:26px;
  box-shadow:0 20px 48px rgba(22,50,60,.10);
}

.approach5r-subcard img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 52%;
}

.approach5r-subcard-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(7,97,80,.10));
}

.approach5r-subcard-copy{
  position:absolute;
  left:22px;
  bottom:18px;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.16);
}

.approach5r-subcard-copy span{
  display:block;
  width:28px;
  height:1px;
  margin-bottom:10px;
  background:rgba(255,255,255,.88);
}

.approach5r-subcard-copy p{
  margin:0;
  font-size:15px;
  line-height:1.6;
  letter-spacing:.04em;
  font-weight:500;
}

.approach5r-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:20px;
}

.approach5r-card{
  overflow:hidden;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(18,42,55,.05);
  box-shadow:0 12px 30px rgba(22,42,51,.05);
  transition:transform .22s ease, box-shadow .22s ease;
}

.approach5r-card:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 44px rgba(22,42,51,.09);
}

.approach5r-card-media{
  position:relative;
  height:148px;
  margin:12px 12px 0;
  overflow:hidden;
  border-radius:10px;
}

.approach5r-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}

.approach5r-card:hover .approach5r-card-media img{
  transform:scale(1.04);
}

.approach5r-card-number{
  position:absolute;
  left:10px;
  top:10px;
  padding:7px 10px 8px;
  border-radius:10px;
  background:rgba(255,255,255,.95);
  box-shadow:0 10px 22px rgba(18,42,55,.08);
}

.approach5r-card-number b{
  display:block;
  color:#133548;
  font-size:18px;
  line-height:1;
  font-weight:600;
}

.approach5r-card-number span{
  display:block;
  width:22px;
  height:1px;
  margin-top:8px;
  background:#159c81;
}

.approach5r-card-body{
  padding:16px 20px 24px;
}

.approach5r-card-body h3{
  margin:0 0 10px;
  color:#112a3c;
  font-size:18px;
  line-height:1.5;
}

.approach5r-card-body p{
  margin:0;
  color:#657680;
  font-size:12.5px;
  line-height:1.85;
}

.approach5r-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  margin-top:36px;
  color:#8b9ca0;
}

.approach5r-footer span{
  width:74px;
  height:1px;
  background:#b5c7c4;
}

.approach5r-footer small{
  font-size:8px;
  letter-spacing:.18em;
}

@media(max-width:1120px){
  .approach5r-top{
    grid-template-columns:1fr;
    gap:28px;
  }

  .approach5r-copy h2{
    font-size:50px;
  }

  .approach5r-visual{
    min-height:470px;
    margin-top:0;
  }

  .approach5r-main{
    width:84%;
  }

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

@media(max-width:760px){
  .approach-option5-refresh{
    padding:70px 0 62px;
  }

  .approach5r-copy h2{
    font-size:40px;
  }

  .approach5r-copy > p{
    font-size:13px;
    line-height:1.9;
  }

  .approach5r-visual{
    min-height:430px;
    margin-top:8px;
  }

  .approach5r-main{
    width:86%;
    height:320px;
    border-radius:24px 24px 78px 24px;
  }

  .approach5r-english{
    left:16px;
    top:16px;
    width:130px;
    padding:10px 12px;
  }

  .approach5r-english span{
    font-size:8px;
  }

  .approach5r-badge{
    right:8px;
    top:22px;
    width:150px;
    height:150px;
    padding:0 20px;
  }

  .approach5r-badge strong{
    font-size:14px;
    line-height:1.55;
  }

  .approach5r-badge i{
    width:28px;
    margin:10px 0 8px;
  }

  .approach5r-badge small{
    font-size:6.5px;
    line-height:1.5;
  }

  .approach5r-subcard{
    right:0;
    width:58%;
    height:126px;
    border-radius:18px;
  }

  .approach5r-subcard-copy{
    left:14px;
    bottom:12px;
  }

  .approach5r-subcard-copy p{
    font-size:11px;
    line-height:1.45;
  }

  .approach5r-cards{
    grid-template-columns:1fr;
    gap:16px;
    margin-top:24px;
  }

  .approach5r-card-media{
    height:168px;
  }

  .approach5r-footer{
    justify-content:flex-start;
  }
}


/* ==========================================================
   APPROACH CLEAN - rebuilt from scratch
   ========================================================== */
.approach-clean{
  position:relative;
  overflow:hidden;
  background:var(--paper);
  padding:94px 0 82px;
}

.approach-clean-inner{
  position:relative;
}

.approach-clean-top{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(560px,1.1fr);
  gap:64px;
  align-items:center;
}

.approach-clean-label{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
  color:#0d9176;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
}

.approach-clean-label i{
  display:block;
  width:46px;
  height:1px;
  background:#20aa8d;
}

.approach-clean-copy h2{
  margin:0 0 24px;
  color:#112b3d;
  font-size:58px;
  line-height:1.19;
  letter-spacing:-.05em;
}

.approach-clean-copy>p{
  margin:0;
  max-width:650px;
  color:#65757e;
  font-size:14px;
  line-height:2;
}

.approach-clean-keywords{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:30px;
  color:#0b947a;
  font-size:10px;
  font-weight:700;
  letter-spacing:.15em;
}

.approach-clean-keywords em{
  color:#9db3af;
  font-style:normal;
  font-weight:400;
}

.approach-clean-visual-wrap{
  position:relative;
  min-height:500px;
}

.approach-clean-visual{
  position:absolute;
  inset:0 0 0 28px;
  overflow:hidden;
  border-radius:34px 34px 34px 120px;
  box-shadow:0 30px 72px rgba(22,48,58,.11);
  background:#edf3f1;
}

.approach-clean-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.approach-clean-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.03) 0%,rgba(5,87,75,.04) 48%,rgba(5,87,75,.16) 100%);
}

.approach-clean-caption{
  position:absolute;
  right:24px;
  bottom:24px;
  z-index:3;
  width:245px;
  padding:22px 24px;
  border-radius:18px;
  color:#fff;
  background:rgba(7,91,77,.84);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 18px 38px rgba(6,73,62,.18);
}

.approach-clean-caption small{
  display:block;
  margin-bottom:12px;
  font-size:8px;
  line-height:1.6;
  letter-spacing:.18em;
  opacity:.76;
}

.approach-clean-caption strong{
  display:block;
  font-size:20px;
  line-height:1.65;
  letter-spacing:.04em;
}

.approach-clean-ring{
  position:absolute;
  z-index:2;
  pointer-events:none;
  border:1px solid rgba(25,164,138,.28);
  border-radius:50%;
}

.approach-clean-ring.ring-a{
  left:-15px;
  top:34px;
  width:330px;
  height:330px;
}

.approach-clean-ring.ring-b{
  left:50px;
  top:100px;
  width:205px;
  height:205px;
  opacity:.55;
}

.approach-clean-points{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:56px;
  padding-top:38px;
}

.approach-clean-flow{
  position:absolute;
  left:6%;
  right:6%;
  top:0;
  height:2px;
}

.approach-clean-flow .flow-line{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#22aa8e,#58d4bd);
}

.approach-clean-flow .flow-line::after{
  content:"";
  position:absolute;
  right:-1px;
  top:-5px;
  width:10px;
  height:10px;
  border-top:2px solid #58d4bd;
  border-right:2px solid #58d4bd;
  transform:rotate(45deg);
}

.approach-clean-flow .flow-dot{
  position:absolute;
  top:50%;
  width:12px;
  height:12px;
  margin-top:-6px;
  border-radius:50%;
  background:#159d82;
  border:3px solid var(--paper);
  box-shadow:0 0 0 1px rgba(21,157,130,.25);
}

.approach-clean-flow .dot-1{left:4%}
.approach-clean-flow .dot-2{left:35.5%}
.approach-clean-flow .dot-3{left:67%}
.approach-clean-flow .dot-4{right:1%}

.approach-clean-card{
  position:relative;
  min-height:225px;
  padding:26px 25px 28px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(18,42,55,.06);
  box-shadow:0 14px 34px rgba(22,42,51,.05);
  transition:transform .22s ease,box-shadow .22s ease;
}

.approach-clean-card:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 44px rgba(22,42,51,.09);
}

.approach-clean-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px;
}

.approach-clean-card-head b{
  color:#0b967b;
  font-size:28px;
  line-height:1;
  font-weight:500;
}

.approach-clean-card-head small{
  color:#8aa09e;
  font-size:8px;
  font-weight:700;
  letter-spacing:.16em;
}

.approach-clean-card h3{
  margin:0 0 12px;
  color:#112b3c;
  font-size:19px;
  line-height:1.5;
}

.approach-clean-card p{
  margin:0;
  color:#687a83;
  font-size:13px;
  line-height:1.85;
}

.approach-clean-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  margin-top:38px;
  color:#809397;
}

.approach-clean-footer span{
  width:70px;
  height:1px;
  background:#b4c6c3;
}

.approach-clean-footer small{
  font-size:9px;
  letter-spacing:.18em;
}

@media(max-width:1120px){
  .approach-clean-top{
    grid-template-columns:1fr;
    gap:34px;
  }

  .approach-clean-copy h2{
    font-size:50px;
  }

  .approach-clean-visual-wrap{
    min-height:470px;
  }

  .approach-clean-visual{
    inset:0;
  }

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

  .approach-clean-flow{
    display:none;
  }
}

@media(max-width:760px){
  .approach-clean{
    padding:72px 0 64px;
  }

  .approach-clean-copy h2{
    font-size:40px;
  }

  .approach-clean-copy>p{
    font-size:13px;
    line-height:1.9;
  }

  .approach-clean-visual-wrap{
    min-height:350px;
  }

  .approach-clean-visual{
    border-radius:24px 24px 24px 68px;
  }

  .approach-clean-caption{
    right:14px;
    bottom:14px;
    width:190px;
    padding:16px 18px;
  }

  .approach-clean-caption strong{
    font-size:15px;
  }

  .approach-clean-ring.ring-a{
    width:240px;
    height:240px;
  }

  .approach-clean-ring.ring-b{
    width:145px;
    height:145px;
  }

  .approach-clean-points{
    grid-template-columns:1fr;
    gap:16px;
    margin-top:32px;
    padding-top:0;
  }

  .approach-clean-card{
    min-height:auto;
  }

  .approach-clean-footer{
    justify-content:flex-start;
  }
}


/* ==========================================================
   ABOUT visual photo replacement - no fade
   ========================================================== */
.approach-clean-visual img{
  object-fit:cover;
  object-position:center 44%;
  filter:none;
  opacity:1;
  mix-blend-mode:normal;
  -webkit-mask-image:none;
  mask-image:none;
}

.approach-clean-visual::after{
  background:linear-gradient(
    135deg,
    rgba(255,255,255,0) 0%,
    rgba(5,87,75,.02) 60%,
    rgba(5,87,75,.08) 100%
  );
}


/* ==========================================================
   APPROACH V19 - based on approved latest design
   ========================================================== */
.approach-v19{
  position:relative;
  overflow:hidden;
  background:var(--paper);
  padding:94px 0 82px;
}

.approach-v19-inner{
  position:relative;
}

.approach-v19-top{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(560px,1.08fr);
  gap:58px;
  align-items:center;
}

.approach-v19-label{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
  color:#0a9277;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
}

.approach-v19-label i{
  width:46px;
  height:1px;
  background:#20aa8d;
  display:block;
}

.approach-v19-copy h2{
  margin:0 0 24px;
  color:#112b3d;
  font-size:58px;
  line-height:1.19;
  letter-spacing:-.05em;
}

.approach-v19-copy>p{
  margin:0;
  max-width:650px;
  color:#65757e;
  font-size:14px;
  line-height:2;
}

.approach-v19-keywords{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:30px;
  color:#0b947a;
  font-size:10px;
  font-weight:700;
  letter-spacing:.15em;
}

.approach-v19-keywords b{
  color:#9db3af;
  font-weight:400;
}

.approach-v19-visual{
  position:relative;
  min-height:470px;
}

.approach-v19-photo{
  position:absolute;
  inset:0 0 0 0;
  overflow:hidden;
  border-radius:36px 36px 36px 115px;
  background:#e9efed;
  box-shadow:0 28px 68px rgba(22,48,58,.11);
}

.approach-v19-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 46%;
}

.approach-v19-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    135deg,
    rgba(255,255,255,0) 0%,
    rgba(6,80,69,.02) 58%,
    rgba(6,80,69,.10) 100%
  );
}

.approach-v19-badge{
  position:absolute;
  right:-12px;
  bottom:38px;
  z-index:4;
  width:270px;
  padding:24px 28px 26px;
  color:#fff;
  background:linear-gradient(145deg,#0e7b67,#07594b);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 20px 42px rgba(8,88,74,.22);
}

.approach-v19-badge small{
  display:block;
  position:relative;
  margin-bottom:14px;
  padding-left:44px;
  font-size:8px;
  letter-spacing:.15em;
  opacity:.80;
}

.approach-v19-badge small::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:32px;
  height:1px;
  background:rgba(255,255,255,.72);
}

.approach-v19-badge strong{
  display:block;
  font-size:22px;
  line-height:1.6;
  letter-spacing:.04em;
}

.approach-v19-ring{
  position:absolute;
  z-index:2;
  border:1px solid rgba(23,164,138,.28);
  border-radius:50%;
  pointer-events:none;
}

.approach-v19-ring.ring-one{
  left:-28px;
  top:-38px;
  width:340px;
  height:340px;
}

.approach-v19-ring.ring-two{
  left:38px;
  top:28px;
  width:215px;
  height:215px;
  opacity:.55;
}

.approach-v19-flow{
  position:relative;
  height:44px;
  margin:42px 0 0;
}

.approach-v19-flow .flow-line{
  position:absolute;
  left:9%;
  right:5%;
  top:20px;
  height:2px;
  background:linear-gradient(90deg,#18a68a,#56d3bb);
}

.approach-v19-flow .flow-line::after{
  content:"";
  position:absolute;
  right:-1px;
  top:-5px;
  width:10px;
  height:10px;
  border-top:2px solid #56d3bb;
  border-right:2px solid #56d3bb;
  transform:rotate(45deg);
}

.approach-v19-flow .flow-dot{
  position:absolute;
  top:14px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#17a486;
  border:4px solid var(--paper);
  box-shadow:0 0 0 1px rgba(23,164,134,.30);
}

.approach-v19-flow .dot-1{left:9%}
.approach-v19-flow .dot-2{left:35%}
.approach-v19-flow .dot-3{left:61%}
.approach-v19-flow .dot-4{left:87%}

.approach-v19-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.approach-v19-card{
  min-height:230px;
  padding:24px 26px 28px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(18,42,55,.06);
  box-shadow:0 14px 34px rgba(22,42,51,.05);
  transition:transform .22s ease,box-shadow .22s ease;
}

.approach-v19-card:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 44px rgba(22,42,51,.09);
}

.approach-v19-card-head{
  display:grid;
  grid-template-columns:auto auto 1fr;
  gap:12px;
  align-items:center;
  margin-bottom:24px;
}

.approach-v19-card-head b{
  color:#51bea6;
  font-size:34px;
  line-height:1;
  font-weight:600;
}

.approach-v19-icon{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#edf7f4;
  color:#0b947a;
  font-size:14px;
  font-weight:700;
}

.approach-v19-card-head small{
  color:#8b9da0;
  font-size:8px;
  font-weight:700;
  letter-spacing:.14em;
}

.approach-v19-card h3{
  margin:0 0 12px;
  color:#112b3c;
  font-size:19px;
  line-height:1.5;
}

.approach-v19-card p{
  margin:0;
  color:#687a83;
  font-size:13px;
  line-height:1.85;
}

.approach-v19-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  margin-top:38px;
  color:#809397;
}

.approach-v19-footer span{
  width:70px;
  height:1px;
  background:#b4c6c3;
}

.approach-v19-footer small{
  font-size:9px;
  letter-spacing:.18em;
}

@media(max-width:1120px){
  .approach-v19-top{
    grid-template-columns:1fr;
    gap:34px;
  }

  .approach-v19-copy h2{
    font-size:50px;
  }

  .approach-v19-visual{
    min-height:450px;
  }

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

  .approach-v19-flow{
    display:none;
  }
}

@media(max-width:760px){
  .approach-v19{
    padding:72px 0 64px;
  }

  .approach-v19-copy h2{
    font-size:40px;
  }

  .approach-v19-copy>p{
    font-size:13px;
    line-height:1.9;
  }

  .approach-v19-visual{
    min-height:340px;
  }

  .approach-v19-photo{
    border-radius:24px 24px 24px 70px;
  }

  .approach-v19-badge{
    right:8px;
    bottom:12px;
    width:205px;
    padding:18px 20px 20px;
  }

  .approach-v19-badge strong{
    font-size:16px;
  }

  .approach-v19-ring.ring-one{
    width:250px;
    height:250px;
  }

  .approach-v19-ring.ring-two{
    width:160px;
    height:160px;
  }

  .approach-v19-cards{
    grid-template-columns:1fr;
    gap:16px;
    margin-top:28px;
  }

  .approach-v19-card{
    min-height:auto;
  }

  .approach-v19-footer{
    justify-content:flex-start;
  }
}


/* ==========================================================
   V20 about visual refinements
   - フェード削除
   - 斜めの四角形
   - バッジ右下へ縮小移動
   - 緑の◎を濃く・大きく・目立たせる
   ========================================================== */
.approach-v19-visual{
  position: relative;
  min-height: 500px;
  overflow: visible;
  isolation: isolate;
}

/* 背景の大きな緑の◎ */
.approach-v19-visual::before,
.approach-v19-visual::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:1;
}

.approach-v19-visual::before{
  width: 560px;
  height: 560px;
  right: -120px;
  top: -80px;
  background:
    radial-gradient(circle,
      rgba(8, 124, 102, 0) 0 58%,
      rgba(9, 124, 103, 0.38) 58.5% 64%,
      rgba(9, 124, 103, 0) 64.5% 100%);
  box-shadow:
    0 0 0 2px rgba(8, 124, 102, 0.26) inset,
    0 0 120px rgba(8, 124, 102, 0.10);
  opacity: 1;
}

.approach-v19-visual::after{
  width: 420px;
  height: 420px;
  left: -95px;
  bottom: -70px;
  background:
    radial-gradient(circle,
      rgba(8, 124, 102, 0) 0 57%,
      rgba(8, 124, 102, 0.30) 57.5% 63%,
      rgba(8, 124, 102, 0) 63.5% 100%);
  box-shadow:
    0 0 0 2px rgba(8, 124, 102, 0.20) inset,
    0 0 80px rgba(8, 124, 102, 0.08);
  opacity: .95;
}

.approach-v19-ring.ring-one{
  width: 360px;
  height: 360px;
  left: -30px;
  top: -34px;
  border: 2px solid rgba(8, 124, 102, 0.42);
  opacity: 1;
  z-index: 1;
}

.approach-v19-ring.ring-two{
  width: 250px;
  height: 250px;
  left: 38px;
  top: 26px;
  border: 2px solid rgba(8, 124, 102, 0.28);
  opacity: .95;
  z-index: 1;
}

/* 画像はフェードなし、斜めの四角形 */
.approach-v19-photo{
  position:absolute;
  inset: 16px 28px 18px 10px;
  overflow:hidden;
  border-radius:0;
  clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
  background:#e9efed;
  box-shadow: 0 28px 68px rgba(22,48,58,.12);
  z-index: 3;
}

.approach-v19-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 40%;
  filter:none;
  opacity:1;
  mix-blend-mode:normal;
}

.approach-v19-photo::after{
  display:none;
}

/* 右下のメッセージは小さめにして移動 */
.approach-v19-badge{
  right: 6px;
  bottom: 10px;
  width: 215px;
  padding: 16px 18px 18px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(10,122,102,.96), rgba(6,91,76,.96));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 18px 36px rgba(8,88,74,.22);
  z-index: 5;
}

.approach-v19-badge small{
  margin-bottom: 10px;
  padding-left: 34px;
  font-size: 7px;
  letter-spacing: .16em;
}

.approach-v19-badge small::before{
  width: 24px;
}

.approach-v19-badge strong{
  font-size: 18px;
  line-height: 1.55;
}

@media(max-width:1120px){
  .approach-v19-visual{
    min-height: 450px;
  }

  .approach-v19-visual::before{
    width: 500px;
    height: 500px;
    right: -120px;
    top: -70px;
  }

  .approach-v19-visual::after{
    width: 360px;
    height: 360px;
    left: -70px;
    bottom: -50px;
  }

  .approach-v19-photo{
    inset: 8px 14px 18px 8px;
  }
}

@media(max-width:760px){
  .approach-v19-visual{
    min-height: 345px;
  }

  .approach-v19-visual::before{
    width: 330px;
    height: 330px;
    right: -75px;
    top: -35px;
  }

  .approach-v19-visual::after{
    width: 240px;
    height: 240px;
    left: -40px;
    bottom: -35px;
  }

  .approach-v19-ring.ring-one{
    width: 220px;
    height: 220px;
    left: -12px;
    top: -12px;
  }

  .approach-v19-ring.ring-two{
    width: 150px;
    height: 150px;
    left: 28px;
    top: 22px;
  }

  .approach-v19-photo{
    inset: 10px 10px 16px 8px;
    clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
  }

  .approach-v19-photo img{
    object-position: center 38%;
  }

  .approach-v19-badge{
    right: 6px;
    bottom: 8px;
    width: 168px;
    padding: 12px 14px 14px;
  }

  .approach-v19-badge small{
    padding-left: 24px;
    margin-bottom: 8px;
    font-size: 6px;
  }

  .approach-v19-badge small::before{
    width: 18px;
  }

  .approach-v19-badge strong{
    font-size: 14px;
    line-height: 1.5;
  }
}


/* ==========================================================
   PROGRAM V21
   ========================================================== */
.program-v21{
  background: #f6f7f8;
  padding-top: 92px;
  padding-bottom: 88px;
  overflow: hidden;
}

.program-v21-head{
  max-width: 980px;
  margin: 0 auto 52px;
  position: relative;
}

.program-v21-head::before{
  content: "NEXT\AOWNER\APROGRAM";
  white-space: pre;
  position: absolute;
  left: -160px;
  top: -24px;
  font-size: 84px;
  line-height: .9;
  font-weight: 700;
  letter-spacing: -.06em;
  color: rgba(10, 31, 56, 0.05);
  pointer-events: none;
  text-align: left;
}

.program-v21-head h2{
  color: #0d2240;
}

.program-v21-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: stretch;
}

.program-v21-step{
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbfd 100%);
  border: 1px solid rgba(18, 45, 66, 0.07);
  border-radius: 22px;
  padding: 0 20px 24px;
  box-shadow: 0 18px 44px rgba(18, 45, 66, 0.06);
  min-height: 520px;
  overflow: visible;
}

.program-v21-step:not(:last-child)::after{
  content: "›";
  position: absolute;
  right: -18px;
  top: 44%;
  transform: translateY(-50%);
  font-size: 72px;
  line-height: 1;
  color: #15b39f;
  font-weight: 300;
  z-index: 3;
  text-shadow: 0 8px 20px rgba(21, 179, 159, 0.18);
}

.program-v21-step-top{
  position: relative;
  margin: 0 -20px 16px;
  padding: 0 20px;
  min-height: 220px;
  display: flex;
  align-items: stretch;
}

.program-v21-step-no{
  width: 110px;
  min-width: 110px;
  padding: 24px 18px 18px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
  box-shadow: 0 10px 24px rgba(12, 102, 124, 0.18);
  z-index: 2;
}

.step-01 .program-v21-step-no,
.step-03 .program-v21-step-no{
  background: linear-gradient(180deg, #12a998 0%, #0d8b84 100%);
}

.step-02 .program-v21-step-no,
.step-04 .program-v21-step-no{
  background: linear-gradient(180deg, #1255a9 0%, #0d3e87 100%);
}

.program-v21-step-no span{
  font-size: 14px;
  letter-spacing: .08em;
  font-weight: 700;
}

.program-v21-step-no strong{
  font-size: 56px;
  line-height: 1;
  letter-spacing: -.04em;
}

.program-v21-visual{
  flex: 1;
  position: relative;
  margin-left: 18px;
  background: linear-gradient(180deg, #f1f6fa 0%, #ffffff 100%);
  border-radius: 0 20px 20px 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.program-v21-visual::before{
  content: "";
  position: absolute;
  inset: auto -10% -20% auto;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 178, 162, .22) 0%, rgba(20,178,162,0) 70%);
}

.program-v21-visual::after{
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 68px;
  height: 68px;
  border-radius: 16px;
  border: 1px solid rgba(21, 179, 159, 0.12);
  background: rgba(255,255,255,.42);
  transform: rotate(8deg);
}

.program-v21-icon{
  position: relative;
  width: 146px;
  height: 146px;
  z-index: 2;
}

.program-v21-icon.brain{
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(44,244,231,.85), rgba(11,80,122,.92) 65%);
  box-shadow: 0 18px 32px rgba(15, 119, 160, 0.18);
}
.program-v21-icon.brain span:nth-child(1){
  position:absolute; inset:30px 46px 30px 46px; border-radius:30px;
  background: rgba(255,255,255,.2);
  box-shadow:
    -24px -16px 0 2px rgba(255,255,255,.22),
    24px -16px 0 2px rgba(255,255,255,.22),
    -18px 18px 0 2px rgba(255,255,255,.18),
    18px 18px 0 2px rgba(255,255,255,.18);
}
.program-v21-icon.brain span:nth-child(2){
  position:absolute; left:28px; right:28px; top:72px; height:2px; background:rgba(255,255,255,.4);
}
.program-v21-icon.brain span:nth-child(3){
  position:absolute; left:60px; top:28px; width:26px; height:26px; border-radius:50%;
  border:2px solid rgba(255,255,255,.55);
}

.program-v21-icon.handshake{
  background: linear-gradient(180deg, #eaf6ff, #ffffff);
  border-radius: 24px;
}
.program-v21-icon.handshake span:nth-child(1),
.program-v21-icon.handshake span:nth-child(2){
  position:absolute; top:58px; width:62px; height:28px; border-radius:14px;
  background: linear-gradient(180deg, #2f7ec8, #1f5d9c);
  box-shadow: 0 10px 16px rgba(40, 95, 160, .18);
}
.program-v21-icon.handshake span:nth-child(1){ left:14px; transform: rotate(18deg); }
.program-v21-icon.handshake span:nth-child(2){ right:14px; transform: rotate(-18deg); }
.program-v21-icon.handshake span:nth-child(3){
  position:absolute; left:49px; top:48px; width:48px; height:48px; border-radius:14px;
  background: linear-gradient(180deg, #ffd5b0, #f3b98c);
  transform: rotate(45deg);
  box-shadow: 0 12px 18px rgba(170,120,84,.18);
}

.program-v21-icon.check{
  background: linear-gradient(180deg, #ffffff, #f7fafc);
  border-radius: 18px;
  border: 2px solid rgba(13, 62, 135, .16);
  box-shadow: 0 16px 30px rgba(18, 45, 66, 0.08);
}
.program-v21-icon.check span:nth-child(1){
  position:absolute; left:26px; right:26px; top:30px; height:4px; background:#d6e1ea;
  box-shadow: 0 24px 0 #d6e1ea, 0 48px 0 #d6e1ea;
}
.program-v21-icon.check span:nth-child(2){
  position:absolute; left:22px; top:24px; width:14px; height:14px; border: 3px solid #16a58f; border-radius: 4px;
  box-shadow: 0 24px 0 -3px #16a58f, 0 48px 0 -3px #16a58f;
}
.program-v21-icon.check span:nth-child(3){
  position:absolute; right:-8px; bottom:-8px; width:54px; height:54px; border-radius:50%;
  background: linear-gradient(180deg, #efd693, #caa34a);
  box-shadow: 0 12px 20px rgba(183,140,53,.22);
}

.program-v21-icon.chair{
  border-radius: 28px;
  background: linear-gradient(180deg, #eef6ff, #ffffff);
  box-shadow: 0 16px 28px rgba(18, 45, 66, 0.08);
}
.program-v21-icon.chair span:nth-child(1){
  position:absolute; left:42px; top:24px; width:62px; height:72px; border-radius:26px 26px 18px 18px;
  background: linear-gradient(180deg, #173f84, #0f2e63);
}
.program-v21-icon.chair span:nth-child(2){
  position:absolute; left:35px; top:82px; width:78px; height:34px; border-radius:18px;
  background: linear-gradient(180deg, #173f84, #0f2e63);
}
.program-v21-icon.chair span:nth-child(3){
  position:absolute; right:6px; top:8px; width:0; height:0;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-bottom: 56px solid #5ac4ea;
  transform: rotate(40deg);
  filter: drop-shadow(0 10px 16px rgba(90,196,234,.22));
}

.program-v21-step h3{
  margin: 10px 0 10px;
  color: #0d2240;
  font-size: 23px;
  line-height: 1.45;
  letter-spacing: -.03em;
}

.program-v21-pill{
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin: 0 0 18px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #e8f0f2;
  color: #335467;
  font-size: 13px;
  font-weight: 700;
}

.program-v21-body{
  margin: 0;
  color: #4f6272;
  font-size: 14px;
  line-height: 1.95;
}

.program-v21-banner{
  margin-top: 34px;
  background:
    radial-gradient(circle at 12% 50%, rgba(53,151,220,.35) 0%, rgba(53,151,220,0) 22%),
    linear-gradient(90deg, #071e33 0%, #0b2641 40%, #0d2340 100%);
  border-radius: 24px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 160px 1fr auto;
  align-items: center;
  gap: 28px;
  overflow: hidden;
  position: relative;
}

.program-v21-earth{
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(95,210,255,.2), rgba(95,210,255,0) 35%),
    radial-gradient(circle at 42% 42%, #1ca0de 0, #123a69 58%, #081c33 100%);
  box-shadow: inset -28px -26px 42px rgba(0,0,0,.28), 0 0 32px rgba(66,163,230,.12);
  position: relative;
  transform: translateX(-28px);
}
.program-v21-earth::before,
.program-v21-earth::after{
  content:"";
  position:absolute;
  background: rgba(91, 225, 187, .55);
  border-radius: 50% 44% 40% 56%;
  filter: blur(1px);
}
.program-v21-earth::before{
  width: 72px; height: 42px; left: 36px; top: 54px; transform: rotate(-12deg);
}
.program-v21-earth::after{
  width: 52px; height: 28px; left: 86px; top: 92px; transform: rotate(20deg);
}

.program-v21-banner-copy{
  text-align: center;
}
.program-v21-banner-copy h3{
  margin: 0 0 10px;
  color: #fff;
  font-size: 26px;
  line-height: 1.5;
  letter-spacing: .02em;
}
.program-v21-banner-copy p{
  margin: 0;
  color: #54dbc6;
  font-size: 12px;
  letter-spacing: .22em;
}

.program-v21-brand{
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
}
.program-v21-brand strong{
  display: block;
  font-size: 18px;
  margin-bottom: 5px;
}
.program-v21-brand small{
  display: block;
  color: rgba(255,255,255,.72);
  font-size: 10px;
  letter-spacing: .14em;
}
.program-v21-orb{
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #7bf2f0 0, #2ca3e9 32%, #0e3b68 72%, #0a2744 100%);
  box-shadow:
    inset 0 0 0 5px rgba(123,242,240,.16),
    0 0 28px rgba(61,199,236,.18);
  position: relative;
}
.program-v21-orb::before,
.program-v21-orb::after{
  content:"";
  position:absolute;
  inset: 12px;
  border-radius: 50%;
  border: 4px solid rgba(123,242,240,.55);
  transform: rotate(28deg);
}
.program-v21-orb::after{
  inset: 18px 8px;
  transform: rotate(-34deg);
  border-color: rgba(72,221,178,.55);
}

@media (max-width: 1200px){
  .program-v21-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  .program-v21-step:nth-child(2)::after{
    display:none;
  }

  .program-v21-step{
    min-height: 470px;
  }

  .program-v21-banner{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 18px;
  }

  .program-v21-earth{
    transform: none;
  }
}

@media (max-width: 760px){
  .program-v21{
    padding-top: 70px;
    padding-bottom: 64px;
  }

  .program-v21-head{
    margin-bottom: 38px;
  }

  .program-v21-head::before{
    display: none;
  }

  .program-v21-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .program-v21-step{
    min-height: auto;
    padding-bottom: 20px;
  }

  .program-v21-step::after{
    display: none !important;
  }

  .program-v21-step-top{
    min-height: 178px;
  }

  .program-v21-step-no{
    width: 92px;
    min-width: 92px;
    padding: 20px 14px 16px;
  }

  .program-v21-step-no span{
    font-size: 12px;
  }

  .program-v21-step-no strong{
    font-size: 44px;
  }

  .program-v21-icon{
    width: 116px;
    height: 116px;
  }

  .program-v21-step h3{
    font-size: 21px;
  }

  .program-v21-pill{
    font-size: 12px;
    min-height: 36px;
  }

  .program-v21-body{
    font-size: 13px;
    line-height: 1.85;
  }

  .program-v21-banner{
    margin-top: 26px;
    padding: 24px 18px;
    border-radius: 20px;
  }

  .program-v21-earth{
    width: 136px;
    height: 136px;
  }

  .program-v21-banner-copy h3{
    font-size: 20px;
    line-height: 1.6;
  }

  .program-v21-brand{
    flex-direction: column;
  }

  .program-v21-orb{
    width: 62px;
    height: 62px;
  }
}


/* ==========================================================
   PROGRAM V22 - faithful reconstruction
   ========================================================== */
.program-v22{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 75% 15%,rgba(49,160,197,.07),transparent 28%),
    linear-gradient(180deg,#f8fafb 0%,#f4f8fa 100%);
  padding:82px 0 0;
}

.program-v22-inner{position:relative;z-index:2}

.program-v22-bgword{
  position:absolute;
  left:-10px;
  top:18px;
  z-index:0;
  color:rgba(22,72,101,.055);
  font-family:Georgia,"Times New Roman",serif;
  font-size:84px;
  line-height:.86;
  letter-spacing:-.05em;
  pointer-events:none;
}

.program-v22-rings{
  position:absolute;
  right:-70px;
  top:-75px;
  width:350px;
  height:350px;
  border-radius:50%;
  border:18px solid rgba(22,126,165,.045);
  box-shadow:
    inset 0 0 0 18px rgba(22,126,165,.025),
    inset 0 0 0 38px rgba(22,126,165,.018);
  pointer-events:none;
}

.program-v22-rings::after{
  content:"PEOPLE\\A BUSINESS\\A A BRIGHTER JAPAN";
  white-space:pre;
  position:absolute;
  left:95px;
  top:155px;
  color:#6c8496;
  font-size:9px;
  line-height:1.8;
  letter-spacing:.20em;
}

.program-v22-head{text-align:center;margin-bottom:36px}

.program-v22-kicker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  color:#0a8c80;
  font-size:12px;
  font-weight:700;
  letter-spacing:.24em;
}

.program-v22-kicker span{
  width:46px;height:1px;background:#0b8f84;
}

.program-v22-head h2{
  margin:18px 0 16px;
  color:#081c3a;
  font-size:54px;
  line-height:1.2;
  letter-spacing:-.04em;
}

.program-v22-head p{
  margin:0;
  color:#263d54;
  font-size:16px;
  line-height:1.8;
  font-weight:500;
}

.program-v22-diagram{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 195px minmax(0,1fr);
  grid-template-rows:auto auto;
  gap:46px 32px;
  margin-top:28px;
  padding-bottom:28px;
}

.program-v22-card{
  min-height:250px;
  border-radius:18px;
  background:rgba(238,247,250,.80);
  box-shadow:inset 0 0 0 1px rgba(52,115,141,.04);
  padding:18px 22px;
  display:grid;
  align-items:center;
}

.program-v22-card-01,
.program-v22-card-03{
  grid-column:1;
  grid-template-columns:minmax(0,1fr) 46%;
}

.program-v22-card-02,
.program-v22-card-04{
  grid-column:3;
  grid-template-columns:46% minmax(0,1fr);
}

.program-v22-card-01,.program-v22-card-02{grid-row:1}
.program-v22-card-03,.program-v22-card-04{grid-row:2}

.program-v22-card-copy{
  position:relative;
  padding:8px 8px 8px 24px;
}

.program-v22-card-copy>i{
  position:absolute;
  left:0;
  top:8px;
  width:6px;
  height:70px;
  border-radius:8px;
  background:#0ba49b;
}

.program-v22-card-02 .program-v22-card-copy>i,
.program-v22-card-04 .program-v22-card-copy>i{
  background:#117fa3;
}

.program-v22-card h3{
  margin:0 0 12px;
  color:#0c1f3d;
  font-size:23px;
  line-height:1.35;
  letter-spacing:-.03em;
}

.program-v22-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:7px 18px;
  border-radius:999px;
  background:#d9eaec;
  color:#17485d;
  font-size:12px;
  font-weight:700;
}

.program-v22-card p{
  margin:16px 0 0;
  color:#253d52;
  font-size:13px;
  line-height:1.75;
}

.program-v22-card-image{
  height:205px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.program-v22-card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  mix-blend-mode:multiply;
}

.program-v22-road{
  grid-column:2;
  grid-row:1 / span 2;
  position:relative;
  min-height:610px;
}

.program-v22-road-step{
  position:absolute;
  left:16px;
  width:132px;
  height:144px;
  display:flex;
  align-items:center;
  justify-content:center;
  clip-path:polygon(0 0,70% 0,100% 50%,70% 100%,0 100%,26% 50%);
  filter:drop-shadow(0 9px 14px rgba(20,75,108,.10));
}

.program-v22-road-step span{
  width:70px;
  height:70px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:4px solid rgba(255,255,255,.9);
  color:#fff;
  font-size:42px;
  line-height:1;
  font-weight:600;
  background:rgba(9,71,96,.32);
}

.road-1{top:0;background:linear-gradient(135deg,#11a593,#0b7f73)}
.road-2{top:147px;background:linear-gradient(135deg,#1265a0,#0d3b75)}
.road-3{top:294px;background:linear-gradient(135deg,#13a393,#0b8076)}
.road-4{top:441px;background:linear-gradient(135deg,#135d99,#0b376d)}

.road-label{
  position:absolute;
  color:#136888;
  font-size:9px;
  line-height:1.55;
  letter-spacing:.20em;
  font-weight:700;
}

.label-1{left:165px;top:44px}
.label-2{right:165px;top:198px;text-align:right}
.label-3{left:165px;top:344px}
.label-4{right:165px;top:500px;text-align:right}

.road-label::after{
  content:"";
  display:block;
  width:34px;
  height:1px;
  margin-top:10px;
  background:#168b91;
}
.label-2::after,.label-4::after{margin-left:auto}

.program-v22-banner{
  position:relative;
  min-height:175px;
  margin-top:6px;
  margin-left:calc((100vw - min(100vw - 40px,1240px))/2 * -1);
  margin-right:calc((100vw - min(100vw - 40px,1240px))/2 * -1);
  padding:30px max(30px,calc((100vw - 1240px)/2));
  overflow:hidden;
  display:grid;
  grid-template-columns:260px 1fr 300px;
  align-items:center;
  gap:30px;
  background:
    radial-gradient(circle at 12% 45%,rgba(47,148,211,.25),transparent 25%),
    linear-gradient(90deg,#061b30 0%,#0a2643 50%,#0b2039 100%);
}

.program-v22-earth-img{
  position:absolute;
  left:-40px;
  bottom:-65px;
  width:340px;
  height:210px;
  object-fit:cover;
  border-radius:50%;
  mix-blend-mode:screen;
  opacity:.9;
}

.program-v22-banner-copy{
  grid-column:2;
  text-align:center;
  position:relative;
  z-index:2;
}

.program-v22-banner-copy h3{
  margin:0 0 14px;
  color:#fff;
  font-size:25px;
  line-height:1.5;
  letter-spacing:.04em;
  font-weight:500;
}

.program-v22-banner-copy>div{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}

.program-v22-banner-copy span{
  width:56px;height:1px;background:#2fb8b0;
}

.program-v22-banner-copy small{
  color:#44d2c4;
  font-size:9px;
  letter-spacing:.22em;
}

.program-v22-brand{
  grid-column:3;
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  justify-self:end;
  position:relative;
  z-index:2;
}

.program-v22-brand img{
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:50%;
  box-shadow:0 0 25px rgba(74,210,238,.22);
}

.program-v22-brand strong{
  display:block;
  font-size:18px;
  margin-bottom:5px;
}

.program-v22-brand small{
  color:rgba(255,255,255,.65);
  font-size:8px;
  letter-spacing:.13em;
}

@media(max-width:1100px){
  .program-v22-diagram{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    gap:22px;
  }

  .program-v22-road{display:none}

  .program-v22-card-01,
  .program-v22-card-02,
  .program-v22-card-03,
  .program-v22-card-04{
    grid-column:1;
    grid-row:auto;
    grid-template-columns:minmax(0,1fr) 40%;
  }

  .program-v22-card-02 .program-v22-card-image,
  .program-v22-card-04 .program-v22-card-image{order:2}
  .program-v22-card-02 .program-v22-card-copy,
  .program-v22-card-04 .program-v22-card-copy{order:1}

  .program-v22-banner{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
    min-height:250px;
  }

  .program-v22-banner-copy,
  .program-v22-brand{grid-column:1}

  .program-v22-brand{justify-self:center}
}

@media(max-width:760px){
  .program-v22{padding-top:68px}

  .program-v22-bgword,
  .program-v22-rings{display:none}

  .program-v22-head{margin-bottom:28px}

  .program-v22-kicker{font-size:9px;gap:10px}
  .program-v22-kicker span{width:28px}

  .program-v22-head h2{font-size:34px}
  .program-v22-head p{font-size:13px}

  .program-v22-card{
    grid-template-columns:1fr!important;
    padding:18px;
  }

  .program-v22-card-image{
    height:180px;
    order:1!important;
  }

  .program-v22-card-copy{
    order:2!important;
    padding:12px 4px 4px 20px;
  }

  .program-v22-card h3{font-size:20px}
  .program-v22-card p{font-size:12.5px}

  .program-v22-banner{
    margin-left:-16px;
    margin-right:-16px;
    padding:28px 18px;
  }

  .program-v22-earth-img{
    left:-85px;
    opacity:.55;
  }

  .program-v22-banner-copy h3{font-size:19px}
  .program-v22-brand{flex-direction:column}
}


/* ==========================================================
   PROGRAM V23 - compact refinement
   ========================================================== */
.program-v22{
  padding-top:64px;
}

.program-v22-head{
  margin-bottom:24px;
}

.program-v22-head h2{
  margin:12px 0 10px;
  font-size:48px;
  line-height:1.16;
}

.program-v22-head p{
  font-size:14px;
  line-height:1.65;
}

.program-v22-diagram{
  grid-template-columns:minmax(0,1fr) 170px minmax(0,1fr);
  gap:26px 24px;
  margin-top:20px;
  padding-bottom:18px;
}

.program-v22-card{
  min-height:215px;
  padding:14px 18px;
  border-radius:16px;
}

.program-v22-card-copy{
  padding:6px 6px 6px 20px;
}

.program-v22-card-copy>i{
  top:6px;
  height:58px;
  width:5px;
}

.program-v22-card h3{
  margin-bottom:9px;
  font-size:20px;
  line-height:1.30;
}

.program-v22-pill{
  min-height:30px;
  padding:6px 15px;
  font-size:11px;
}

.program-v22-card p{
  margin-top:12px;
  font-size:12px;
  line-height:1.62;
}

.program-v22-card-image{
  height:170px;
}

.program-v22-road{
  min-height:520px;
}

.program-v22-road-step{
  left:14px;
  width:116px;
  height:122px;
}

.program-v22-road-step span{
  width:60px;
  height:60px;
  font-size:34px;
  border-width:3px;
}

.road-1{top:0}
.road-2{top:128px}
.road-3{top:256px}
.road-4{top:384px}

.label-1{left:138px;top:34px}
.label-2{right:138px;top:164px}
.label-3{left:138px;top:292px}
.label-4{right:138px;top:422px}

.road-label{
  font-size:8px;
  line-height:1.45;
}

.road-label::after{
  width:28px;
  margin-top:7px;
}

.program-v22-banner{
  min-height:138px;
  margin-top:0;
  padding-top:20px;
  padding-bottom:20px;
  grid-template-columns:220px 1fr 260px;
}

.program-v22-earth-img{
  width:280px;
  height:165px;
  bottom:-48px;
}

.program-v22-banner-copy h3{
  margin-bottom:10px;
  font-size:21px;
  line-height:1.4;
}

.program-v22-banner-copy small{
  font-size:8px;
}

.program-v22-brand img{
  width:60px;
  height:60px;
}

.program-v22-brand strong{
  font-size:16px;
}

.program-v22-brand small{
  font-size:7px;
}

@media(max-width:1100px){
  .program-v22-diagram{
    gap:16px;
  }

  .program-v22-card{
    min-height:200px;
  }

  .program-v22-card-image{
    height:155px;
  }

  .program-v22-banner{
    min-height:210px;
  }
}

@media(max-width:760px){
  .program-v22{
    padding-top:56px;
  }

  .program-v22-head{
    margin-bottom:20px;
  }

  .program-v22-head h2{
    font-size:31px;
  }

  .program-v22-head p{
    font-size:12.5px;
    line-height:1.55;
  }

  .program-v22-diagram{
    gap:14px;
    margin-top:16px;
  }

  .program-v22-card{
    padding:14px;
  }

  .program-v22-card-image{
    height:150px;
  }

  .program-v22-card-copy{
    padding:10px 2px 2px 17px;
  }

  .program-v22-card h3{
    font-size:18px;
    line-height:1.3;
  }

  .program-v22-card p{
    margin-top:10px;
    font-size:12px;
    line-height:1.55;
  }

  .program-v22-pill{
    min-height:28px;
    padding:5px 13px;
    font-size:10px;
  }

  .program-v22-banner{
    min-height:190px;
    padding:22px 16px;
  }

  .program-v22-banner-copy h3{
    font-size:17px;
  }

  .program-v22-brand img{
    width:54px;
    height:54px;
  }
}


/* ==========================================================
   PROGRAM V24 - background and footer adjustment
   ========================================================== */
.program-v22{
  background: var(--paper) !important;
  padding-bottom: 72px;
}

.program-v22-card{
  background: rgba(255,255,255,.74);
}

@media(max-width:760px){
  .program-v22{
    padding-bottom: 56px;
  }
}


/* ==========================================================
   PROGRAM V25 - mobile layout fix
   ========================================================== */
@media(max-width:760px){
  .program-v22{
    overflow:hidden;
    padding-top:54px;
    padding-bottom:50px;
  }

  .program-v22-inner{
    width:100%;
  }

  .program-v22-head{
    width:100%;
    margin:0 auto 24px;
    padding:0 2px;
  }

  .program-v22-kicker{
    font-size:8px;
    letter-spacing:.16em;
  }

  .program-v22-head h2{
    margin:10px 0 10px;
    font-size:30px;
    line-height:1.2;
  }

  .program-v22-head p{
    font-size:12.5px;
    line-height:1.65;
  }

  /* desktop 3-column diagram must not survive on mobile */
  .program-v22-diagram{
    display:flex !important;
    flex-direction:column;
    width:100%;
    max-width:none;
    gap:16px;
    margin:18px 0 0;
    padding:0;
  }

  .program-v22-road{
    display:none !important;
  }

  .program-v22-card,
  .program-v22-card-01,
  .program-v22-card-02,
  .program-v22-card-03,
  .program-v22-card-04{
    display:grid !important;
    grid-template-columns:118px minmax(0,1fr) !important;
    grid-template-rows:auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:0 !important;
    margin:0 !important;
    padding:14px !important;
    gap:14px;
    border-radius:16px;
    align-items:center;
  }

  .program-v22-card-image{
    order:1 !important;
    width:118px !important;
    height:118px !important;
    min-width:0 !important;
    border-radius:12px;
    overflow:hidden;
  }

  .program-v22-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }

  .program-v22-card-copy,
  .program-v22-card-02 .program-v22-card-copy,
  .program-v22-card-04 .program-v22-card-copy{
    order:2 !important;
    min-width:0;
    padding:4px 2px 4px 14px !important;
  }

  .program-v22-card-copy>i{
    top:4px;
    height:44px;
    width:4px;
  }

  .program-v22-card h3{
    margin:0 0 7px;
    font-size:17px;
    line-height:1.35;
  }

  .program-v22-pill{
    min-height:26px;
    padding:5px 11px;
    font-size:10px;
    line-height:1.2;
  }

  .program-v22-card p{
    margin:8px 0 0;
    font-size:11.5px;
    line-height:1.55;
  }

  /* avoid forced desktop line breaks looking awkward */
  .program-v22-card h3 br,
  .program-v22-card p br{
    display:none;
  }
}

@media(max-width:390px){
  .program-v22-card,
  .program-v22-card-01,
  .program-v22-card-02,
  .program-v22-card-03,
  .program-v22-card-04{
    grid-template-columns:96px minmax(0,1fr) !important;
    gap:12px;
    padding:12px !important;
  }

  .program-v22-card-image{
    width:96px !important;
    height:104px !important;
  }

  .program-v22-card h3{
    font-size:16px;
  }

  .program-v22-card p{
    font-size:11px;
  }
}


/* ==========================================================
   VISION V28 - option 3 rebuilt from scratch
   ========================================================== */
.vision-v28{
  position:relative;
  overflow:hidden;
  padding:72px 0 58px;
  color:#fff;
  background:
    radial-gradient(circle at 80% 62%,rgba(0,211,196,.16),transparent 28%),
    linear-gradient(180deg,#071827 0%,#071b2c 52%,#082139 100%);
}

.vision-v28::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(3,11,20,.08),rgba(3,11,20,.34)),
    radial-gradient(circle at 12% 18%,rgba(64,158,197,.08),transparent 23%);
  pointer-events:none;
}

.vision-v28-top-visual{
  position:absolute;
  top:0;
  width:36%;
  height:280px;
  background-size:cover;
  background-position:center;
  opacity:.44;
  z-index:0;
}

.vision-v28-top-visual.left{
  left:0;
  background-image:
    linear-gradient(90deg,rgba(6,24,39,.15),rgba(6,24,39,.72)),
    url("../images/vision28-machine.jpg");
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 64%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 64%,transparent 100%);
}

.vision-v28-top-visual.right{
  right:0;
  background-image:
    linear-gradient(90deg,rgba(6,24,39,.72),rgba(6,24,39,.10)),
    url("../images/vision28-worker.jpg");
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 36%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 36%,#000 100%);
}

.vision-v28-inner{
  position:relative;
  z-index:2;
}

.vision-v28-heading{
  text-align:center;
  margin-bottom:34px;
}

.vision-v28-kicker{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  margin:0 0 14px;
  color:#62e3d8;
  font-size:10px;
  font-weight:700;
  letter-spacing:.22em;
}

.vision-v28-kicker span{
  width:42px;
  height:1px;
  background:#52dacf;
}

.vision-v28-heading h2{
  margin:0;
  color:#fff;
  font-size:48px;
  line-height:1.24;
  letter-spacing:-.04em;
  font-weight:600;
}

.vision-v28-heading h2 em{
  color:#69e8de;
  font-style:normal;
}

.vision-v28-sub{
  margin:16px 0 0;
  color:rgba(255,255,255,.88);
  font-size:14px;
  font-weight:600;
}

.vision-v28-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) 240px minmax(0,1.02fr);
  gap:22px;
  align-items:stretch;
}

.vision-v28-box{
  position:relative;
  min-height:520px;
  border-radius:18px;
  padding:24px 24px 22px;
  overflow:hidden;
}

.vision-v28-normal{
  background:
    linear-gradient(180deg,rgba(48,63,79,.86),rgba(26,39,54,.90)),
    url("../images/vision28-left-bg.jpg") center/cover no-repeat;
  background-blend-mode:normal,soft-light;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 44px rgba(0,0,0,.18);
}

.vision-v28-normal::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(3,13,21,.02),rgba(3,13,21,.45));
  pointer-events:none;
}

.vision-v28-leaderx{
  background:
    radial-gradient(circle at 70% 45%,rgba(0,224,205,.13),transparent 34%),
    linear-gradient(180deg,rgba(5,74,92,.82),rgba(4,45,59,.90)),
    url("../images/vision28-right-bg.jpg") center/cover no-repeat;
  background-blend-mode:normal,normal,soft-light;
  border:1px solid rgba(73,235,218,.68);
  box-shadow:
    0 0 0 1px rgba(70,235,219,.08) inset,
    0 18px 48px rgba(0,203,187,.10);
}

.vision-v28-box-title{
  position:relative;
  z-index:2;
  text-align:center;
  margin-bottom:18px;
}

.vision-v28-box-title h3{
  margin:0 0 8px;
  font-size:30px;
  line-height:1.2;
}

.vision-v28-box-title p{
  margin:0;
  color:rgba(255,255,255,.76);
  font-size:12.5px;
  line-height:1.6;
}

.vision-v28-box-title.leaderx h3{
  color:#62e5d9;
}

.vision-v28-normal-graphic{
  position:relative;
  z-index:2;
  min-height:225px;
  margin-top:10px;
}

.vision-v28-holdco{
  width:170px;
  margin:0 auto;
  text-align:center;
}

.vision-v28-building{
  width:82px;
  height:82px;
  margin:0 auto 8px;
  display:grid;
  place-items:center;
  font-size:42px;
  color:#e9eef2;
  background:rgba(255,255,255,.06);
  border-radius:12px;
}

.vision-v28-holdco strong,
.vision-v28-hired strong{
  display:inline-block;
  padding:5px 10px;
  border-radius:8px;
  color:#fff;
  background:rgba(16,27,38,.78);
  font-size:11px;
}

.vision-v28-lines{
  position:absolute;
  left:65px;
  right:65px;
  top:108px;
  height:55px;
}

.vision-v28-lines::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:1px;
  height:32px;
  background:rgba(255,255,255,.55);
}

.vision-v28-lines::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  top:31px;
  height:1px;
  background:rgba(255,255,255,.55);
}

.vision-v28-lines span{
  position:absolute;
  top:31px;
  width:1px;
  height:24px;
  background:rgba(255,255,255,.55);
}
.vision-v28-lines span:nth-child(1){left:12%}
.vision-v28-lines span:nth-child(2){left:50%}
.vision-v28-lines span:nth-child(3){right:12%}

.vision-v28-companies{
  display:flex;
  justify-content:space-around;
  width:72%;
  margin:74px 0 0 0;
}

.vision-v28-companies div{
  text-align:center;
}

.vision-v28-companies span{
  display:block;
  font-size:36px;
  color:#eef2f5;
}

.vision-v28-companies small{
  color:#fff;
  font-size:11px;
}

.vision-v28-hired{
  position:absolute;
  right:20px;
  bottom:12px;
  text-align:center;
}

.vision-v28-person{
  display:block;
  margin-bottom:6px;
  color:#bfcbd4;
  font-size:56px;
}

.vision-v28-normal-points{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:16px;
}

.vision-v28-normal-points article{
  padding:14px 9px;
  min-height:88px;
  border-radius:10px;
  text-align:center;
  background:rgba(255,255,255,.055);
}

.vision-v28-normal-points span{
  display:block;
  margin-bottom:6px;
  color:#c7d1d8;
  font-size:24px;
}

.vision-v28-normal-points h4{
  margin:0;
  color:#f4f6f7;
  font-size:13px;
  line-height:1.45;
}

.vision-v28-normal-note{
  position:relative;
  z-index:2;
  margin:16px 0 0;
  text-align:center;
  color:rgba(255,255,255,.70);
  font-size:11px;
  line-height:1.7;
}

.vision-v28-center-message{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px 6px;
}

.vision-v28-center-arrow{
  margin-bottom:16px;
  color:#56e9e4;
  font-size:72px;
  line-height:1;
  filter:drop-shadow(0 0 13px rgba(54,229,220,.38));
}

.vision-v28-center-message h3{
  margin:0;
  color:#fff;
  font-size:25px;
  line-height:1.55;
  font-weight:500;
  letter-spacing:.03em;
}

.vision-v28-center-message>span{
  width:48px;
  height:1px;
  margin:18px 0 16px;
  background:#4bd2c7;
}

.vision-v28-center-message p{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:11.5px;
  line-height:1.75;
}

.vision-v28-value-row{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin:20px 0 12px;
}

.vision-v28-value-row article{
  padding:10px 8px;
  border-radius:9px;
  text-align:center;
  background:rgba(238,255,253,.90);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.vision-v28-value-row span{
  display:block;
  color:#0b7d70;
  font-size:23px;
}

.vision-v28-value-row strong{
  display:block;
  margin-top:5px;
  color:#17485a;
  font-size:10.5px;
  line-height:1.35;
}

.vision-v28-story{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  align-items:end;
  min-height:205px;
  margin-top:4px;
}

.vision-v28-story-arrow{
  position:absolute;
  left:8%;
  right:7%;
  bottom:58px;
  height:96px;
  background:linear-gradient(90deg,rgba(37,200,183,.22),rgba(67,238,216,.72));
  clip-path:polygon(0 68%,78% 25%,78% 11%,100% 0,90% 22%,100% 34%,78% 25%,0 100%);
  filter:drop-shadow(0 0 14px rgba(53,232,211,.16));
}

.vision-v28-story-node{
  position:relative;
  z-index:3;
  text-align:center;
}

.vision-v28-story-node.company{transform:translateY(20px)}
.vision-v28-story-node.people{transform:translateY(7px)}
.vision-v28-story-node.owner{transform:translateY(-10px)}

.vision-v28-story-node .pic{
  width:110px;
  height:105px;
  margin:0 auto 8px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:48px;
  background:linear-gradient(180deg,rgba(18,107,111,.75),rgba(10,66,78,.84));
  border:1px solid rgba(88,234,218,.32);
  box-shadow:0 14px 30px rgba(0,0,0,.12);
}

.vision-v28-story-node strong{
  display:inline-block;
  min-width:110px;
  padding:6px 10px;
  border-radius:8px;
  color:#fff;
  background:rgba(5,52,66,.82);
  font-size:11px;
}

.vision-v28-leaderx-copy{
  position:relative;
  z-index:2;
  margin:18px 0 0;
  text-align:center;
  color:rgba(255,255,255,.80);
  font-size:11.5px;
  line-height:1.75;
}

.vision-v28-cta{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  min-height:48px;
  margin:18px 30px 0;
  border-radius:999px;
  color:#fff;
  border:1px solid #69e9dc;
  background:rgba(3,70,78,.36);
  font-size:15px;
  font-weight:700;
}

.vision-v28-cta span{
  font-size:26px;
  color:#83efe6;
}

.vision-v28-footer-note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:26px;
  color:rgba(255,255,255,.62);
}

.vision-v28-footer-note span{
  width:46px;
  height:1px;
  background:rgba(81,221,210,.48);
}

.vision-v28-footer-note strong{
  color:#5ddbd1;
  font-size:9px;
  letter-spacing:.18em;
  font-weight:500;
}

@media(max-width:1120px){
  .vision-v28-main{
    grid-template-columns:1fr;
  }

  .vision-v28-center-message{
    min-height:180px;
  }

  .vision-v28-center-arrow{
    transform:rotate(90deg);
    margin-bottom:8px;
  }

  .vision-v28-box{
    min-height:auto;
  }
}

@media(max-width:760px){
  .vision-v28{
    padding:58px 0 46px;
  }

  .vision-v28-top-visual{
    opacity:.22;
    height:210px;
  }

  .vision-v28-heading h2{
    font-size:30px;
    line-height:1.34;
  }

  .vision-v28-sub{
    font-size:11px;
  }

  .vision-v28-box{
    padding:20px 16px 18px;
  }

  .vision-v28-box-title h3{
    font-size:24px;
  }

  .vision-v28-normal-graphic{
    min-height:255px;
  }

  .vision-v28-holdco{
    width:140px;
  }

  .vision-v28-lines{
    left:36px;
    right:36px;
  }

  .vision-v28-companies{
    width:68%;
  }

  .vision-v28-hired{
    right:6px;
  }

  .vision-v28-normal-points{
    gap:7px;
  }

  .vision-v28-normal-points h4{
    font-size:11.5px;
  }

  .vision-v28-center-message{
    min-height:150px;
  }

  .vision-v28-center-message h3{
    font-size:20px;
  }

  .vision-v28-value-row{
    grid-template-columns:repeat(2,1fr);
  }

  .vision-v28-story{
    grid-template-columns:1fr;
    gap:12px;
    min-height:auto;
  }

  .vision-v28-story-arrow{
    display:none;
  }

  .vision-v28-story-node.company,
  .vision-v28-story-node.people,
  .vision-v28-story-node.owner{
    transform:none;
  }

  .vision-v28-story-node{
    display:grid;
    grid-template-columns:82px 1fr;
    gap:14px;
    align-items:center;
    text-align:left;
  }

  .vision-v28-story-node .pic{
    width:82px;
    height:76px;
    margin:0;
    font-size:36px;
  }

  .vision-v28-story-node strong{
    min-width:0;
    text-align:center;
  }

  .vision-v28-cta{
    margin-left:0;
    margin-right:0;
    font-size:13px;
  }

  .vision-v28-footer-note{
    flex-wrap:wrap;
    text-align:center;
  }
}


/* ==========================================================
   VISION V29 - clean full-section factory background
   ========================================================== */
.vision-v28{
  background:#071827 !important;
}

.vision-v28::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:url("../images/approach-skilled-young-worker.jpg");
  background-size:cover;
  background-position:center 42%;
  background-repeat:no-repeat;
  opacity:.15;
  filter:saturate(.72) contrast(1.05);
  pointer-events:none;
}

.vision-v28::before{
  z-index:1;
  background:
    linear-gradient(180deg,rgba(5,18,31,.70),rgba(5,18,31,.84)),
    radial-gradient(circle at 78% 58%,rgba(0,193,178,.10),transparent 32%);
}

.vision-v28-top-visual{
  display:none !important;
}

/* Remove all generated-image backgrounds that contained baked-in text. */
.vision-v28-normal{
  background:
    linear-gradient(180deg,rgba(46,62,78,.82),rgba(23,36,50,.88)) !important;
}

.vision-v28-leaderx{
  background:
    radial-gradient(circle at 70% 45%,rgba(0,224,205,.13),transparent 34%),
    linear-gradient(180deg,rgba(5,74,92,.80),rgba(4,45,59,.86)) !important;
}

.vision-v28-inner{
  z-index:2;
}

@media(max-width:760px){
  .vision-v28::after{
    background-position:center 35%;
    opacity:.12;
  }
}


/* ==========================================================
   VISION V30 - center headline removed
   ========================================================== */
.vision-v28-center-message{
  justify-content:center;
  padding-top:10px;
  padding-bottom:10px;
}

.vision-v28-center-message>span{
  margin-top:4px;
}


/* ==========================================================
   GROUP GROWTH V32
   ========================================================== */
.group-growth{
  position:relative;
  overflow:hidden;
  padding:88px 0 82px;
  color:#fff;
  background:
    radial-gradient(circle at 88% 22%,rgba(20,186,159,.13),transparent 27%),
    linear-gradient(145deg,#091821 0%,#0d2530 62%,#0b2029 100%);
}

.group-growth::before{
  content:"";
  position:absolute;
  right:-220px;
  top:-240px;
  width:620px;
  height:620px;
  border-radius:50%;
  border:1px solid rgba(68,220,193,.12);
  box-shadow:
    inset 0 0 0 55px rgba(68,220,193,.025),
    inset 0 0 0 120px rgba(68,220,193,.018);
  pointer-events:none;
}

.group-growth-inner{
  position:relative;
  z-index:2;
}

.group-growth-head{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(460px,1.1fr);
  gap:70px;
  align-items:end;
  margin-bottom:42px;
}

.group-growth-kicker{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 18px;
  color:#58d9bd;
  font-size:10px;
  font-weight:700;
  letter-spacing:.20em;
}

.group-growth-kicker span{
  width:42px;
  height:1px;
  background:#4cd1b7;
}

.group-growth-copy h2{
  margin:0;
  color:#fff;
  font-size:48px;
  line-height:1.2;
  letter-spacing:-.04em;
}

.group-growth-copy h2 em{
  color:#5fe0c7;
  font-style:normal;
}

.group-growth-lead{
  display:grid;
  grid-template-columns:minmax(0,1fr) 210px;
  gap:28px;
  align-items:end;
}

.group-growth-lead>p{
  margin:0;
  color:rgba(255,255,255,.68);
  font-size:13px;
  line-height:1.9;
}

.group-growth-message{
  padding-left:18px;
  border-left:1px solid rgba(84,218,190,.45);
}

.group-growth-message span{
  display:block;
  margin-bottom:7px;
  color:#59d8bd;
  font-size:8px;
  font-weight:700;
  letter-spacing:.20em;
}

.group-growth-message strong{
  display:block;
  color:#fff;
  font-size:15px;
  line-height:1.6;
}

.group-growth-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.group-growth-card{
  display:block;
  overflow:hidden;
  border-radius:18px;
  color:#fff;
  text-decoration:none;
  background:#102d37;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 18px 42px rgba(0,0,0,.18);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}

.group-growth-card:hover{
  transform:translateY(-6px);
  border-color:rgba(83,224,195,.42);
  box-shadow:0 26px 54px rgba(0,0,0,.24);
}

.group-growth-media{
  position:relative;
  height:250px;
  overflow:hidden;
  background:#12323d;
}

.group-growth-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(3,13,20,.06) 25%,rgba(4,17,24,.34) 64%,rgba(4,17,24,.78) 100%);
}

.group-growth-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}

.group-growth-card:hover .group-growth-media img{
  transform:scale(1.045);
}

.group-growth-number{
  position:absolute;
  z-index:3;
  left:18px;
  top:16px;
  color:rgba(255,255,255,.86);
  font-size:28px;
  font-weight:500;
  line-height:1;
}

.group-growth-status{
  position:absolute;
  z-index:3;
  right:14px;
  top:14px;
  padding:6px 9px;
  border-radius:999px;
  color:#d9fff7;
  background:rgba(7,82,70,.68);
  border:1px solid rgba(83,224,195,.34);
  backdrop-filter:blur(5px);
  font-size:7px;
  font-weight:700;
  letter-spacing:.15em;
}

.group-growth-body{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  min-height:118px;
  padding:19px 20px 20px;
}

.group-growth-body small{
  color:#55dabc;
  font-size:8px;
  font-weight:700;
  letter-spacing:.14em;
}

.group-growth-body h3{
  margin:7px 0 6px;
  color:#fff;
  font-size:19px;
  line-height:1.45;
}

.group-growth-body p{
  margin:0;
  color:rgba(255,255,255,.60);
  font-size:11.5px;
  line-height:1.55;
}

.group-growth-arrow{
  flex:0 0 auto;
  width:38px;
  height:38px;
  margin-left:14px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#62e2c8;
  border:1px solid rgba(98,226,200,.38);
  font-size:18px;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}

.group-growth-card:hover .group-growth-arrow{
  background:#58dabc;
  color:#09242c;
  transform:translate(2px,-2px);
}

.group-growth-media-placeholder{
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 68% 32%,rgba(71,219,194,.15),transparent 25%),
    linear-gradient(135deg,#102c36,#16414b);
}

.asagi-pattern{
  position:absolute;
  inset:0;
  opacity:.42;
}

.asagi-pattern span{
  position:absolute;
  border:1px solid rgba(96,222,199,.16);
  transform:rotate(-28deg);
}

.asagi-pattern span:nth-child(1){width:300px;height:300px;left:-130px;top:-100px}
.asagi-pattern span:nth-child(2){width:240px;height:240px;right:-95px;bottom:-100px}
.asagi-pattern span:nth-child(3){width:150px;height:150px;left:46%;top:12%}
.asagi-pattern span:nth-child(4){width:95px;height:95px;left:31%;bottom:10%}

.asagi-mark{
  position:relative;
  z-index:2;
  color:#d7fff7;
  font-size:26px;
  line-height:1.05;
  font-weight:700;
  letter-spacing:.10em;
  text-align:center;
}

.group-growth-foot{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  margin-top:36px;
}

.group-growth-foot>span{
  width:70px;
  height:1px;
  background:rgba(91,219,192,.40);
}

.group-growth-foot p{
  margin:0;
  color:rgba(255,255,255,.62);
  font-size:11px;
  letter-spacing:.03em;
}

.group-growth-foot strong{
  color:#fff;
  font-weight:600;
}

@media(max-width:1100px){
  .group-growth-head{
    grid-template-columns:1fr;
    gap:24px;
  }

  .group-growth-lead{
    grid-template-columns:1fr 210px;
  }

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

@media(max-width:760px){
  .group-growth{
    padding:66px 0 58px;
  }

  .group-growth-copy h2{
    font-size:34px;
  }

  .group-growth-lead{
    grid-template-columns:1fr;
    gap:18px;
  }

  .group-growth-message{
    max-width:260px;
  }

  .group-growth-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .group-growth-media{
    height:220px;
  }

  .group-growth-body{
    min-height:auto;
    padding:17px 18px 19px;
  }

  .group-growth-body h3{
    font-size:18px;
  }

  .group-growth-foot{
    justify-content:flex-start;
    margin-top:28px;
  }
}


/* ==========================================================
   CONTACT V33 - highlighted invitation
   ========================================================== */
.contact-form-wrap{
  position:relative;
  overflow:hidden;
  padding-top:34px;
  border-color:rgba(94,232,199,.38);
  background:
    radial-gradient(circle at 88% 4%,rgba(87,224,191,.12),transparent 26%),
    linear-gradient(145deg,rgba(22,58,68,.99) 0%,rgba(12,39,49,.99) 100%);
  box-shadow:
    0 34px 90px rgba(0,0,0,.34),
    0 0 0 1px rgba(72,217,182,.055) inset;
}

.contact-form-wrap::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:linear-gradient(90deg,transparent,#59e2bf 22%,#70ecd0 52%,#59e2bf 78%,transparent);
  box-shadow:0 0 18px rgba(89,226,191,.30);
}

.contact-form-intro{
  position:relative;
  display:grid;
  grid-template-columns:58px 1fr;
  gap:18px;
  align-items:start;
  margin-bottom:30px;
  padding:0 0 26px;
  border-bottom:1px solid rgba(255,255,255,.11);
}

.contact-form-intro-icon{
  width:58px;
  height:58px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#09232b;
  background:linear-gradient(145deg,#72ebce,#4fd7b4);
  font-size:24px;
  font-weight:700;
  box-shadow:0 14px 32px rgba(75,216,181,.22);
}

.contact-form-intro small{
  display:block;
  margin:2px 0 7px;
  color:#68e3c1;
  font-size:9px;
  font-weight:700;
  letter-spacing:.18em;
}

.contact-form-intro h3{
  margin:0;
  color:#fff;
  font-size:25px;
  line-height:1.4;
  letter-spacing:.01em;
}

.contact-form-intro p{
  margin:9px 0 0;
  color:rgba(255,255,255,.66);
  font-size:12.5px;
  line-height:1.75;
}

.contact-form{
  position:relative;
  z-index:2;
}

.form-submit{
  box-shadow:0 16px 38px rgba(72,217,182,.20);
}

@media(max-width:760px){
  .contact-form-wrap{
    padding-top:24px;
  }

  .contact-form-intro{
    grid-template-columns:46px 1fr;
    gap:13px;
    margin-bottom:24px;
    padding-bottom:22px;
  }

  .contact-form-intro-icon{
    width:46px;
    height:46px;
    font-size:20px;
  }

  .contact-form-intro h3{
    font-size:20px;
  }

  .contact-form-intro p{
    font-size:11.5px;
    line-height:1.7;
  }

  .contact-form-intro p br{
    display:none;
  }
}


/* ==========================================================
   HEADER V34 - PC nav hotspot / hover underline alignment
   画像内の実際の文字位置に合わせて透明リンク領域を再調整
   ========================================================== */
@media (min-width:761px){
  .hotspot.about{
    left:48.8%;
    width:5.5%;
  }
  .hotspot.vision{
    left:55.9%;
    width:5.5%;
  }
  .hotspot.program{
    left:62.9%;
    width:5.0%;
  }
  .hotspot.group-link{
    left:69.4%;
    width:4.9%;
  }
  .hotspot.company{
    left:75.6%;
    width:3.7%;
  }
  .hotspot.contact-link-hotspot{
    left:80.5%;
    width:7.4%;
  }

  .hero-hotspots .hotspot:not(.contact-link-hotspot)::after{
    left:8%;
    right:8%;
    bottom:2px;
  }
}


/* ==========================================================
   COMPANY V35 - refined corporate profile
   ========================================================== */
.company-v35{
  position:relative;
  overflow:hidden;
  padding:96px 0 100px;
  color:#112930;
  background:
    radial-gradient(circle at 8% 14%,rgba(38,167,143,.055),transparent 24%),
    linear-gradient(180deg,#f4f2ec 0%,#efeee8 100%);
}
.company-v35::before{
  content:"";
  position:absolute;
  right:-160px; top:-180px;
  width:560px; height:560px;
  border:1px solid rgba(29,133,115,.12);
  border-radius:50%;
  box-shadow:
    inset 0 0 0 68px rgba(29,133,115,.023),
    inset 0 0 0 142px rgba(29,133,115,.016);
}
.company-v35-inner{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(540px,1.18fr);
  gap:86px;
  align-items:start;
}
.company-v35-kicker{
  display:flex; align-items:center; gap:13px;
  margin:0 0 20px;
  color:#178a74;
  font-size:10px; font-weight:700; letter-spacing:.22em;
}
.company-v35-kicker span{width:42px;height:1px;background:#1b927b}
.company-v35-intro h2{
  margin:0 0 31px;
  color:#102a32;
  font-size:16px; font-weight:700; letter-spacing:.08em;
}
.company-v35-catch{
  margin:0;
  color:#142d34;
  font-size:38px;
  line-height:1.42;
  letter-spacing:-.035em;
  font-weight:500;
}
.company-v35-catch em{color:#178c75;font-style:normal}
.company-v35-copy{
  max-width:440px;
  margin:28px 0 0;
  color:#607076;
  font-size:13px;
  line-height:2;
}
.company-v35-fields{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.company-v35-fields span{
  padding:8px 12px;
  border:1px solid rgba(18,122,102,.20);
  border-radius:999px;
  color:#37645c;
  background:rgba(255,255,255,.44);
  font-size:8px; font-weight:700; letter-spacing:.11em;
}
.company-v35-sign{
  margin-top:54px;
  padding-top:22px;
  border-top:1px solid rgba(20,69,62,.13);
}
.company-v35-sign span{
  display:block;
  color:#15393d;
  font-size:22px; font-weight:700; letter-spacing:.10em;
}
.company-v35-sign small{
  display:block; margin-top:4px;
  color:#8a9694;
  font-size:7px; letter-spacing:.18em;
}
.company-v35-profile{
  position:relative;
  overflow:hidden;
  padding:0 34px 30px;
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(247,248,244,.85));
  border:1px solid rgba(24,100,88,.12);
  box-shadow:0 30px 80px rgba(25,46,49,.09),0 1px 0 rgba(255,255,255,.85) inset;
}
.company-v35-profile::before{
  content:"";
  position:absolute; left:0; top:0;
  width:5px; height:100%;
  background:linear-gradient(180deg,#1da083,#65cdb8 56%,rgba(101,205,184,.08));
}
.company-v35-profile-head{
  display:flex; justify-content:space-between; align-items:center;
  min-height:102px;
  border-bottom:1px solid rgba(15,61,55,.11);
}
.company-v35-profile-head small{
  display:block; margin-bottom:6px;
  color:#178b74;
  font-size:8px; font-weight:700; letter-spacing:.18em;
}
.company-v35-profile-head strong{
  color:#153238;
  font-size:24px; line-height:1.35; font-weight:600;
}
.company-v35-profile-head>span{
  color:rgba(23,139,116,.13);
  font-size:56px; font-weight:300; line-height:1;
}
.company-v35-list{margin:0}
.company-v35-list>div{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:28px;
  align-items:start;
  padding:24px 0;
  border-bottom:1px solid rgba(15,61,55,.10);
}
.company-v35-list dt{
  display:flex; align-items:center; gap:12px;
  color:#4c6366;
  font-size:12px; font-weight:600;
}
.company-v35-list dt span{
  color:#1c977d;
  font-size:8px; font-weight:700; letter-spacing:.08em;
}
.company-v35-list dd{
  margin:0;
  color:#1a3338;
  font-size:14px;
  line-height:1.75;
}
.company-v35-placeholder{color:#7d8989 !important}
.company-v35-business ul{margin:0;padding:0;list-style:none}
.company-v35-business li{
  position:relative;
  padding-left:18px;
  color:#263f43;
  line-height:1.8;
}
.company-v35-business li+li{margin-top:3px}
.company-v35-business li::before{
  content:"";
  position:absolute; left:0; top:.82em;
  width:7px; height:1px;
  background:#20967e;
}
.company-v35-profile-foot{
  display:flex; align-items:center; justify-content:flex-end;
  gap:16px; padding-top:24px;
}
.company-v35-profile-foot span{width:42px;height:1px;background:#23977f}
.company-v35-profile-foot p{
  margin:0;
  color:#4d6467;
  font-size:10px;
  line-height:1.65;
  letter-spacing:.03em;
}
.company-v35-bgtext{
  position:absolute;
  left:-30px; bottom:-68px;
  color:rgba(19,105,89,.035);
  font-size:190px; font-weight:700;
  line-height:1; letter-spacing:-.06em;
  pointer-events:none; user-select:none;
}
@media(max-width:1050px){
  .company-v35-inner{grid-template-columns:1fr;gap:48px}
  .company-v35-copy{max-width:650px}
  .company-v35-sign{margin-top:34px}
}
@media(max-width:760px){
  .company-v35{padding:68px 0 72px}
  .company-v35-inner{gap:36px}
  .company-v35-intro h2{margin-bottom:22px}
  .company-v35-catch{font-size:29px}
  .company-v35-copy{margin-top:20px;font-size:12px;line-height:1.85}
  .company-v35-sign{margin-top:28px}
  .company-v35-profile{padding:0 20px 24px;border-radius:18px}
  .company-v35-profile-head{min-height:90px}
  .company-v35-profile-head strong{font-size:20px}
  .company-v35-profile-head>span{font-size:42px}
  .company-v35-list>div{grid-template-columns:1fr;gap:8px;padding:19px 0}
  .company-v35-list dt{font-size:11px}
  .company-v35-list dd{padding-left:27px;font-size:13px}
  .company-v35-profile-foot{justify-content:flex-start}
  .company-v35-bgtext{font-size:100px;bottom:-30px}
}


/* ==========================================================
   REVISION - 文言修正・表示不具合対応
   ========================================================== */

/* ふりがな（リーダックス）
   ルビが付くぶん行間が詰まらないよう、行の高さに余裕を持たせる */
ruby{
  ruby-position:over;
  ruby-align:center;
}

ruby rt{
  font-size:.46em;
  font-weight:500;
  letter-spacing:.06em;
  line-height:1.1;
  opacity:.72;
  user-select:none;
}

/* ヒーロー内 CTA「グループ&関連企業をみる」
   画像に焼き込まれたボタン文字の上から、枠線ボタンとして描画します */
@media (min-width:761px){
  .hotspot.cta-group-label{
    display:flex;
    align-items:center;
    justify-content:center;
    /* ヒーロー画像から元のボタンを消したため、
       左のグリーンボタン（left:12.6% / width:10.5%）と
       上下位置・高さを揃えて配置し、横幅は文字量に合わせます */
    left:23.6%;
    top:74.0%;
    width:auto;
    height:7.1%;
    padding:0 1.35%;
    border-radius:999px;
    color:#fff;
    background:transparent;
    border:1px solid rgba(255,255,255,.62);
    font-size:clamp(10px,.80vw,14px);
    font-weight:700;
    line-height:1.2;
    text-align:center;
    letter-spacing:.01em;
    white-space:nowrap;
    transition:transform .2s ease,background .2s ease,border-color .2s ease;
  }

  .hotspot.cta-group-label span{
    display:block;
    white-space:nowrap;
  }

  .hotspot.cta-group-label:hover,
  .hotspot.cta-group-label:focus-visible{
    transform:translateY(-2px);
    background:rgba(72,217,182,.12);
    border-color:#48d9b6;
  }

  .hero-hotspots .hotspot.cta-group-label::after{
    display:none !important;
  }
}

@media (max-width:760px){
  .mobile-cta-group-label{
    display:flex !important;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    color:#fff;
    background:transparent;
    border:1px solid rgba(255,255,255,.62);
    font-size:clamp(10px,3vw,14px);
    font-weight:700;
    line-height:1.2;
    text-align:center;
    letter-spacing:-.01em;
    z-index:16;
  }

  .mobile-cta-group-label span{
    display:block;
    padding:0 6px;
    white-space:nowrap;
  }
}

/* グループ&関連企業：日本語のセクション名 */
.group-growth-jp-title{
  margin:14px 0 0;
  color:rgba(255,255,255,.90);
  font-size:17px;
  font-weight:600;
  letter-spacing:.08em;
}

@media(max-width:760px){
  .group-growth-jp-title{
    font-size:15px;
  }
}

/* グループ各社の画像切れ対策
   各社の写真は上部に社名が入っているため、
   ・カード比率を写真の比率（約16:9）に合わせる
   ・トリミングの基準を上寄せにする
   の2点で、社名が切れないようにします */
.group-growth-media{
  height:auto;
  aspect-ratio:16/9;
}

.group-growth-media img{
  object-position:center top;
}

@media(max-width:760px){
  .group-growth-media{
    height:auto;
    aspect-ratio:16/9;
  }
}

/* 「GROWING COMPANY」バッジの位置調整
   各社の写真は上部に社名が入っているため、
   番号を外したうえでバッジも下側（暗いグラデーション上）へ移動し、
   社名と重ならないようにします */
.group-growth-status{
  top:auto;
  right:auto;
  bottom:12px;
  left:14px;
}

/* OUR APPROACH 見出しの折り返し調整
   「事業承継を積極的に。／柔軟な体制でお応えします。」を
   指定どおり2行で表示するため、文字サイズを見直しています。
   13文字の行が収まる上限は、見出しが入る枠の幅 ÷ 約13.6 です。 */
.approach-v19-copy h2{
  font-size:40px;
}

/* 1121〜1279px は見出し枠が 419〜540px と狭くなるため、
   幅に合わせて 30px→40px まで連続的に変化させます */
@media (min-width:1121px) and (max-width:1279px){
  .approach-v19-copy h2{
    font-size:calc(30px + (100vw - 1121px) * 0.0633);
  }
}

/* 1120px以下は1カラムになり枠が広がるため、従来どおり50pxで2行に収まります */
@media (max-width:1120px){
  .approach-v19-copy h2{
    font-size:50px;
  }
}

/* スマートフォンも2行に収まるよう可変にします（従来は40px固定で3〜4行） */
@media (max-width:760px){
  .approach-v19-copy h2{
    font-size:clamp(20px,6.5vw,40px);
  }
}

/* グループセクション：見出しの主従を入れ替え
   「グループ&関連企業」をメインの見出し（h2）に、
   「受け継いだ企業と、ともに成長する。」をその下のリード文にしています */
.group-growth-jp-title{
  margin:16px 0 0;
  color:rgba(255,255,255,.82);
  font-size:20px;
  font-weight:500;
  letter-spacing:.02em;
  line-height:1.6;
}

.group-growth-jp-title em{
  color:#5fe0c7;
  font-style:normal;
  font-weight:600;
}

@media(max-width:760px){
  .group-growth-jp-title{
    margin-top:12px;
    font-size:16px;
  }
}

/* 通常のM&A のリスク3項目
   「自社で決められない」が9文字で、カード幅116px・13pxだと
   最後の1文字だけ折り返されてしまうため、字間をわずかに詰めて1行に収めます */
.vision-v28-normal-points h4{
  letter-spacing:-.03em;
}

/* 1121〜1279px はカード幅が89〜115pxまで狭くなるため、
   3項目とも1行に収まるよう文字サイズを可変にします */
@media (min-width:1121px) and (max-width:1279px){
  .vision-v28-normal-points h4{
    font-size:clamp(10px,0.90vw,13px);
  }
}

/* スマートフォンでもカード幅が85px前後と狭く、
   8〜9文字の項目が1〜2文字だけ折り返されるため、こちらも可変にします */
@media (max-width:760px){
  .vision-v28-normal-points h4{
    font-size:clamp(8px,2.35vw,11.5px);
  }
}

/* アサギ精工の写真だけ、画像の比率（1.906）がカード枠（16:9＝1.778）より
   横長のため左右が切れます。写真の左に見出し、右に社名が入っているので、
   どちらも切らずに収まる位置に寄せています（左2.6%／右4.1%のトリミング） */
.card-asagi .group-growth-media img{
  object-position:39% top;
}

/* VISION背景：C案の写真は人物が大きく写るため、
   15%に落とすと見出しの裏に顔が透けて見えます。
   ぼかしを入れて質感として扱い、不透明度も少し下げています。
   ぼかしで縁が透けないよう、わずかに拡大しています */
.vision-v28::after{
  opacity:.12;
  filter:saturate(.6) contrast(1.04) blur(5px);
  transform:scale(1.06);
}

/* ==========================================================
   本文の文字サイズ引き上げ ＋ ふりがなの可読性改善
   本文が11.5〜14pxと小さく、ふりがな（.46em）が5〜6pxまで
   縮んで読めなくなっていたため、両方を引き上げます。
   ========================================================== */
ruby rt{
  font-size:.62em;
  opacity:.9;
}

.approach-v19-copy>p{font-size:16px}
.vision-v28-sub{font-size:16px}
.vision-v28-leaderx-copy{font-size:13.5px}
.program-v22-head p{font-size:16px}
.program-v22-card-copy p{font-size:13.5px}
.group-growth-lead>p{font-size:15px}
.company-v35-copy{font-size:15px}
.company-v35-list dd{font-size:15px}
.contact-copy>p:not(.eyebrow){font-size:16px}

@media(max-width:1120px){
  .approach-v19-copy>p{font-size:15px}
}

@media(max-width:760px){
  .approach-v19-copy>p{font-size:15px}
  .vision-v28-sub{font-size:13px}
  .program-v22-head p{font-size:14px}
  .company-v35-copy{font-size:14px}
  .company-v35-list dd{font-size:14px}
}

/* ==========================================================
   MAIN VISUAL（背景画像＋実テキスト構成）
   旧Heroは画像に文字を焼き込んでいたため、透明リンクを重ねて
   いましたが、背景画像の差し替えに伴いすべて実テキストにしました。
   文言変更は index.html の編集だけで反映されます。
   ========================================================== */

/* ---- ヘッダー ---- */
.site-header{
  position:absolute;
  z-index:40;
  top:0;
  left:0;
  right:0;
}

.site-header-inner{
  display:flex;
  align-items:center;
  gap:24px;
  width:min(1560px,92%);
  margin:0 auto;
  padding:22px 0 0;
}

.site-logo{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#fff;
}

.site-logo-mark{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:linear-gradient(140deg,#2ad3c2 0%,#1f9fd8 55%,#1668b8 100%);
  box-shadow:0 0 18px rgba(42,211,194,.45);
  color:#04222c;
  font-size:14px;
  font-weight:800;
  letter-spacing:.02em;
}

.site-logo-text{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-size:21px;
  font-weight:800;
  letter-spacing:.01em;
}

.site-logo-text small{
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  opacity:.82;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:28px;
  margin-left:auto;
}

.site-nav a{
  position:relative;
  color:rgba(255,255,255,.88);
  font-size:13.5px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  transition:color .2s ease;
}

.site-nav a:not(.site-nav-cta)::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-7px;
  width:0;
  height:1px;
  background:#48d9b6;
  transition:width .2s ease;
}

.site-nav a:not(.site-nav-cta):hover{color:#fff}
.site-nav a:not(.site-nav-cta):hover::after{width:100%}

.site-nav-cta{
  padding:11px 24px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;
  transition:background .2s ease,border-color .2s ease;
}

.site-nav-cta:hover{
  background:rgba(72,217,182,.16);
  border-color:#48d9b6;
}

.mobile-menu-hotspot{
  display:none;
  width:42px;
  height:42px;
  margin-left:auto;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}

.mobile-menu-hotspot span,
.mobile-menu-hotspot span::before,
.mobile-menu-hotspot span::after{
  display:block;
  width:26px;
  height:2px;
  background:#fff;
  border-radius:2px;
}

.mobile-menu-hotspot span{margin:0 auto;position:relative}
.mobile-menu-hotspot span::before{content:"";position:absolute;top:-8px}
.mobile-menu-hotspot span::after{content:"";position:absolute;top:8px}

/* ---- メインビジュアル ---- */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:clamp(600px,88vh,820px);
  overflow:hidden;
  background:#04161f;
  color:#fff;
}

.hero-media{
  position:absolute;
  inset:0;
  background-image:url("../images/hero-bg.jpg");
  background-size:cover;
  background-position:right center;
  background-repeat:no-repeat;
}

/* 左側の文字を読みやすくするための覆い */
.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(4,20,28,.94) 0%,
    rgba(4,20,28,.88) 26%,
    rgba(4,20,28,.55) 45%,
    rgba(4,20,28,0) 62%
  );
}

.hero-inner{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:40px;
  width:min(1560px,92%);
  margin:0 auto;
  padding:120px 0 90px;
}

.hero-copy{max-width:640px}

.hero-eyebrow{
  margin:0 0 22px;
  color:#48d9b6;
  font-size:13px;
  font-weight:700;
  letter-spacing:.18em;
}

.hero-title{
  margin:0;
  font-size:clamp(38px,4.4vw,66px);
  font-weight:800;
  line-height:1.24;
  letter-spacing:-.02em;
}

.hero-title em{
  color:#48d9b6;
  font-style:normal;
}

.hero-lead{
  margin:30px 0 0;
  color:rgba(255,255,255,.86);
  font-size:16px;
  line-height:2;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:38px;
}

.hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 30px;
  border-radius:999px;
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}

.hero-btn:hover{transform:translateY(-2px)}

.hero-btn-primary{
  background:#48d9b6;
  color:#04222c;
  box-shadow:0 12px 30px rgba(72,217,182,.28);
}

.hero-btn-primary:hover{background:#5fe3c4}

.hero-btn-ghost{
  border:1px solid rgba(255,255,255,.6);
  color:#fff;
}

.hero-btn-ghost:hover{
  background:rgba(72,217,182,.14);
  border-color:#48d9b6;
}

.hero-aside{
  margin-left:auto;
  padding-left:26px;
  border-left:1px solid rgba(255,255,255,.22);
  max-width:260px;
}

.hero-aside-lead{
  margin:0;
  font-size:19px;
  font-weight:700;
  line-height:1.7;
}

.hero-aside-en{
  margin:16px 0 0;
  color:rgba(255,255,255,.55);
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  line-height:1.9;
}

.hero-aside-note{
  display:flex;
  gap:14px;
  margin:34px 0 0;
  color:rgba(255,255,255,.9);
  font-size:14px;
  line-height:1.8;
}

.hero-aside-note span{
  color:#48d9b6;
  font-size:14px;
  font-weight:700;
  letter-spacing:.06em;
}

.hero-scroll{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  color:rgba(255,255,255,.6);
  font-size:10px;
  font-weight:600;
  letter-spacing:.3em;
  text-decoration:none;
}

.hero-scroll i{
  display:block;
  width:1px;
  height:58px;
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0));
}

/* ---- 1280px以下 ---- */
@media (max-width:1280px){
  .site-nav{gap:20px}
  .site-nav a{font-size:12.5px}
  .site-nav-cta{padding:10px 18px}
  .hero-aside{max-width:220px}
  .hero-aside-lead{font-size:17px}
}

/* ---- 1080px以下：右側の補足を隠す ---- */
@media (max-width:1080px){
  .hero-aside{display:none}
  .hero-copy{max-width:none}
}

/* ---- スマートフォン ---- */
@media (max-width:760px){
  .site-header-inner{
    width:92%;
    padding:16px 0 0;
  }

  .site-nav{display:none}
  .mobile-menu-hotspot{display:block}

  .site-logo-mark{width:34px;height:34px;font-size:12px}
  .site-logo-text{font-size:17px}
  .site-logo-text small{font-size:10.5px}

  /* ドロワー：ヘッダー直下に固定 */
  .mobile-nav-overlay{
    position:absolute;
    z-index:39;
    top:calc(100% + 6px);
    right:4%;
    left:auto;
    width:min(280px,72%);
    padding:12px 18px 16px;
    display:flex;
    flex-direction:column;
    background:rgba(6,20,28,.97);
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    box-shadow:0 18px 45px rgba(0,0,0,.36);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
  }

  .mobile-nav-overlay.is-open{
    opacity:1;
    visibility:visible;
    transform:none;
  }

  .hero{
    min-height:0;
    align-items:stretch;
  }

  /* 球体は上部に置き、文字は下の暗い面に載せる */
  .hero-media{
    background-position:74% top;
    background-size:190% auto;
  }

  .hero-media::after{
    background:linear-gradient(
      180deg,
      rgba(4,20,28,.62) 0%,
      rgba(4,20,28,.30) 22%,
      rgba(4,20,28,.86) 52%,
      rgba(4,20,28,.97) 72%,
      #04161f 100%
    );
  }

  .hero-inner{
    width:92%;
    padding:300px 0 96px;
  }

  .hero-eyebrow{
    margin-bottom:16px;
    font-size:11px;
    letter-spacing:.14em;
  }

  .hero-title{
    font-size:clamp(28px,8.4vw,40px);
    line-height:1.3;
  }

  .hero-lead{
    margin-top:22px;
    font-size:14.5px;
    line-height:1.95;
  }

  /* スマホでは原稿どおりの改行だと収まらないため、自然に折り返します */
  .hero-lead br{display:none}

  .hero-actions{
    flex-direction:column;
    gap:12px;
    margin-top:30px;
  }

  .hero-btn{
    width:100%;
    min-height:52px;
    font-size:14px;
  }

  .hero-scroll{display:none}
}

/* ---- メインビジュアル 調整 ---- */

/* ドロワーはスマホ専用。PCでは出さない */
.mobile-nav-overlay{display:none}

@media (max-width:760px){
  .mobile-nav-overlay{display:flex}
  .hero-lead br{display:none}
}

/* 右側の補足テキストが街並みの明るい部分に重なって読めないため、
   右端にも覆いを追加します */
.hero-media::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    270deg,
    rgba(4,20,28,.86) 0%,
    rgba(4,20,28,.62) 12%,
    rgba(4,20,28,0) 26%
  );
}

.hero-media::after{z-index:1}

@media (max-width:1080px){
  .hero-media::before{display:none}
}

/* 本文は自然に折り返します */
.hero-lead{max-width:660px}

/* ---- スマートフォン：画像の下端の継ぎ目を消す ----
   背景画像の高さは画面幅の約81%（190% ÷ 2.334）になるため、
   覆いのグラデーションもvw基準にして、画像が終わる位置までに
   背景色へ完全に溶かし込みます */
@media (max-width:760px){
  .hero-media::after{
    background:linear-gradient(
      180deg,
      rgba(4,22,31,.58) 0,
      rgba(4,22,31,.24) 16vw,
      rgba(4,22,31,.70) 54vw,
      rgba(4,22,31,.94) 71vw,
      #04161f 80vw,
      #04161f 100%
    );
  }

  .hero-inner{
    padding-top:calc(78vw + 24px);
  }
}

/* ---- 1280px以下：球体が左に寄り本文と重なるため、
   背景の見せる位置をずらし、左側の覆いも強めます ---- */
@media (min-width:761px) and (max-width:1280px){
  .hero-media{
    background-position:58% center;
  }

  .hero-media::after{
    background:linear-gradient(
      90deg,
      rgba(4,20,28,.95) 0%,
      rgba(4,20,28,.90) 34%,
      rgba(4,20,28,.62) 54%,
      rgba(4,20,28,.14) 76%,
      rgba(4,20,28,0) 92%
    );
  }
}

/* ---- 1040px以下：横並びのメニューが入りきらないため
   ハンバーガーに切り替えます（従来は760px以下のみ） ---- */
.site-logo-text{white-space:nowrap}

@media (max-width:1040px){
  .site-nav{display:none}
  .mobile-menu-hotspot{display:block}

  .mobile-nav-overlay{
    display:flex;
    position:absolute;
    z-index:39;
    top:calc(100% + 6px);
    right:4%;
    left:auto;
    width:min(280px,72%);
    padding:12px 18px 16px;
    flex-direction:column;
    background:rgba(6,20,28,.97);
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    box-shadow:0 18px 45px rgba(0,0,0,.36);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
  }

  .mobile-nav-overlay.is-open{
    opacity:1;
    visibility:visible;
    transform:none;
  }
}

/* 761〜1280pxでは本文が球体にかからないよう幅を抑えます */
@media (min-width:761px) and (max-width:1280px){
  .hero-lead{max-width:min(660px,62%)}
}

/* ---- PC：文言を左端から内側へ寄せる ---- */
@media (min-width:1041px){
  .site-header-inner,
  .hero-inner{
    width:min(1320px,86%);
  }
}

/* ---- スマホ：1画面にボタンまで収める ----
   球体の表示を小さくし、各要素の余白を詰めています */
@media (max-width:760px){
  .hero-media{
    background-size:152% auto;   /* 高さ＝画面幅の約65% */
  }

  .hero-media::after{
    background:linear-gradient(
      180deg,
      rgba(4,22,31,.55) 0,
      rgba(4,22,31,.22) 13vw,
      rgba(4,22,31,.68) 43vw,
      rgba(4,22,31,.94) 57vw,
      #04161f 64vw,
      #04161f 100%
    );
  }

  .hero-inner{
    padding-top:calc(61vw + 10px);
    padding-bottom:40px;
  }

  .hero-eyebrow{
    margin-bottom:12px;
    font-size:10.5px;
  }

  .hero-title{
    font-size:clamp(26px,7.7vw,36px);
    line-height:1.28;
  }

  .hero-lead{
    margin-top:18px;
    font-size:14px;
    line-height:1.85;
  }

  .hero-actions{
    margin-top:24px;
    gap:10px;
  }

  .hero-btn{
    min-height:50px;
    font-size:13.5px;
  }
}

/* ---- スマホ：球体の表示領域を画面の高さに追従させる ----
   画面幅基準（vw）だと縦の短い端末で収まらないため、
   画面の高さ基準（svh）で上限・下限を付けて可変にします。
   svh非対応ブラウザ向けに、直前の vw 指定がそのまま効きます */
@media (max-width:760px){
  .hero{
    --hero-visual:clamp(170px,32svh,300px);
  }

  .hero-media{
    background-size:auto var(--hero-visual);
  }

  .hero-media::after{
    background:linear-gradient(
      180deg,
      rgba(4,22,31,.55) 0,
      rgba(4,22,31,.22) calc(var(--hero-visual) * .2),
      rgba(4,22,31,.68) calc(var(--hero-visual) * .66),
      rgba(4,22,31,.94) calc(var(--hero-visual) * .88),
      #04161f var(--hero-visual),
      #04161f 100%
    );
  }

  .hero-inner{
    padding-top:calc(var(--hero-visual) + 14px);
  }
}

/* ---- 縦の短い端末（iPhone SE でアドレスバーが出ている状態など） ---- */
@media (max-width:760px) and (max-height:620px){
  .hero{--hero-visual:clamp(130px,25svh,200px)}
  .hero-eyebrow{margin-bottom:10px;font-size:10px}
  .hero-title{font-size:clamp(23px,6.8vw,30px);line-height:1.26}
  .hero-lead{margin-top:13px;font-size:12.5px;line-height:1.72}
  .hero-actions{margin-top:16px;gap:8px}
  .hero-btn{min-height:44px;font-size:12.5px}
  .hero-inner{padding-top:calc(var(--hero-visual) + 10px);padding-bottom:24px}
}

/* 右側の補足は、コンテンツ幅を狭めたことで球体の明るい部分に
   重なるようになったため、覆いを少し広げ、文字に影を足します */
@media (min-width:1081px){
  .hero-media::before{
    background:linear-gradient(
      270deg,
      rgba(4,20,28,.88) 0%,
      rgba(4,20,28,.74) 13%,
      rgba(4,20,28,.44) 25%,
      rgba(4,20,28,.14) 34%,
      rgba(4,20,28,0) 42%
    );
  }

  .hero-aside-lead,
  .hero-aside-en,
  .hero-aside-note{
    text-shadow:0 1px 12px rgba(2,16,22,.92), 0 0 26px rgba(2,16,22,.7);
  }

  .hero-aside{
    border-left-color:rgba(255,255,255,.34);
  }
}

/* ---- PC・タブレット：メインビジュアルを画面の高さいっぱいに ----
   88vh・最大820pxだったため、縦の長い画面では下に次のセクションが
   のぞいていました。画面の高さちょうどに合わせます。
   内容が入りきらない場合は自動で伸びます（min-heightのため） */
@media (min-width:761px){
  .hero{
    min-height:100vh;      /* svh非対応ブラウザ向け */
    min-height:100svh;
  }
}

/* ==========================================================
   メインビジュアル：右側の文言差し替え ＋ PCの文字を大きく
   ========================================================== */
@media (min-width:1041px){
  .site-nav a{font-size:14.5px}
  .site-nav-cta{padding:12px 26px}
  .site-logo-text{font-size:23px}
  .site-logo-text small{font-size:13px}
  .site-logo-mark{width:44px;height:44px;font-size:15px}

  .hero-eyebrow{font-size:14px;letter-spacing:.2em}
  .hero-title{font-size:clamp(42px,4.7vw,72px)}
  .hero-lead{font-size:18px;line-height:2.05;max-width:720px}
  .hero-btn{min-height:58px;padding:0 34px;font-size:16px}
}

/* 右側の補足（NEXT OWNER PROGRAM） */
.hero-aside{max-width:300px}

.hero-aside-lead{font-size:22px;line-height:1.65}

.hero-aside-en{
  margin-top:18px;
  font-size:12px;
  letter-spacing:.22em;
}

/* 番号を外したため、通常の段落に戻します */
.hero-aside-note{
  display:block;
  margin-top:26px;
  font-size:15px;
  line-height:1.85;
}

@media (max-width:1280px){
  .hero-aside{max-width:260px}
  .hero-aside-lead{font-size:19px}
  .hero-aside-note{font-size:13.5px}
}

/* ==========================================================
   メインビジュアル：明るい背景画像に合わせた配色（ライトテーマ）
   文字色・覆い・ボタン・ヘッダーを、白基調でも読めるよう
   すべて反転させています。配色は他の明るいセクション
   （OUR APPROACH）と同じ値に揃えました。
     見出し #112b3d ／ 本文 #41565f ／ アクセント #0a9277
   ========================================================== */
.hero{
  background:#f4f3ee;
  color:#112b3d;
}

/* 左側の覆い（白） */
.hero-media::after{
  background:linear-gradient(
    90deg,
    rgba(246,247,244,.95) 0%,
    rgba(246,247,244,.88) 27%,
    rgba(246,247,244,.48) 45%,
    rgba(246,247,244,0) 62%
  );
}

/* 右側の覆い（白） */
@media (min-width:1081px){
  .hero-media::before{
    background:linear-gradient(
      270deg,
      rgba(246,247,244,.86) 0%,
      rgba(246,247,244,.66) 13%,
      rgba(246,247,244,.28) 25%,
      rgba(246,247,244,0) 36%
    );
  }
}

@media (min-width:761px) and (max-width:1280px){
  .hero-media{background-position:right center}

  .hero-media::after{
    background:linear-gradient(
      90deg,
      rgba(246,247,244,.96) 0%,
      rgba(246,247,244,.92) 32%,
      rgba(246,247,244,.60) 52%,
      rgba(246,247,244,.16) 74%,
      rgba(246,247,244,0) 90%
    );
  }
}

/* ---- ヘッダー ---- */
.site-logo{color:#112b3d}
.site-logo-text small{opacity:.68}

.site-nav a{color:#3a5261}
.site-nav a:not(.site-nav-cta):hover{color:#0a9277}
.site-nav a:not(.site-nav-cta)::after{background:#0a9277}

.site-nav-cta{
  border-color:rgba(17,43,61,.34);
  color:#112b3d;
}

.site-nav-cta:hover{
  background:rgba(10,146,119,.10);
  border-color:#0a9277;
  color:#0a9277;
}

.mobile-menu-hotspot span,
.mobile-menu-hotspot span::before,
.mobile-menu-hotspot span::after{
  background:#112b3d;
}

/* ドロワーも白基調に */
@media (max-width:1040px){
  .mobile-nav-overlay{
    background:rgba(255,255,255,.98);
    border-color:rgba(17,43,61,.12);
    box-shadow:0 18px 45px rgba(17,43,61,.16);
  }

  .mobile-nav-overlay a{
    color:#112b3d;
    border-bottom-color:rgba(17,43,61,.10);
  }

  .mobile-nav-overlay a::after{background:#0a9277}
}

/* ---- 本文まわり ---- */
.hero-eyebrow{color:#0a9277}
.hero-title{color:#112b3d}
.hero-title em{color:#0a9277}
.hero-lead{color:#41565f}

.hero-btn-primary{
  background:#0a9277;
  color:#fff;
  box-shadow:0 12px 30px rgba(10,146,119,.26);
}

.hero-btn-primary:hover{background:#0aa78a}

.hero-btn-ghost{
  border-color:rgba(17,43,61,.36);
  color:#112b3d;
}

.hero-btn-ghost:hover{
  background:rgba(10,146,119,.10);
  border-color:#0a9277;
  color:#0a9277;
}

/* ---- 右側の補足 ---- */
.hero-aside{border-left-color:rgba(17,43,61,.20)}
.hero-aside-lead{color:#112b3d}
.hero-aside-en{color:rgba(17,43,61,.45)}

@media (min-width:1081px){
  .hero-aside-lead,
  .hero-aside-en{
    text-shadow:0 1px 10px rgba(255,255,255,.95), 0 0 22px rgba(255,255,255,.8);
  }

  .hero-aside{border-left-color:rgba(17,43,61,.24)}
}

/* ---- SCROLL ---- */
.hero-scroll{color:rgba(17,43,61,.5)}
.hero-scroll i{background:linear-gradient(180deg,rgba(17,43,61,.45),rgba(17,43,61,0))}

/* ---- スマホ：下方向の覆いも白へ ---- */
@media (max-width:760px){
  .hero-media::after{
    background:linear-gradient(
      180deg,
      rgba(244,243,238,.30) 0,
      rgba(244,243,238,.14) calc(var(--hero-visual) * .2),
      rgba(244,243,238,.62) calc(var(--hero-visual) * .66),
      rgba(244,243,238,.93) calc(var(--hero-visual) * .88),
      #f4f3ee var(--hero-visual),
      #f4f3ee 100%
    );
  }
}

/* ---- スマホ：新しい画像は16:9で球体が小さく見えるため、
   表示領域を少し広げ、球体が中央寄りに来るよう位置を調整 ---- */
@media (max-width:760px){
  .hero{--hero-visual:clamp(190px,36svh,320px)}
  .hero-media{background-position:66% top}
}

@media (max-width:760px) and (max-height:620px){
  .hero{--hero-visual:clamp(150px,28svh,220px)}
}

/* ---- 覆いを弱め、背景画像をしっかり見せる ----
   画像の左半分はもともと明るい（平均240前後）ため、
   濃紺の文字は薄い覆いでも十分読めます。
   白で潰していた部分を減らし、ガラスの反射や街並みを残します */
.hero-media::after{
  background:linear-gradient(
    90deg,
    rgba(246,247,244,.60) 0%,
    rgba(246,247,244,.42) 28%,
    rgba(246,247,244,.16) 46%,
    rgba(246,247,244,0) 62%
  );
}

@media (min-width:1081px){
  .hero-media::before{
    background:linear-gradient(
      270deg,
      rgba(246,247,244,.52) 0%,
      rgba(246,247,244,.36) 14%,
      rgba(246,247,244,.12) 26%,
      rgba(246,247,244,0) 36%
    );
  }
}

@media (min-width:761px) and (max-width:1280px){
  .hero-media::after{
    background:linear-gradient(
      90deg,
      rgba(246,247,244,.72) 0%,
      rgba(246,247,244,.56) 32%,
      rgba(246,247,244,.28) 52%,
      rgba(246,247,244,.06) 74%,
      rgba(246,247,244,0) 90%
    );
  }
}

/* スマホは画像の下端を背景色へ溶かす必要があるため、
   上側だけ弱め、下側の溶かし込みは維持します */
@media (max-width:760px){
  .hero-media::after{
    background:linear-gradient(
      180deg,
      rgba(244,243,238,.10) 0,
      rgba(244,243,238,.04) calc(var(--hero-visual) * .24),
      rgba(244,243,238,.50) calc(var(--hero-visual) * .68),
      rgba(244,243,238,.90) calc(var(--hero-visual) * .88),
      #f4f3ee var(--hero-visual),
      #f4f3ee 100%
    );
  }
}

/* 覆いを弱めたぶん、薄い英字ラベルが背景に負けるため少し濃くします */
.hero-aside-en{color:rgba(17,43,61,.56)}

/* 761〜1280pxは球体が本文の上まで張り出すため、この幅だけ覆いを強め、
   本文の幅も少し絞ります（PC幅の見え方には影響しません） */
@media (min-width:761px) and (max-width:1280px){
  .hero-media::after{
    background:linear-gradient(
      90deg,
      rgba(246,247,244,.88) 0%,
      rgba(246,247,244,.80) 38%,
      rgba(246,247,244,.54) 56%,
      rgba(246,247,244,.18) 76%,
      rgba(246,247,244,0) 90%
    );
  }

  .hero-lead{max-width:min(640px,58%)}
}

/* ---- セクションの境目をつくる ----
   メインビジュアルの地色が直下のセクションと同じ #f4f3ee だったため、
   スマホでは画像が終わったあと境目が消えていました。
   メインビジュアルを白にして、暖色寄りの紙色との差で区切ります */
.hero{background:#fff}

.hero-media::after{
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.60) 0%,
    rgba(255,255,255,.42) 28%,
    rgba(255,255,255,.16) 46%,
    rgba(255,255,255,0) 62%
  );
}

@media (min-width:1081px){
  .hero-media::before{
    background:linear-gradient(
      270deg,
      rgba(255,255,255,.52) 0%,
      rgba(255,255,255,.36) 14%,
      rgba(255,255,255,.12) 26%,
      rgba(255,255,255,0) 36%
    );
  }
}

@media (min-width:761px) and (max-width:1280px){
  .hero-media::after{
    background:linear-gradient(
      90deg,
      rgba(255,255,255,.88) 0%,
      rgba(255,255,255,.80) 38%,
      rgba(255,255,255,.54) 56%,
      rgba(255,255,255,.18) 76%,
      rgba(255,255,255,0) 90%
    );
  }
}

@media (max-width:760px){
  .hero-media::after{
    background:linear-gradient(
      180deg,
      rgba(255,255,255,.10) 0,
      rgba(255,255,255,.04) calc(var(--hero-visual) * .24),
      rgba(255,255,255,.50) calc(var(--hero-visual) * .68),
      rgba(255,255,255,.90) calc(var(--hero-visual) * .88),
      #fff var(--hero-visual),
      #fff 100%
    );
  }
}

/* 念のため、境目に細い区切りも入れます（紙色側の上端） */
.approach-v19{
  border-top:1px solid rgba(17,43,61,.07);
}

/* ---- ヘッダーロゴを支給画像に差し替え ----
   CSSで組んでいたロゴ（円形マーク＋テキスト）をやめ、
   1枚の画像で表示します。背景は透過処理済みです */
.site-logo{
  display:block;
  line-height:0;
}

.site-logo img{
  display:block;
  width:auto;
  height:52px;
}

@media (max-width:1040px){
  .site-logo img{height:44px}
}

@media (max-width:760px){
  .site-logo img{height:38px}
}

@media (max-width:400px){
  .site-logo img{height:34px}
}

/* ==========================================================
   代表者の写真（スマートフォンのみ）
   見出しの右側に並べ、肩書と氏名を写真の中に小さく添えます。
   PC・タブレットでは表示しません。
   ========================================================== */
.hero-portrait{display:none}

@media (max-width:760px){
  /* 見出しの行だけ2カラムにして、右に写真を置きます */
  .hero-copy{
    display:grid;
    grid-template-columns:1fr 46%;
    grid-template-areas:
      "eyebrow eyebrow"
      "title   photo"
      "lead    lead"
      "actions actions";
    align-items:end;
    column-gap:2px;
  }

  .hero-eyebrow{grid-area:eyebrow}
  .hero-title{grid-area:title}
  .hero-lead{grid-area:lead}
  .hero-actions{grid-area:actions}

  .hero-portrait{
    grid-area:photo;
    position:relative;
    display:block;
    margin:0 -6% -2% 0;   /* 右は画面端まで出す */
    align-self:end;
  }

  .hero-portrait img{
    display:block;
    width:100%;
    height:auto;
  }

  /* 肩書と氏名は写真の中、右下に小さく */
  .hero-portrait figcaption{
    position:absolute;
    right:7%;
    bottom:7%;
    text-align:right;
    color:#112b3d;
    font-size:11px;
    font-weight:700;
    line-height:1.45;
    letter-spacing:.02em;
    text-shadow:0 1px 6px rgba(255,255,255,.95), 0 0 14px rgba(255,255,255,.85);
  }

  .hero-portrait figcaption span{
    display:block;
    font-size:8.5px;
    font-weight:600;
    letter-spacing:.08em;
    opacity:.75;
  }
}

/* ---- 代表者の写真を入れたぶん、スマホの縦を詰め直します ----
   球体の表示領域を小さくし、見出しの折り返しが増えないよう
   写真の幅と文字サイズを調整しています */
@media (max-width:760px){
  .hero{--hero-visual:clamp(150px,26svh,240px)}

  .hero-copy{grid-template-columns:1fr 43%}

  .hero-title{font-size:clamp(24px,7.1vw,33px)}

  .hero-portrait figcaption{
    right:6%;
    bottom:6%;
    font-size:10px;
  }

  .hero-portrait figcaption span{font-size:8px}
}

/* 縦が短い端末ではさらに詰めます */
@media (max-width:760px) and (max-height:700px){
  .hero{--hero-visual:clamp(115px,20svh,175px)}
  .hero-inner{padding-bottom:34px}
  .hero-lead{margin-top:15px;font-size:13.5px;line-height:1.8}
  .hero-actions{margin-top:20px}
}

@media (max-width:760px) and (max-height:620px){
  .hero{--hero-visual:clamp(100px,16svh,150px)}
}

/* ---- スマホ用の背景画像 ----
   PC用の16:9をそのまま高さ基準で縮めると、幅が画面より狭くなり
   左右に余白の筋が出ます。スマホ用に2.4:1で切り抜いた画像を使い、
   横幅いっぱい（100%）で表示します。
   表示される高さは「画面幅 ÷ 2.4」で決まるため、
   --hero-visual もその値に合わせます */
@media (max-width:760px){
  .hero{--hero-visual:calc(100vw / 2.4)}

  .hero-media{
    background-image:url("../images/hero-bg-sp.jpg");
    background-size:100% auto;
    background-position:center top;
  }
}

/* 縦が短い端末では代表者の写真を出さず、従来の1カラムに戻します
   （写真を入れると1画面にボタンまで収まらないため） */
@media (max-width:760px) and (max-height:640px){
  .hero-portrait{display:none}

  .hero-copy{
    display:block;
  }

  .hero-title{font-size:clamp(23px,6.8vw,30px)}
  .hero-inner{padding-bottom:28px}
}

/* 肩書と氏名は濃紺のスーツの上に乗るため、白文字＋濃い影にします
   （濃紺文字では背景に溶けて読めませんでした） */
@media (max-width:760px){
  .hero-portrait figcaption{
    color:#fff;
    text-shadow:0 1px 6px rgba(6,20,28,.9), 0 0 18px rgba(6,20,28,.65);
  }

  .hero-portrait figcaption span{opacity:.92}
}

/* ---- 代表者写真を見出しと横並びに ----
   写真が見出しより背が高く、上下にはみ出していたため、
   見出し＋英字リードの2行ぶんの高さに収まる正方形の切り抜きに変更し、
   その範囲に配置します */
@media (max-width:760px){
  .hero-copy{
    grid-template-columns:1fr 38%;
    grid-template-areas:
      "eyebrow photo"
      "title   photo"
      "lead    lead"
      "actions actions";
  }

  .hero-portrait{
    align-self:end;
    margin:0 -6% 0 0;
  }

  .hero-portrait figcaption{
    right:8%;
    bottom:9%;
  }
}

/* 英字リードは写真の横に置くと2行に折り返すため、全幅に戻します */
@media (max-width:760px){
  .hero-copy{
    grid-template-areas:
      "eyebrow eyebrow"
      "title   photo"
      "lead    lead"
      "actions actions";
  }
}

/* ---- 写真の位置：画面右端への張り出しをやめ、右の列の中央へ ---- */
@media (max-width:760px){
  .hero-portrait{
    margin:0;
    justify-self:center;
    width:92%;
  }

  .hero-portrait figcaption{
    right:10%;
    bottom:12%;
  }
}

/* 肩書と氏名が写真のフェード部分（白く抜けた縁）にかかって
   読めなくなっていたため、写真の内側へ寄せます */
@media (max-width:760px){
  .hero-portrait figcaption{
    right:17%;
    bottom:15%;
  }
}

/* ==========================================================
   MESSAGE：代表挨拶
   メインビジュアルの直後、OUR APPROACH の前に置いています。
   ========================================================== */
.message-v1{
  position:relative;
  background:#fff;
  padding:104px 0 110px;
  overflow:hidden;
}

/* 背景に薄い円の装飾（他セクションと同じ考え方） */
.message-v1::before{
  content:"";
  position:absolute;
  top:-180px;
  right:-200px;
  width:620px;
  height:620px;
  border-radius:50%;
  border:1px solid rgba(10,146,119,.12);
  pointer-events:none;
}

.message-v1-inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:72px;
  align-items:center;
  width:min(1320px,86%);
  margin:0 auto;
}

.message-v1-photo{
  margin:0;
  position:relative;
}

.message-v1-photo img{
  display:block;
  width:100%;
  height:auto;
  border-radius:6px;
  box-shadow:0 26px 60px rgba(17,43,61,.16);
}

/* 写真の左下に重なるアクセント */
.message-v1-photo::after{
  content:"";
  position:absolute;
  left:-22px;
  bottom:-22px;
  width:160px;
  height:160px;
  border-left:2px solid #0a9277;
  border-bottom:2px solid #0a9277;
  opacity:.55;
  pointer-events:none;
}

.message-v1-label{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 20px;
  color:#0a9277;
  font-size:11px;
  font-weight:700;
  letter-spacing:.22em;
}

.message-v1-label i{
  display:block;
  width:46px;
  height:1px;
  background:#20aa8d;
}

.message-v1-body h2{
  margin:0 0 30px;
  color:#112b3d;
  font-size:clamp(28px,2.6vw,40px);
  font-weight:800;
  line-height:1.42;
  letter-spacing:-.02em;
}

.message-v1-body h2 em{
  color:#0a9277;
  font-style:normal;
}

.message-v1-body p{
  margin:0 0 18px;
  max-width:46em;
  color:#41565f;
  font-size:15.5px;
  line-height:2.05;
}

.message-v1-sign{
  display:flex;
  align-items:baseline;
  gap:16px;
  margin:34px 0 0 !important;
  color:#112b3d !important;
  font-size:22px !important;
  font-weight:700;
  letter-spacing:.06em;
}

.message-v1-sign span{
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  color:#5b6f79;
}

@media (max-width:1080px){
  .message-v1{padding:84px 0 88px}
  .message-v1-inner{
    grid-template-columns:minmax(0,320px) minmax(0,1fr);
    gap:48px;
  }
  .message-v1-body p{font-size:15px}
}

@media (max-width:760px){
  .message-v1{padding:62px 0 66px}

  .message-v1::before{
    top:-120px;
    right:-160px;
    width:400px;
    height:400px;
  }

  .message-v1-inner{
    grid-template-columns:1fr;
    gap:30px;
    width:92%;
  }

  /* スマホでは文章を先に読ませ、写真は本文の下に */
  .message-v1-photo{
    order:2;
    width:72%;
    margin:4px auto 0;
  }

  .message-v1-photo::after{
    left:-12px;
    bottom:-12px;
    width:96px;
    height:96px;
  }

  .message-v1-body{order:1}

  .message-v1-body h2{
    margin-bottom:22px;
    font-size:clamp(23px,6.6vw,30px);
    line-height:1.45;
  }

  .message-v1-body p{
    font-size:14.5px;
    line-height:1.95;
  }

  .message-v1-sign{
    margin-top:26px !important;
    font-size:19px !important;
  }
}

/* 1行が長くなりすぎないよう本文幅を調整 */
.message-v1-body p{max-width:38em}

/* スマホはメインビジュアルに同じ写真が出ているため、
   この節では写真を出さず、文章と署名だけにします */
@media (max-width:760px){
  .message-v1-photo{display:none}
  .message-v1-inner{gap:0}
}

/* ---- 代表挨拶：右側の余白をなくし、左右のバランスを取る ----
   本文に max-width を掛けていたため、横幅の広い画面では
   右側が空いて左寄りに見えていました。
   写真を大きくし、本文は列の幅いっぱいまで使います */
@media (min-width:1081px){
  .message-v1-inner{
    grid-template-columns:minmax(0,520px) minmax(0,1fr);
    gap:88px;
  }

  .message-v1-body p{max-width:none}

  .message-v1-photo::after{
    left:-26px;
    bottom:-26px;
    width:190px;
    height:190px;
  }
}

/* 写真を固定幅にすると、画面幅の狭いPCで写真が勝ちすぎるため、
   比率で分けます（写真44% / 本文56%） */
@media (min-width:1081px){
  .message-v1-inner{
    grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);
  }
}

/* ---- 写真を小さくし、高さを本文と揃える ----
   写真の高さを行の高さ（＝本文の高さ）に合わせ、
   はみ出す分は中央〜上寄りでトリミングします */
@media (min-width:1081px){
  .message-v1-inner{
    grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);
    align-items:stretch;
  }

  .message-v1-photo{
    align-self:stretch;
    min-height:0;
  }

  .message-v1-photo img{
    height:100%;
    object-fit:cover;
    object-position:50% 12%;
  }
}

/* ---- 背景の円：スマホでは非表示、PCでははっきり見せる ---- */
@media (max-width:760px){
  .message-v1::before{display:none}
}

@media (min-width:761px){
  .message-v1::before{
    border-width:2px;
    border-color:rgba(10,146,119,.32);
  }

  /* 内側にもう一本細い円を足して、装飾として意図を見せます */
  .message-v1::after{
    content:"";
    position:absolute;
    top:-80px;
    right:-100px;
    width:420px;
    height:420px;
    border-radius:50%;
    border:1px solid rgba(10,146,119,.22);
    pointer-events:none;
  }
}

/* ---- 代表挨拶：肩書・氏名を写真の中へ ----
   文末の署名は表示せず、写真の右下に重ねます */
.message-v1-sign{display:none !important}

.message-v1-photo figcaption{
  position:absolute;
  right:22px;
  bottom:20px;
  z-index:2;
  text-align:right;
  color:#fff;
  font-size:20px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.06em;
  text-shadow:0 1px 8px rgba(6,20,28,.92), 0 0 22px rgba(6,20,28,.7);
  pointer-events:none;
}

.message-v1-photo figcaption span{
  display:block;
  margin-bottom:2px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  opacity:.92;
}

/* 写真の下側をわずかに暗くして、文字を読みやすくする */
.message-v1-photo::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:38%;
  border-radius:0 0 6px 6px;
  background:linear-gradient(180deg, rgba(6,20,28,0) 0%, rgba(6,20,28,.42) 100%);
  pointer-events:none;
}

@media (max-width:1080px){
  .message-v1-photo figcaption{
    right:18px;
    bottom:16px;
    font-size:18px;
  }
}

/* 会社情報の社名に添える読み（ふりがなの代わり）
   検索エンジンが「LeaderX株式会社」を1語として読めるよう、
   ここだけ ruby を使わず併記にしています */
.kana-note{
  display:block;
  margin-top:2px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.1em;
  color:#7b8991;
}