@charset "utf-8";

/* ==========================================================================
   LINKAGE corporate site - shared stylesheet
   Mobile-first responsive layout. Breakpoints: 768px (tablet), 1024px (desktop)
   ========================================================================== */

:root {
  --color-ink: #1a2433;
  --color-text: #333c48;
  --color-text-muted: #5b6472;
  --color-primary: #1a56b0;
  --color-primary-dark: #0d2c52;
  --color-primary-soft: #eaf1fb;
  --color-bg: #ffffff;
  --color-bg-soft: #f6f8fb;
  --color-border: #e2e6ec;
  --color-footer-bg: #0d2440;
  --color-footer-text: rgba(255, 255, 255, 0.86);

  --font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic Medium", "Meiryo", Arial, sans-serif;

  --container-width: 1040px;
  --header-width: 1320px;
  --content-width: 860px;
  --header-height: 108px;
  --radius: 12px;
  --radius-sm: 7px;
  --shadow-sm: 0 1px 3px rgba(13, 44, 82, 0.08);
  --shadow-md: 0 12px 28px rgba(13, 44, 82, 0.1);
  --transition: 0.2s ease;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body,
header,
nav,
main,
section,
article,
footer,
figure,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
dl,
dt,
dd {
  margin: 0;
  padding: 0;
}

html {
  min-height: 100%;
}

body {
  width: 100%;
  min-height: 100vh;
  background-color: var(--color-bg-soft);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: 17px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* Whole page is one fixed-width column, centered in the browser window.
   min-height (not height) keeps the white column filling the viewport on
   short pages while still growing past 100vh and using the browser's own
   scrollbar on long pages. No overflow is set, so `position: sticky` on
   the header keeps working. */
.page-shell {
  min-height: 100vh;
  width: 100%;
  background-color: var(--color-bg);
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: middle;
}

iframe {
  max-width: 100%;
  display: block;
  margin: 0 auto 24px;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-primary-dark);
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(6px);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  max-width: var(--header-width);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.site-logo img {
  display: block;
  width: auto;
  height: 30px;
}

/* checkbox-driven hamburger toggle: no JavaScript required */
.nav-toggle {
  display: none;
}

.nav-toggle-label {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  cursor: pointer;
}

.nav-toggle-label span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--color-primary-dark);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.site-nav {
  flex-basis: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.nav-toggle:checked ~ .site-nav {
  max-height: 460px;
}

.site-nav ul {
  list-style: none;
  padding: 6px 0 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.site-nav a {
  display: block;
  padding: 12px 6px;
  color: var(--color-ink);
  font-weight: 500;
  font-size: 16px;
  border-bottom: 1px solid var(--color-border);
}

.site-nav .nav-ja {
  display: block;
}

.site-nav .nav-en {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.site-nav a[aria-current="page"] .nav-en {
  color: var(--color-primary);
}

.site-nav a[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 700;
}

.site-nav a:hover {
  color: var(--color-primary);
}

.site-nav li.nav-cta {
  margin-top: 10px;
  border-top: none;
}

.site-nav li.nav-cta a {
  display: block;
  text-align: center;
  padding: 12px;
  border-radius: 999px;
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
  border-bottom: none;
}

.site-nav li.nav-cta a:hover {
  background-color: var(--color-primary-dark);
  color: #fff;
}

@media screen and (min-width: 768px) {
  .site-header__inner {
    flex-wrap: nowrap;
  }

  .site-logo {
    flex-shrink: 0;
  }

  .site-logo img {
    height: 46px;
  }

  .nav-toggle-label {
    display: none;
  }

  .site-nav {
    flex: 1 1 auto;
    flex-basis: auto;
    max-height: none;
    overflow: visible;
    min-width: 0;
  }

  .site-nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    gap: 2px;
  }

  .site-nav a {
    padding: 8px 16px 10px;
    border-bottom: 2px solid transparent;
    font-size: 16px;
    text-align: center;
  }

  .site-nav a[aria-current="page"] {
    border-bottom-color: var(--color-primary);
  }

  .site-nav li.nav-cta {
    margin-top: 0;
    margin-left: 16px;
  }

  .site-nav li.nav-cta a {
    padding: 11px 24px;
    font-size: 15px;
  }
}

@media screen and (min-width: 1024px) {
  .site-header__inner {
    flex-wrap: nowrap;
  }

  .site-logo {
    flex-shrink: 0;
  }

  .site-logo img {
    height: 65px;
  }

  .nav-toggle-label {
    display: none;
  }

  .site-nav {
    flex: 1 1 auto;
    flex-basis: auto;
    max-height: none;
    overflow: visible;
    min-width: 0;
  }

  .site-nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    gap: 2px;
  }

  .site-nav a {
    padding: 8px 16px 10px;
    border-bottom: 2px solid transparent;
    font-size: 16px;
    text-align: center;
  }

  .site-nav a[aria-current="page"] {
    border-bottom-color: var(--color-primary);
  }

  .site-nav li.nav-cta {
    margin-top: 0;
    margin-left: 16px;
  }

  .site-nav li.nav-cta a {
    padding: 11px 24px;
    font-size: 15px;
  }
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.breadcrumb {
  padding: 14px 20px;
  max-width: var(--container-width);
  margin: 0 auto;
  font-size: 12px;
  color: var(--color-text-muted);
}

.breadcrumb a {
  color: var(--color-text-muted);
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

.breadcrumb__sep {
  margin: 0 6px;
  color: var(--color-border);
}

/* ==========================================================================
   Page banner (photo + title overlay, used on every sub-page)
   ========================================================================== */

.page-banner {
  position: relative;
  overflow: hidden;
  height: 200px;
  background-color: var(--color-primary-dark);
}

.page-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* opacity: 0.55; */
}

.page-banner__caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 24px;
  background: linear-gradient(180deg, rgba(13, 44, 82, 0.25) 0%, rgba(13, 44, 82, 0.65) 100%);
}

.page-banner .eyebrow {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 6px;
}

.page-banner h1,
.page-banner h2 {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

@media screen and (min-width: 768px) {
  .page-banner {
    /* height: 260px; */
    height: 100%;
  }

  .page-banner h1,
  .page-banner h2 {
    font-size: 30px;
  }
}

/* ==========================================================================
   Hero (home page)
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
}

.hero-photo {
  width: 100%;
  display: block;
}

.hero__caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  background-color: rgba(13, 36, 64, 0.45);
  color: #fff;
}

.hero__caption p {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  max-width: 1000px;
}

@media screen and (min-width: 768px) {
  .hero__caption {
    padding: 40px;
  }

  .hero__caption p {
    font-size: 40px;
  }
}

/* ==========================================================================
   Main content
   ========================================================================== */

main {
  display: block;
}

/* single-page layout: each nav target scrolls just clear of the fixed header */
#home,
.content-section {
  scroll-margin-top: var(--header-height);
}

.section-block {
  padding: 40px 0;
}

.section-block--soft {
  background-color: var(--color-bg-soft);
}

.section-block + .section-block {
  border-top: 1px solid var(--color-border);
}

.section-heading {
  width: 80%;
  max-width: var(--content-width);
  padding-bottom: 24px;
  margin: 0 auto;
}

.section-heading .eyebrow {
  display: block;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 6px;
}

.section-heading h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary-dark);
  letter-spacing: 0.03em;
}

.catchcopy {
  width: 80%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding-bottom: 20px;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary-dark);
  line-height: 1.9;
}

