/* SERVICEページ Figma 347:4381 */
.p-service{background:var(--color-base)}

.p-service-hero {
  padding: clamp(40px, 5vw, 64px) 0 clamp(48px, 6vw, 80px);
  min-height: 319px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.p-service-hero .container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.p-service-hero__title {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(64px, 12vw, 150px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-main);
}

.p-service-hero__lead {
  font-weight: 600;
  font-size: 16px;
  line-height: 28px;
  color: var(--color-main);
  max-width: 908px;
}

.p-service-hero__breadcrumb {
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  color: var(--color-breadcrumb);
}

.p-service-hero__breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.p-service-tabs-wrap {
  padding-bottom: clamp(80px, 12.4vw, 198px);
}

.p-service-tabs {
  display: flex;
  gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.p-service-tabs__btn {
  flex: 1;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-main);
  border: none;
  font-size: 16px;
  font-weight: 600;
  line-height: 28px;
  color: var(--color-base);
  letter-spacing: 0;
  cursor: pointer;
  transition: opacity 0.2s;
}

.p-service-tabs__btn:hover {
  opacity: 0.85;
}

.p-service-tabs__btn.is-active {
  background: var(--color-white);
  color: var(--color-main);
  position: relative;
  z-index: 3;
}

.p-service-panel[hidden]{display:none}
.p-service-panel {
  background: var(--color-white);
  max-width: 1200px;
  margin: -1px auto 0;
  position: relative;
  z-index: 2;
  min-height: 763px;
  padding: 44px 25px clamp(48px, 6vw, 64px);
}

.p-service-panel__lead {
  max-width: 1082px;
  margin: 0 auto 42px;
  font-weight: 600;
  font-size: 16px;
  line-height: 28px;
  color: var(--color-accent);
  text-align: center;
}

/* Frame 40: 375×494 cards, gap 12px (347:4411) */
.p-service-panel__cards {
  display: grid;
  gap: 12px;
  max-width: 1149px;
  margin: 0 auto;
}

.p-service-panel__cards--three {
  grid-template-columns: repeat(3, 375px);
}

.p-service-panel__cards--two {
  grid-template-columns: repeat(2, 375px);
  max-width: 762px;
}

/* Frame 37 (347:4412) 375×494 — navy head + chevron, white body */
.p-service-card {
  width: 375px;
  height: 494px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-main);
  background: var(--color-white);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: opacity 0.2s;
}

.p-service-card:hover {
  opacity: 0.92;
}

.p-service-card__head {
  --head-notch: 36px;
  height: 174px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 24px calc(20px + var(--head-notch));
  background: var(--color-accent);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--head-notch)),
    50% 100%,
    0 calc(100% - var(--head-notch))
  );
  text-align: center;
}

.p-service-card__issue {
  margin: 0;
  max-width: 300px;
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.42px;
  color: var(--color-white);
}

.p-service-card__body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 24px 28px;
  background: var(--color-white);
  text-align: center;
  min-height: 0;
}

.p-service-card__title {
  margin: 0 0 16px;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0.6px;
  color: var(--color-accent);
}

.p-service-card__desc {
  margin: 0;
  flex: 1;
  max-width: 320px;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.42px;
  color: var(--color-accent);
}

.p-service-card__btn {
  flex-shrink: 0;
  align-self: center;
  margin-top: auto;
}


/* CONTACT CTA Figma: Group 30 (347:4391) */
.p-contact-cta {
  background: var(--color-base);
  padding-bottom: clamp(120px, 12.4vw, 198px);
}

.p-contact-cta__inner {
  position: relative;
  max-width: 1298px;
  min-height: 497px;
  margin: 0 auto;
  background: var(--color-accent);
}

.p-contact-cta__title {
  position: absolute;
  top: 58px;
  left: 71px;
  margin: 0;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 100px;
  letter-spacing: -3px;
  line-height: 1;
  color: var(--color-base);
}

.p-contact-cta__desc {
  position: absolute;
  top: 187px;
  left: 74px;
  margin: 0;
  max-width: 792px;
  font-weight: 600;
  font-size: 17px;
  line-height: 31px;
  letter-spacing: 1.36px;
  color: var(--color-base);
}

