/* Approved 3D hero and service presentation, scoped to the public homepage. */

.home .hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 90% 24%,#e7efff 0%,transparent 65%),#f6f9ff;min-height:calc(100svh - 88px)}.home .hero .hero-inner{max-width:1440px;margin:auto;padding:90px 6% 52px;min-height:740px;position:relative}.hero-heading,.home .hero .hero-detail{position:relative;z-index:1;width:53%;max-width:650px}.home .hero .eyebrow{font-size:12px;letter-spacing:.08em;color:#1558d6;font-weight:500;margin:0 0 28px}.home .hero h1{font-size:clamp(31px,2.75vw,43px);line-height:1.65;letter-spacing:-.025em;margin:0 0 30px;font-weight:700}.home .hero .hero-title-line{display:block}.phrase{display:inline-block}.home .hero .hero-detail{max-width:535px;width:46%}.home .hero .hero-lead{font-size:15px;line-height:2.15;margin:0;color:#4d6485}.home .hero .btn-row{display:flex;align-items:center;gap:30px;margin:32px 0 0;font-size:14px;font-weight:500}.home .hero .btn{display:inline-flex;align-items:center;justify-content:space-between;gap:32px}.home .hero .btn.primary{background:#1558d6;color:white;padding:18px 27px;border-radius:7px;box-shadow:0 8px 28px #1558d621}.home .hero .btn.primary:hover{background:#104bbe}.home .hero .btn.secondary{color:#1558d6}.home .hero .btn span{font-size:21px;font-weight:400}
.scene-wrap{position:absolute;z-index:0;left:43%;right:-10%;top:-15px;bottom:-35px;min-height:600px}#scene{position:absolute;inset:0;cursor:grab;touch-action:pan-y;user-select:none}#scene.dragging{cursor:grabbing}.scene-controls{position:absolute;z-index:2;left:10%;right:18%;top:24px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;font-size:11px;color:#647896}#scene-status:empty{display:none}#scene canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .35s ease}#scene .scene-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:visibility 0s linear .35s}#scene[data-ready="true"] canvas{opacity:1}#scene[data-ready="true"] .scene-still{visibility:hidden}#scene[data-ready="false"] canvas{display:none}#scene:not([data-ready="true"])+.scene-controls .drag-hint{visibility:hidden}@media(prefers-reduced-motion:reduce){#scene canvas,#scene .scene-still{transition:none}}.home .hero .hero-controls{position:relative;z-index:1;margin:36px 0 0;display:flex;align-items:center;gap:18px;flex-wrap:wrap}#scene-status{font-size:11px;line-height:1.8;color:#647896;margin:0;max-width:340px}
@media(min-width:1600px){.home .hero .hero-inner{padding-top:115px;min-height:830px}.scene-wrap{right:-5%}}
@media(max-width:900px){.home .hero .hero-inner{padding:44px 24px 36px;min-height:0}.hero-heading,.home .hero .hero-detail{width:100%;max-width:630px;margin:auto}.home .hero .eyebrow{font-size:11px;margin-bottom:20px}.home .hero h1{font-size:clamp(27px,5.5vw,38px);line-height:1.6;margin-bottom:24px}.home .hero .hero-title-line{display:block}.scene-wrap{position:relative;left:auto;right:auto;top:auto;bottom:auto;height:470px;min-height:0;margin:28px -24px 0}.scene-controls{left:0;right:0;top:auto;bottom:5px}.home .hero .hero-lead{font-size:14px;line-height:2.1}.home .hero .btn-row{gap:24px;font-size:13px}.home .hero .btn.primary{padding:16px 22px}.home .hero .hero-controls{max-width:630px;margin:28px auto 0}}
@media(max-width:420px){.scene-wrap{height:410px;margin-top:20px;margin-bottom:0}.scene-controls{gap:8px}.home .hero .btn-row{gap:20px}.home .hero .btn{gap:15px}.home .hero .btn.primary{padding:15px 18px}}
/* Only the service section is new; the approved hero keeps its own styles. */
.services { background: #fff; color: #25334d; }
.services-inner { max-width: 1440px; padding-inline: 6%; margin-inline: auto; }
.services-intro { padding-top: 100px; padding-bottom: 80px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: end; }
.services-intro .eyebrow { display: block; margin-bottom: 14px; font-size: 12px; letter-spacing: .12em; }
.services h2 { font-size: clamp(30px, 3vw, 40px); line-height: 1.5; letter-spacing: .015em; font-weight: 700; margin: 0; }
.services-lead { max-width: 650px; font-size: 16px; line-height: 2; margin: 0; color: #4d6485; }
.service-fde { display: grid; grid-template-columns: minmax(0,420px) minmax(0,1fr); column-gap: 64px; padding: 56px 0 112px; border-top: 1px solid #dce5f1; align-items: start; }
.services h3 { font-size: 28px; font-weight: 700; line-height: 1.6; letter-spacing: .01em; margin: 0 0 24px; }
.service-fde h3 { grid-column: 1; color: #1558d6; }
.services .service-role { display: block; font-size: 13px; font-weight: 400; letter-spacing: .1em; color: #4d6485; margin-top: 8px; }
.service-visual { grid-column: 2; grid-row: 1 / 4; margin: 0; align-self: center; }
.service-visual img { display: block; width: 100%; height: auto; border-radius: 12px; }
.service-photo-note { margin-top: 6px; color: #637593; font-size: 11px; text-align: right; }
.service-ai .service-photo-note { color: #c9d9f3; }
.services .service-copy { grid-column: 1; font-size: 16px; line-height: 2; }
.services .service-copy p { margin: 0; }
.services .service-copy .service-need { font-size: 18px; line-height: 1.8; font-weight: 500; margin-bottom: 18px; }
.service-more { display: inline-block; grid-column: 1; justify-self: start; color: #1558d6; font-size: 14px; line-height: 1.8; font-weight: 500; margin-top: 28px; padding-bottom: 4px; border-bottom: 1px solid currentColor; }
.service-more:hover { color: #25334d; }
.service-fde, .service-ai { position: relative; cursor: pointer; }
.service-more::after { position: absolute; inset: 0; z-index: 1; content: ""; }
.service-more:focus-visible::after { outline: 2px solid currentColor; outline-offset: -4px; }
.service-ai { background: #193c70; color: #fff; }
.ai-inner { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); column-gap: 64px; padding-block: 76px 82px; }
.service-ai h3 { grid-column: 2; font-size: 34px; line-height: 1.55; margin: 0 0 24px; }
.ai-visual { grid-column: 1; grid-row: 1 / 3; }
.ai-content { grid-column: 2; max-width: 650px; }
.service-ai .service-copy { color: #dce7f8; }
.service-ai .service-copy .service-need { color: #fff; font-size: 21px; margin-bottom: 22px; }
.service-ai .service-more { color: #fff; }
.service-ai .service-more:hover { color: #c5d9ff; }
.service-quality { padding: 76px 0 88px; display: grid; grid-template-columns: minmax(0,420px) minmax(0,1fr); column-gap: 64px; }
.services .service-quality h3 { color: #4d6485; font-size: 19px; font-weight: 500; line-height: 1.9; margin: 0; }
.service-quality p { color: #4d6485; font-size: 14px; line-height: 2.1; margin: 0; max-width: 650px; }
.services-contact { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 0 64px; border-top: 1px solid #dce5f1; }
.services-contact p { margin: 0; color: #20314f; font-size: 16px; line-height: 1.9; }
.services-contact .btn.primary { white-space: nowrap; }
@media (max-width: 1100px) and (min-width: 901px) {
  .service-fde,.service-quality { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); column-gap: 40px; }
  .ai-inner { column-gap: 40px; }
}
@media (max-width: 900px) {
  .services-inner { padding-inline: 24px; max-width: 728px; }
  .services-intro { padding-top: 60px; padding-bottom: 38px; display: block; }
  .services-intro .eyebrow { margin-bottom: 8px; }
  .services h2 { font-size: 30px; }
  .services-lead { margin-top: 20px; font-size: 15px; line-height: 1.95; }
  .service-fde { grid-template-columns: minmax(0,1fr); padding: 36px 0 58px; }
  .services h3 { font-size: 26px; margin-bottom: 24px; }
  .service-visual { grid-column: 1; grid-row: auto; margin: 0 0 26px; }
  .service-visual img { border-radius: 8px; }
  .services .service-copy { font-size: 15px; line-height: 2; }
  .services .service-copy .service-need { font-size: 17px; }
  .service-more { margin-top: 24px; }
  .ai-inner { display: block; padding-block: 48px 52px; }
  .service-ai h3 { font-size: 29px; margin-bottom: 26px; }
  .service-ai .service-copy .service-need { font-size: 19px; }
  .service-quality { display: block; padding-block: 44px 52px; }
  .services .service-quality h3 { font-size: 18px; margin-bottom: 18px; }
  .service-quality p { font-size: 13px; }
  .services-contact { flex-direction: column; align-items: flex-start; padding: 28px 0 50px; }
}

.home .hero { max-width: none; width: 100%; margin: 0; padding: 0; color: #20314f; }
.home .hero .hero-heading { position: relative; z-index: 1; width: 53%; max-width: 650px; }
.home .hero .btn-row { display: flex; align-items: center; gap: 30px; margin: 32px 0 0; font-size: 14px; font-weight: 500; }
.home .service-ai h3 { color: #fff; }
.home .hero::before, .home .hero::after, .home .hero h1::after { display: none; }
.home .hero h1 { color: #20314f; font-family: var(--font-sans); font-size: clamp(31px,2.75vw,43px); font-weight: 700; line-height: 1.65; letter-spacing: -.025em; }
.home .hero .hero-lead { max-width: none; margin: 0; color: #4d6485; font-family: var(--font-sans); font-size: 15px; line-height: 2.15; }
.home .hero .btn.primary { color: #fff; background: #1558d6; border: 0; }
.home .hero .btn.primary:hover, .home .hero .btn.primary:focus-visible { background: #104bbe; }
.home .hero .btn.secondary { color: #1558d6; border: 0; padding: 0; }
.home .hero .btn.secondary:hover, .home .hero .btn.secondary:focus-visible { color: #193c70; background: transparent; }
.home .services .btn.primary { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; padding: 18px 27px; color: #fff; background: #1558d6; border: 0; border-radius: 7px; box-shadow: 0 8px 28px #1558d621; text-decoration: none; }
.home .services .btn.primary:hover, .home .services .btn.primary:focus-visible { background: #104bbe; }
.home .services .btn.primary span { font-size: 21px; }
.home #process .steps h3, .home #why .principle h3 { font-family: var(--font-sans); font-size: clamp(1.15rem,1.4vw,1.4rem); font-weight: 700; }
.home #process .steps p, .home #why .principle p { font-family: var(--font-sans); font-size: 1rem; }
.home #process .steps > li { padding-bottom: 2.25rem; }
.home #why .principle h3 { color: #1558d6; }
@media (max-width: 900px) {
  .home .hero h1 { font-size: clamp(27px,5.5vw,38px); }
  .home .hero .hero-lead { font-size: 14px; line-height: 2.1; }
  .home .hero .hero-heading { width: 100%; max-width: 630px; margin: auto; }
}
/* 901〜1100px: 本文と見出しが3Dの領域に入らないよう、文字側を左半分に収め、3Dを右へ寄せる。
   上の .home .hero ... の指定より後ろに置く必要がある(同じ詳細度のため、後ろが勝つ) */
@media (max-width: 1100px) and (min-width: 901px) {
  .home .hero .hero-heading { width: 47%; }
  .home .hero .hero-detail { width: 44%; }
  .home .hero .hero-lead { font-size: 14px; }
  .scene-wrap { left: 50%; right: -18%; }
  .scene-controls { left: 0; right: 10%; }
}