/* ページ専用：TOP（index.html） */
/* ===== 土台（要素の初期値・ユーティリティ・表示アニメーション） ===== */
@keyframes grain {
  0% { transform:translate(0,0) }
  20% { transform:translate(-3%,2%) }
  40% { transform:translate(2%,-3%) }
  60% { transform:translate(-2%,-1%) }
  80% { transform:translate(3%,3%) }
  100% { transform:translate(0,0) }
}

@keyframes foil {
  0% { background-position:100% 0 }
  55%,100% { background-position:0 0 }
}

@keyframes resolve {
  0% { opacity:0;filter:blur(30px);transform:scale(1.05) }
  55% { opacity:1 }
  100% { opacity:1;filter:blur(0);transform:none }
}

@keyframes show {
  from { opacity:0;filter:blur(6px) }
}

@keyframes glow {
  to { transform:translate(-8%,-10%) scale(1.15) }
}

@keyframes wstreak {
  0%,100% { translate:0 -14% }
  50% { translate:0 14% }
}

/* ===== 土台（要素の初期値・ユーティリティ・表示アニメーション） ===== */
* {
  box-sizing: border-box;
}

@media (prefers-reduced-motion:reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--jp);
  color: #fff;
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

:lang(ja) {
  line-break: strict;
  font-feature-settings: "palt" 1;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

.grain {
  position: fixed;
  inset: -50%;
  z-index: 100;
  pointer-events: none;
  opacity: .045;
  background-image: var(--grain);
  animation: grain 1.2s steps(6) infinite;
}

#gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 2s ease;
}

html.gl #gl {
  opacity: 1;
}

.sp {
  display: none;
}

@media (max-width:768px) {
  .sp {
    display: inline;
  }
}

[data-rv] {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(6px);
  transition: opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1),filter 1.1s;
}

[data-rv].in {
  opacity: 1;
  transform: none;
  filter: none;
}

html.pv [data-rv],
html.nomo [data-rv] {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

/* ===== 文字組み ===== */
.sec-lead {
  word-break: auto-phrase;
  line-break: strict;
  margin: 26px 0 0;
  font-family: var(--min);
  font-size: clamp(14px,1.15vw,17px);
  line-height: 2.1;
  letter-spacing: .12em;
  color: rgba(255,255,255,.82);
}

.cap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  font: 400 11.5px/1 var(--en);
  letter-spacing: .34em;
  color: rgba(255,255,255,.75);
}

.cap::after {
  content: "";
  width: 56px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}

.cap--ink {
  color: var(--sub);
}

.sec-ttl {
  margin: 24px 0 0 -.05em;
  font-family: var(--min);
  font-weight: 600;
  font-size: clamp(34px,3.8vw,62px);
  line-height: 1.3;
  letter-spacing: .04em;
}

.sec-ttl--s {
  font-size: clamp(26px,2.4vw,38px);
  margin-top: 18px;
}

.sec-lead--ink {
  color: #3a3a3a;
  margin-top: 0;
}

.ct__in .cap {
  justify-content: center;
}

.ct__in .cap::before {
  content: "";
  width: 56px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}

.pr .cap,
.pr .cap--ink {
  color: rgba(255,255,255,.7);
}

.pr .sec-ttl {
  color: #fff;
}

.pr .sec-lead,
.pr .sec-lead--ink {
  color: rgba(255,255,255,.8);
}

.bg__head .sec-ttl {
  margin-top: 14px;
}

.bg__head .sec-lead {
  margin: 18px 0 0;
}

/* ===== 白いシートなどのレイアウト ===== */
.sheet {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border-radius: 36px 36px 0 0;
  margin-top: -36px;
}

@media (max-width:768px) {
  .sheet {
    border-radius: 24px 24px 0 0;
  }
}

/* ===== 部品 ===== */
.wills {
  list-style: none;
  margin: clamp(30px,5vh,60px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  position: relative;
  border-top: 0 !important;
}

@media (max-width:768px) {
  .wills {
    grid-template-columns: 1fr;
    margin-top: 22px;
  }
}

.wills a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  height: 100%;
  min-height: clamp(140px,19vh,190px);
  padding: 20px 24px 22px;
  border-right: 1px solid rgba(255,255,255,.28);
  transition: background .3s;
  overflow: hidden;
  isolation: isolate;
}

@media (max-width:768px) {
  .wills a {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-height: 0;
    padding: 13px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.28);
  }
}

.wills li:first-child a {
  padding-left: 0;
}

@media (max-width:768px) {
  .wills li:first-child a {
    padding-left: 0;
  }
}

.wills li:last-child a {
  border-right: 0;
}

.wills a:hover,
.wills a:focus-visible {
  outline: none;
  background: none;
}

.wills b {
  font: 400 12px/1 var(--en);
  letter-spacing: .24em;
  opacity: .85;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 22px;
  margin-left: -2px;
  border-radius: 999px;
  transition: background .35s,color .35s;
}

.wills span {
  flex: 1;
  font-size: clamp(15px,1.25vw,19px);
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .03em;
  transition: transform .5s cubic-bezier(.2,.7,.1,1);
}

@media (max-width:768px) {
  .wills span {
    font-size: 13.5px;
    line-height: 1.6;
  }
}

/* 見出しの左右の語（ロゴの img.w と名前が重なるため .hl の中に限定） */
.hl .w {
  display: inline-block;
  will-change: transform,opacity;
  opacity: var(--wo,1);
}

.w--l {
  transform: translate(calc(var(--sx,0px)*-1),calc(var(--sy,0px)*-1));
}

.w--r {
  transform: translate(var(--sx,0px),var(--sy,0px));
}

.vs__cap {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  font: 400 12px/1 var(--en);
  letter-spacing: .32em;
  color: var(--sub);
}

.vs__cap::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,.12);
}

@media (max-width:768px) {
  .wills span br {
    display: none;
  }
}

.u-center {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateY(-50%);
}

.u-scroll {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  text-align: center;
  bottom: clamp(30px,5vh,48px);
  margin: 0;
  font-family: var(--min);
  font-size: 12px;
  letter-spacing: .24em;
  color: rgba(255,255,255,.75);
  opacity: var(--fo,1);
  animation: show 1s 2.4s cubic-bezier(.2,.7,.2,1) backwards;
}

@media (max-width:768px) {
  .u-scroll {
    left: 0;
    right: 0;
    text-align: center;
    bottom: 104px;
  }
}

