/* site.css: hand-written styles for the static site.
 * Replaces what the former site did with JavaScript (mega menu, mobile menu, parallax,
 * back-to-top button) and with external resources (Google Fonts, Font Awesome).
 * Loaded after base.css, so rules here win on equal specificity. */

/* ---------- fonts: OS fonts only (no web font download) ---------- */
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
}
html[lang="zh-CN"] body {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans JP", sans-serif;
}

/* ---------- icons (former Font Awesome) drawn with CSS ---------- */
.fa, .fas {
  display: inline-block;
  width: 1em;             /* same box as the former icon font (1em square) */
  text-align: center;
  font-style: normal;
  line-height: 1;
}
.fa-angle-down::before,
.fa-angle-right::before,
.fa-chevron-up::before {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  border-style: solid;
  border-color: currentColor;
  border-width: 0 0.12em 0.12em 0;
  vertical-align: 0.15em;
}
.fa-angle-down::before { transform: rotate(45deg); vertical-align: 0.25em; }
.fa-angle-right::before { transform: rotate(-45deg); }
.fa-chevron-up::before { transform: rotate(-135deg); vertical-align: -0.1em; width: 0.6em; height: 0.6em; }
.fa-external-link-alt::before { content: "\2197"; font-weight: 700; }

/* ---------- hero image (former parallax): static background ---------- */
.dzsparallaxer .dzsparallaxer--target,
.dzsparallaxer.use-loading .dzsparallaxer--target {
  opacity: 1;
  visibility: visible;
  top: 0;
  left: 0;
  height: 100% !important;
  background-size: cover;
  background-position: center center;
  animation: hero-fade-in 0.7s ease-in both;  /* same fade-in as the former parallax script (0.7s, ease-in) */
}
/* opacity only (no movement), so it is kept even when the OS asks for reduced motion — as on the former site */
@keyframes hero-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- PC navigation: dropdown on hover / keyboard focus ---------- */
.nav-sp { display: none; }
/* the former menu script set position/z-index on the menu; without it the dropdown slid under the hero image */
#header { position: relative; z-index: 10; }
@media (min-width: 768px) {
  .nav-pc { display: flex; }
  .nav-pc .hs-has-sub-menu { position: relative; overflow: visible; }
  .nav-pc > .hs-has-sub-menu > .nav-link { cursor: default; }
  /* Closed menus stay laid out but are transparent and ignore the pointer, so keyboard users can Tab into
     them. base.css forces opacity with !important, so the fade uses filter. Former menu: slideInUp, 300ms. */
  .nav-pc .hs-sub-menu {
    display: block;
    visibility: visible;
    filter: opacity(0);
    transform: translateY(10px);
    pointer-events: none;
    transition: filter 0.3s ease, transform 0.3s ease;
  }
  /* open on hover, or while keyboard focus (Tab) is inside. :focus-visible is not set by mouse clicks,
     so a clicked menu closes as soon as the pointer leaves, as with the former script */
  .nav-pc .hs-has-sub-menu:hover > .hs-sub-menu,
  .nav-pc .hs-has-sub-menu:has(:focus-visible) > .hs-sub-menu {
    filter: opacity(1);
    transform: none;
    pointer-events: auto;
  }
  /* 3rd level (中国コーナー) opens to the left: it sits near the right edge, where the former script flipped it too */
  .nav-pc .hs-sub-menu .hs-sub-menu { top: 0; left: auto; right: 100%; }
  .nav-pc .dropdown-item { padding: 0; background: transparent; }
  .nav-pc a[aria-current="page"] { color: #5593cf; }
}

/* ---------- mobile navigation: <details> menu, no JavaScript ---------- */
@media (max-width: 767px) {
  .nav-pc { display: none; }
  .u-header__navbar { flex-wrap: wrap; }
  .nav-sp { display: block; margin-left: auto; }
  .nav-sp > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.5rem 0.25rem;
  }
  .nav-sp > summary::-webkit-details-marker { display: none; }
  .nav-sp[open] { flex-basis: 100%; }
  .nav-sp[open] > summary { text-align: right; }
  .nav-sp[open] > summary .u-hamburger__inner { transform: rotate(45deg); top: 0.4rem; }
  .nav-sp[open] > summary .u-hamburger__inner::before { opacity: 0; }
  .nav-sp[open] > summary .u-hamburger__inner::after { transform: rotate(-90deg); top: 0; }
  .nav-sp__list,
  .nav-sp__list ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav-sp__list { padding-bottom: 1rem; }
  .nav-sp__list ul { border-left: 0.1875rem solid #5593cf; margin-left: 0.5rem; }
  .nav-sp__list a,
  .nav-sp__list summary {
    display: block;
    padding: 0.6rem 0.75rem;
    color: #77838f;
    cursor: pointer;
  }
  .nav-sp__list summary { list-style: none; position: relative; padding-right: 2rem; }
  .nav-sp__list summary::-webkit-details-marker { display: none; }
  .nav-sp__list summary::after {
    content: "";
    position: absolute;
    right: 0.9rem;
    top: 50%;
    width: 0.45em;
    height: 0.45em;
    border: solid currentColor;
    border-width: 0 0.12em 0.12em 0;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .nav-sp__list details[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
  .nav-sp__list a:hover,
  .nav-sp__list summary:hover,
  .nav-sp__list a[aria-current="page"] { color: #5593cf; }
}

/* ---------- back-to-top: always shown, plain page anchor ---------- */
/* smooth scroll to the top, as the former script did (kept regardless of the OS animation setting, like the former site) */
html { scroll-behavior: smooth; }
.u-go-to {
  display: block;
  position: fixed;
  right: 15px;
  bottom: 15px;
}

/* ---------- location map (replaces the Google Maps iframe) ---------- */
.map-link { display: block; position: relative; text-align: left; }
.map-link__frame { display: block; }
.map-link img { height: auto; margin-bottom: 0 !important; transition: border-color 0.2s ease; }
.map-link:hover img { border-color: #5593cf !important; }
/* caption under the map; the "Googleマップで開く" button sits next to the print button */
.map-link__caption {
  display: block;
  margin: 0.5rem 0 1rem;
  color: #5593cf;
  font-size: 0.875rem;
  text-align: center;
}
.map-link:hover .map-link__caption { text-decoration: underline; }
/* phones use a separate portrait map (map-sp.svg) via <picture>, shown at full width */
.map-link:focus-visible { outline: 3px solid #5593cf; outline-offset: 2px; }

/* ---------- printing (the former "印刷する" button used JavaScript) ---------- */
@media print {
  .u-header__hide-content, .nav-sp, .nav-pc, .u-go-to { display: none !important; }
  .dzsparallaxer { background: none; }
}

/* access page: "Googleマップで開く" and "印刷する" buttons share one size */
.map-btn { width: 14rem; max-width: 100%; text-align: center; margin-bottom: 0.5rem; }
@media (max-width: 767px) {
  /* access page: the two buttons side by side, half width each (the single button on the top page keeps 14rem) */
  .map-btn.mr-2, .map-btn.mr-2 + .map-btn { width: calc(50% - 0.3rem); padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.875rem; }
  .map-btn.mr-2 { margin-right: 0.5rem !important; }
}

/* patent attorney skill table: on phones the 10 columns were ~6px wider than the screen and the
   last column (著作権) was cut off on the former site as well; tighten cells so it fits */
@media (max-width: 575px) {
  .patent_attorney_table th,
  .patent_attorney_table td { padding-left: 0.1rem !important; padding-right: 0.1rem !important; font-size: 0.75rem; }
}

/* long buttons (e.g. 中国特許支援サービス業務のご案内) overflowed 320px-wide phones: allow wrapping */
@media (max-width: 575px) {
  main .btn.u-btn-wide { white-space: normal; max-width: 100%; }
}

/* 情報・論文・書籍 / 中国知財関連情報 (.discuss-box): on screens up to 991px the former theme made th/td
   inline-block at 30%/70%, but the percentages resolved against the narrow table columns, so every
   cell collapsed to a few dozen pixels (a bug on the former site too). Lay each row out as a
   full-width line instead: label 30%, content 70%. */
@media (max-width: 991px) {
  .discuss-box,
  .discuss-box tbody { display: block; width: 100%; }
  .discuss-box colgroup { display: none; }
  .discuss-box tr { display: flex; flex-wrap: wrap; width: 100%; }
  .discuss-box th { flex: 0 0 30%; max-width: 30%; width: auto; height: auto; }
  .discuss-box td { flex: 0 0 70%; max-width: 70%; width: auto; overflow-wrap: anywhere; }
}

/* keeps a phrase on one line; long labels then wrap only between phrases (e.g. 中国弁理士 / 試験合格年) */
.nobr { display: inline-block; }