/* 生成りと透ける白を重ね、緑は文字と細い線に使います。 */
:root {
  --paper: #faf9f5;
  --mist: #eef3ed;
  --line: rgba(74, 105, 85, .18);
}

body {
  background: linear-gradient(135deg, #fffdf8, #f6f9f6 48%, #faf8f2);
}

.site-header {
  background: rgba(255, 255, 253, .82);
  border-bottom-color: rgba(83, 110, 90, .14);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transition: background .35s, box-shadow .35s;
}

.site-header.is-scrolled {
  background: rgba(255, 255, 253, .94);
  box-shadow: 0 5px 28px rgba(47, 73, 54, .06);
}

.demo-bar {
  color: #466050;
  background: linear-gradient(100deg, rgba(233, 240, 230, .66), rgba(255, 255, 255, .5));
  border-bottom: 1px solid rgba(83, 110, 90, .09);
}

.main-nav a:not(.nav-contact) {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: left bottom 6px;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: color .25s, background-size .3s;
}

.main-nav a:not(.nav-contact):hover {
  background-size: 100% 1px;
}

.main-nav .nav-contact,
.main-nav .nav-contact[aria-current=page] {
  color: var(--accent);
  border: 1px solid rgba(155, 75, 50, .35);
  background: linear-gradient(120deg, rgba(255, 255, 255, .8), rgba(250, 237, 225, .6));
  box-shadow: none;
  border-radius: 3px;
  transition: background .3s, box-shadow .3s;
}

.main-nav .nav-contact:hover {
  background: rgba(250, 237, 225, .8);
  box-shadow: 0 4px 16px rgba(139, 84, 51, .08);
}

.button,
.button.light {
  color: var(--green);
  background: linear-gradient(120deg, rgba(255, 255, 255, .9), rgba(242, 247, 238, .56));
  border: 1px solid rgba(53, 89, 66, .35);
  border-radius: 3px;
  box-shadow: 0 4px 18px rgba(51, 82, 59, .03);
  transition: transform .3s, box-shadow .3s, background .3s, border-color .3s;
}

.button:hover,
.button.light:hover {
  color: var(--green);
  background: rgba(255, 255, 255, .98);
  border-color: rgba(53, 89, 66, .65);
  box-shadow: 0 8px 24px rgba(51, 82, 59, .1);
  transform: translateY(-2px);
}

.button.contact {
  color: var(--accent);
  border-color: rgba(155, 75, 50, .4);
  background: linear-gradient(120deg, rgba(255, 255, 255, .95), rgba(250, 237, 225, .65));
}

.button.contact:hover {
  color: var(--accent);
  background: #fff8f1;
  border-color: var(--accent);
}

.hero {
  color: var(--green);
  background: #edf1e8;
}

.hero:before {
  background: linear-gradient(90deg, rgba(253, 253, 248, .95), rgba(253, 253, 248, .78) 31%, rgba(253, 253, 248, .18) 61%, transparent 84%);
}

.hero h1 {
  text-shadow: none;
}

.hero-label,
.hero-subtitle {
  color: #344e3d;
}

.title-line:after {
  background: #17241d;
}

.hero-copy .button {
  border-color: rgba(53, 89, 66, .4);
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hero-copy .button:hover {
  background: #fff;
}

.hero-footer,
.hero-caption {
  color: #344e3d;
  background: rgba(255, 255, 250, .82);
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 2px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.js .hero.is-ready .hero-photo {
  animation: photo-arrival 1.6s cubic-bezier(.2, .65, .25, 1) both;
}

@keyframes photo-arrival {
  from { transform: scale(1.025); }
  to { transform: scale(1); }
}

.service-grid {
  background: rgba(255, 255, 255, .65);
}

.service-tile {
  transition: background .35s;
}

.service-tile:hover {
  background: rgba(233, 241, 228, .4);
}

.service-tile img,
.circle-icon {
  transition: transform .4s, box-shadow .4s;
}

.service-tile:hover img,
.strength-item:hover .circle-icon {
  transform: translateY(-4px);
}

.strengths {
  background: linear-gradient(115deg, rgba(255, 255, 255, .9), rgba(246, 250, 245, .48));
  border-block: 1px solid rgba(108, 126, 97, .08);
}

.craftsman:before {
  background: radial-gradient(ellipse, rgba(224, 233, 216, .46), rgba(247, 245, 235, .2) 65%, transparent 72%);
}

.circle-icon {
  background: linear-gradient(130deg, rgba(255, 255, 255, .9), rgba(238, 245, 233, .38));
  border-color: rgba(129, 152, 113, .28);
}

.strength-item:hover .circle-icon {
  box-shadow: 0 7px 22px rgba(53, 89, 66, .08);
}

.split-photo img,
.company-photo img,
.detail-main-image img,
.phase-grid img,
.case-image {
  border-radius: 4px;
}

.split-photo:after {
  background: linear-gradient(135deg, rgba(214, 205, 180, .4), rgba(226, 239, 218, .15));
}

.works {
  background: linear-gradient(150deg, rgba(255, 255, 255, .84), rgba(248, 252, 247, .5));
  border-block: 1px solid rgba(108, 126, 97, .08);
}

.carousel-button {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(90, 118, 82, .28);
  transition: background .25s, box-shadow .25s;
}

.carousel-button:hover:not(:disabled) {
  background: #fff;
  box-shadow: 0 4px 15px rgba(53, 89, 66, .1);
}

.case-image img {
  transition: transform .8s cubic-bezier(.2, .65, .25, 1);
}

.case-card:hover .case-image img {
  transform: scale(1.035);
}

.case-tag,
.demo-pill {
  background: rgba(255, 255, 253, .89);
  border: 1px solid rgba(81, 112, 86, .14);
  border-radius: 2px;
}

.case-tag {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.company-section:before {
  background: linear-gradient(135deg, rgba(223, 237, 217, .54), rgba(255, 255, 255, .1));
}

.company-section:after {
  background: linear-gradient(115deg, rgba(219, 207, 179, .28), rgba(255, 255, 255, .35));
  opacity: 1;
  border: 1px solid rgba(213, 200, 168, .2);
}

.company-copy {
  background: rgba(255, 255, 255, .58);
  padding: 35px 30px;
  border: 1px solid rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.contact-band {
  color: var(--ink);
  border-block: 1px solid rgba(108, 126, 97, .12);
  background: linear-gradient(110deg, rgba(255, 255, 253, .95), rgba(250, 253, 248, .86)), url("素材/写真/事例4-完成.png") center 65% / cover;
}

.contact-band h2,
.contact-band .eyebrow {
  color: var(--green);
}

.contact-copy p:last-child,
.contact-demo {
  color: #526553;
}

.contact-actions .contact-method {
  color: var(--green);
  border-color: rgba(53, 89, 66, .27);
  background: rgba(255, 255, 255, .65);
  border-radius: 4px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform .3s, box-shadow .3s, background .3s;
}

.contact-actions a.contact-method {
  color: var(--accent);
  border-color: rgba(155, 75, 50, .3);
  background: linear-gradient(120deg, rgba(255, 255, 255, .8), rgba(253, 240, 224, .65));
}

.contact-actions .contact-method:hover,
.contact-actions a.contact-method:hover {
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 9px 28px rgba(69, 88, 61, .09);
  transform: translateY(-3px);
}

.site-footer {
  background: rgba(255, 255, 250, .44);
}

.page-heading {
  border-bottom-color: rgba(145, 162, 130, .25);
}

.demo-note,
.page-cta,
.confirm-success,
.no-script {
  background: linear-gradient(125deg, rgba(255, 255, 255, .8), rgba(231, 241, 225, .44));
  border: 1px solid rgba(115, 146, 99, .21);
  border-radius: 3px;
}

.demo-note {
  border-left: 2px solid rgba(61, 96, 65, .55);
}

.service-detail>img,
.representative,
.route-card,
.price-table {
  background: rgba(255, 255, 255, .64);
}

.price-table thead {
  color: var(--green);
  background: linear-gradient(100deg, rgba(230, 239, 222, .6), rgba(255, 255, 255, .74));
}

.price-table thead th {
  border-block: 1px solid rgba(81, 112, 86, .2);
}

.representative,
.route-card {
  border: 1px solid rgba(115, 146, 99, .18);
  border-radius: 4px;
}

.required {
  color: var(--green);
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(81, 112, 86, .3);
  border-radius: 2px;
}

.field input,
.field select,
.field textarea {
  background: rgba(255, 255, 255, .8);
  border-color: rgba(72, 106, 78, .38);
  border-radius: 3px;
}

.phone-dialog {
  background: rgba(255, 255, 252, .96);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 4px;
  box-shadow: 0 15px 60px rgba(47, 73, 54, .15);
}

.phone-dialog::backdrop {
  background: rgba(27, 49, 33, .2);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* 表示済みの内容を再び隠さない、初回だけのスクロール表示。 */
.scroll-reveal {
  transition: opacity .65s cubic-bezier(.2, .65, .25, 1), transform .65s cubic-bezier(.2, .65, .25, 1);
  transition-delay: var(--reveal-delay, 0s);
}

.scroll-reveal.is-pending {
  opacity: 0;
  transform: translateY(22px);
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 1020px) {
  .main-nav {
    background: rgba(255, 255, 252, .97);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 15px 30px rgba(47, 73, 54, .08);
  }

  .price-table { background: transparent; }
  .price-table tr { background: rgba(255, 255, 255, .76); border-radius: 4px; }
}

@media (max-width: 760px) {
  .hero:before {
    background: linear-gradient(0deg, rgba(253, 253, 248, .99), rgba(253, 253, 248, .92) 35%, rgba(253, 253, 248, .38) 61%, transparent 90%);
  }

  .hero-footer { left: 14px; font-size: 11px; padding: 3px 6px; }
  .hero-caption { right: 14px; font-size: 10px; padding: 3px 6px; letter-spacing: 0; }
  .company-copy { padding: 25px 22px; }
  .contact-band { background-position: 63% center; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal.is-pending,
  .scroll-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-photo,
  .button:hover,
  .service-tile:hover img,
  .strength-item:hover .circle-icon,
  .case-card:hover .case-image img,
  .contact-actions .contact-method:hover {
    transform: none !important;
  }
}

@media print {
  .scroll-reveal.is-pending { opacity: 1; transform: none; }
}