@import url('https://fonts.googleapis.com/css2?family=LINE+Seed+JP:wght@100;400;700;800&display=swap');

  :root{
    --primary:#0086c9;
    --primary-deep:#045a86;
    --primary-tint:#e6f4fb;
    --sub:#e99953;
    --sub-tint:#fdf0e2;
    --attention:#ef4444;
    --text-dark:#3a3a3a;
    --text-light:#7d7d7d;
    --bg:#f5f9fc;
    --white:#ffffff;
    --border:#dde7ee;
    --navy:#020724;
    --r-s:8px;
    --r-m:16px;
    --r-l:24px;
    --r-xl:40px;
    --shadow:0 12px 32px -12px rgba(10,46,66,0.18);
    --shadow-soft:0 6px 20px -8px rgba(10,46,66,0.12);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:"LINE Seed JP", sans-serif;
    color:var(--text-dark);
    background:var(--bg);
    line-height:1.8;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  a{color:inherit;}
  .container{width:100%; max-width:960px; margin:0 auto; padding:0 24px;}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; font-weight:700; letter-spacing:0.12em;
    color:var(--primary); background:var(--primary-tint);
    padding:6px 16px; border-radius:999px; margin-bottom:16px;
  }
  h1,h2,h3{font-weight:800; color:var(--text-dark); letter-spacing:0.01em;}
  h1{color: var(--primary-tint);}
  h2{font-size:clamp(24px,4vw,34px); line-height:1.5; margin-bottom:16px;}
  h3{font-size:clamp(17px,2.6vw,20px); line-height:1.6;}
  p{color:var(--text-dark);}
  .section{padding:88px 0;}
  .section-tight{padding:64px 0;}
  .center{text-align:center;}
  .lead-text{max-width:640px; margin:0 auto 40px;}

  /* -------- Reveal on scroll -------- */
  .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.is-visible{opacity:1; transform:translateY(0);}

  /* -------- Gauge signature element -------- */
  .gauge{
    --needle-deg: 0deg;
    width:64px; height:64px; position:relative; flex-shrink:0;
  }
  .gauge svg{width:100%; height:100%; display:block;}
  .gauge .needle{
    transform-origin:32px 32px;
    transform:rotate(var(--needle-deg));
    transition:transform 1s cubic-bezier(.3,1.4,.4,1);
  }
  .gauge-lg{width:120px; height:120px;}

  /* -------- Buttons -------- */
  .btn{
    position:relative;
    display:inline-flex; align-items:center; justify-content:center;
    gap:10px;
    font-family:inherit; font-weight:700; font-size:16px;
    color:var(--white); background:var(--attention);
    border:none; border-radius:var(--r-s);
    padding:18px 40px;
    cursor:pointer;
    text-decoration:none;
    overflow:hidden;
    box-shadow:0 10px 24px -8px rgba(239,68,68,0.45);
    isolation:isolate;
  }
  .btn .btn-label{
    position:relative;
    display:inline-flex; align-items:center; gap:10px;
    transition:transform .35s ease;
  }
  .btn::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(90deg,#ff6b5e,var(--attention));
    transform:translateX(-100%);
    transition:transform .35s ease;
    z-index:-1;
  }
  .btn:hover::after{transform:translateX(0);}
  .btn:hover .btn-label{transform:translateX(6px);}
  .btn i{transition:transform .35s ease;}
  .btn:hover i{transform:translateX(4px);}
  .btn-note{
    margin-top:14px; font-size:12.5px; color:var(--text-light);
  }
  .cta-block{text-align:center; margin-top:12px;}

  header .btn-note{color:var(--white);}

  /* -------- Header / Hero -------- */
  .hero{
    position:relative;
    /*background:linear-gradient(180deg,#eaf6fd 0%, var(--bg) 78%);*/
    background: var(--navy);
    padding:56px 0 0;
    overflow:hidden;
    background-image: url(https://corporate-site-public-bucket.s3.ap-northeast-1.amazonaws.com/images/lp/gaspotal-in-osaka-background.jpg);
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .hero-inner{
    max-width:960px; margin:0 auto; padding:0 24px 40px;
    position:relative; z-index:2;
    display:flex; flex-direction:column; align-items:center; text-align:center;
  }
  .hero .decoration{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--white); border:1px solid var(--border);
    color:var(--primary-deep); font-weight:700; font-size:13px;
    padding:8px 20px 8px 12px; border-radius:999px;
    box-shadow:var(--shadow-soft); margin-bottom:24px;
  }
  .hero .decoration .pin{
    width:22px;height:22px;border-radius:50%;
    background:var(--primary); color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:11px;
  }
  .hero h1{
    font-size:clamp(26px,5.2vw,42px);
    line-height:1.5; max-width:760px; margin-bottom:28px;
  }
  .hero h1 .accent{color:var(--white);}
  .info-card{
    background-color: rgba(255, 255, 255, 0.8); border-radius:var(--r-m);
    box-shadow:var(--shadow); border:1px solid var(--border);
    padding:28px 32px; width:100%; max-width:560px;
    display:flex; flex-direction:column; gap:16px;
    margin-bottom:36px; text-align:left;
  }
  .info-row{display:flex; align-items:flex-start; gap:14px;}
  .info-row i{color:var(--primary); font-size:18px; width:20px; margin-top:3px;}
  .info-row .label{font-size:12.5px; font-weight:700; color:var(--primary-deep); letter-spacing:.05em; display:block; margin-bottom:2px;}
  .info-row .value{font-size:15px; color:var(--text-dark); font-weight:400;}
  .info-row .value strong{font-weight:700;}

  .mascot-wrap{
    position:relative; z-index:2; margin:0 auto 24px;
    width:168px; height:168px;
    display:flex; align-items:center; justify-content:center;
  }

  /* -------- Section A -------- */
  .split{
    display:flex; align-items:center; gap:56px;
  }
  .split .visual{
    flex:0 0 300px;
  }
  .split .content{flex:1;}
  .picture-box{
  aspect-ratio:4/3;
  border-radius:var(--r-l);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px;}
  .picture-box img{ width:100%; height:100%; object-fit:cover;}
 .callout{
    margin-top:24px; padding:20px 24px;
    background:var(--sub-tint); border-left:4px solid var(--sub);
    border-radius:0 var(--r-s) var(--r-s) 0;
    font-weight:700; color:var(--text-dark); font-size:15px;
  }

  /* -------- Section B -------- */
  .panel{
    background:var(--white); border-radius:var(--r-l);
    border:1px solid var(--border); box-shadow:var(--shadow-soft);
    padding:48px;
  }
  .panel h3{color:var(--primary-deep); font-weight:700; margin-bottom:28px;}
  .pain-list{list-style:none; display:flex; flex-direction:column; gap:20px; margin-bottom:32px;}
  .pain-list li{
    display:flex; gap:16px; align-items:flex-start;
    font-size:15.5px; color:var(--text-dark);
    padding-bottom:20px; border-bottom:1px dashed var(--border);
  }
  .pain-list li:last-child{border-bottom:none; padding-bottom:0;}
  .pain-list .mark{
    flex-shrink:0; width:28px; height:28px; border-radius:50%;
    background:var(--attention); color:#fff; font-size:13px;
    display:flex; align-items:center; justify-content:center; font-weight:700;
  }
  .solution-text{
    text-align:center; font-weight:700; font-size:17px; color:var(--primary-deep);
    padding-top:8px;
  }

  /* -------- Section C : Program -------- */
  .program{background:var(--white);}
  .points{display:flex; flex-direction:column; gap:28px; margin-top:48px;}
  .point{
    display:flex; gap:32px; align-items:flex-start;
    background:var(--bg); border:1px solid var(--border);
    border-radius:var(--r-l); padding:36px;
    position:relative;
  }
  .point .gauge-col{
    flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:10px; width:120px;
  }
  .point .gauge-tag{
    font-size:11px; font-weight:700; color:var(--white);
    background:var(--primary); padding:4px 14px; border-radius:999px; letter-spacing:.05em;
  }
  .point .decoration{
    display:inline-block; font-size:12.5px; font-weight:700; color:var(--sub);
    background:var(--sub-tint); padding:5px 14px; border-radius:999px; margin-bottom:12px;
  }
  .point h3{margin-bottom:12px;}
  .point p{font-size:15px;}

  /* -------- Section D : Speakers -------- */
  .speakers{display:flex; gap:40px; flex-wrap:wrap; justify-content:center;}
  .speaker-card{
    flex:1 1 380px; max-width:420px;
    background:var(--white); border-radius:var(--r-l);
    border:1px solid var(--border); box-shadow:var(--shadow-soft);
    padding:36px; text-align:left;
  }
  .speaker-top{display:flex; gap:20px; align-items:flex-start; margin-bottom:20px;}
  .speaker-photo{
    width:148px; height:148px; flex-shrink:0;
  }
  .speaker-photo img{ border-radius:var(--r-m); width:100%; height:100%; object-fit:cover; }
  .speaker-name{font-size:19px; font-weight:800;}
  .speaker-name .roman{
    display:block; font-size:11.5px; font-weight:400; color:var(--text-light);
    letter-spacing:.06em; margin-top:2px;
  }
  .speaker-company{font-size:12.5px; color:var(--primary-deep); font-weight:700; margin-top:4px;}
  .speaker-dept{font-size:12px; color:var(--text-light); margin-top:2px; line-height:1.5;}
  .speaker-profile{font-size:14px; color:var(--text-dark); line-height:1.9;}

  /* -------- Section E : Bridge -------- */
.bridge{
  background:linear-gradient(180deg, #d4ecf9, #eaf6fd 60%, #ffffff);
  border:1px solid var(--border);
  color:var(--text-dark); border-radius:var(--r-xl);
  padding:64px 48px; text-align:center; position:relative; overflow:hidden;
}
.bridge h2{color:var(--text-dark);}
.bridge p{color:var(--text-light); max-width:620px; margin:0 auto 24px;}
.bridge .emphasis{font-weight:700; color:var(--primary-deep); font-size:17px;}
  .bridge .mascot-wrap{ margin-bottom:32px;}
  .bridge-gauge{position:absolute; opacity:.12; z-index:0;}
  .bridge-gauge.g1{top:-40px; left:-40px; width:220px; height:220px;}
  .bridge-gauge.g2{bottom:-50px; right:-50px; width:260px; height:260px;}

  /* -------- Section F : Overview -------- */
  .overview-card{
    background:var(--white); border-radius:var(--r-l);
    border:1px solid var(--border); box-shadow:var(--shadow-soft);
    overflow:hidden;
  }
  .overview-row{
    display:flex; gap:24px; padding:24px 40px;
    border-bottom:1px solid var(--border);
  }
  .overview-row:last-child{border-bottom:none;}
  .overview-row .ov-label{
    flex:0 0 120px; font-weight:700; color:var(--primary-deep); font-size:14px;
    display:flex; align-items:center; gap:8px;
  }
  .overview-row .ov-value{flex:1; font-size:15px; color:var(--text-dark);}
  .overview-note{
    margin-top:24px; padding:18px 24px; text-align:center;
    background:var(--sub-tint); border-radius:var(--r-s);
    font-weight:700; color:var(--sub); font-size:14.5px;
  }

  /* -------- Section G : Final CTA -------- */
  .final-cta{text-align:center;}
  .final-cta h2{margin-bottom:12px;}

  /* -------- Footer -------- */
  footer{
    background:var(--navy); color:#9fb7c6; text-align:center;
    padding:48px 24px;
  }
  footer .footer-links{ display: flex; justify-content: center; gap: 24px;}
  footer .copyright{font-size:12px;}
  footer a{ color: var(--primary-tint); font-size: 12px; text-decoration: none;}

  /* -------- Sticky mobile CTA -------- */
  .sticky-cta{
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:rgba(255,255,255,0.96); backdrop-filter:blur(6px);
    border-top:1px solid var(--border);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    display:none;
    box-shadow:0 -8px 24px -12px rgba(10,46,66,.25);
  }
  .sticky-cta .btn{width:100%; padding:16px;}

  /* -------- Section dividers -------- */
  .divider-gauge{
    display:flex; justify-content:center; margin:0 auto 8px;
  }

  /* -------- Section: How to Apply -------- */
  .steps-grid{
    display:flex; flex-wrap:wrap; align-items:flex-start;
    gap:0 4px; margin-top:48px; justify-content:center;
  }
  .step-card{
    flex:1 1 190px; max-width:210px;
    position:relative; background:var(--white);
    border:1px solid var(--border); border-radius:var(--r-l);
    padding:28px 18px 22px; box-shadow:var(--shadow-soft); text-align:center;
  }
  .step-num{
    position:absolute; top:-16px; left:50%; transform:translateX(-50%);
    width:34px; height:34px; border-radius:50%;
    background:var(--primary); color:#fff; font-weight:800; font-size:14px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow-soft); border:3px solid var(--white);
  }
  .step-shot{
    aspect-ratio:9/16; border-radius:var(--r-s); overflow:hidden;
    background:var(--bg); border:1px solid var(--border);
    margin:14px 0 16px; display:flex; align-items:center; justify-content:center;
    color:var(--text-light); font-size:12.5px; text-align:center; padding:8px;
  }
  .step-shot img{width:100%; height:100%; object-fit:cover;}
  .step-card h4{font-size:14.5px; font-weight:700; color:var(--text-dark); margin-bottom:6px;}
  .step-card p{font-size:12.5px; color:var(--text-light); margin:0;}
  .step-arrow{
    display:none; align-items:center; justify-content:center;
    color:var(--border); font-size:18px; flex:0 0 auto; padding:0 4px;
    align-self:center; margin-top:52px;
  }
  
  .gapotal-apply-limit,.gapotal-apply-limit2{ font-size: 12px; font-weight:bold; border-radius: var(--r-m); display:block; width: fit-content; margin:0 auto 16px; padding: 4px 16px;}
  .gapotal-apply-limit{ color: var(--primary); background-color: var(--white);}
  .gapotal-apply-limit2{ color: var(--white); background-color: var(--primary);}
  @media (min-width:781px){
    .step-arrow{display:flex;}
  }

  /* -------- Section: Access Map -------- */
  .map-wrap{
    margin-top:24px; border-radius:var(--r-l); overflow:hidden;
    border:1px solid var(--border); box-shadow:var(--shadow-soft);
    aspect-ratio:16/9;
  }
  .map-wrap iframe{width:100%; height:100%; display:block;}

  /* -------- Responsive -------- */
  @media (max-width:780px){
    .section{padding:64px 0;}
    .split{flex-direction:column; gap:32px;}
    .split .visual{width:220px; flex-basis:auto;}
    .panel{padding:32px 24px;}
    .point{flex-direction:column; padding:28px 24px; gap:20px;}
    .point .gauge-col{flex-direction:row; width:auto;}
    .speakers{flex-direction:column; align-items:center;}
    .bridge{padding:48px 24px; border-radius:var(--r-l);}
    .overview-row{flex-direction:column; padding:20px 24px; gap:6px;}
    .overview-row .ov-label{flex-basis:auto;}
    .sticky-cta{display:block;}
    footer{padding-bottom:104px;}
    .steps-grid{flex-direction:column; align-items:stretch;}
    .step-card{max-width:100%;}
  }