@charset "utf-8";

/* 構造と操作の基礎だけを定義する。案件固有の構図と外観はDESIGN.mdから追加する。 */

.df-container {
  width: calc(100% - (var(--df-gutter) * 2));
  max-width: var(--df-content-max);
  margin-right: auto;
  margin-left: auto;
}

.df-section {
  padding-top: var(--df-section-space);
  padding-bottom: var(--df-section-space);
}

.df-section-heading,
.df-card-title {
  text-wrap: balance;
}

.df-section-heading {
  margin: 0;
  color: var(--df-color-text);
  font-family: var(--df-font-heading);
  font-size: var(--df-font-size-h2);
  font-weight: var(--df-font-weight-heading);
  letter-spacing: var(--df-letter-spacing-heading);
  line-height: var(--df-line-height-heading);
  overflow-wrap: anywhere;
}

.df-section-heading-eyebrow {
  margin: 0 0 var(--df-space-sm);
  color: var(--df-color-primary);
  font-size: var(--df-font-size-caption);
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.df-button {
  display: inline-flex;
  min-width: 0;
  min-height: 48px;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--df-radius-control);
  font: inherit;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition-duration: var(--df-transition-duration);
  transition-property: background-color, border-color, color;
  transition-timing-function: var(--df-transition-easing);
}

.df-button-primary {
  border-color: var(--df-color-primary);
  background-color: var(--df-color-primary);
  color: var(--df-color-on-primary);
}

.df-button-primary:hover,
.df-button-primary:focus-visible {
  border-color: var(--df-color-primary-hover);
  background-color: var(--df-color-primary-hover);
  color: var(--df-color-on-primary);
}

.df-button-secondary {
  border-color: var(--df-color-primary);
  background-color: transparent;
  color: var(--df-color-primary);
}

.df-button-secondary:hover,
.df-button-secondary:focus-visible {
  background-color: var(--df-color-primary);
  color: var(--df-color-on-primary);
}

/* 列数、カード外観、画像比率、本文余白は案件のDESIGN.mdに従って追加する。 */
.df-card-grid {
  display: grid;
  gap: var(--df-card-grid-gap);
}

