@charset "UTF-8";

:root { --si-navy:#061224; --si-blue:#0b2341; --si-gold:#c8a76a; --si-light:#edf3f7; --si-line:rgba(200,167,106,.36); }
.pg-smartInnovation { background:#fff; color:#111; }
.pg-smartInnovation .l-container { margin-top:0; }
.pg-smartInnovation .l-main { overflow:hidden; }
.si-inner { width:min(1180px, calc(100% - 40px)); margin-inline:auto; position:relative; z-index:2; }
.si-pc { display:block; }
.si-kicker,.si-sectionHead__en { margin:0 0 18px; color:var(--si-gold); font-family:"Noto Sans JP",sans-serif; font-size:12px; font-weight:700; letter-spacing:.32em; }
.si-hero { min-height:760px; padding:140px 0 100px; position:relative; display:flex; align-items:center; overflow:hidden; color:#fff; background:radial-gradient(circle at 78% 36%,rgba(78,125,156,.3),transparent 27%),linear-gradient(125deg,#030a13 0%,#07182d 54%,#102b42 100%); }
.si-hero::before { content:""; position:absolute; inset:0; opacity:.3; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to right,transparent,#000); }
.si-hero::after { content:"SMART"; position:absolute; right:-.04em; bottom:-.18em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.09); font:700 clamp(150px,24vw,380px)/1 "Noto Sans JP",sans-serif; letter-spacing:-.08em; }
.si-hero__glow { position:absolute; width:440px; height:440px; right:10%; top:23%; border:1px solid rgba(200,167,106,.2); border-radius:50%; box-shadow:0 0 110px rgba(200,167,106,.12),inset 0 0 90px rgba(89,148,174,.08); }
.si-hero__glow::before,.si-hero__glow::after { content:""; position:absolute; inset:12%; border:1px solid rgba(255,255,255,.08); border-radius:50%; }
.si-hero__glow::after { inset:30%; background:radial-gradient(circle,rgba(200,167,106,.32),transparent 68%); }
.si-hero__title { margin:0; max-width:980px; font:400 clamp(54px,8.4vw,122px)/.88 "Noto Sans JP",sans-serif; letter-spacing:-.055em; }
.si-hero__title span { display:block; color:var(--si-gold); font-weight:700; }
.si-hero__catch { margin:42px 0 45px; font-size:clamp(24px,3vw,39px); font-weight:500; letter-spacing:.12em; }
.si-hero__statement { max-width:720px; color:rgba(255,255,255,.74); font-size:15px; line-height:2.15; letter-spacing:.05em; }
.si-hero__statement p+p { margin-top:18px; }
.si-hero__line { width:180px; height:1px; margin-top:58px; background:rgba(255,255,255,.16); }
.si-hero__line span { display:block; width:38%; height:100%; background:var(--si-gold); }
.si-brands { padding:140px 0 160px; background:#f2f4f5; }
.si-sectionHead { margin-bottom:65px; }
.si-sectionHead__title { margin:0; color:var(--si-navy); font-size:clamp(36px,5vw,68px); line-height:1.15; letter-spacing:.06em; }
.si-sectionHead__lead { margin:25px 0 0; color:#64707c; font-size:15px; line-height:2; }
.si-brandGrid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid #cdd3d7; border-left:1px solid #cdd3d7; }
.si-brand { min-height:680px; padding:46px 48px 52px; position:relative; overflow:hidden; border-right:1px solid #cdd3d7; border-bottom:1px solid #cdd3d7; background:rgba(255,255,255,.65); transition:transform .35s,background .35s; }
.si-brand:hover { z-index:2; transform:translateY(-6px); background:#fff; box-shadow:0 22px 55px rgba(6,18,36,.1); }
.si-brand::after { content:""; position:absolute; width:240px; height:240px; right:-100px; bottom:-100px; border-radius:50%; border:1px solid var(--si-line); }
.si-brand--diamond::after { box-shadow:inset 0 0 70px rgba(126,185,214,.2); transform:rotate(45deg); border-radius:20%; }
.si-brand--gold::after { background:radial-gradient(circle,rgba(200,167,106,.34),transparent 66%); }
.si-brand__number { margin:0 0 24px; color:#9aa4ab; font:12px "Noto Sans JP",sans-serif; letter-spacing:.2em; }
.si-brand__visual { height:220px; margin:0 -48px 38px; overflow:hidden; background:#e8eaec; }
.si-brand__visual img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.si-brand:hover .si-brand__visual img { transform:scale(1.035); }
.si-brand__visual--diamond img { object-position:center 45%; }
.si-brand__visual--gold img { object-position:center 48%; }
.si-brand__visual--jewelry img { object-position:center 48%; }
.si-brand__label { margin:0 0 3px; color:var(--si-gold); font:700 15px "Noto Sans JP",sans-serif; letter-spacing:.22em; }
.si-brand__name { margin:0; color:var(--si-navy); font:700 clamp(42px,5vw,72px)/.95 "Noto Sans JP",sans-serif; letter-spacing:-.055em; }
.si-brand__by { margin:8px 0 0; color:#56606a; font:700 11px "Noto Sans JP",sans-serif; letter-spacing:.2em; }
.si-brand__catch { margin:32px 0 14px; color:var(--si-navy); font-size:19px; font-weight:700; letter-spacing:.04em; }
.si-brand__text { max-width:450px; margin:0; color:#5c6670; font-size:14px; line-height:1.9; }
.si-gold { padding:155px 0 145px; position:relative; overflow:hidden; color:#fff; background:linear-gradient(140deg,#03070c,#0a1726 55%,#14271f); }
.si-gold::before { content:"24K"; position:absolute; top:25px; right:-.08em; color:rgba(255,255,255,.025); font:700 340px/1 "Noto Sans JP",sans-serif; letter-spacing:-.08em; }
.si-gold__halo { position:absolute; width:700px; height:700px; left:-380px; top:30%; border-radius:50%; background:radial-gradient(circle,rgba(200,167,106,.16),transparent 65%); }
.si-gold__head { max-width:780px; }
.si-gold__title { margin:0; font-size:clamp(42px,6vw,78px); line-height:1.2; letter-spacing:.04em; }
.si-gold__lead { margin:32px 0 0; color:rgba(255,255,255,.72); font-size:17px; line-height:2; }
.si-duality { margin:95px 0 100px; display:grid; grid-template-columns:1fr 100px 1fr; align-items:stretch; }
.si-role { min-height:430px; padding:52px 45px; position:relative; overflow:hidden; border:1px solid var(--si-line); background:rgba(255,255,255,.025); }
.si-role__en { margin:0; color:var(--si-gold); font:700 13px "Noto Sans JP",sans-serif; letter-spacing:.35em; }
.si-role__symbol { position:absolute; right:-.02em; top:.02em; margin:0; color:rgba(200,167,106,.08); font:700 210px/1 serif; }
.si-role__title { margin:90px 0 22px; font-size:clamp(23px,2.5vw,34px); line-height:1.4; }
.si-role__tagline { margin:0 0 22px; color:var(--si-gold); font-size:15px; font-weight:700; line-height:1.7; }
.si-role__text { margin:0; color:rgba(255,255,255,.64); font-size:14px; line-height:1.9; }
.si-duality__arrow { display:flex; align-items:center; }
.si-duality__arrow span { width:100%; height:1px; position:relative; background:var(--si-line); }
.si-duality__arrow span::after { content:""; position:absolute; right:0; top:-4px; width:8px; height:8px; border-top:1px solid var(--si-gold); border-right:1px solid var(--si-gold); transform:rotate(45deg); }
.si-gold__conclusion { text-align:center; color:rgba(255,255,255,.7); font-size:15px; line-height:2; }
.si-gold__conclusionMain { margin:15px 0; color:#fff; font-size:clamp(28px,4.5vw,56px); font-weight:600; letter-spacing:.08em; }
.si-gold__conclusionMain span { color:var(--si-gold); }
.si-vision { padding:145px 0; position:relative; color:var(--si-navy); background:#fff; }
.si-vision::before { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 50%,rgba(11,35,65,.04) 50%); }
.si-vision__inner { text-align:center; }
.si-vision__title { margin:0; font-size:clamp(46px,7vw,90px); line-height:1.22; letter-spacing:.1em; }
.si-vision__text { margin:35px 0 65px; color:#5c6670; font-size:16px; line-height:2; }
.si-vision__structure { display:flex; align-items:center; justify-content:center; gap:22px; color:#7c858d; font:700 10px "Noto Sans JP",sans-serif; letter-spacing:.18em; }
.si-vision__structure strong { color:var(--si-gold); font-size:14px; }
.si-vision__structure i { width:54px; height:1px; background:#cbd0d4; }

@media (max-width:767px) {
  .si-inner { width:min(100% - 32px,580px); }
  .si-pc { display:none; }
  .si-kicker,.si-sectionHead__en { margin-bottom:14px; font-size:10px; letter-spacing:.25em; }
  .si-hero { min-height:680px; padding:110px 0 70px; }
  .si-hero::before { background-size:42px 42px; }
  .si-hero::after { right:-.1em; bottom:-.06em; font-size:110px; }
  .si-hero__glow { width:270px; height:270px; right:-30%; top:28%; }
  .si-hero__title { font-size:clamp(52px,17vw,76px); line-height:.92; }
  .si-hero__title span { letter-spacing:-.07em; }
  .si-hero__catch { margin:34px 0 30px; font-size:23px; letter-spacing:.05em; }
  .si-hero__statement { font-size:13px; line-height:1.95; }
  .si-hero__statement p+p { margin-top:14px; }
  .si-hero__line { margin-top:38px; }
  .si-brands { padding:90px 0 100px; }
  .si-sectionHead { margin-bottom:40px; }
  .si-sectionHead__title { font-size:38px; }
  .si-sectionHead__lead { margin-top:18px; font-size:13px; line-height:1.85; }
  .si-brandGrid { grid-template-columns:1fr; }
  .si-brand { min-height:0; padding:32px 25px 38px; }
  .si-brand__number { margin-bottom:20px; }
  .si-brand__visual { height:190px; margin:0 -25px 30px; }
  .si-brand__name { font-size:50px; }
  .si-brand__catch { margin-top:26px; font-size:17px; }
  .si-brand__text { font-size:13px; }
  .si-gold { padding:95px 0 90px; }
  .si-gold::before { top:80px; font-size:150px; }
  .si-gold__title { font-size:42px; }
  .si-gold__lead { margin-top:24px; font-size:14px; }
  .si-duality { margin:60px 0 70px; grid-template-columns:1fr; }
  .si-role { min-height:390px; padding:38px 25px; }
  .si-role__symbol { font-size:170px; }
  .si-role__title { margin-top:75px; font-size:24px; }
  .si-duality__arrow { height:70px; justify-content:center; }
  .si-duality__arrow span { width:1px; height:100%; }
  .si-duality__arrow span::after { right:-4px; top:auto; bottom:0; transform:rotate(135deg); }
  .si-gold__conclusion { font-size:13px; }
  .si-gold__conclusionMain { font-size:29px; line-height:1.6; }
  .si-vision { padding:95px 0; }
  .si-vision__title { font-size:44px; }
  .si-vision__text { margin:28px 0 48px; font-size:13px; }
  .si-vision__structure { flex-direction:column; gap:14px; }
  .si-vision__structure i { width:1px; height:30px; }
}