.u-sub {
  margin: clamp(22px,3.4vh,40px) 0 0;
  font-family: var(--min);
  font-size: clamp(14px,1.25vw,19px);
  letter-spacing: .24em;
  padding-left: .24em;
  color: rgba(255,255,255,.9);
  opacity: var(--fo,1);
  animation: show 1s 2s cubic-bezier(.2,.7,.2,1) backwards;
}

@media (max-width:768px) {
  .u-sub {
    font-size: 12.5px;
    letter-spacing: .1em;
    padding: 0 var(--pad);
  }
}

.wills li {
  transition: none;
  opacity: clamp(0,calc((var(--wi,0) - var(--d,0))*2.4),1);
  transform: translateY(calc((1 - clamp(0,calc((var(--wi,0) - var(--d,0))*2.4),1))*34px));
}

.wills li:nth-child(1) {
  --d: .18;
}

.wills li:nth-child(2) {
  --d: .24;
}

.wills li:nth-child(3) {
  --d: .30;
}

.wills li:nth-child(4) {
  --d: .36;
}

.wills a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform .6s cubic-bezier(.2,.7,.1,1);
}

.wills a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.02));
  opacity: 0;
  transition: opacity .5s;
}

.wills a:hover::before,
.wills a:focus-visible::before {
  transform: scaleX(1);
}

.wills a:hover::after,
.wills a:focus-visible::after {
  opacity: 1;
}

.wills a:hover b,
.wills a:focus-visible b {
  background: #fff;
  color: var(--red);
  opacity: 1;
}

.wills a:hover span {
  transform: translateX(4px);
}

.wills::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(255,255,255,.5);
  transform-origin: 0 0;
  transform: scaleX(clamp(0,calc((var(--wi,0) - .14)*2.2),1));
  opacity: clamp(0,calc((var(--wi,0) - .14)*4),1);
}

.csl span {
  word-break: auto-phrase;
  line-break: strict;
  font-family: var(--min);
  font-weight: 600;
  font-size: clamp(18px,1.9vw,28px);
  line-height: 1.6;
  letter-spacing: .04em;
}

@media (max-width:768px) {
  .csl span {
    font-size: 16.5px;
  }
}

.bgl__t {
  line-break: strict;
  flex: 1;
  font-family: var(--min);
  font-weight: 600;
  font-size: clamp(17px,1.45vw,22px);
  line-height: 1.7;
  letter-spacing: .04em;
  transition: color .4s;
  word-break: normal;
  text-wrap: wrap;
}

.csl li[data-rv]:nth-child(2) {
  transition-delay: .08s;
}

.csl li[data-rv]:nth-child(3) {
  transition-delay: .16s;
}

.csl {
  list-style: none;
  margin: clamp(56px,6vw,90px) 0 0;
  padding: 0;
  border-top: 1px solid #DDD;
}

.csl li {
  border-bottom: 1px solid #DDD;
}

.csl a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,4fr) minmax(0,7fr) 56px;
  gap: clamp(20px,3vw,60px);
  align-items: center;
  padding: clamp(30px,3.4vw,48px) clamp(0px,1.4vw,24px);
  isolation: isolate;
  transition: color .45s;
}

@media (max-width:768px) {
  .csl a {
    grid-template-columns: 1fr 44px;
    gap: 10px 14px;
    padding: 24px 4px;
  }
}

.csl a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .7s cubic-bezier(.7,0,.2,1);
  border-radius: var(--r);
}

.csl em {
  font-style: normal;
  justify-self: start;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--red);
  box-shadow: inset 0 0 0 1px currentColor;
  transition: color .45s;
}

@media (max-width:768px) {
  .csl em {
    grid-column: 1/-1;
  }
}

.csl a:hover,
.csl a:focus-visible {
  color: #fff;
  outline: none;
}

.csl a:hover::before,
.csl a:focus-visible::before {
  transform: scaleX(1);
}

.csl a:hover em,
.csl a:focus-visible em {
  color: #fff;
}

.bgl {
  list-style: none;
  margin: clamp(48px,5vw,76px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: clamp(16px,2vw,32px);
}

@media (max-width:768px) {
  .bgl {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (min-width:769px) {
  .bgl {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

.bgl a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: 100%;
  min-height: clamp(220px,17vw,270px);
  padding: 30px 0 28px;
  border-top: 1px solid var(--ink);
}

@media (max-width:768px) {
  .bgl a {
    min-height: 0;
    padding: 24px 0;
    gap: 14px;
    border-top-color: #DDD;
  }
}

.bgl__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bgl time {
  font: 400 12.5px/1 var(--en);
  letter-spacing: .14em;
  color: var(--sub);
}

.bgl em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1;
  padding: 6px 11px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px #D6D6D6;
  color: #333;
}

.bgl a:hover .bgl__t {
  color: var(--red);
}

.bgl li[data-rv]:nth-child(2) {
  transition-delay: .08s;
}

.bgl li[data-rv]:nth-child(3) {
  transition-delay: .16s;
}

@media (max-width:768px) {
  .bgl li:last-child a {
    border-bottom: 1px solid #DDD;
  }
}

.w--r .c:nth-child(1) {
  animation-delay: .48s;
}

.w--r .c:nth-child(2) {
  animation-delay: .56s;
}

.w--r .c:nth-child(3) {
  animation-delay: .64s;
}

/* ===== ヒーロー（「組織に熱を。」のスプリット・リビールと中央の熱の核） ===== */
.heat {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--ink);
}

.heat i {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  will-change: transform;
}

/* WebGL が使えないときの代わり：中央の丸い核を CSS で描く */
.heat .h1 {
  width: 84vmin;
  height: 84vmin;
  left: 50%;
  top: 50%;
  margin: -42vmin 0 0 -42vmin;
  filter: blur(40px);
  background: radial-gradient(closest-side,rgba(140,4,15,1) 0%,rgba(110,2,12,.85) 35%,rgba(41,0,6,.6) 70%,rgba(41,0,6,0) 100%);
  animation: coreBreathe 17s ease-in-out infinite alternate;
}

@keyframes coreBreathe {
  to {
    transform: scale(1.06);
  }
}

.heat::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side,rgba(11,11,11,0) 60%,rgba(11,11,11,.5) 100%);
}

html.gl .heat {
  display: none;
}

