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

/* === Base === */
*{box-sizing:border-box;}
  html,body{margin:0;}
  body{font-family:'Noto Sans JP',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
  ::selection{background:rgba(42,120,210,.18);}
  @keyframes qpulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(42,120,210,.35);}50%{transform:scale(1.04);box-shadow:0 0 0 14px rgba(42,120,210,0);}}
  @keyframes qpulsered{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(229,72,77,.32);}50%{transform:scale(1.04);box-shadow:0 0 0 16px rgba(229,72,77,0);}}

/* === Layout Classes === */
.s1 { position: sticky; top: 0px; z-index: 50; backdrop-filter: saturate(140%) blur(10px); background: rgba(241, 246, 245, 0.82); border-bottom: 1px solid rgb(224, 234, 232); }
.s2 { max-width: 1160px; margin: 0px auto; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.s3 { display: flex; align-items: baseline; gap: 10px; }
.s4 { font-weight: 900; font-size: 22px; letter-spacing: -0.02em; color: rgb(14, 41, 38); }
.s5 { font-size: 12px; font-weight: 700; color: var(--accent,#2A78D2); letter-spacing: 0.04em; }
.s6 { display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 500; color: rgb(68, 86, 107); }
.s7 { color: inherit; text-decoration: none; }
.s8 { display: inline-flex; align-items: center; height: 42px; padding: 0px 22px; background: var(--accent,#2A78D2); color: rgb(255, 255, 255); font-weight: 700; border-radius: 999px; text-decoration: none; box-shadow: rgba(42, 120, 210, 0.28) 0px 6px 18px; }
.s9 { position: relative; overflow: hidden; }
.s10 { position: absolute; inset: 0px; background-image: url("images/img07.jpg"); background-size: cover; background-position: right center; pointer-events: none; }
.s11 { position: absolute; inset: 0px; background: linear-gradient(100deg, rgba(242, 246, 252, 0.96) 0%, rgba(242, 246, 252, 0.9) 28%, rgba(242, 246, 252, 0.35) 48%, rgba(242, 246, 252, 0) 64%); pointer-events: none; }
.s12 { max-width: 1160px; margin: 0px auto; padding: 84px 32px 96px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.s13 { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; background: rgb(255, 255, 255); border: 1px solid rgb(214, 226, 242); border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--accent,#2A78D2); box-shadow: rgba(14, 41, 38, 0.04) 0px 2px 8px; }
.s14 { width: 7px; height: 7px; border-radius: 50%; background: var(--accent,#2A78D2); }
.s15 { margin: 22px 0px 0px; font-size: 52px; line-height: 1.18; letter-spacing: -0.02em; font-weight: 900; color: rgb(14, 41, 38); text-wrap: balance; }
.s16 { color: var(--accent,#2A78D2); }
.s17 { margin: 24px 0px 0px; font-size: 18px; line-height: 1.9; color: rgb(66, 85, 79); max-width: 520px; }
.s18 { color: rgb(14, 41, 38); font-weight: 700; }
.s19 { margin-top: 34px; display: flex; align-items: center; gap: 16px; }
.s20 { display: inline-flex; align-items: center; height: 54px; padding: 0px 30px; background: var(--accent,#2A78D2); color: rgb(255, 255, 255); font-size: 16px; font-weight: 700; border-radius: 12px; text-decoration: none; box-shadow: rgba(42, 120, 210, 0.3) 0px 12px 28px; }
.s21 { display: inline-flex; align-items: center; height: 54px; padding: 0px 24px; background: rgb(255, 255, 255); color: rgb(14, 41, 38); font-size: 16px; font-weight: 700; border: 1px solid rgb(214, 226, 242); border-radius: 12px; text-decoration: none; }
.s22 { margin-top: 30px; display: flex; gap: 28px; flex-wrap: wrap; }
.s23 { font-size: 28px; font-weight: 900; color: rgb(14, 41, 38); letter-spacing: -0.01em; }
.s24 { font-size: 15px; font-weight: 700; color: rgb(106, 124, 121); }
.s25 { font-size: 12.5px; color: rgb(106, 124, 121); font-weight: 500; }
.s26 { width: 1px; background: rgb(214, 226, 242); }
.s27 { position: relative; height: 560px; }
.s28 { position: absolute; right: 0px; top: 18px; width: 340px; background: rgb(255, 255, 255); border: 1px solid rgb(230, 237, 235); border-radius: 14px; box-shadow: rgba(14, 41, 38, 0.14) 0px 26px 60px; padding: 22px 22px 18px; transform: rotate(2.5deg); }
.s29 { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid rgb(238, 242, 241); padding-bottom: 12px; }
.s30 { font-size: 15px; font-weight: 900; color: rgb(14, 41, 38); }
.s31 { font-size: 11.5px; color: rgb(123, 138, 135); font-weight: 500; margin-top: 2px; }
.s32 { font-size: 10.5px; color: rgb(154, 168, 165); font-weight: 500; text-align: right; line-height: 1.5; }
.s33 { display: flex; flex-direction: column; gap: 9px; margin-top: 13px; }
.s34 { display: grid; grid-template-columns: 84px 1fr; gap: 8px; font-size: 11.5px; line-height: 1.45; }
.s35 { color: rgb(138, 151, 148); font-weight: 500; }
.s36 { color: rgb(22, 48, 44); font-weight: 600; }
.s37 { display: grid; grid-template-columns: 84px 1fr; gap: 8px; font-size: 11.5px; line-height: 1.45; background: rgb(232, 240, 251); margin: 0px -10px; padding: 6px 10px; border-radius: 7px; }
.s38 { color: var(--accent,#2A78D2); font-weight: 700; }
.s39 { color: rgb(22, 48, 44); font-weight: 700; }
.s40 { margin-top: 14px; font-size: 9.5px; color: rgb(166, 178, 175); line-height: 1.5; border-top: 1px dashed rgb(226, 233, 231); padding-top: 10px; }
.s41 { position: absolute; left: 0px; bottom: 0px; width: 258px; background: rgb(28, 31, 36); border-radius: 38px; padding: 11px; box-shadow: rgba(14, 41, 38, 0.3) 0px 30px 70px; }
.s42 { background: rgb(255, 255, 255); border-radius: 28px; overflow: hidden; }
.s43 { background: linear-gradient(rgb(92, 155, 226), rgb(59, 122, 201)); padding: 18px 16px 15px; text-align: center; }
.s44 { font-size: 16px; font-weight: 900; color: rgb(255, 255, 255); letter-spacing: -0.01em; }
.s45 { margin-top: 3px; font-size: 10.5px; color: rgba(255, 255, 255, 0.88); font-weight: 500; }
.s46 { background: rgb(251, 230, 168); border-bottom: 1px solid rgb(239, 212, 135); height: 18px; }
.s47 { padding: 26px 20px 28px; text-align: center; }
.s48 { font-size: 15px; font-weight: 900; line-height: 1.65; color: rgb(30, 44, 57); }
.s49 { margin: 26px auto 0px; width: 100px; height: 100px; border-radius: 50%; background: rgb(229, 72, 77); display: flex; align-items: center; justify-content: center; animation: 2.4s ease-in-out 0s infinite normal none running qpulsered; }
.s50 { font-size: 46px; line-height: 1; }
.s51 { margin-top: 20px; font-size: 11.5px; line-height: 1.7; color: rgb(144, 150, 158); font-weight: 500; }
.s52 { border-top: 1px solid rgb(227, 236, 234); background: rgb(255, 255, 255); }
.s53 { max-width: 1160px; margin: 0px auto; padding: 18px 32px; display: flex; align-items: center; gap: 14px; justify-content: center; font-size: 13px; color: rgb(90, 108, 105); font-weight: 500; }
.s54 { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--accent,#2A78D2); }
.s55 { padding: 96px 32px; background: rgb(46, 115, 199); color: rgb(255, 255, 255); }
.s56 { max-width: 1160px; margin: 0px auto; }
.s57 { text-align: center; max-width: 640px; margin: 0px auto; }
.s58 { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: rgb(185, 210, 242); text-transform: uppercase; }
.s59 { margin: 14px 0px 0px; font-size: 36px; font-weight: 900; line-height: 1.4; letter-spacing: -0.01em; }
.s60 { margin-top: 54px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.s61 { background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 16px; padding: 30px; }
.s62 { font-size: 30px; font-weight: 900; color: rgb(185, 210, 242); }
.s63 { margin: 14px 0px 8px; font-size: 19px; font-weight: 700; }
.s64 { margin: 0px; font-size: 14.5px; line-height: 1.85; color: rgb(204, 217, 239); }
.s65 { padding: 100px 32px; }
.s66 { text-align: center; max-width: 660px; margin: 0px auto; }
.s67 { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--accent,#2A78D2); text-transform: uppercase; }
.s68 { margin: 14px 0px 0px; font-size: 38px; font-weight: 900; line-height: 1.35; letter-spacing: -0.01em; color: rgb(14, 41, 38); }
.s69 { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.s70 { background: rgb(255, 255, 255); border: 1px solid rgb(230, 237, 235); border-radius: 18px; padding: 34px; box-shadow: rgba(14, 41, 38, 0.05) 0px 6px 22px; text-align: center; }
.s71 { width: 52px; height: 52px; border-radius: 14px; background: rgb(232, 240, 251); display: flex; align-items: center; justify-content: center; }
.hero-mobile-img { display: none; }
@media (max-width: 768px) {
  .hero-mobile-img { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto 24px; border-radius: 16px; }
}

.footer-company { display: block; margin-top: 32px; font-size: 15px; }
.footer-address { margin-top: 4px !important; }
.footer-copy { text-align: center; font-size: 12px; color: rgba(255,255,255,0.5); padding: 16px 32px 0; border-top: 1px solid rgba(255,255,255,0.12); margin-top: 24px; }

.items-section { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 80px 40px; }
.items-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.items-overlay { position: relative; z-index: 1; max-width: 720px; width: 100%; height: auto; display: block; }

.merit-icon { font-size: 54px !important; font-variation-settings: 'opsz' 48, 'wght' 700; margin-bottom: 12px; line-height: 1; color: var(--accent, #2A78D2); display: block; }
.s72 { width: 20px; height: 20px; border-radius: 6px; background: var(--accent,#2A78D2); }
.s73 { margin: 22px 0px 10px; font-size: 21px; font-weight: 900; color: rgb(14, 41, 38); }
.s74 { margin: 0px; font-size: 15px; line-height: 1.9; color: rgb(74, 92, 88); }
.s75 { width: 20px; height: 20px; border-radius: 50%; border: 5px solid var(--accent,#2A78D2); }
.s76 { width: 20px; height: 20px; background: var(--accent,#2A78D2); transform: rotate(45deg); border-radius: 3px; }
.s77 { padding: 96px 32px; background: rgb(234, 241, 251); }
.s78 { margin: 14px 0px 8px; font-size: 38px; font-weight: 900; line-height: 1.35; letter-spacing: -0.01em; color: rgb(14, 41, 38); }
.s79 { margin: 0px; font-size: 15.5px; color: rgb(74, 92, 88); font-weight: 500; }
.s80 { margin-top: 54px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative; }
.flow-grid { margin-top: 54px; display: flex; flex-direction: column; gap: 40px; }
.s81 { background: none; border-radius: 0; padding: 0; text-align: left; box-shadow: none; display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: start; overflow: visible; }
.flow-text { display: flex; flex-direction: column; padding-top: 8px; }
.s82 { width: 56px; height: 56px; margin: 0 0 24px 0; border-radius: 50%; background: var(--accent,#2A78D2); color: rgb(255, 255, 255); font-weight: 900; font-size: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.s83 { margin: 0 0 16px; font-size: 26px; font-weight: 900; color: rgb(14, 41, 38); line-height: 1.35; }
.s84 { margin: 0 0 14px; font-size: 18px; line-height: 1.9; color: rgb(90, 108, 105); }
.flow-note { display: inline-flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; padding: 10px 16px; background: #fff; border-radius: 999px; font-size: 14px; font-weight: 600; color: #2A78D2; line-height: 1.6; }
.flow-note-icon { flex-shrink: 0; font-size: 16px; align-self: center; }
.flow-img { width: 100%; height: auto; object-fit: contain; display: block; border-radius: 12px; }
.s85 { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
.s86 { position: sticky; top: 96px; }
.s87 { margin: 14px 0px 0px; font-size: 36px; font-weight: 900; line-height: 1.4; letter-spacing: -0.01em; color: rgb(14, 41, 38); }
.s88 { margin: 20px 0px 0px; font-size: 15.5px; line-height: 1.95; color: rgb(74, 92, 88); }
.s89 { color: rgb(14, 41, 38); }
.s90 { margin-top: 24px; padding: 16px 18px; background: rgb(232, 240, 251); border-radius: 12px; font-size: 13.5px; line-height: 1.7; color: rgb(44, 70, 66); font-weight: 500; }
.s91 { background: rgb(255, 255, 255); border: 1px solid rgb(230, 237, 235); border-radius: 18px; padding: 28px; box-shadow: rgba(14, 41, 38, 0.05) 0px 6px 22px; }
.s92 { margin: 0px 0px 4px; font-size: 16px; font-weight: 900; color: rgb(14, 41, 38); }
.s93 { font-size: 13px; font-weight: 700; color: rgb(123, 138, 135); margin-left: 8px; }
.s94 { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 9px; }
.s95 { font-size: 13.5px; font-weight: 600; color: rgb(39, 67, 63); background: rgb(242, 246, 252); border: 1px solid rgb(226, 234, 232); padding: 8px 14px; border-radius: 999px; }
.s96 { font-size: 13.5px; font-weight: 700; color: var(--accent,#2A78D2); background: rgb(232, 240, 251); border: 1px solid rgb(198, 217, 243); padding: 8px 14px; border-radius: 999px; }
.s97 { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.s98 { background: rgb(255, 255, 255); border: 1px solid rgb(230, 237, 235); border-radius: 16px; padding: 22px; box-shadow: rgba(14, 41, 38, 0.04) 0px 4px 16px; }
.s99 { display: flex; align-items: center; gap: 8px; }
.s100 { width: 9px; height: 9px; border-radius: 50%; background: var(--accent,#2A78D2); }
.s101 { margin: 0px; font-size: 15px; font-weight: 900; color: rgb(14, 41, 38); }
.s102 { margin: 10px 0px 0px; font-size: 12.5px; line-height: 1.7; color: rgb(106, 124, 121); }
.s103 { padding: 40px 32px 100px; }
.s104 { max-width: 1160px; margin: 0px auto; background: rgb(46, 115, 199); border-radius: 28px; padding: 72px 48px; position: relative; overflow: hidden; }
.s105 { position: absolute; inset: 0px; background: radial-gradient(720px 360px at 88% 0%, rgba(150, 185, 235, 0.18), transparent 60%); }
.s106 { position: relative; text-align: center; max-width: 680px; margin: 0px auto; }
.s107 { margin: 0px; font-size: 38px; font-weight: 900; line-height: 1.4; color: rgb(255, 255, 255); letter-spacing: -0.01em; }
.s108 { margin: 18px 0px 0px; font-size: 16.5px; line-height: 1.9; color: rgb(204, 217, 239); }
.s109 { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.s110 { display: inline-flex; align-items: center; height: 56px; padding: 0px 34px; background: #fff; color: var(--accent,#2A78D2); font-size: 16px; font-weight: 700; border-radius: 12px; text-decoration: none; box-shadow: rgba(0,0,0,0.15) 0px 8px 24px; }
.s111 { display: inline-flex; align-items: center; height: 56px; padding: 0px 28px; background: rgba(255, 255, 255, 0.08); color: rgb(255, 255, 255); font-size: 16px; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; text-decoration: none; }
.s112 { border-top: 1px solid rgb(224, 234, 232); background: rgb(242, 246, 252); }
.s113 { max-width: 1160px; margin: 0px auto; padding: 40px 32px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.s114 { font-weight: 900; font-size: 20px; color: rgb(14, 41, 38); }
.s115 { font-size: 12px; font-weight: 700; color: var(--accent,#2A78D2); }
.s116 { margin: 12px 0px 0px; font-size: 12px; line-height: 1.8; color: rgb(123, 138, 135); max-width: 560px; }
.s117 { font-size: 12.5px; color: rgb(123, 138, 135); font-weight: 500; text-align: right; line-height: 1.9; }

@media (max-width: 768px) {
  /* HERO */
  .s12 { grid-template-columns: 1fr; padding: 48px 20px 56px; gap: 40px; }
  .s27 { display: none; }
  .s19 { flex-direction: column; }
  .s20, .s21 { width: 100%; text-align: center; justify-content: center; }
  .s22 { justify-content: center; text-align: center; }
  .s26 { display: none; }
  .s15 { font-size: 36px; }

  /* The Challenge */
  .s60 { grid-template-columns: 1fr; }

  /* Why AI Digital */
  .s69 { grid-template-columns: 1fr; }

  /* How it works */
  .s81 { grid-template-columns: 1fr; }
  .flow-img { max-width: 100%; }

  /* Contact */
  .s104 { padding: 48px 24px; border-radius: 20px; }
  .s107 { font-size: 28px; }

  /* Header */
  .s2 { padding: 12px 16px; }
  .s6 { display: none; }
  .s5 { display: none; }
}