body{font-family:Meiryo,'Yu Gothic',sans-serif;line-height:1.75;margin:0;background:#f5f7fb;color:#222}a{color:#0b4ea2}.container{max-width:1120px;margin:auto;padding:0 18px}.hero{background:linear-gradient(135deg,#0b4ea2,#0d70c9,#0b4ea2);color:#fff;padding:46px 0 36px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center}.badge{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:5px 14px;font-weight:bold;margin-bottom:14px}h1{font-size:clamp(2rem,4vw,3.2rem);line-height:1.22;margin:0 0 12px}.hero-copy{font-size:clamp(1.1rem,2.3vw,1.45rem);font-weight:bold}.hero-sub{font-size:1.05rem;opacity:.95}.hero-image{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);border-radius:18px;padding:12px;box-shadow:0 16px 36px rgba(0,0,0,.28)}.hero-image img,figure img{width:100%;display:block;border-radius:10px}.download-button{display:inline-block;background:linear-gradient(#35d957,#159c31);color:#fff;text-decoration:none;font-size:1.15rem;font-weight:bold;padding:15px 28px;border-radius:12px;box-shadow:0 4px 0 #0b7421}.outline-button{display:inline-block;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.7);padding:13px 22px;border-radius:12px;font-weight:bold;margin-left:10px}.main{padding:30px 0 50px}.section{background:#fff;border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.07);padding:30px;margin:0 0 24px}h2{font-size:1.55rem;border-left:7px solid #0b4ea2;padding-left:12px;margin:0 0 20px;color:#0b4ea2}h3{margin:0 0 8px;color:#17324d}.lead{font-size:1.08rem;font-weight:bold}.info{display:grid;grid-template-columns:9em 1fr;gap:6px 12px;background:#f0f5ff;border:1px solid #d6e5ff;border-radius:12px;padding:16px}.info dt{font-weight:bold;color:#174a8b}.info dd{margin:0}.notice{background:#fffbe8;border:1px solid #f0df91;border-radius:12px;padding:14px 16px;margin:14px 0}.download-panel{text-align:center;padding:26px;background:#f7fff5;border:1px solid #cfeec8;border-radius:16px;margin-top:18px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{border:1px solid #e3e8ef;border-radius:14px;padding:16px;background:#fff}.card strong{color:#0b4ea2}.screens{display:grid;grid-template-columns:1fr 1fr;gap:18px}figure{margin:0;border:1px solid #e3e8ef;border-radius:14px;padding:12px;background:#fff}figcaption{margin-top:10px;color:#5f6b7a}.contact-form{background:#f8fbff;border:1px solid #d6e5ff;border-radius:12px;padding:18px}.form-row{margin-bottom:14px}.form-row label{display:block;font-weight:bold;color:#174a8b}.form-row input,.form-row textarea{width:100%;box-sizing:border-box;font-family:Meiryo,'Yu Gothic',sans-serif;font-size:1rem;border:1px solid #b8c9df;border-radius:8px;padding:10px}.form-row textarea{min-height:150px}.send-button{border:0;background:#0b4ea2;color:#fff;font-weight:bold;padding:12px 28px;border-radius:8px}footer{text-align:center;color:#667085;padding:26px 0 38px}@media(max-width:860px){.hero-grid,.grid-2,.grid-3,.screens{grid-template-columns:1fr}.section{padding:22px}.info{grid-template-columns:1fr}.download-button,.outline-button{width:100%;text-align:center;margin:8px 0 0}}


/* --- Ver.7 mobile layout fix --- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

.cta-row {
  width: 100%;
}

.download-button,
.outline-button {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .container {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  .hero {
    padding-top: 28px;
    padding-bottom: 26px;
  }

  .hero-grid {
    gap: 22px;
  }

  h1 {
    font-size: 2rem;
    line-height: 1.22;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .hero-copy {
    font-size: 1.08rem;
    line-height: 1.55;
  }

  .hero-sub {
    font-size: 1rem;
    line-height: 1.65;
  }

  .badge {
    max-width: 100%;
    white-space: normal;
    line-height: 1.45;
  }

  .cta-row {
    display: block;
  }

  .download-button,
  .outline-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin: 0 0 10px 0;
    padding-left: 12px;
    padding-right: 12px;
  }

  .hero-image {
    padding: 8px;
    border-radius: 14px;
  }

  .section {
    padding-left: 16px;
    padding-right: 16px;
  }
}


/* --- Ver.8 iPhone Safari button overflow fix --- */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.container {
  width: 100%;
  max-width: 1120px;
}

.hero .container {
  overflow: hidden;
}

.cta-row {
  width: 100%;
  max-width: 100%;
}

.download-button,
.outline-button {
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

@media (max-width: 860px) {
  .hero-grid,
  .grid-2,
  .grid-3,
  .screenshot-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-grid > *,
  .grid-2 > *,
  .grid-3 > *,
  .screenshot-grid > * {
    min-width: 0;
  }

  .download-button,
  .outline-button {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .container {
    width: 100%;
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }

  .hero {
    padding-top: 22px;
    padding-bottom: 24px;
  }

  .hero-grid {
    display: block;
  }

  .cta-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 100%;
  }

  .download-button,
  .outline-button {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 13px 10px;
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.45;
  }

  .download-panel .download-button {
    width: 100%;
    max-width: 100%;
  }

  h1 {
    font-size: 1.85rem;
    line-height: 1.22;
    overflow-wrap: anywhere;
  }

  .hero-copy {
    font-size: 1.02rem;
    line-height: 1.55;
  }

  .hero-sub {
    font-size: .95rem;
    line-height: 1.65;
  }

  .badge {
    display: block;
    width: 100%;
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    white-space: normal;
  }

  .hero-image {
    margin-top: 20px;
    width: 100%;
    max-width: 100%;
  }

  .hero-image img,
  figure img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .section {
    padding-left: 14px;
    padding-right: 14px;
  }
}


/* --- Ver.9 iPhone: keep hero buttons inside blue background --- */
@media (max-width: 600px) {
  .hero {
    overflow: hidden;
  }

  .hero .container {
    width: auto !important;
    max-width: none !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;
  }

  .hero .cta-row {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden;
  }

  .hero .download-button,
  .hero .outline-button {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    text-align: center !important;
  }

  .hero .download-button {
    margin-bottom: 10px !important;
  }

  .hero .outline-button {
    margin-bottom: 0 !important;
  }
}


/* --- Ver.10 iPhone: keep download-panel button inside pale green area --- */
@media (max-width: 600px) {
  .download-panel {
    overflow: hidden !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .download-panel .download-button {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .download-panel .notice {
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}