.pin {
  position: relative;
  height: 290vh;
}

.stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  background: #050304;
}

.win {
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: inset(50% 50% 50% 50%);
  background: radial-gradient(120% 95% at 72% 38%,#E5152A 0%,#C40018 42%,#8E0012 74%,#5C000B 100%);
}

.win::before {
  content: "";
  position: absolute;
  inset: -30% -20%;
  background: linear-gradient(118deg,rgba(255,96,96,0) 38%,rgba(255,110,104,.30) 47%,rgba(255,150,140,.42) 50%,rgba(255,110,104,.30) 53%,rgba(255,96,96,0) 62%);
  filter: blur(28px);
  transform: translateY(calc(var(--wl,0)*1%));
  opacity: calc(.35 + var(--open,0)*.65);
  animation: wstreak 30s ease-in-out infinite;
}

.win::after {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: overlay;
  background-image: var(--grain);
  opacity: .10;
}

.win__in {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 110px var(--pad) 64px;
  color: #fff;
  opacity: 1;
  transform: none;
}

@media (max-width:768px) {
  .win__in {
    padding: 80px var(--pad) 104px;
  }
}

.win__lb {
  margin: 0 0 26px;
  font: 400 11px/1 var(--en);
  letter-spacing: .42em;
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: var(--wi,0);
  transform: translateY(calc((1 - var(--wi,0))*28px));
  transition: none;
}

.win__lb::after {
  content: "";
  width: 60px;
  height: 1px;
  background: rgba(255,255,255,.7);
}

.win__ttl {
  margin: 0 0 0 -.06em;
  font-family: var(--min);
  font-weight: 600;
  font-size: clamp(34px,4.4vw,74px);
  line-height: 1.3;
  letter-spacing: .04em;
  opacity: var(--wi,0);
  transform: translateY(calc((1 - var(--wi,0))*28px));
  transition: none;
  --d: .06;
}

@media (max-width:768px) {
  .win__ttl {
    font-size: clamp(26px,7.6vw,36px);
  }
}

.win__txt {
  margin: clamp(18px,2.4vh,30px) 0 0;
  font-family: var(--min);
  font-size: clamp(15px,1.35vw,20px);
  line-height: 2.1;
  letter-spacing: .14em;
  opacity: var(--wi,0);
  transform: translateY(calc((1 - var(--wi,0))*28px));
  transition: none;
  --d: .12;
}

@media (max-width:768px) {
  .win__txt {
    font-size: 13px;
    letter-spacing: .06em;
    line-height: 1.85;
  }
}

.win__else {
  margin: clamp(18px,2.6vh,28px) 0 0;
  width: 75%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px,2.6vw,40px);
  padding: clamp(16px,2.2vh,22px) clamp(16px,2vw,24px) clamp(16px,2.2vh,22px) clamp(20px,2.4vw,32px);
  border-radius: 16px;
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transform: translateY(calc((1 - var(--wi,0))*28px));
  transition: none;
  opacity: clamp(0,calc((var(--wi,0) - .42)*2.4),1);
}

@media (max-width:768px) {
  .win__else {
    width: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 14px;
    padding: 14px 14px 14px 16px;
    border-radius: 14px;
  }
}

.win__else p {
  margin: 0;
  font-size: clamp(13px,1.1vw,16px);
  letter-spacing: .05em;
  line-height: 1.85;
}

@media (max-width:768px) {
  .win__else p {
    line-height: 1.7;
  }
}

.win__else p b {
  display: block;
  white-space: nowrap;
  font-size: clamp(14px,1.3vw,19px);
  font-weight: 700;
  letter-spacing: .03em;
}

@media (max-width:768px) {
  .win__else p b {
    font-size: 13px;
    white-space: normal;
  }
}

.win__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 26px 18px 18px;
  background: #fff;
  color: var(--red);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .05em;
  box-shadow: 0 14px 34px -12px rgba(60,0,8,.55);
  transition: transform .3s,box-shadow .3s;
  border-radius: var(--r) !important;
}

@media (max-width:768px) {
  .win__cta {
    padding: 13px 18px 13px 12px;
    font-size: 13px;
  }
}

.win__cta span {
  background: var(--red);
  color: #fff;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  letter-spacing: .1em;
}

.seam {
  display: inline-block;
  width: 0;
  height: 1em;
  vertical-align: top;
}

@media (max-width:768px) {
  .seam {
    display: block;
    height: 0;
  }
}

.hl {
  white-space: nowrap;
  margin-left: -.05em !important;
  margin: 0;
  font-family: var(--min);
  font-weight: 600;
  font-size: clamp(54px,8.4vw,138px);
  line-height: 1.12;
  letter-spacing: .03em;
}

@media (max-width:768px) {
  .hl {
    font-size: clamp(52px,17vw,92px);
    white-space: normal;
  }
}

.hl .c {
  display: inline-block;
  animation: resolve 2s cubic-bezier(.22,.7,.12,1) both;
}

/* 「熱」：白い文字に、赤い光が流れる（赤地に白い光の逆） */
.hl .hot {
  background: linear-gradient(105deg,#E9E4E4 0%,#FFFFFF 30%,#FF8A94 44%,#E40019 50%,#FF8A94 56%,#FFFFFF 70%,#E9E4E4 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 .28em rgba(228,0,25,.45));
  animation: resolve 2s .48s cubic-bezier(.22,.7,.12,1) both,foil 7s 2.8s ease-in-out infinite;
}

@media (prefers-reduced-motion:reduce) {
  .hl .c,
  .hl .hot {
    animation: none;
  }
}

.hl .c:nth-child(1) {
  animation-delay: .2s;
}

.hl .c:nth-child(2) {
  animation-delay: .28s;
}

.hl .c:nth-child(3) {
  animation-delay: .36s;
}

h1.hl .w--r .hot {
  animation-delay: .48s,2.8s;
}

.u-center .hl {
  font-family: var(--min);
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
}

@media (max-width:768px) {
  .u-center .hl {
    white-space: nowrap;
    padding-left: .32em;
  }
}

.u-center .hl {
  margin: 0;
  padding-left: .06em;
  font-size: clamp(52px,8.6vw,148px);
  letter-spacing: .06em;
  line-height: 1.1;
}

@media (max-width:768px) {
  .u-center .hl {
    font-size: clamp(44px,13.5vw,72px);
    letter-spacing: .02em;
  }
}

.u-center .hl .c {
  animation-duration: 1.9s;
}

.u-center .hl .w--r .c:nth-child(1) {
  animation-delay: 1.36s;
}

@media (max-width:768px) {
  .u-center .seam {
    display: inline-block;
    height: 1em;
  }
}

.u-center .hl .w--l .c:nth-child(1) {
  animation-delay: .2s;
}

.u-center .hl .w--l .c:nth-child(2) {
  animation-delay: .3s;
}

.u-center .hl .w--l .c:nth-child(3) {
  animation-delay: .4s;
}

.u-center .hl .w--r .c:nth-child(2) {
  animation-delay: .62s;
}

.u-center .hl .w--r .c:nth-child(3) {
  animation-delay: .72s;
}

/* ===== SERVICE（横に流れる2つの支援） ===== */
.svc {
  --hw: clamp(260px,27vw,440px);
  --cw: min(64vw,1040px);
  --gap: calc(var(--hw) + 48px);
  position: relative;
  background: var(--paper);
  color: var(--ink);
}

@media (max-width:768px) {
  .svc {
    height: auto !important;
  }
}

.svc__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
}

