/* ww-service.css — サービス紹介.html 由来。ページラッパー .ww-page-service 配下にスコープ済み */

:root {
  --ww-ink:#25221f;
  --ww-muted:#716963;
  --ww-paper:#fffaf4;
  --ww-white:#fff;
  --ww-line:rgba(65,48,38,.16);
  --ww-orange:#f47b35;
  --ww-orange-dark:#c74f18;
  --ww-cream:#fff0dc;
  --ww-yellow:#ffd85a;
  --ww-pink:#ffb8a1;
  --ww-max:1180px;
  --ww-radius:24px;
  --ww-shadow:0 22px 58px rgba(93,52,26,.12);
}
.ww-page-service,
.ww-page-service * {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
}
body.ww-body-service {
  margin:0;
  color:var(--ww-ink);
  background:var(--ww-paper);
  font-family:"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
.ww-page-service a {
  color:inherit;
  text-decoration:none;
}
.ww-page-service button {
  font:inherit;
}
.ww-page-service .container {
  width:min(calc(100% - 48px),var(--ww-max));
  margin-inline:auto;
}
.ww-page-service .subhero {
  position:relative;
  overflow:hidden;
  padding:172px 0 92px;
  border-bottom:1px solid rgba(244,123,53,.16);
  background:radial-gradient(circle at 12% 25%,rgba(255,216,90,.3),transparent 16%),radial-gradient(circle at 88% 72%,rgba(244,123,53,.14),transparent 24%),linear-gradient(rgba(244,123,53,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(244,123,53,.055) 1px,transparent 1px),var(--ww-paper);
  background-size:auto,auto,72px 72px,72px 72px,auto;
}
.ww-page-service .subhero::after {
  content:"";
  position:absolute;
  width:min(40vw,490px);
  aspect-ratio:1;
  right:-9vw;
  top:-13vw;
  border:2px solid rgba(37,34,31,.2);
  border-radius:50%;
  box-shadow:0 0 0 30px rgba(244,123,53,.06),0 0 0 65px rgba(255,216,90,.09);
}
.ww-page-service .hero-label {
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 23px;
  padding:7px 14px;
  border:1px solid var(--ww-ink);
  border-radius:99px;
  background:#fff;
  box-shadow:5px 5px 0 var(--ww-yellow);
  font-size:11px;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.ww-page-service .hero-label::before {
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--ww-orange);
}
.ww-page-service .subhero h1 {
  position:relative;
  z-index:1;
  margin:0;
  font-size:clamp(60px,9.5vw,132px);
  line-height:.9;
  letter-spacing:-.075em;
}
.ww-page-service .subhero h1 span {
  display:block;
  color:var(--ww-orange);
  font-size:.38em;
  line-height:1.15;
  letter-spacing:-.045em;
  margin-top:20px;
}
.ww-page-service .hero-intro {
  position:relative;
  z-index:1;
  max-width:610px;
  margin:30px 0 0;
  color:#514941;
  font-size:clamp(15px,1.35vw,18px);
  font-weight:600;
}
.ww-page-service .section {
  position:relative;
  padding:112px 0;
}
.ww-page-service .section-head {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:52px;
  align-items:end;
  margin-bottom:52px;
}
.ww-page-service .eyebrow {
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 14px;
  color:var(--ww-orange-dark);
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.ww-page-service .eyebrow::before {
  content:"";
  width:32px;
  height:1px;
  background:currentColor;
}
.ww-page-service .section-title {
  margin:0;
  font-size:clamp(36px,4.2vw,56px);
  line-height:1;
  letter-spacing:-.055em;
  white-space:nowrap;
}
.ww-page-service .section-lead {
  max-width:610px;
  margin:0;
  color:var(--ww-muted);
  font-size:15px;
}
.ww-page-service .service-primary {
  background:#fffdf9;
}
.ww-page-service .service-primary::before,
.ww-page-service .class-section::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(rgba(244,123,53,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(244,123,53,.045) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent);
}
.ww-page-service .service-layout {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr);
  gap:52px;
  align-items:center;
  padding:54px;
  border:2px solid rgba(244,123,53,.28);
  border-radius:30px;
  background:rgba(255,255,255,.95);
  box-shadow:8px 8px 0 rgba(244,123,53,.1);
}
.ww-page-service .service-no {
  color:var(--ww-orange-dark);
  font-size:11px;
  font-weight:850;
  letter-spacing:.17em;
}
.ww-page-service .service-type {
  display:table;
  margin:13px 0 18px;
  padding:7px 12px;
  border:1px solid rgba(199,79,24,.28);
  border-radius:99px;
  color:var(--ww-orange-dark);
  background:#fff5e9;
  font-size:12px;
  font-weight:800;
}
.ww-page-service .service-name {
  margin:0 0 24px;
  font-size:clamp(34px,4.2vw,56px);
  line-height:1.05;
  letter-spacing:-.06em;
  white-space:nowrap;
}
.ww-page-service .service-copy {
  margin:0;
  color:#514941;
  font-size:clamp(15px,1.25vw,18px);
  line-height:2;
}
.ww-page-service .tag-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0;
  margin:30px 0 34px;
  list-style:none;
}
.ww-page-service .tag-list li {
  padding:6px 12px;
  border:1px solid rgba(199,79,24,.28);
  border-radius:99px;
  color:var(--ww-orange-dark);
  background:#fff8f1;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}
.ww-page-service .text-link {
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-size:13px;
  font-weight:850;
  border-bottom:2px solid var(--ww-yellow);
  padding-bottom:3px;
}
.ww-page-service .text-link span {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--ww-yellow);
  transition:transform .25s;
}
.ww-page-service .text-link:hover span {
  transform:translateX(4px);
}
.ww-page-service .service-visual {
  min-height:350px;
  display:grid;
  place-items:center;
  padding:28px;
  position:relative;
  overflow:hidden;
  border-radius:25px;
  border:2px solid rgba(244,123,53,.22);
  background:radial-gradient(circle at 82% 18%,rgba(255,216,90,.72) 0 11%,transparent 11.5%),linear-gradient(145deg,#fff3dd,#ffbd92);
  box-shadow:inset 0 0 0 7px rgba(255,255,255,.55),0 24px 58px rgba(180,75,22,.14);
}
.ww-page-service .service-visual img {
  display:block;
  width:min(100%,430px);
  max-height:330px;
  object-fit:contain;
  border-radius:18px;
  filter:drop-shadow(0 18px 24px rgba(75,34,11,.16));
}
.ww-page-service .visual-stamp {
  position:absolute;
  right:18px;
  bottom:18px;
  width:78px;
  height:78px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--ww-yellow);
  border:2px solid var(--ww-ink);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  text-align:center;
  line-height:1.3;
  transform:rotate(7deg);
}
.ww-page-service .class-section {
  background:linear-gradient(135deg,#fffaf4 0 62%,#fff0dc 62%);
}
.ww-page-service .class-section .service-layout {
  grid-template-columns:minmax(330px,.9fr) minmax(0,1.1fr);
}
.ww-page-service .class-section .service-visual {
  order:-1;
  background:linear-gradient(120deg,transparent 47%,rgba(244,123,53,.13) 47% 53%,transparent 53%),linear-gradient(145deg,#fffaf3,#ffe29d);
}
.ww-page-service .contact {
  padding:100px 0;
  overflow:hidden;
  background:linear-gradient(rgba(48,40,35,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(48,40,35,.08) 1px,transparent 1px),linear-gradient(135deg,#ffb36c 0%,#f47b35 58%,#ffd85a 100%);
  background-size:58px 58px,58px 58px,100% 100%;
}
.ww-page-service .contact::after {
  content:"CONTACT";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:rgba(255,255,255,.13);
  font-size:clamp(100px,20vw,280px);
  line-height:.8;
  font-weight:900;
  letter-spacing:-.08em;
  white-space:nowrap;
  pointer-events:none;
}
.ww-page-service .contact-inner {
  position:relative;
  z-index:1;
  max-width:820px;
  text-align:center;
}
.ww-page-service .contact .eyebrow {
  justify-content:center;
  color:var(--ww-ink);
}
.ww-page-service .contact h2 {
  margin:0 0 22px;
  font-size:clamp(42px,6vw,78px);
  line-height:1;
  letter-spacing:-.06em;
}
.ww-page-service .contact p {
  margin:0 auto 30px;
  color:#302823;
  font-weight:700;
}
.ww-page-service .button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  width:min(100%,460px);
  min-height:72px;
  padding:0 34px;
  border:3px solid #302823;
  border-radius:99px;
  color:#fff;
  background:#302823;
  box-shadow:8px 8px 0 rgba(255,255,255,.62);
  font-size:15px;
  font-weight:800;
  letter-spacing:.05em;
  transition:transform .25s,box-shadow .25s,background .25s,color .25s;
}
.ww-page-service .button .arrow {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--ww-yellow);
  color:var(--ww-ink);
  transition:transform .25s;
}
.ww-page-service .button:hover {
  transform:translate(4px,4px);
  color:#302823;
  background:#ffd85a;
  box-shadow:12px 12px 0 rgba(255,255,255,.72);
}
.ww-page-service .button:hover .arrow {
  transform:translateX(4px);
}
@media(max-width:900px) {
  .ww-page-service .section {
    padding:82px 0;
  }
  .ww-page-service .section-head {
    grid-template-columns:1fr;
    gap:18px;
  }
  .ww-page-service .service-layout,
  .ww-page-service .class-section .service-layout {
    grid-template-columns:1fr;
  }
  .ww-page-service .class-section .service-visual {
    order:0;
  }
  .ww-page-service .service-layout {
    padding:38px;
  }
}
@media(max-width:560px) {
  .ww-page-service .container {
    width:min(calc(100% - 30px),var(--ww-max));
  }
  .ww-page-service .subhero {
    padding:112px 0 62px;
    background-size:auto,auto,44px 44px,44px 44px,auto;
  }
  .ww-page-service .subhero h1 {
    font-size:16.5vw;
  }
  .ww-page-service .subhero h1 span {
    font-size:.46em;
    margin-top:15px;
  }
  .ww-page-service .hero-intro {
    margin-top:22px;
    font-size:14px;
  }
  .ww-page-service .subhero::after {
    width:220px;
    right:-100px;
    top:45px;
  }
  .ww-page-service .section {
    padding:62px 0;
  }
  .ww-page-service .section-head {
    margin-bottom:30px;
  }
  .ww-page-service .section-title {
    font-size:clamp(30px,10vw,40px);
  }
  .ww-page-service .service-layout {
    padding:25px 20px;
    gap:25px;
    border-radius:18px;
    box-shadow:5px 5px 0 rgba(244,123,53,.1);
  }
  .ww-page-service .service-name {
    font-size:clamp(27px,9vw,39px);
  }
  .ww-page-service .service-copy {
    font-size:14px;
    line-height:1.95;
  }
  .ww-page-service .tag-list {
    margin:23px 0 27px;
  }
  .ww-page-service .service-visual {
    min-height:220px;
    padding:18px;
    border-radius:15px;
  }
  .ww-page-service .service-visual img {
    max-height:220px;
  }
  .ww-page-service .visual-stamp {
    width:62px;
    height:62px;
    font-size:8px;
  }
  .ww-page-service .contact {
    padding:70px 0;
  }
  .ww-page-service .contact h2 {
    font-size:48px;
  }
  .ww-page-service .contact p {
    font-size:14px;
  }
}
@media(prefers-reduced-motion:reduce) {
  .ww-page-service,
  .ww-page-service *,
  .ww-page-service *::before,
  .ww-page-service *::after {
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}