.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  width: 80%;
  max-width: var(--content-width);
  margin: 0 auto 24px;
}

.message {
  width: 80%;
  max-width: var(--content-width);
  margin: 0 auto;
  margin-bottom: 16px;
  line-height: 1.95;
  color: var(--color-text);
}

.message:last-child {
  margin-bottom: 0;
}

.center {
  text-align: center;
}

.inline-image {
  max-width: 90%;
  margin: 24px auto;
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.signature {
  width: 80%;
  max-width: var(--content-width);
  margin: 24px auto 0;
  text-align: right;
}

/* key/value record list (outline / recruit / service) */
.record-list {
  width: 80%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding-bottom: 8px;
}

.record {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.record:first-child {
  padding-top: 0;
}

.record .title {
  font-weight: 700;
  color: var(--color-primary-dark);
  font-size: 14px;
}

.record .detail {
  color: var(--color-text);
}

@media screen and (min-width: 768px) {
  .record {
    flex-direction: row;
    gap: 24px;
    padding: 20px 0;
  }

  .record .title {
    flex: 0 0 180px;
  }

  .record .detail-group {
    flex: 1;
  }
}

/* certification / ISMS logos block */
.certifications {
  width: 80%;
  max-width: var(--content-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.certification {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 10px;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

.certification:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.certification img {
  width: 64px;
  height: auto;
  flex-shrink: 0;
}

.certification.certification--wide img {
  width: 96px;
}

.certification div {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.certification strong {
  display: block;
  color: var(--color-ink);
  font-size: 14px;
  margin-bottom: 2px;
}

@media screen and (min-width: 768px) {
  .certifications {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* What's New (native <details> accordion, no JS) */
.whatsnew {
  width: 80%;
  max-width: var(--content-width);
  margin: 0 auto;
}

.whatsnew details {
  border-bottom: 1px solid var(--color-border);
}

.whatsnew summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 8px;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition);
}

.whatsnew summary:hover {
  background-color: var(--color-bg-soft);
}

.whatsnew summary::-webkit-details-marker {
  display: none;
}

.whatsnew summary::after {
  content: "＋";
  margin-left: auto;
  color: var(--color-primary);
  font-weight: 700;
  flex-shrink: 0;
}

.whatsnew details[open]:not(.whatsnew-toggle) > summary::after {
  content: "－";
}

.whatsnew .date {
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 13px;
  flex-shrink: 0;
  width: 84px;
}

.whatsnew summary .title {
  font-weight: 500;
  color: var(--color-ink);
}

.whatsnew .entry-body {
  padding: 0 8px 18px 106px;
  line-height: 1.95;
  color: var(--color-text-muted);
  font-size: 14px;
}

.whatsnew-toggle {
  border-bottom: none !important;
}

.whatsnew-toggle > summary {
  justify-content: center;
  gap: 8px;
  color: var(--color-primary);
  font-weight: 700;
}

.whatsnew-toggle > summary::after {
  content: "▾";
}

.whatsnew-toggle[open] > summary::after {
  content: "▴";
}

.whatsnew-more {
  padding-top: 4px;
}

@media screen and (max-width: 480px) {
  .whatsnew summary {
    flex-wrap: wrap;
  }

  .whatsnew .entry-body {
    padding-left: 8px;
  }
}

/* buttons */
.btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

.btn:hover {
  background-color: var(--color-primary-dark);
  color: #fff;
}

/* ==========================================================================
   Back-to-top button
   ========================================================================== */

.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition), background-color var(--transition);
}

.back-to-top svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.back-to-top:hover {
  background-color: var(--color-primary-dark);
  color: #fff;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media screen and (min-width: 768px) {
  .back-to-top {
    right: 28px;
    bottom: 28px;
    width: 50px;
    height: 50px;
  }

  .back-to-top svg {
    width: 20px;
    height: 20px;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: 40px 20px 24px;
  margin-top: 0;
}

.site-footer__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.site-footer nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.site-footer nav a {
  color: var(--color-footer-text);
  font-size: 13px;
}

.site-footer nav a:hover {
  color: #fff;
}

.site-footer__bottom {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

@media screen and (min-width: 768px) {
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

@media screen and (min-width: 1024px) {
  body {
    font-size: 18px;
  }
}