@media (max-width:768px) {
  .svc__stage {
    position: static;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
}

.svc__head {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--hw);
  padding: 0 clamp(24px,2.4vw,40px) 0 var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}

@media (max-width:768px) {
  .svc__head {
    position: static;
    width: auto;
    background: none;
  }
}

.svc__ttl {
  margin: 26px 0 0 -.05em;
  font-family: var(--min);
  font-weight: 600;
  font-size: clamp(34px,3.6vw,60px);
  line-height: 1.25;
  letter-spacing: .04em;
}

.svc__track {
  position: absolute;
  z-index: 3;
  left: var(--hw);
  top: 50%;
  display: flex;
  gap: var(--gap);
  transform: translate(100vw,-50%);
  will-change: transform;
}

@media (max-width:768px) {
  .svc__track {
    position: static;
    transform: none !important;
    overflow-x: auto;
    scroll-padding-left: var(--pad);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
}

.sv {
  position: relative;
  isolation: isolate;
  flex: none;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.45);
  width: var(--cw);
  height: min(74svh,660px);
  overflow: hidden;
  color: #fff;
  padding: clamp(28px,3.2vw,56px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  transition: transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;
  transform-origin: 50% 50%;
  will-change: transform,opacity;
  border-radius: var(--r) !important;
}

@media (max-width:768px) {
  .sv {
    height: auto;
    border-radius: 20px;
    scroll-snap-align: start;
  }
}

.sv::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .14;
  mix-blend-mode: overlay;
  background-image: var(--grain);
  pointer-events: none;
}

.sv--ink {
  background: #0D0A0B;
}

.sv--red {
  background: radial-gradient(90% 95% at 72% 70%,#E5152A 0%,#C40018 42%,#8E0012 74%,#5C000B 100%);
}

.sv--red::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: linear-gradient(118deg,rgba(255,110,104,0) 40%,rgba(255,120,110,.26) 50%,rgba(255,110,104,0) 60%);
  filter: blur(24px);
  animation: wstreak 30s ease-in-out infinite;
  pointer-events: none;
}

.sv__glow {
  position: absolute;
  z-index: -2;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  animation: glow 16s ease-in-out infinite alternate;
}

.sv--ink .sv__glow {
  width: 70%;
  height: 90%;
  right: -18%;
  bottom: -38%;
  background: radial-gradient(closest-side,rgba(228,0,25,.85),rgba(228,0,25,.25) 55%,rgba(228,0,25,0));
}

.sv--red .sv__glow {
  width: 60%;
  height: 80%;
  left: -14%;
  top: -34%;
  background: radial-gradient(closest-side,rgba(40,0,6,.7),rgba(40,0,6,0));
}

.sv__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.sv__no {
  font-family: var(--min);
  font-weight: 600;
  font-size: clamp(84px,9vw,168px);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.55);
  letter-spacing: -.02em;
  display: inline-block;
  will-change: transform;
}

.sv__link {
  color: inherit;
}

.sv__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

.sv__link:focus-visible {
  outline: none;
}

.sv:has(.sv__link:focus-visible) {
  outline: 2px solid #fff;
  outline-offset: -6px;
}

.sv:hover {
  box-shadow: 0 50px 90px -40px rgba(0,0,0,.55);
}

.sv__txt {
  text-wrap: pretty;
  margin: 22px 0 0;
  font-size: clamp(14px,1.08vw,16px);
  line-height: 2;
  letter-spacing: .04em;
  color: rgba(255,255,255,.88);
}

@media (max-width:768px) {
  .sv__txt {
    word-break: auto-phrase;
  }
}

.sv__body {
  align-self: end;
  max-width: 44em;
}

.sv__ttl {
  margin: 0 0 0 -.05em;
  font-family: var(--min);
  font-weight: 600;
  font-size: clamp(34px,3.8vw,64px);
  line-height: 1.25;
  letter-spacing: .04em;
}

.sv__tags {
  list-style: none;
  margin: 0;
  padding: 22px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,.22);
}

.sv__tags li {
  font-size: 12px;
  letter-spacing: .08em;
  padding: 7px 14px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  color: rgba(255,255,255,.9);
}

@media (max-width:768px) {
  .svc__track::-webkit-scrollbar {
    display: none;
  }
  .svc__track::after {
    content: "";
    flex: none;
    width: 1px;
  }
  .sv__txt br {
    display: none;
  }
}

/* ===== 約束（黒地の行・続きを読む） ===== */
.pr {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
}

.pr::before {
  display: none;
  content: "";
  position: absolute;
  inset: -20% -10%;
  pointer-events: none;
  background: linear-gradient(118deg,rgba(228,0,25,0) 42%,rgba(228,0,25,.22) 50%,rgba(228,0,25,0) 58%);
  filter: blur(40px);
  animation: wstreak 34s ease-in-out infinite;
}

.pr__in {
  position: relative;
  padding-bottom: clamp(90px,9vw,140px) !important;
  padding: clamp(80px,7.6vw,120px) var(--pad) clamp(72px,7vw,110px) !important;
  max-width: 1280px;
  margin: 0 auto;
}

@media (max-width:768px) {
  .pr__in {
    grid-template-columns: 1fr;
  }
}

