/* APII — 一般社団法人国際産業促進協会
 * 设计基准：桌面 980px 内容宽度 / 手机 320px 设计稿（≤750px 以 rem 等比缩放）
 */
@font-face {
  font-family: "Spinnaker";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/spinnaker-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Spinnaker";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/spinnaker-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 原站拉丁字母使用 Helvetica Light：有本机字体时仅替换拉丁区间，日文字形不受影响 */
@font-face {
  font-family: "Helv Light";
  src: local("HelveticaNeue-Light"), local("Helvetica Neue Light"), local("Helvetica Neue"), local("Helvetica"), local("Arial");
  unicode-range: U+0020-007E, U+00A0-00FF;
}

:root {
  --navy: #1a2b6d;
  --red: #d41317;
  --gray: #f2f2f2;
  --cjk: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "PingFang SC", "Yu Gothic", "YuGothic", "Noto Sans JP", "Meiryo", sans-serif;
  --font-body: "Helv Light", var(--cjk), sans-serif;
  --font-head: "Spinnaker", var(--cjk);
  --font-card: Impact, var(--cjk);
  --ease-fade: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --ease-slide: cubic-bezier(0.645, 0.045, 0.355, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 980px;
  background: #fff;
  color: #000;
  font-family: var(--font-body);
  font-size: 16px;
  overflow-x: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h5, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
button, input, textarea { font: inherit; color: inherit; }

/* ------------------------------------------------------------ 入场动画 */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slide-in {
  0% { opacity: 0; animation-timing-function: step-end; }
  0.0001% {
    opacity: 1;
    transform: translateX(-100%);
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  100% {
    transform: translateX(0);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .js [data-anim] {
    animation-duration: 1.2s;
    animation-delay: 1ms;
    animation-fill-mode: backwards;
    animation-play-state: paused;
  }
  .js [data-anim].is-in { animation-play-state: running; }
  .js [data-anim="fade"] { animation-name: fade-in; animation-timing-function: var(--ease-fade); }
  .js [data-anim="fade"][data-dur="1.4"] { animation-duration: 1.4s; }
  .js [data-anim="fade"][data-dur="1.6"] { animation-duration: 1.6s; }
  .js [data-anim="slide"] { animation-name: slide-in; animation-timing-function: var(--ease-slide); }
}

/* ------------------------------------------------------------ 头部 */
.site-header { position: relative; z-index: 20; background: #fff; }
.site-header__inner { position: relative; width: 980px; height: 128px; margin: 0 auto; }
.logo { position: absolute; top: 44px; left: 0; width: 200px; height: 40px; }
.logo img { width: 200px; height: 40px; }
.site-nav { position: absolute; top: 39px; left: 300px; width: 790px; }
.site-nav ul { display: flex; }
.site-nav a {
  display: block;
  padding: 0 15px 0 48px;
  font-family: var(--cjk);
  line-height: 50px;
  white-space: nowrap;
  color: var(--navy);
  transition: color 0.4s;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--red); }
.burger { display: none; }

/* ------------------------------------------------------------ Hero */
.hero {
  position: relative;
  width: 86%;
  height: 549px;
  background: var(--navy); /* 图片下方 15px 深蓝条 */
}
.hero__media {
  position: absolute; inset: 0 0 15px 0; overflow: hidden;
  background: var(--navy) center / cover no-repeat; /* 低清占位图（行内 style 指定），原图加载后淡入 */
}
.js .hero__media img { opacity: 0; transition: opacity 0.8s ease; }
.js .hero__media img.loaded { opacity: 1; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* 子页面：背景图视差滚动（速度 0.2），位移由 main.js 写入 transform */
.hero--parallax .hero__media img {
  position: absolute; top: 0; left: 0; width: 100%; height: max(100vh, 640px);
  will-change: transform;
}

/* ------------------------------------------------------------ 首页 */
.intro { position: relative; height: 807px; }
.about-card {
  position: absolute;
  top: 339px;
  left: calc(50% - 218px);
  width: 685px;
  height: 427px;
  z-index: 2;
}
.about-card__bg { position: absolute; inset: 0; background: var(--gray); }
.about-card__title {
  position: absolute; top: 54px; left: 52px;
  font: 400 66px/66px var(--font-head);
  color: var(--navy);
}
.about-card__rule { position: absolute; top: 245px; left: 52px; width: 113px; height: 5px; background: var(--navy); }
.about-card__text {
  position: absolute; top: 236px; left: 199px; width: 390px;
  font-size: 16px; line-height: 27.2px; letter-spacing: 0.8px;
}

.services { position: relative; padding-bottom: 27px; }
.services::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 350px; background: var(--navy);
}
.services__inner { position: relative; width: 980px; margin: 0 auto; }
.services__title {
  padding: 56px 0 0 20px; height: 196px;
  font: 400 55px/65px var(--font-head);
  color: #fff;
}
.card { position: relative; height: 432px; background: #fff; }
.card__img { position: absolute; top: 23px; left: 20px; width: 620px; height: 375px; object-fit: cover; }
.card__title {
  position: absolute; top: 28px; left: 670px;
  font: 400 35px/43px var(--font-card);
  letter-spacing: 3.5px; color: #333; white-space: nowrap;
}
.card__text {
  position: absolute; top: 106px; left: 672px; width: 232px;
  font-size: 16px; line-height: 24px; color: #545454;
}
.card__more {
  position: absolute; top: 372px; left: 674px;
  font: 400 16px/22.4px var(--font-card);
  padding: 2px 0;
}

/* ------------------------------------------------------------ 子页面 */
.page-head { position: relative; height: 549px; }
.page-head .hero { position: absolute; top: 0; left: 0; }
.title-card {
  position: absolute;
  top: 423px;
  left: calc(50% - 403px);
  width: 729px;
  height: 263px;
  z-index: 2;
}
.title-card__bg { position: absolute; inset: 0; background: var(--gray); }
.title-card__title {
  position: absolute; top: 60px; left: 66px;
  font: 400 66px/66px var(--font-head);
  color: var(--navy);
}
.content {
  width: 678px;
  margin-left: calc(50% - 403px);
  padding: var(--pad-top, 243px) 0 var(--pad-bottom, 99px);
}
.content section + section { margin-top: var(--gap, 74px); }
.content h5 {
  margin-bottom: 19px;
  font: 400 28px/39px var(--font-head);
  color: var(--navy);
}
.content p { font-size: 16px; line-height: 32px; }
.content p.para { margin-bottom: 32px; }
.content p.para:last-child { margin-bottom: 0; }
.content p.indent { padding-left: 29px; }
.content a { text-decoration: underline; }
.content figure { margin: 0; }
.info-table { width: 678px; border-collapse: collapse; font-size: 15px; line-height: 24px; }
.info-table th, .info-table td { height: 52px; padding: 0 10px; border: 1px solid #aaa; text-align: left; font-weight: 400; }
.info-table th { width: 22%; background: #f6f6f6; }
.info-table--fee { width: 600px; }
.info-table--fee .tall th, .info-table--fee .tall td { height: 213px; vertical-align: middle; }
.info-table--fee tr:not(.tall) th, .info-table--fee tr:not(.tall) td { height: 85px; }
.info-table--fee th { width: 29%; }
.info-table a { text-decoration: none; }
.content figure img { height: auto; }
.map { width: 678px; height: 280px; margin: 20px 0 28px; border: 0; background: #e5e3df; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------------------------------------ 页脚 / 表单 */
.site-footer { background: var(--navy); color: #fff; height: 736px; position: relative; }
.contact { width: 795px; margin: 0 0 0 calc(50% - 396px); padding-top: 67px; }
.contact__title {
  height: 42px;
  font: 400 35px/42px var(--font-head);
  letter-spacing: 1.75px; text-align: center;
}
.contact__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px 29px;
  margin-top: 102px;
}
.contact__field { position: relative; }
.field {
  display: block; width: 100%; height: 40px;
  padding: 3px 3px 3px 12px;
  background: transparent; color: #fff; border: 0; border-bottom: 1px solid #fff; border-radius: 0;
  outline: 0; font-size: 16px; line-height: 1.4;
  transition: opacity 0.5s ease, border 0.5s ease, color 0.5s ease;
}
textarea.field { height: 120px; margin-top: 22px; padding: 11px 3px 3px 15px; resize: none; }
.field::placeholder { color: #fff; opacity: 1; }
.field:focus { border-bottom-color: #00adef; }
.field[aria-invalid="true"] { border-bottom-color: #ff4040; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact__submit { display: block; width: 120px; height: 40px; margin: 42px auto 0; }
.btn {
  border: 1px solid #fff; border-radius: 20px; background: transparent; color: #fff;
  font-family: var(--cjk); font-size: 16px; line-height: 22.4px; cursor: pointer;
  transition: border-color 0.4s, background-color 0.4s;
}
.btn:hover { background: #323232; border-color: transparent; }
.btn:disabled { opacity: 0.6; cursor: default; }
.contact__status { height: 0; margin: 12px 0 0; text-align: center; font-size: 14px; line-height: 20px; }
.contact__status.is-error { color: #ff8a8a; }
.copyright {
  position: absolute; left: 0; right: 0; top: 694px;
  font-size: 13px; line-height: 16px; letter-spacing: 1.3px; text-align: center;
}

.to-top { display: none; }

/* ------------------------------------------------------------ 404 */
.notfound { padding: 160px 0 200px; text-align: center; }
.notfound h1 { font: 400 66px/66px var(--font-head); color: var(--navy); }
.notfound p { margin-top: 24px; }
.notfound a { color: var(--red); }

/* ============================================================ 移动端（320px 设计稿，1rem = 10 设计px） */
@media (max-width: 750px) {
  html { font-size: calc(100vw / 32); }
  body { min-width: 0; font-size: 1.3rem; overflow-x: hidden; }

  .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 30; }
  .site-header__inner { width: auto; height: 7rem; margin: 0 1rem; }
  .logo { top: 2.1rem; left: 1rem; width: 14rem; height: 2.8rem; }
  .logo img { width: 14rem; height: 2.8rem; }
  .burger {
    position: absolute; top: 1rem; right: 1rem; z-index: 3;
    display: block; width: 5rem; height: 5rem; padding: 0; border: 0; background: none; cursor: pointer;
  }
  .burger span {
    position: absolute; left: 1.4rem; width: 2.2rem; height: 0.2rem; background: var(--navy);
    transition: transform 0.3s, opacity 0.3s;
  }
  .burger span:nth-child(1) { top: 1.5rem; }
  .burger span:nth-child(2) { top: 2.4rem; }
  .burger span:nth-child(3) { top: 3.3rem; }
  .menu-open .burger span:nth-child(1) { top: 2.4rem; transform: rotate(45deg); }
  .menu-open .burger span:nth-child(2) { opacity: 0; }
  .menu-open .burger span:nth-child(3) { top: 2.4rem; transform: rotate(-45deg); }

  .site-nav {
    position: fixed; inset: 0; z-index: 2; width: auto;
    padding: 8.3rem 0 0 4.5rem; background: #fff;
    visibility: hidden; opacity: 0; transition: opacity 0.3s, visibility 0.3s;
  }
  .menu-open .site-nav { visibility: visible; opacity: 1; }
  .menu-open .site-header { z-index: 40; }
  .site-nav ul { display: block; }
  .site-nav a { width: 18.8rem; padding: 0; font-size: 1.6rem; line-height: 4.7rem; text-align: left; color: #0d1637; }
  .site-nav a:hover { color: var(--red); }
  .site-nav a[aria-current="page"] { color: var(--red); }
  body.menu-open { overflow: hidden; }

  main { padding-top: 7rem; }
  .hero { width: 100%; height: 21.5rem; }
  .hero__media { bottom: 1.5rem; }
  .hero--parallax .hero__media img { height: 100%; transform: none !important; }

  /* 首页 */
  .intro { height: auto; padding-bottom: 3rem; }
  .about-card { position: relative; top: auto; left: auto; width: 28rem; height: 28.1rem; margin: 3rem 0 0 2rem; }
  .about-card__title { top: 1.05rem; left: 1rem; font-size: 3rem; line-height: 3rem; }
  .about-card__rule { top: 9.1rem; left: 1rem; width: 11.2rem; height: 0.4rem; }
  .about-card__text { top: 11.3rem; left: 1.7rem; width: 24.6rem; font-size: 1.3rem; line-height: 2.21rem; letter-spacing: 0.065rem; }

  .services { padding-bottom: 6.9rem; }
  .services::before { display: none; }
  .services__inner { width: auto; }
  .services__title { height: 10.1rem; padding: 2.5rem 0 0 2rem; background: var(--navy); font-size: 2.7rem; line-height: 3.2rem; }
  .card { height: auto; padding: 2.3rem 2rem 2.6rem; }
  .card__img, .card__title, .card__text, .card__more { position: static; }
  .card__img { width: 28rem; height: 21.8rem; }
  .card__title { margin-top: 1.1rem; font-size: 2.4rem; line-height: 2.9rem; letter-spacing: 0.24rem; }
  .card__text { width: 23.4rem; margin: 1.6rem 0 0 2.3rem; font-size: 1.3rem; line-height: 1.95rem; }
  .card__more { display: block; width: 9.8rem; margin: 2rem 0 0 7.4rem; padding: 0; font-size: 1.4rem; line-height: 1.96rem; text-align: center; }

  /* 子页面 */
  .page-head { height: 14.9rem; }
  .page-head .hero { height: 14.9rem; }
  .page-head .hero__media { bottom: 1rem; }
  .title-card { top: 9rem; left: 2.4rem; width: 27.3rem; height: 12.6rem; }
  .title-card__title { top: 3.55rem; left: 2.5rem; font-size: 2.8rem; line-height: 2.8rem; }
  .content { width: auto; margin: 0; padding: 13.1rem 2.2rem var(--pad-bottom-m, 6rem) 2.5rem; }
  .content section + section { margin-top: 6.2rem; }
  .content h5 { margin-bottom: 2.4rem; font-size: 2.3rem; line-height: 3.3rem; }
  .content p { font-size: 1.3rem; line-height: 2.6rem; }
  .content p.para { margin-bottom: 2.6rem; }
  .content p.indent { padding-left: 0; }
  .content figure { margin-left: -0.5rem; }
  .content figure img { width: 28rem; }
  .info-table { width: 28rem; font-size: 1.3rem; line-height: 2rem; }
  .info-table th, .info-table td { height: 3.6rem; }
  .info-table--fee { width: 28rem; }
  .info-table--fee .tall th, .info-table--fee .tall td { height: 12rem; }
  .info-table--fee tr:not(.tall) th, .info-table--fee tr:not(.tall) td { height: 5rem; }
  .map { width: 28rem; height: 24rem; margin: 2.8rem 0 2rem -0.5rem; }

  /* 返回顶部（仅手机端） */
  .to-top {
    position: fixed; left: 2.5rem; bottom: 4rem; z-index: 25;
    display: flex; align-items: center; justify-content: center;
    width: 5rem; height: 5.1rem; padding: 0; border: 0; background: var(--navy); cursor: pointer;
    opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
  }
  .to-top.is-visible { opacity: 1; visibility: visible; }
  .to-top svg { width: 2.4rem; height: 2.4rem; }

  /* 页脚 */
  .site-footer { height: 73rem; }
  .contact { width: auto; margin: 0; padding: 4rem 3rem 0; }
  .contact__title { height: 2.5rem; font-size: 2.1rem; line-height: 2.5rem; letter-spacing: 0.105rem; }
  .contact__grid { grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
  .field { height: 4rem; padding: 0.3rem 0.3rem 0.3rem 1.2rem; font-size: 1.6rem; }
  textarea.field { height: 12rem; margin-top: 1rem; padding: 1.1rem 0.3rem 0.3rem 1.5rem; }
  .contact__submit { margin-top: 5rem; width: 12rem; height: 4rem; }
  .copyright { top: 70.4rem; font-size: 1.1rem; line-height: 1.4rem; letter-spacing: 0.11rem; }
}