:root {
  --ink: #073767;
  --blue: #168bd0;
  --blue-dark: #0876bc;
  --pale: #eaf7fc;
  --line: #b9e4f7;
  --serif: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: var(--sans); font-size: 15px; line-height: 1.75; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.wrap { width: min(100% - 8vw, 1440px); margin-inline: auto; }
.site-header { height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 0 max(4vw, calc((100vw - 1440px) / 2)); background: #fff; position: relative; z-index: 10; }
.brand { display: block; width: 168px; flex: 0 0 auto; }
.brand img { width: 100%; height: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(16px, 2.1vw, 36px); font-size: 13px; font-weight: 600; white-space: nowrap; }
.site-nav a { position: relative; padding: 9px 0; }
.site-nav a::after { content: ""; position: absolute; bottom: 3px; left: 0; width: 100%; height: 1px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.site-nav a:hover::after, .site-nav a.is-current::after { transform: scaleX(1); }
.menu-toggle { display: none; }
.hero { position: relative; min-height: 480px; overflow: hidden; isolation: isolate; }
.hero-sky { position: absolute; inset: 0 0 35px; background: linear-gradient(180deg,#79c4ee 0%,#acdafa 47%,#eff9ff 92%); z-index: -2; }
.hero-photo { position: absolute; z-index: -1; width: 100%; height: 100%; left: 0; bottom: 0; object-fit: cover; object-position: center 36%; }
.hero-copy { position: relative; z-index: 1; padding-top: 38px; }
.hero-copy h1 { margin: 0; max-width: 900px; font: 700 clamp(36px,3.3vw,48px)/1.35 var(--serif); letter-spacing: .035em; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.hero-copy p { margin: 9px 0 0; font-size: clamp(15px,1.35vw,19px); font-weight: 600; letter-spacing: .04em; }
.hero-mobile-break { display: none; }
.hero-note { position: absolute; z-index: 1; top: 29px; right: max(12vw, calc((100vw - 980px) / 2)); margin: 0; color: #fff; font: italic 500 21px/1.45 var(--serif); letter-spacing: .08em; transform: rotate(-8deg); text-shadow: 0 1px 3px rgba(30,90,130,.16); }
.hero-note::after { content: ""; display: block; width: 190px; height: 1px; background: #fff; transform: rotate(-8deg); margin: 7px 0 0 -8px; }
.hero-wave { position: absolute; z-index: 2; left: 0; bottom: -1px; width: 100%; height: 72px; }
.wave-blue { fill: #dff4fd; }
.wave-white { fill: #fff; }
.section { padding-block: 28px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 34px; }
.section-heading h2, .news-heading h2 { margin: 0; font: 700 clamp(24px,2vw,32px)/1.35 var(--serif); letter-spacing: .04em; white-space: nowrap; }
.dash { display: inline-block; width: 42px; height: 1px; background: var(--blue); vertical-align: middle; margin: 0 18px 7px 0; }
.connections { padding-top: 7px; padding-bottom: 28px; }
.connections-heading p { margin: 0; font-size: 14px; line-height: 1.65; }
.connection-area { position: relative; padding: 10px 0 0; }
.connection-line { position: absolute; z-index: 0; inset: 44px 0 auto; width: 100%; height: 105px; overflow: visible; }
.connection-line path { fill: none; stroke: #45a9e5; stroke-width: 1.2; }
.connection-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; position: relative; z-index: 1; }
.connection-card { text-align: center; min-width: 0; }
.connection-card img { width: min(100%, 164px); height: 124px; margin: 0 auto 4px; object-fit: cover; border-radius: 50%; }
.connection-card h3 { margin: 0 0 2px; color: var(--blue-dark); font-size: 17px; line-height: 1.5; font-weight: 700; }
.connection-card p { margin: 0; font-size: 14px; line-height: 1.6; }
.projects { background: linear-gradient(180deg,#eaf7fc 0%,#eef9fd 100%); padding-block: 20px 24px; }
.projects-heading { margin-bottom: 13px; }
.projects-heading p { margin: 0; font-size: 14px; }
.project-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.project-card { min-width: 0; overflow: hidden; border-radius: 9px; background: #fff; box-shadow: 0 1px 1px rgba(17,93,145,.04); }
.project-card-link { display: block; height: 100%; }
.project-card-link > img { display:block; width:100%; height:auto; aspect-ratio:3.12 / 1; object-fit:cover; }
.project-card-copy { min-height: 80px; padding: 6px 14px 9px 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.project-card-copy h3 { margin: 0; color: var(--blue-dark); font-size: 17px; line-height: 1.4; }
.project-card-copy p { margin: 2px 0 0; font-size: 13px; line-height: 1.5; }
.round-arrow { display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 auto; border-radius: 50%; color: #fff; background: var(--blue); font: 400 25px/1 var(--sans); padding-bottom: 3px; }
.news { padding-top: 12px; padding-bottom: 13px; }
.news-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.news-heading h2 { font-size: 23px; }
.news-mark { color: var(--blue-dark); font: 600 20px/1 var(--serif); padding-right: 14px; }
.text-link { color: var(--blue); font-size: 13px; font-weight: 600; }
.text-link span { padding-left: 6px; font-size: 16px; }
.news-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.news-item { display: flex; align-items: center; gap: 14px; min-width: 0; }
.news-item > img { width: 104px; aspect-ratio: 1.63 / 1; flex: 0 0 auto; object-fit: cover; border-radius: 3px; }
.news-copy { min-width: 0; }
.news-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 2px; font-size: 11px; color: #486681; }
.news-meta span { padding: 0 6px; color: #246da2; background: #e8f6fc; border-radius: 999px; font-size: 10px; }
.news-copy h3 { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.5; }
.news-copy h3 a:hover { text-decoration: underline; }
.join { position: relative; min-height: 142px; overflow: hidden; background: #9bd4f1; isolation: isolate; }
.join-background { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,rgba(181,225,246,.84),rgba(236,248,252,.55) 50%,rgba(90,165,204,.18)),url("../photos/callout-bg.jpg") center / 100% 100% no-repeat; }
.join-inner { min-height: 142px; display: grid; grid-template-columns: .85fr 1.4fr; align-items: center; gap: 28px; }
.join-script { margin: 0; color: #fff; font: italic 500 clamp(25px,2.3vw,34px)/1.3 var(--serif); letter-spacing: .07em; text-shadow: 0 1px 4px rgba(18,64,92,.32); transform: rotate(-4deg); }
.join-content { text-align: center; }
.join-content h2 { margin: 0 0 8px; color: #07528b; font: 700 clamp(16px,1.5vw,21px)/1.4 var(--serif); }
.join-actions { display: flex; justify-content: center; gap: 14px; }
.button { min-width: 178px; height: 42px; border-radius: 999px; display: inline-flex; justify-content: space-between; align-items: center; gap: 25px; padding: 0 20px 0 27px; font-size: 14px; font-weight: 700; }
.button-primary { color: #fff; background: linear-gradient(100deg,#50aee0,#1789cd); }
.button-outline { color: #064275; border: 1px solid #168bd0; background: rgba(255,255,255,.9); }
.button span { font-size: 19px; line-height: 1; }
.site-footer { min-height: 64px; display: flex; align-items: center; gap: 18px; padding-block: 10px; }
.footer-brand { width: 90px; }
.footer-brand img { width: 100%; }
.site-footer small { margin-right: auto; color: #6b8499; font-size: 11px; }
.to-top { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #d6e9f1; border-radius: 50%; color: var(--blue-dark); }

@media (max-width: 760px) {
  body { font-size: 14px; }
  .wrap { width: min(100% - 36px, 520px); }
  .site-header { height: 74px; padding-inline: 18px; }
  .brand { width: 137px; }
  .menu-toggle { display: flex; width: 40px; height: 40px; flex: 0 0 auto; border: 0; background: transparent; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
  .menu-toggle span { width: 24px; height: 2px; background: #087ebc; transition: transform .2s ease,opacity .2s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }
  .site-nav { display: none; position: absolute; top: 74px; left: 0; right: 0; padding: 12px 22px 20px; background: rgba(255,255,255,.98); box-shadow: 0 12px 20px rgba(10,66,103,.12); flex-direction: column; align-items: stretch; gap: 0; white-space: normal; font-size: 15px; }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 10px 0; border-bottom: 1px solid #e5f1f6; }
  .site-nav a::after { display: none; }
  .hero { min-height: 376px; }
  .hero-sky { bottom: 24px; background: linear-gradient(180deg,#79c4ee 0%,#b4e0fb 60%,#f1faff 100%); }
  .hero-copy { padding-top: 22px; }
  .hero-copy h1 { max-width: 100%; font-size: clamp(25px,6.8vw,31px); line-height: 1.45; letter-spacing: .01em; }
  .hero-copy p { max-width: 310px; margin-top: 7px; font-size: 14px; line-height: 1.6; }
  .hero-mobile-break { display: block; }
  .hero-desktop-space { display: none; }
  .hero-note { top: 103px; right: 15px; bottom: auto; font-size: 14px; line-height: 1.35; }
  .hero-note::after { width: 128px; margin-top: 4px; }
  .hero-photo { height: 100%; bottom: 0; object-position: center 54%; }
  .hero-wave { height: 47px; }
  .section { padding-block: 23px; }
  .connections { padding-top: 5px; padding-bottom: 23px; }
  .section-heading { display: block; }
  .section-heading h2, .news-heading h2 { font-size: 22px; }
  .dash { width: 21px; margin-right: 9px; margin-bottom: 5px; }
  .connections-heading p { margin-top: 7px; font-size: 13px; line-height: 1.6; }
  .desktop-only { display: none; }
  .connection-area { padding-top: 13px; }
  .connection-line { inset: 51px -18px auto; width: calc(100% + 36px); height: 204px; }
  .connection-grid { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 10px; row-gap: 18px; }
  .connection-card img { width: min(100%, 138px); height: 104px; margin-bottom: 2px; }
  .connection-card h3 { font-size: 14px; }
  .connection-card p { font-size: 11px; line-height: 1.5; }
  .projects { padding-block: 20px 23px; }
  .projects-heading { margin-bottom: 12px; }
  .projects-heading p { margin-top: 6px; font-size: 12px; line-height: 1.55; }
  .project-grid { display: flex; gap: 14px; width: calc(100% + 18px); overflow-x: auto; padding: 1px 18px 8px 0; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .project-grid::-webkit-scrollbar { display: none; }
  .project-card { flex: 0 0 86%; max-width: 360px; scroll-snap-align: start; }
  .project-card-link > img { aspect-ratio: 3.12 / 1; }
  .project-card-copy { min-height: 75px; padding: 5px 11px 7px 14px; }
  .project-card-copy h3 { font-size: 15px; }
  .project-card-copy p { font-size: 11px; }
  .round-arrow { width: 26px; height: 26px; font-size: 23px; }
  .news { padding-top: 14px; padding-bottom: 16px; }
  .news-heading { margin-bottom: 8px; }
  .news-heading h2 { font-size: 21px; }
  .news-mark { font-size: 18px; padding-right: 9px; }
  .text-link { font-size: 12px; }
  .news-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .news-item { align-items: center; gap: 11px; padding-bottom: 9px; border-bottom: 1px solid #e6f0f5; }
  .news-item > img { width: 78px; aspect-ratio: 1.7 / 1; }
  .news-meta { font-size: 10px; gap: 6px; }
  .news-meta span { font-size: 9px; }
  .news-copy h3 { font-size: 12px; line-height: 1.45; }
  .join { min-height: 210px; }
  .join-background { background-size: auto 100%; background-position: left center; }
  .join-inner { display: block; min-height: 210px; padding-block: 16px; }
  .join-script { margin: 0 0 8px; font-size: 23px; }
  .join-content { text-align: left; }
  .join-content h2 { max-width: 330px; margin-bottom: 10px; font-size: 16px; }
  .join-actions { justify-content: flex-start; gap: 9px; }
  .button { min-width: 0; height: 38px; gap: 12px; padding: 0 13px 0 16px; font-size: 12px; }
  .site-footer { min-height: 56px; gap: 10px; }
  .footer-brand { width: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* WordPress integration additions - preserve approved visual system */
.site-nav .eean-menu-fallback { display: contents; }
.site-nav .menu-item { list-style:none; }
.site-nav .menu-item a { display:inline-block; }
.eean-logo-text { font-size: 25px; letter-spacing:.14em; font-weight:800; color:#0871a2; }
.eean-image-empty { background:#e4f0f4; width:100%; aspect-ratio: 4/3; }
.eean-inner { padding-top: clamp(70px,9vw,135px); padding-bottom: 90px; min-height: 55vh; }
.eean-inner h1 { font-size: clamp(28px,4vw,46px); margin-bottom: 35px; }
.eean-prose { line-height: 1.95; max-width: 900px; }
.eean-prose img { max-width:100%; height:auto; }
.eean-list-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.eean-list-card { min-width:0; }
.eean-list-card img { width:100%; aspect-ratio: 4/3; object-fit:cover; }
.eean-list-card h2 { font-size:19px; margin-top:15px; }
.eean-video { position:relative; aspect-ratio:16/9; max-width:900px; margin:30px 0; }
.eean-video iframe { width:100%; height:100%; border:0; }
.eean-empty { padding:28px 0; }
@media(max-width:760px) { .eean-list-grid { grid-template-columns:1fr; } .site-nav .eean-menu-fallback {display:flex;flex-direction:column;} }


/* STEP 4 — subpage visual components, aligned to approved home design */
.eean-page-heading { position:relative; padding: 122px 0 48px; color:#154d70; background:linear-gradient(160deg,#e3f5fe 0%,#f2faff 60%,#fff 100%); overflow:hidden; }
.eean-page-heading::after { content:""; position:absolute; width:500px; height:210px; border:24px solid rgba(72,174,222,.09); border-radius:50%; right:-150px; top:50px; transform:rotate(-15deg); pointer-events:none; }
.eean-page-heading .wrap { position:relative; z-index:1; }
.eean-eyebrow { color:#1680b7; font-size:12px; font-weight:800; letter-spacing:.18em; margin:0 0 8px; }
.eean-page-heading h1 { font-size:clamp(29px,4.4vw,46px); line-height:1.35; margin:0; color:#155277; font-weight:800; }
.eean-page-lead { margin:14px 0 0; line-height:1.9; color:#45667a; font-size:clamp(14px,1.5vw,17px); }
.eean-subpage { padding-top: 50px; padding-bottom: 94px; min-height:45vh; }
.eean-section-intro:not(:empty) { margin-bottom:28px; }
.eean-section-intro:empty {display:none;}
.eean-list-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;align-items:start;}
.eean-list-card {overflow:hidden;border-radius:12px;background:#fff;border:1px solid #e4eef3;box-shadow:0 7px 20px rgba(14,83,122,.055);transition:transform .2s,box-shadow .2s;}
.eean-list-card:hover {transform:translateY(-3px);box-shadow:0 12px 28px rgba(14,83,122,.11);}
.eean-card-link {display:block;text-decoration:none;color:inherit;height:100%;}
.eean-card-image {aspect-ratio: 1.54/1;overflow:hidden;background:#eaf3f8;}
.eean-card-image img,.eean-card-image .eean-image-empty {width:100%;height:100%;object-fit:cover;display:block;}
.eean-card-body {padding:18px 19px 20px;}
.eean-card-body time {font-size:12px;color:#5e8397;display:block;margin-bottom:8px;}
.eean-card-body h2 {font-size:19px;line-height:1.55;margin:0 0 10px;color:#164968;}
.eean-card-body p {font-size:13px;line-height:1.8;color:#526e7f;margin:0 0 15px;}
.eean-card-more {font-size:12px;font-weight:700;color:#0579b6;display:inline-flex;gap:10px;align-items:center;}
.eean-pagination {margin-top:38px;}
.eean-pagination ul,.eean-pagination .nav-links {display:flex;flex-wrap:wrap;list-style:none;gap:8px;padding:0;align-items:center;}
.eean-pagination a,.eean-pagination .current,.eean-pagination .page-numbers:not(ul) {display:inline-block;padding:8px 12px;border:1px solid #d4e8f2;border-radius:6px;text-decoration:none;color:#215975;}
.eean-pagination .current {background:#167eaf;color:#fff;}
.eean-empty,.eean-content-notice {padding:24px;border-radius:10px;background:#f0f8fc;color:#4a6b7f;line-height:1.8;}
.eean-static-content,.eean-article-content {max-width:850px;line-height:2;color:#354e60;}
.eean-prose h2,.eean-partner-details h2 {margin:38px 0 14px;color:#125176;font-size:25px;}
.eean-prose p {margin-bottom:1.5em;}
.eean-prose a {color:#007db6;text-decoration:underline;text-underline-offset:3px;}
.eean-single {max-width:990px;}
.eean-single-meta {font-size:13px;color:#68899c;margin-bottom:16px;}
.eean-single-cover {margin:0 0 35px;}
.eean-single-cover img {width:100%;height:auto;border-radius:12px;}
.eean-single-navigation {display:flex;justify-content:space-between;gap:20px;margin:55px 0 24px;border-top:1px solid #e1edf3;padding-top:20px;}
.eean-single-navigation a {color:#176891;text-decoration:none;}
.eean-related-action {margin:34px 0;}
.eean-action-link {display:inline-flex;gap:20px;align-items:center;background:#057eaf;border-radius:30px;padding:14px 25px;color:white;text-decoration:none;font-weight:700;}
.eean-action-link:hover {background:#02638c;}
.eean-partner-details {margin-top:40px;border-top:1px solid #e1edf3;}
@media(max-width:900px){ .eean-list-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;} }
@media(max-width:760px){ .eean-page-heading{padding:98px 0 32px;} .eean-page-heading::after{width:260px;right:-160px;} .eean-subpage{padding-top:29px;padding-bottom:58px;} .eean-list-grid{grid-template-columns:1fr;gap:16px;} .eean-card-body{padding:15px 16px 18px;} .eean-card-body h2{font-size:18px;} .eean-single-navigation{font-size:13px;} }

/* Content Fields v0.3 display additions */
.eean-content-facts{margin:1.5rem 0 2rem;border-top:1px solid #dce9ec;}
.eean-content-facts>div{display:grid;grid-template-columns:minmax(8rem,28%) 1fr;gap:1rem;border-bottom:1px solid #dce9ec;padding:1rem .25rem;}
.eean-content-facts dt{font-weight:700;color:#25687b;}
.eean-content-facts dd{margin:0;white-space:normal;overflow-wrap:anywhere;}
.eean-content-label{font-size:.875rem;color:#25687b;}
.eean-design-sample small{display:block;font-size:.75rem;color:#566a73;margin-top:.6rem;}
.eean-design-sample .project-card-link{cursor:default;}
@media(max-width:600px){.eean-content-facts>div{grid-template-columns:1fr;gap:.4rem;}}

/* Project cards: fallback when featured image is missing */
.project-card-link > .eean-image-empty {
    width: 100%;
    height: auto;
    aspect-ratio: 3.12 / 1;
    min-height: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #e8f5fc 0%, #d5edf9 100%);
}

.project-card-link > .eean-image-empty::after {
    content: "EEAN PROJECT";
    color: #438ab4;
    font-family: Georgia, serif;
    font-size: clamp(13px, 1.5vw, 19px);
    letter-spacing: .16em;
    font-weight: 500;
}

/* NEWS画像の縦長表示を修正 */
.news-item > img {
    display: block;
    width: 104px;
    height: 64px;
    aspect-ratio: auto;
    flex: 0 0 104px;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 760px) {
    .news-item > img {
        width: 78px;
        height: 46px;
        flex-basis: 78px;
    }
}

/* NEWS: アイキャッチ未登録時の代替表示 */
.news-item > .eean-image-empty {
    width: 104px;
    height: 64px;
    aspect-ratio: auto;
    flex: 0 0 104px;
    min-width: 104px;
    min-height: 0;
    display: grid;
    place-items: center;
    border-radius: 3px;
    background: linear-gradient(135deg, #e9f6fc, #d2eaf7);
}

.news-item > .eean-image-empty::after {
    content: "EEAN";
    font-family: Georgia, serif;
    color: #438ab4;
    font-size: 13px;
    letter-spacing: .08em;
}

@media (max-width: 760px) {
    .news-item > .eean-image-empty {
        width: 78px;
        height: 46px;
        flex-basis: 78px;
        min-width: 78px;
    }
}