.prc {
  list-style: none;
  margin: clamp(48px,5vw,76px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: clamp(12px,1.2vw,20px);
}

@media (max-width:768px) {
  .prc {
    grid-template-columns: none;
    grid-auto-flow: column;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 36px calc(var(--pad) * -1) 0;
    padding: 0 var(--pad) 6px;
    scroll-padding: 0 var(--pad);
    scrollbar-width: none;
  }
}

.prc li {
  grid-column: span 2;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: clamp(26px,2.2vw,36px) clamp(22px,1.9vw,30px) clamp(28px,2.4vw,38px);
  background: #fff;
  box-shadow: inset 0 0 0 1px #E4E4E4;
  border-radius: var(--r) !important;
}

@media (max-width:768px) {
  .prc li {
    grid-column: auto;
    scroll-snap-align: start;
    min-height: 0;
  }
}

.prc li:nth-child(n+4) {
  grid-column: span 3;
}

@media (max-width:768px) {
  .prc li:nth-child(n+4) {
    grid-column: auto;
    scroll-snap-align: start;
    min-height: 0;
  }
}

.prc__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.prc__ic {
  width: 58px;
  height: 58px;
  margin: -8px 0 0 -7px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.prc b {
  font: 400 13px/1 var(--en);
  letter-spacing: .24em;
  color: var(--red);
}

.prc h3 {
  margin: 0;
  padding-top: clamp(34px,3vw,48px);
  font-family: var(--min);
  font-weight: 600;
  font-size: clamp(17px,1.32vw,20px);
  line-height: 1.65;
  letter-spacing: .03em;
}

@media (max-width:768px) {
  .prc h3 {
    padding-top: 40px;
    font-size: 18px;
  }
}

.prc h3 span {
  display: inline-block;
}

.prc p {
  margin: 16px 0 0;
  max-width: 38em;
  font-size: 14px;
  line-height: 2;
  letter-spacing: .04em;
  color: #444;
}

.prc li[data-rv]:nth-child(2) {
  transition-delay: .08s;
}

.prc li[data-rv]:nth-child(3) {
  transition-delay: .16s;
}

.prc li[data-rv]:nth-child(4) {
  transition-delay: .04s;
}

.prc li[data-rv]:nth-child(5) {
  transition-delay: .12s;
}

@media (max-width:768px) {
  .prc::-webkit-scrollbar {
    display: none;
  }
}

.pr .prc {
  display: block;
  margin: clamp(36px,4vw,56px) 0 0;
  padding: 0;
  overflow: visible;
  border-top: 1px solid rgba(255,255,255,.18);
}

.pr .prc li {
  display: grid;
  gap: clamp(16px,2.4vw,40px);
  padding: clamp(24px,2.4vw,34px) 0;
  border-bottom: 1px solid rgba(255,255,255,.18);
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  min-height: 0;
  align-items: start;
  grid-template-columns: 80px minmax(0,5fr) minmax(0,7fr);
}

@media (max-width:768px) {
  .pr .prc li {
    row-gap: 10px;
    grid-template-columns: 52px 1fr;
  }
}

.pr .prc__ic {
  display: none;
}

.pr .prc h3 {
  padding: 0;
  font-size: clamp(22px,2.2vw,30px);
  color: #fff;
}

.pr .prc h3 {
  line-height: 1.45;
  margin-top: -.08em;
}

.pr .prc p {
  margin: 0;
  max-width: none;
  font-size: 14.5px;
  line-height: 2;
  color: rgba(255,255,255,.78);
  margin-top: .15em;
}

@media (max-width:768px) {
  .pr .prc p,
  .pr .prc__body {
    grid-column: 2;
  }
}

.pr .prc b {
  font: 600 clamp(30px,2.8vw,40px)/1 var(--min);
  letter-spacing: .02em;
  color: rgba(255,255,255,.9);
}

.pr .prc p.prc__lead {
  margin: .15em 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.9;
  color: #fff;
}

.prc__more p {
  margin: 12px 0 0 !important;
  font-size: 14.5px;
  line-height: 2;
  color: rgba(255,255,255,.78);
}

.prc__more {
  overflow: hidden;
}

.prc__tg {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  border: 0;
  border-radius: var(--r);
  font: 700 13.5px/1 var(--jp);
  letter-spacing: .06em;
  cursor: pointer;
  height: 40px;
  padding: 0 18px 0 6px;
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.38);
  transition: background .35s,color .35s,box-shadow .35s;
}

.prc__tg:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.prc__tg i {
  position: relative;
  border-radius: 50%;
  flex: none;
  width: 28px;
  height: 28px;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}

.prc__tg i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 1.5px;
  margin: -.75px 0 0 -5.5px;
  transition: transform .4s;
  background: #fff;
}

.prc__tg i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 1.5px;
  margin: -.75px 0 0 -5.5px;
  transition: transform .4s;
  transform: rotate(90deg);
  background: #fff;
}

.prc__tg[aria-expanded="true"] i::after {
  transform: rotate(0);
}

.prc__tg .c,
.prc__tg[aria-expanded="true"] .o {
  display: none;
}

.prc__tg[aria-expanded="true"] .c {
  display: inline;
}

.prc__tg:hover {
  transform: none;
  box-shadow: inset 0 0 0 1px #fff;
  background: #fff;
  color: var(--ink);
}

.prc__tg:hover i {
  box-shadow: inset 0 0 0 1px var(--ink);
}

.prc__tg:hover i::before,
.prc__tg:hover i::after {
  background: var(--ink);
}

.prc__tg[aria-expanded="true"] i {
  background: transparent;
}

/* ===== 事例（準備中） ===== */
.cs {
  background: #fff;
  color: var(--ink);
}

.cs__in {
  border-top: 1px solid #ECECEC;
  margin: 0 var(--pad);
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding: clamp(90px,9vw,140px) var(--pad) clamp(70px,6vw,100px);
}

.cs__head {
  display: grid;
  grid-template-columns: minmax(0,4fr) minmax(0,8fr);
  gap: clamp(40px,6vw,120px);
  align-items: end;
}

@media (max-width:768px) {
  .cs__head {
    grid-template-columns: 1fr;
  }
}

.soonbox {
  position: relative;
}

.soonbox__in {
  pointer-events: none;
  user-select: none;
  filter: blur(5px);
  opacity: .35;
}