/* Lower pages share the top page's restrained navy, white and orange system. */
.np-sub{font-family:var(--df-font-body);word-break:auto-phrase}
.np-sub *{box-sizing:border-box}
.np-sub p{line-height:1.9;text-wrap:pretty}
.np-sub h1,.np-sub h2,.np-sub h3{text-wrap:balance}
.np-sub-hero{padding:76px 0 82px;background:#f4f1e7;border-bottom:1px solid #deded6}
.np-sub-hero .df-container{max-width:1120px}
.np-sub-kicker{margin:0 0 16px;color:#bd4d1a;font-size:12px;font-weight:800;letter-spacing:.14em;line-height:1.5}
.np-sub-hero h1{max-width:18em;margin:0;color:#20394d;font-size:var(--df-font-size-h1);font-weight:var(--df-font-weight-heading);letter-spacing:-.055em;line-height:1.35}
.np-sub-section{padding:82px 0 92px;background:#fff}
.np-sub-section-alt{background:#f4f1e7}
.np-sub-section h2,.np-sub-cta h2{margin:0 0 24px;color:#20394d;font-size:clamp(28px,2.7vw,40px);font-weight:800;letter-spacing:-.045em;line-height:1.4}
.np-sub-section h3{margin:28px 0 12px;color:#20394d;font-size:22px}
.np-sub-intro{max-width:58em;margin:0 0 42px}
.np-sub-cards,.np-sub-points{display:flex;flex-wrap:wrap;gap:22px}
.np-sub-card{position:relative;flex:1 1 260px;min-width:0;min-height:220px;padding:28px 30px;background:#edf2f4;border:1px solid #d9e1e3}
.np-sub-card h3{position:relative;margin:0 0 10px}
.np-sub-card p:last-child{position:relative;margin:0}
.np-sub-number{position:relative;margin:0 0 20px;color:#b9cbd3;font-size:48px;font-weight:900;line-height:1}
.np-sub-points>div{flex:1 1 260px;padding:0 25px 0 20px;border-left:3px solid #ed762a}
.np-sub-point-title{font-size:19px;font-weight:700;color:#20394d}
.np-sub-split{display:flex;flex-direction:column;align-items:stretch;gap:clamp(36px,5vw,84px)}
.np-sub-split>div{flex:1 1 0;min-width:0}
.np-sub-image img{width:100%;aspect-ratio:4/3;object-fit:cover}
.np-sub-tags{display:flex;flex-wrap:wrap;gap:12px}
.np-sub-tags>div{padding:14px 22px;background:#fff;border:1px solid #c9d5d9;font-weight:700}
.np-sub-quote{max-width:780px;padding-left:28px;border-left:4px solid #ed762a}
.np-sub-signature{text-align:right;font-weight:700}
.np-sub-details{margin:36px 0}
.np-sub-details>div{display:block;padding:19px 0;border-bottom:1px solid #cdd7d9}
.np-sub-detail-term{margin-bottom:6px;font-weight:800;color:#20394d}
.np-sub-detail-value{margin:0;flex:1;min-width:0}
.np-sub-map iframe{display:block;width:100%;height:380px;border:0}
.np-sub-external{display:inline-block;margin-top:16px;color:#20394d;font-weight:700;text-decoration:none}
.np-sub-cta{padding:62px 0;background:#20394d;color:#fff}
.np-sub-cta .df-container{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:32px}
.np-sub-cta h2{color:#fff}
.np-sub-cta p:last-child{margin-bottom:0}
.np-sub-cta .df-button{flex-shrink:0;background:#ed762a;border-color:#ed762a;color:#20394d}
.np-sub-cta-action{flex-shrink:0}
.np-sub-cta .df-button:hover{background:#fff;border-color:#fff}
.np-contact-methods{display:flex;flex-wrap:wrap;gap:24px}
.np-contact-methods>div{flex:1 1 290px;padding:28px;background:#fff;border:1px solid #d6dfdd}
.np-contact-methods h3{margin-top:0}
.np-contact-methods img{width:252px;max-width:100%;height:auto}
.np-contact-phone{color:#20394d;font-size:clamp(25px,3vw,36px);font-weight:800;text-decoration:none}
.nepoc-about .df-section-heading span,
.np-business-strength-details p span,
.np-business-quality p span,
.np-business-projects .np-sub-intro span,
.np-sub-cta p span,
.np-contact-choice-description span,
.nepoc-footer-inner>div:first-child>p:last-child span{white-space:nowrap}
@media (min-width: 900px){.np-sub-hero{padding:112px 0 120px}.np-sub-section{padding:112px 0 124px}.np-sub-split,.np-sub-cta .df-container{flex-direction:row;align-items:center}.np-sub-details>div{display:flex;gap:24px}.np-sub-detail-term{flex:0 0 150px;margin-bottom:0}}

.df-card-grid__item,
.df-card,
.df-card-body {
  min-width: 0;
}

.df-card-media {
  display: block;
  width: 100%;
  max-width: 100%;
}

.df-card-title {
  margin: 0;
  color: var(--df-color-text);
  font-family: var(--df-font-heading);
  font-size: var(--df-font-size-h3);
  font-weight: var(--df-font-weight-heading);
  line-height: var(--df-line-height-heading);
  overflow-wrap: anywhere;
}

.df-cta {
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .df-button {
    transition-duration: 0.01ms;
  }
}

.nepoc-step { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; color: var(--df-color-accent-dark); font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.nepoc-step > div { color: var(--df-color-primary); font-size: 11px; letter-spacing: .15em; }
.nepoc-text-link { display: inline-flex; align-items: center; position: relative; margin-top: 22px; padding: 8px 12px 14px; border: 0; border-radius: var(--df-radius-control); background: transparent; color: var(--df-color-primary-hover); font-size: 14px; font-weight: 800; text-decoration: none; transition: background-color 220ms ease, color 220ms ease, top 220ms ease; }
.nepoc-text-link div div { display: inline-block; margin-left: 12px; transition: transform 220ms ease; }
.nepoc-text-link:hover, .nepoc-text-link:focus-visible { text-decoration: none; top: -3px; }
.nepoc-text-link:hover div div, .nepoc-text-link:focus-visible div div { transform: translateX(4px); }
.nepoc-text-link,.np-sub-external,.np-contact-line-link { --np-link-wipe-color: #20394d; position: relative; top: 0; }
.nepoc-text-link::before,.np-sub-external::before,.np-contact-line-link::before,.nepoc-text-link::after,.np-sub-external::after,.np-contact-line-link::after { position: absolute; right: 12px; bottom: 5px; left: 12px; height: 2px; content: ""; pointer-events: none; }
.nepoc-text-link::before,.np-sub-external::before,.np-contact-line-link::before { background: var(--df-color-accent); }
.nepoc-text-link::after,.np-sub-external::after,.np-contact-line-link::after { background: var(--np-link-wipe-color); transform: scaleX(0); transform-origin: left center; transition: transform 220ms ease; }
.nepoc-text-link:hover::after,.nepoc-text-link:focus-visible::after,.np-sub-external:hover::after,.np-sub-external:focus-visible::after,.np-contact-line-link:hover::after,.np-contact-line-link:focus-visible::after { transform: scaleX(1); }
.nepoc-button { border-color: var(--df-color-accent); border-radius: var(--df-radius-control); background: var(--df-color-accent); color: var(--df-color-primary-hover); transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms ease; }
.nepoc-button:hover, .nepoc-button:focus-visible { border-color: #20394d; background: #20394d; color: #fff; transform: translateY(-3px); }
.nepoc-button:hover, .nepoc-button:focus-visible { text-decoration: none; }
.nepoc-button div div { display: inline-block; margin-left: 16px; transition: transform 220ms ease; }
.nepoc-button:hover div div, .nepoc-button:focus-visible div div { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .nepoc-button, .nepoc-button div div { transition: none; } .nepoc-button:hover, .nepoc-button:focus-visible, .nepoc-button:hover div div, .nepoc-button:focus-visible div div { transform: none; } }
.nepoc-footer { padding-top: 60px; background: #1b3043; color: #fff; }
.nepoc-footer-inner { display: flex; justify-content: space-between; gap: 50px; padding-bottom: 52px; }
.nepoc-footer-inner p { max-width: 33em; font-size: 13px; }
.nepoc-footer-inner .nepoc-footer-logo { margin: 0 0 20px; font-size: 29px; font-weight: 900; letter-spacing: -.07em; }
.nepoc-footer-logo div { display: inline; color: var(--df-color-accent); }
.nepoc-footer-links { display: flex; flex-wrap: wrap; align-content: start; gap: 15px 24px; max-width: 380px; }
.nepoc-footer-links a { display: inline-flex; position: relative; top: 0; align-items: center; padding: 6px 10px; border-radius: var(--df-radius-control); color: #fff; font-size: 13px; text-decoration: none; transition: background-color 220ms ease, color 220ms ease, top 220ms ease; }
.nepoc-footer-links a:hover,.nepoc-footer-links a:focus-visible { text-decoration: none; top: -3px; }
.nepoc-footer-bottom { display: flex; justify-content: space-between; padding: 14px 0; border-top: 1px solid #ffffff33; font-size: 11px; letter-spacing: .08em; }
@media (max-width: 700px) { .nepoc-footer-inner { flex-direction: column; gap: 28px; } .nepoc-footer-bottom { gap: 16px; flex-wrap: wrap; } }

/* Lower pages carry the top page's typography, flat surfaces, photo edge and motion rhythm. */
.np-sub{color:#20394d}
.np-sub-hero{position:relative;display:flex;align-items:center;min-height:420px;overflow:hidden;padding:clamp(48px,5vw,72px) 0;border:0;border-bottom:1px solid #e4e9e6;background:#f8faf7}
.np-sub-hero::before{position:absolute;inset:0 0 0 42%;background-image:linear-gradient(#20394d14 1px,transparent 1px),linear-gradient(90deg,#20394d14 1px,transparent 1px);background-size:24px 24px;content:"";mask-image:linear-gradient(90deg,transparent,#000 75%);pointer-events:none}
.np-sub-hero-photo{position:absolute;inset:0 0 0 52%;overflow:hidden}
.np-sub-hero-photo img{display:block;width:100%;height:100%;object-fit:cover}
.np-sub-hero-photo::after{position:absolute;inset:0;background:linear-gradient(90deg,#f8faf7 0%,#f8faf700 55%);content:""}
.np-sub-hero .df-container{position:relative;width:calc(100% - (var(--df-gutter) * 2));max-width:var(--df-content-max);padding-right:0;padding-left:0}
.np-sub-kicker{display:flex;align-items:center;gap:13px;margin:0 0 20px;color:#20394d;font-size:11px;font-weight:800;letter-spacing:.12em}
.np-sub-kicker::before{width:26px;height:2px;flex:none;background:#f05a25;content:""}
.np-sub-hero h1{max-width:560px;color:#20394d;font-family:var(--df-font-heading);font-size:var(--df-font-size-h1);letter-spacing:-.065em;line-height:1.28}
@media (max-width:850px){.np-sub-hero{min-height:0;flex-direction:column;align-items:stretch;padding:0}.np-sub-hero::before{inset:0 0 190px 42%}.np-sub-hero .df-container{order:1;padding-top:52px;padding-bottom:54px}.np-sub-hero-photo{position:relative;inset:auto;width:100%;height:190px;order:2}.np-sub-hero-photo::after{display:none}}
.np-sub-section{padding:clamp(82px,8vw,126px) 0}
.np-sub-section-alt{background:#f4f1e7}
.np-sub-section h2,.np-sub-cta h2{margin-bottom:23px;font-family:var(--df-font-heading);font-size:clamp(28px,3vw,42px);letter-spacing:-.05em;line-height:1.35}
.np-sub-intro{max-width:62em;margin-bottom:clamp(38px,5vw,60px)}
.np-sub-cards,.np-sub-points{gap:clamp(16px,2vw,28px)}
.np-sub-card{display:flex;min-height:250px;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:clamp(25px,2.5vw,36px);border:0;background:#f2f5f5}
.np-sub-card:nth-child(2){background:#e9eef0}
.np-sub-card h3{color:inherit;font-size:clamp(20px,1.8vw,24px);line-height:1.4}
.np-sub-card p:last-child{color:inherit}
.np-sub-number{position:absolute;top:15px;right:24px;margin:0;color:#20394d13;font-family:var(--df-font-heading);font-size:clamp(78px,9vw,112px);font-weight:900;letter-spacing:-.08em;line-height:1}
.np-sub-points>div{padding:6px 26px 6px 22px;border-left:2px solid #f05a25}
.np-sub-point-title{font-size:20px}
.np-sub-split{gap:clamp(36px,5vw,84px)}
.np-sub-image{position:relative;min-width:0;overflow:visible}
.np-sub-image::before{position:absolute;z-index:1;top:-10px;right:-10px;width:32%;height:38%;border-top:8px solid #f05a25;border-right:8px solid #f05a25;content:"";pointer-events:none}
.np-sub-image img{width:100%;aspect-ratio:1.36;object-fit:cover}
.np-sub-tags{gap:12px}
.np-sub-tags>div{padding:17px 23px;border:1px solid #d6dfdd;background:#fff}
.np-sub-quote{padding-left:clamp(22px,3vw,38px);border-left:4px solid #f05a25}
.np-sub-details{margin:38px 0}
.np-sub-details>div{border-color:#cbd5d8}
.np-sub-external{padding:8px 12px 14px;border:0;border-radius:var(--df-radius-control);background:transparent;transition:background-color .22s ease,color .22s ease,top .22s ease}
.np-sub-external:hover,.np-sub-external:focus-visible{text-decoration:none;top:-3px}
.np-sub .nepoc-text-link>div>div{display:inline-block;transition:transform .25s ease}
.np-sub .nepoc-text-link:hover>div>div,.np-sub .nepoc-text-link:focus-visible>div>div{transform:translateX(5px)}
.np-sub-cta{position:relative;overflow:hidden;padding:clamp(72px,7vw,108px) 0;background:#20394d}
.np-sub-cta::before{position:absolute;right:3%;bottom:0;color:#ffffff12;content:"CONTACT";font-family:var(--df-font-heading);font-size:clamp(76px,12vw,170px);font-weight:900;letter-spacing:0;line-height:1;pointer-events:none}
.np-sub-cta .df-container{position:relative}
.np-sub-cta .np-sub-kicker{color:#fff}
.np-sub-cta h2{color:#fff}
.np-sub-cta .nepoc-button,.np-sub .np-form-submit{border-color:#ed762a;background:#ed762a;color:#20394d;transition:background-color .22s ease,border-color .22s ease,color .22s ease,transform .22s ease}
.np-sub-cta .nepoc-button:hover,.np-sub-cta .nepoc-button:focus-visible{border-color:#fff;background:#fff;color:#20394d;transform:translateY(-3px)}
.np-sub .np-form-submit:hover,.np-sub .np-form-submit:focus-visible{border-color:#20394d;background:#20394d;color:#fff;transform:translateY(-3px)}
.np-sub .np-form-submit::after{display:inline-block;margin-left:14px;content:"→";transition:transform .22s ease}
.np-sub .np-form-submit:hover::after,.np-sub .np-form-submit:focus-visible::after{transform:translateX(4px)}
.np-contact-methods>div{border:0;background:#f2f5f5}
.np-contact-phone,.np-sub-details a[href^="tel:"]{display:inline-block;position:relative;top:0;padding:4px 8px;border-radius:var(--df-radius-control);color:#20394d;text-decoration:none;transition:background-color .22s ease,color .22s ease,top .22s ease}
.np-contact-phone:hover,.np-contact-phone:focus-visible,.np-sub-details a[href^="tel:"]:hover,.np-sub-details a[href^="tel:"]:focus-visible{text-decoration:none;top:-3px}
.nepoc-main h1,.nepoc-main h2,.nepoc-main h3,.np-sub-hero h1,.np-sub-section h2,.np-sub-section h3,.np-sub-section h4,.np-business-quality h2,.np-sub-cta h2,.np-sub-point-title{font-weight:var(--df-font-weight-heading)}
@media (prefers-reduced-motion:reduce){
  .nepoc-text-link,.nepoc-text-link div div,.nepoc-text-link::after,.np-sub-external,.np-sub-external::after,.np-contact-line-link,.np-contact-line-link::after,.nepoc-footer-links a,.np-sub-cta .nepoc-button,.np-sub .np-form-submit,.np-sub .np-form-submit::after,.np-contact-phone,.np-sub-details a[href^="tel:"]{transition:none}
  .nepoc-text-link:hover div div,.nepoc-text-link:focus-visible div div,.np-sub-cta .nepoc-button:hover,.np-sub-cta .nepoc-button:focus-visible,.np-sub .np-form-submit:hover,.np-sub .np-form-submit:focus-visible,.np-sub .np-form-submit:hover::after,.np-sub .np-form-submit:focus-visible::after{transform:none}
}