.p-contact-cta__btn {
  position: absolute;
  right: 74px;
  bottom: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.p-contact-cta__btn:hover {
  opacity: 0.85;
}




/* SERVICE詳細 Figma 347:4705 */
.p-service-detail-page{background:var(--color-base)}
.p-service-detail-hero{padding:clamp(40px,5vw,64px) 0 clamp(32px,4vw,48px)}
.p-service-detail-hero .container{display:flex;flex-direction:column;gap:24px;max-width:1173px;padding: 0;}
.p-service-detail-hero__title{font-weight:700;font-size:clamp(32px,4vw,56px);line-height:1.35;color:var(--color-main);margin:0}
.p-service-detail-hero__lead{font-weight:600;font-size:16px;line-height:28px;color:var(--color-main);max-width:908px;margin:0}
.p-service-detail-hero__breadcrumb{font-size:16px;line-height:28px;color:var(--color-breadcrumb);margin:0}
.p-service-detail-hero__breadcrumb a{color:inherit;text-decoration:none}
.p-service-detail-wrap{padding-bottom:clamp(80px,10vw,120px)}
.p-service-detail{max-width:1200px;margin:0 auto}
.p-service-detail__divider{border:none;border-top:1px solid var(--color-main);margin:0}
.p-service-detail-intro{padding:clamp(40px,5vw,56px) 0 clamp(48px,6vw,72px)}
.p-service-detail-intro__title{font-weight:600;font-size:clamp(22px,2.5vw,28px);line-height:40px;color:var(--color-accent);margin:0 0 33px;max-width:680px}
.p-service-detail-intro__body{font-weight:400;font-size:16px;line-height:28px;color:var(--color-text);margin:0}
.p-service-detail-divider{display:flex;align-items:center;justify-content:center;margin:clamp(40px,5vw,56px) 0}
.p-service-detail-divider::before,.p-service-detail-divider::after{content:"";flex:1;height:1px;background:var(--color-main);max-width:491px}
.p-service-detail-divider__circle{width:106px;height:106px;border:1px solid var(--color-main);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:0 24px;background:var(--color-white);position:relative}
.p-service-detail-divider__circle::after{content:"";display:block;width:10px;height:10px;border-right:2px solid var(--color-main);border-bottom:2px solid var(--color-main);transform:rotate(45deg);margin-top:-4px}
.p-service-detail-section{margin-bottom:clamp(48px,6vw,72px)}
.p-service-detail-section__head{text-align:center;margin-bottom:clamp(32px,4vw,48px)}
.p-service-detail-section__label{font-family:var(--font-en);font-weight:600;font-size:14px;line-height:1;letter-spacing:.15em;color:var(--color-main);margin:0 0 12px;text-transform:uppercase}
.p-service-detail-section__title{font-weight:600;font-size:clamp(22px,2.5vw,28px);line-height:40px;color:var(--color-accent);margin:0}
.p-service-detail-rows{display:flex;flex-direction:column;gap:10px}
.p-service-detail-row{display:grid;grid-template-columns:388px minmax(0,1fr);gap:clamp(24px,4vw,52px);min-height:228px;align-items:stretch;background:var(--color-white)}
.p-service-detail-row__media{overflow:hidden;background:var(--color-gray-placeholder);min-height:228px}
.p-service-detail-row__media img{width:100%;height:100%;object-fit:cover;display:block;min-height:228px}
.p-service-detail-row__body{display:flex;flex-direction:column;justify-content:center;padding:clamp(16px,2vw,28px) clamp(16px,2vw,28px) clamp(16px,2vw,28px) 0}
.p-service-detail-row__title{font-weight:600;font-size:clamp(18px,2vw,22px);line-height:32px;color:var(--color-accent);margin:0 0 12px}
.p-service-detail-row__text{font-weight:400;font-size:16px;line-height:28px;color:var(--color-text);margin:0}
.p-service-detail-achieve{display:grid;grid-template-columns:388px minmax(0,1fr);gap:clamp(24px,4vw,52px);align-items:start}
.p-service-detail-achieve__screenshot{overflow:hidden;width:100%;aspect-ratio:388/304;background:var(--color-gray-placeholder);border:1px solid rgba(47,111,181,.15)}
.p-service-detail-achieve__screenshot img{width:100%;height:100%;object-fit:cover;display:block}
.p-service-detail-achieve__list{display:flex;flex-direction:column}
.p-service-detail-achieve__item{padding:20px 0;border-top:1px solid rgba(47,111,181,.35)}
.p-service-detail-achieve__item:last-child{border-bottom:1px solid rgba(47,111,181,.35)}
.p-service-detail-achieve__item-title{font-weight:600;font-size:16px;line-height:28px;color:var(--color-accent);margin:0 0 8px}
.p-service-detail-achieve__item-text{font-weight:400;font-size:14px;line-height:24px;color:var(--color-text);margin:0}
.p-service-detail-flow{overflow:visible}
.p-service-detail-flow__track{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;gap:clamp(4px,1vw,8px);width:100%;align-items:stretch}
.p-service-detail-flow__step{min-width:0;min-height:261px;background:var(--color-white);border:1px solid rgba(47,111,181,.12);box-shadow:0 1px 0 rgba(13,42,82,.04);padding:clamp(16px,2vw,28px) clamp(10px,1.2vw,20px);display:flex;flex-direction:column;gap:12px;text-align:center}
.p-service-detail-flow__num{font-family:var(--font-en);font-weight:700;font-size:clamp(20px,2vw,24px);line-height:1;color:var(--color-main);margin:0}
.p-service-detail-flow__title{font-weight:700;font-size:clamp(14px,1.4vw,16px);line-height:24px;color:var(--color-accent);margin:0}
.p-service-detail-flow__desc{font-weight:400;font-size:clamp(12px,1.2vw,13px);line-height:22px;color:var(--color-text);margin:0;flex:1}
.p-service-detail-flow__arrow{align-self:center;flex-shrink:0;width:0;height:0;border-top:clamp(10px,1.2vw,14px) solid transparent;border-bottom:clamp(10px,1.2vw,14px) solid transparent;border-left:clamp(12px,1.4vw,16px) solid var(--color-main)}
.p-service-detail-faq__list{max-width:912px;margin:0 auto;display:flex;flex-direction:column}
.p-service-detail-faq__item{border-top:1px solid rgba(47,111,181,.35)}
.p-service-detail-faq__item:last-child{border-bottom:1px solid rgba(47,111,181,.35)}
.p-service-detail-faq__question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;background:none;border:none;text-align:left;cursor:pointer;font-weight:600;font-size:16px;line-height:28px;color:var(--color-accent)}
.p-service-detail-faq__question:hover{opacity:.85}
.p-service-detail-faq__icon{flex-shrink:0;width:12px;height:12px;border-right:2px solid var(--color-main);border-bottom:2px solid var(--color-main);transform:rotate(45deg);transition:transform .2s;margin-top:-4px}
.p-service-detail-faq__item.is-open .p-service-detail-faq__icon{transform:rotate(-135deg);margin-top:4px}
.p-service-detail-faq__answer{display:none;padding:0 0 20px;font-weight:400;font-size:16px;line-height:28px;color:var(--color-text)}
.p-service-detail-faq__item.is-open .p-service-detail-faq__answer{display:block}