.soonbox__msg {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  border-radius: var(--r);
  background: radial-gradient(90% 120% at 80% 100%,#E5152A 0%,#C40018 45%,#8E0012 100%);
  color: #fff;
}

.soonbox__tag {
  display: inline-flex;
  align-items: center;
  height: 30px;
  margin: 0;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 700;
  background: #fff;
  color: var(--red);
  font-size: 14px;
  letter-spacing: .14em;
}

.soonbox__t {
  margin: 14px 0 0;
  font-family: var(--min);
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
}

.soonbox__s {
  margin: 8px 0 0;
  font-size: 14px;
  color: rgba(255,255,255,.88);
}

/* ===== ブログ ===== */
.bg {
  background: #fff;
  color: var(--ink);
}

.bg__in {
  padding: 0 var(--pad) clamp(110px,11vw,170px);
}

.bg__head {
  padding-top: clamp(80px,8vw,120px);
  border-top: 1px solid #ECECEC;
  max-width: 46em;
}

.bg .bgl {
  margin-top: clamp(36px,4vw,56px);
}

.bg__more {
  display: flex;
  margin: 28px 0 0;
  margin-top: clamp(36px,4vw,52px);
  justify-content: flex-start;
}

.bg .bgl a {
  min-height: 0;
  gap: 18px;
  padding-bottom: 24px;
}

.bg .bgl__t {
  flex: none;
}

.bg__btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  padding: 0 28px 0 32px;
  border-radius: var(--r);
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  transition: background .3s,transform .3s;
}

.bg__btn:hover {
  background: var(--red);
}

/* ===== 代表 ===== */
.rp__body {
  word-break: auto-phrase;
  line-break: strict;
  margin: 26px 0 0;
  font-family: var(--min);
  font-size: clamp(14px,1.15vw,17px);
  line-height: 2.2;
  letter-spacing: .1em;
  color: #333;
  max-width: 34em;
}

.rp {
  background: #fff;
  color: var(--ink);
}

.rp__in {
  display: grid;
  grid-template-columns: minmax(0,4fr) minmax(0,7fr);
  gap: clamp(40px,6vw,110px);
  align-items: center;
  padding: clamp(100px,9vw,150px) var(--pad);
}

@media (max-width:768px) {
  .rp__in {
    grid-template-columns: 1fr;
  }
}

.rp__ph {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r) !important;
  aspect-ratio: 4/5;
}

@media (max-width:768px) {
  .rp__ph {
    max-width: 100%;
  }
}

.rp__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.8s cubic-bezier(.2,.7,.1,1);
  object-position: 50% 50%;
  transform: none;
}

.rp__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(0,0,0,0) 70%,rgba(0,0,0,.35));
}

.rp__ph[data-rv] {
  opacity: 1;
  filter: none;
  transform: none;
  transition: clip-path 1.4s cubic-bezier(.7,0,.2,1);
  clip-path: inset(100% 0 0 0 round var(--r));
}

.rp__ph.in img {
  transform: scale(1);
}

html.pv .rp__ph[data-rv] {
  clip-path: none;
}

.rp__ttl {
  margin: 26px 0 0 -.05em;
  font-family: var(--min);
  font-weight: 600;
  letter-spacing: .04em;
  font-size: clamp(28px,3vw,46px);
  line-height: 1.45;
}

.rp__name {
  margin: 30px 0 0;
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-family: var(--min);
  font-weight: 600;
  font-size: clamp(20px,1.8vw,26px);
  letter-spacing: .2em;
}

.rp__name small {
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--sub);
  font-weight: 400;
}

.rp__ph[data-rv].in {
  clip-path: inset(0 0 0 0 round var(--r));
}

.rp__btn {
  margin-top: clamp(28px,3vw,40px);
}

/* ===== お知らせ ===== */
.nb {
  background: #fff;
  color: var(--ink);
  border-top: 1px solid #ECECEC;
}

.nb__in {
  display: grid;
  grid-template-columns: minmax(0,4fr) minmax(0,8fr);
  gap: clamp(40px,6vw,120px);
  padding: clamp(90px,8vw,130px) var(--pad);
}

@media (max-width:768px) {
  .nb__in {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.nwl {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #DDD;
}

.nwl li {
  border-bottom: 1px solid #DDD;
}

.nwl a {
  display: grid;
  grid-template-columns: 110px 1fr 24px;
  gap: 20px;
  align-items: center;
  padding: 24px 0;
  transition: padding .45s cubic-bezier(.2,.7,.1,1),color .3s;
}

@media (max-width:768px) {
  .nwl a {
    grid-template-columns: 1fr 20px;
    gap: 6px 12px;
    padding: 18px 0;
  }
}

.nwl time {
  font: 400 13px/1 var(--en);
  letter-spacing: .1em;
  color: var(--sub);
}

@media (max-width:768px) {
  .nwl time {
    grid-column: 1/-1;
  }
}

.nwl span {
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .04em;
}

.nwl a:hover {
  padding-left: 12px;
  color: var(--red);
}

.nb[hidden] {
  display: none;
}

/* ===== 相談の帯 ===== */
.ct__txt {
  word-break: auto-phrase;
  line-break: strict;
  margin: 22px 0 0;
  font-family: var(--min);
  font-size: clamp(14px,1.2vw,18px);
  line-height: 2.1;
  letter-spacing: .12em;
  color: rgba(255,255,255,.88);
}

.ct {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: radial-gradient(120% 95% at 70% 40%,#E5152A 0%,#C40018 42%,#8E0012 74%,#5C000B 100%);
}

.ct::before {
  content: "";
  position: absolute;
  inset: -30% -20%;
  pointer-events: none;
  background: linear-gradient(118deg,rgba(255,96,96,0) 38%,rgba(255,110,104,.30) 47%,rgba(255,150,140,.40) 50%,rgba(255,110,104,.30) 53%,rgba(255,96,96,0) 62%);
  filter: blur(28px);
  animation: wstreak 30s ease-in-out infinite;
}

.ct__in {
  position: relative;
  text-align: center;
  padding: clamp(90px,8.5vw,140px) var(--pad);
}

.ct__ttl {
  margin: 24px 0 0;
  font-family: var(--min);
  font-weight: 600;
  font-size: clamp(34px,4.6vw,76px);
  line-height: 1.35;
  letter-spacing: .06em;
}

@media (max-width:768px) {
  .ct__ttl {
    letter-spacing: .04em;
  }
}

.ct__btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  padding: 22px 32px 22px 22px;
  background: #fff;
  color: var(--red);
  font-size: clamp(15px,1.25vw,18px);
  font-weight: 800;
  letter-spacing: .06em;
  box-shadow: 0 24px 60px -20px rgba(60,0,8,.7);
  transition: transform .35s,box-shadow .35s;
  border-radius: var(--r) !important;
}

@media (max-width:768px) {
  .ct__btn {
    padding: 18px 22px 18px 16px;
    font-size: 14px;
  }
}

.ct__btn span {
  background: var(--red);
  color: #fff;
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 13px;
  letter-spacing: .1em;
}

.ct__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 70px -20px rgba(60,0,8,.85);
}

@media (max-width:768px) {
  .ct__txt br {
    display: none;
  }
}

/* ===== ヘッダー（TOPだけの登場演出：ヒーローの見出しが出たあとに現れる） ===== */
.logo,
.gnav {
  animation: show .9s 2s cubic-bezier(.2,.7,.2,1) backwards;
}

/* ===== SP：縦に伸びすぎないための調整 ===== */
@media (max-width:768px) {
  /* 実現したい未来：語の途中で折り返さない */
  .wills span {
    word-break: auto-phrase;
    text-wrap: balance;
  }
  /* 事例（準備中）：背景のぼかしは省き、知らせだけを置く */
  .soonbox__in {
    display: none;
  }
  .soonbox__msg {
    position: relative;
    inset: auto;
  }
  /* 代表：写真は横長に切り出して高さを抑える */
  .rp__ph {
    aspect-ratio: 4 / 3;
  }
  .rp__ph img {
    object-position: 50% 62%;
  }
}

/* ===== SERVICE：カードは見出しの列の下へ潜って抜ける（見出しに重ならない。境目にぼかしは付けない） ===== */
@media (min-width:769px) {
  .svc__head {
    z-index: 4;
    background: var(--paper);
  }
}

/* ===== ブログ：記事のサムネイル ===== */
.bg .bgl a {
  padding-top: 0;
  border-top: 0;
}

.bgl__img {
  display: block;
  overflow: hidden;
  aspect-ratio: 1280 / 670;
}

.bgl__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2,.7,.1,1);
}

.bgl a:hover .bgl__img img {
  transform: scale(1.04);
}

@media (max-width:768px) {
  .bg .bgl a {
    gap: 14px;
  }
}

/* 事例（準備中）：「です。」だけが次の行に落ちないように */
.soonbox__t {
  word-break: auto-phrase;
  text-wrap: balance;
}

/* =========================================================
   SP（2026-10 改修）：共通ルールに合わせた最終レイヤー
   文字：特大(ヒーローは別扱い) / 大26 / 中20 / 本文15 / 小13 / ラベル11
   余白：8・16・24・40・56（セクション）・88（締めくくり）
   並べ方：同じ形が3つ以上 → 横スクロール。2つまで → 縦に積む
   ========================================================= */
@media (max-width:768px) {
  /* --- WILL：番号の丸が左端で切れないよう、行の内側に余白をとる --- */
  .wills a,
  .wills li:first-child a {
    padding-left: 4px;
    padding-right: 4px;
  }
  .wills b {
    margin-left: 0;
    flex: none;
  }
  /* --- 見出しの型：ラベル＋大見出し＋リード --- */
  .cap,
  .vs__cap {
    font-size: 11px;
    letter-spacing: .3em;
    gap: 12px;
  }
  .sec-ttl,
  .svc__ttl {
    margin-top: 14px;
    font-size: 26px;
    line-height: 1.4;
  }
  .sec-lead {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.9;
    letter-spacing: .08em;
  }
  .cs__head {
    gap: 0;
  }
  /* --- SERVICE：2本は縦に積む（どちらの支援も最初から見える） --- */
  .svc__stage {
    padding: 56px 0;
  }
  .svc__head {
    padding: 0 var(--pad) 24px;
  }
  .svc__track {
    flex-direction: column;
    gap: 16px;
    overflow: visible;
    scroll-snap-type: none;
    padding: 0 var(--pad);
  }
  .svc__track::after {
    display: none;
  }
  .sv {
    width: auto;
    min-height: 0;
    gap: 16px;
    padding: 24px 20px 20px;
    border-radius: 20px !important;
    box-shadow: 0 24px 48px -32px rgba(0,0,0,.5);
  }
  .sv__no {
    font-size: 48px;
    line-height: 1;
  }
  .sv__ttl {
    font-size: 26px;
  }
  .sv__txt {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.85;
  }
  .sv__tags {
    padding-top: 16px;
    gap: 6px;
  }
  .sv__tags li {
    font-size: 12px;
  }
  /* --- 5つの約束：5枚は横スクロールのまま、詰める --- */
  .pr__in {
    padding: 56px var(--pad) !important;
  }
  .cs__head .sec-lead {
    margin-top: 16px;
  }
  .prc {
    margin-top: 24px;
    grid-auto-columns: 82%;
  }
  .prc li {
    padding: 24px 20px;
  }
  .prc__ic {
    width: 40px;
    height: 40px;
  }
  .pr .prc h3 {
    padding-top: 24px;
    font-size: 20px;
  }
  .pr .prc b {
    font-size: 24px;
  }
  .prc p {
    font-size: 15px;
    line-height: 1.85;
  }
  /* --- 事例（準備中） --- */
  .cs__in {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .soonbox {
    margin-top: 24px;
  }
  /* --- ブログ：最新の記事を横スライド＋一覧へのボタン --- */
  .bg__in {
    padding-bottom: 56px;
  }
  .bg__head {
    padding-top: 56px;
  }
  .bg .bgl {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: 16px;
    margin: 24px calc(var(--pad) * -1) 0;
    padding: 0 var(--pad) 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--pad);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .bg .bgl::-webkit-scrollbar {
    display: none;
  }
  .bg .bgl li {
    scroll-snap-align: start;
  }
  .bg .bgl a,
  .bg .bgl li:last-child a {
    gap: 12px;
    padding: 0 0 8px;
    border: 0;
  }
  .bgl__t {
    font-size: 15px;
    line-height: 1.7;
    padding-right: 48px;
  }
  .bg__more {
    margin-top: 24px;
  }
  .bg__btn {
    width: 100%;
    justify-content: space-between;
    height: 52px;
    padding: 0 20px 0 24px;
  }
  /* --- 代表 --- */
  .rp__in {
    padding-top: 56px;
    padding-bottom: 56px;
    gap: 24px;
  }
  .rp__ttl {
    font-size: 26px;
  }
  .rp__body {
    font-size: 15px;
    line-height: 2;
    letter-spacing: .06em;
  }
  .rp__btn {
    width: 100%;
    justify-content: space-between;
  }
  /* --- 締めくくりの相談 --- */
  .ct__in {
    padding: 88px var(--pad);
  }
  .ct__ttl {
    font-size: 26px;
  }
  .ct__txt {
    font-size: 15px;
    line-height: 1.9;
  }
}

/* タッチ端末：ホバーの動きは出さず、押した瞬間だけ反応させる */
@media (hover:none) {
  .wills a:hover span {
    transform: none;
  }
  .bgl a:hover .bgl__img img {
    transform: none;
  }
  .bgl a:hover .bgl__t {
    color: inherit;
  }
  .wills a:active span,
  .bgl a:active .bgl__t {
    opacity: .6;
  }
  .sv--ink:active .sv__glow {
    opacity: 1;
    filter: blur(56px) brightness(1.6);
  }
}

/* ヒーローの見出し（文字だけの層）は押せる場所を持たない。WILL の行の上に重なっても、タップを奪わない */
.u-center,
.u-scroll {
  pointer-events: none;
}

@media (max-width:768px) {
  /* 代表：見出し（COMPANY・タイトル）→ 写真 → 本文 の順に */
  .rp__tx {
    display: contents;
  }
  .rp__tx > .cap {
    order: 1;
  }
  .rp__ttl {
    order: 2;
    margin-top: -10px;
  }
  .rp__ph {
    order: 3;
  }
  .rp__body {
    order: 4;
    margin-top: 0;
  }
  .rp__name {
    order: 5;
    margin-top: 0;
  }
  .rp__btn {
    order: 6;
  }
}

@media (max-width:768px) {
  .win__else p {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
  }
}

/* ボタンに矢印は入れない（2026-10 共通ルール）：幅いっぱいのボタンは文字を中央に */
@media (max-width:768px) {
  .bg__btn,
  .rp__btn {
    justify-content: center;
  }
  .win__cta {
    justify-content: center;
    gap: 12px;
  }
}

/* 矢印をやめたぶん、押せる場所であることを形で伝える（2026-10） */
.bgl__t,
.bg .bgl .bgl__t {
  padding-right: 0 !important;
}

@media (max-width:768px) {
  /* WILL：1行ずつを、押せる面にする */
  .wills {
    display: grid;
    gap: 8px;
  }
  .wills a,
  .wills li:first-child a {
    padding: 14px 16px;
    border: 0;
    border-radius: 14px;
    background: rgba(255,255,255,.1);
  }
  .wills a:active {
    background: rgba(255,255,255,.2);
  }
  /* ブログ：タイトルに下線を引いて、リンクだと分かるように */
  .bgl__t {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    text-decoration-color: rgba(11,11,11,.25);
  }
}

/* 2026-10 山下の直し */
/* 支援内容のカード：タイトルに下線を引いて、押せるカードだと分かるように。ホバーで下線がはっきりする */
.sv__ttl .sv__link {
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  text-decoration-color: rgba(255,255,255,.35);
  transition: text-decoration-color .3s;
}

@media (hover:hover) {
  .sv:hover .sv__ttl .sv__link {
    text-decoration-color: #fff;
  }
}

@media (max-width:768px) {
  /* WILL：面にしたので、上の罫線は出さない */
  .wills::before,
  .wills::after {
    display: none;
  }
}

/* 支援内容のカード：装飾は足さず、ホバーで赤い光が明るくなる（2026-10） */
.sv__ttl .sv__link {
  text-decoration: none;
}

.sv__glow {
  transition: opacity .5s var(--ease), filter .5s var(--ease);
}

.sv--ink .sv__glow {
  opacity: .8;
}

@media (hover:hover) {
  .sv--ink:hover .sv__glow {
    opacity: 1;
    filter: blur(56px) brightness(1.6);
  }
  .sv--red:hover .sv__glow {
    opacity: .25;
  }
  .sv--red::after {
    transition: opacity .5s var(--ease);
  }
  .sv--red:hover {
    background: radial-gradient(90% 95% at 72% 70%,#F02A3E 0%,#D4001B 42%,#9E0014 74%,#66000C 100%);
  }
}

/* 共通の部品にそろえる（2026-10）。TOPの支援内容の2枚は変えない */
.rp__ph {
  background: var(--card);
}

.bgl__img {
  background: var(--card);
  border-radius: var(--card-r);
}

/* 事例紹介（準備中）：赤はそのまま、影をなくし、高さを半分ほどに、見出しを一段小さく */
.soonbox__msg {
  box-shadow: none;
}

.soonbox__in {
  max-height: 220px;
  overflow: hidden;
}

.soonbox__t {
  font-size: clamp(18px,1.8vw,24px);
}

@media (max-width:768px) {
  .soonbox__msg {
    padding: 28px 20px;
  }
  .soonbox__t {
    font-size: 18px;
  }
}

.soonbox {
  margin-top: clamp(28px,3vw,40px);
}

.soonbox__msg {
  inset: 0;
}

/* SP：WILLの面には上辺の線を出さない（押したあとに線が残るのも防ぐ）（2026-10） */
@media (max-width:768px) {
  .wills a::before,
  .wills a::after {
    display: none !important;
  }
}

/* 「組織に熱を。」：文字ごとに左から順に出すのをやめ、全部の文字を一緒に、中央から浮かび上がらせる（2026-10） */
.u-center .hl {
  transform-origin: 50% 50%;
  animation: resolve 2s .2s cubic-bezier(.22,.7,.12,1) both;
}

.u-center .hl .c {
  animation: none;
}

@media (prefers-reduced-motion:reduce) {
  .u-center .hl,
  .u-center .hl .hot {
    animation: none;
  }
}

/* 「熱」も同時に出す：「熱」だけに残っていた遅れ付きの登場の動き（.u-center .hl .w--r .c.hot）を止め、きらめきだけにする */
.u-center .hl .w--r .c.hot {
  background-position: 100% 0;
  animation: foil 7s 2.8s ease-in-out infinite;
}