/* =========================================================
   株式会社WILL / Corporate Site
   Monotone × Elegant × Fade Reveal
   ========================================================= */

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:'Noto Sans JP',sans-serif;
  font-weight:400;
  color:var(--ink);
  background:var(--bg);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  letter-spacing:0.02em;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:opacity .2s ease}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}

/* ===== Palette : Monotone (less pure black) ===== */
:root{
  --bg:#FFFFFF;
  --bg-soft:#F7F8FA;
  --bg-mute:#F0F2F5;

  /* ダーク背景は純黒を避けて、わずかに青みのあるダークグレーに */
  --bg-deep:#1F252E;
  --bg-deep2:#2A3038;
  --bg-deep3:#363D47;

  /* テキスト：純黒は使わず、深いダークグレー */
  --ink:#1F252E;
  --ink-2:#2D3339;
  --ink-3:#3D444E;

  --gray-700:#5B6470;
  --gray-600:#6E7681;
  --gray-500:#8B95A1;
  --gray-400:#B5BCC4;
  --gray-300:#D0D5DC;
  --gray-200:#E5E8EC;
  --gray-100:#F0F2F5;
  --gray-50:#F7F8FA;

  /* 画像差し込み用 placeholder */
  --ph:#FF2D7F;
  --ph-deep:#D91964;

  --serif:'Noto Serif JP',serif;
  --sans:'Noto Sans JP',sans-serif;

  --max:1240px;
  --pad:clamp(24px,5vw,80px);

  --ease:cubic-bezier(.25,.46,.45,.94);
}

/* ===== Layout ===== */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
section{padding:clamp(80px,12vw,160px) 0;position:relative}

/* ===== Image Placeholder ===== */
.ph-box{
  position:relative;
  background:var(--ph);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  font-family:var(--sans);
  width:100%;height:100%;
}
.ph-box::before{
  content:"";
  position:absolute;inset:8px;
  border:1px dashed rgba(255,255,255,.55);
  pointer-events:none;
}
.ph-box::after{
  content:"";
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    45deg,
    transparent,transparent 20px,
    rgba(255,255,255,.06) 20px,rgba(255,255,255,.06) 40px
  );
  pointer-events:none;
}
.ph-meta{position:relative;z-index:1;text-align:center;padding:24px}
.ph-meta .ph-icon{
  font-family:var(--serif);
  font-size:48px;font-weight:300;
  letter-spacing:-0.04em;
  line-height:1;margin-bottom:16px;
  opacity:0.95;
}
.ph-meta .ph-label{
  font-size:11px;font-weight:600;
  letter-spacing:0.3em;margin-bottom:8px;
  text-transform:uppercase;
}
.ph-meta .ph-use{
  font-size:13px;font-weight:500;
  letter-spacing:0.08em;margin-bottom:10px;
}
.ph-meta .ph-size{
  font-size:10px;font-weight:400;
  letter-spacing:0.12em;opacity:0.85;
}

/* =========================================================
   SCROLL REVEAL (Oramel-inspired, elegant fade)
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1.4s var(--ease), transform 1.4s var(--ease);
}
.reveal.visible{opacity:1;transform:translateY(0)}

.reveal-delay-1{transition-delay:.15s}
.reveal-delay-2{transition-delay:.3s}
.reveal-delay-3{transition-delay:.45s}
.reveal-delay-4{transition-delay:.6s}

.reveal-photo{
  opacity:0;
  transform:scale(1.04);
  transition:opacity 1.6s var(--ease), transform 1.8s var(--ease);
}
.reveal-photo.visible{opacity:1;transform:scale(1)}

.reveal-left{
  opacity:0;
  transform:translateX(-40px);
  transition:opacity 1.4s var(--ease), transform 1.4s var(--ease);
}
.reveal-left.visible{opacity:1;transform:translateX(0)}

.reveal-right{
  opacity:0;
  transform:translateX(40px);
  transition:opacity 1.4s var(--ease), transform 1.4s var(--ease);
}
.reveal-right.visible{opacity:1;transform:translateX(0)}

/* 行ごとに遅延 */
.reveal-line{
  display:block;
  opacity:0;
  transform:translateY(18px);
  transition:opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.reveal-line.visible{opacity:1;transform:translateY(0)}
.reveal-line:nth-child(2){transition-delay:.14s}
.reveal-line:nth-child(3){transition-delay:.28s}
.reveal-line:nth-child(4){transition-delay:.42s}

/* ===== Header ===== */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:20px var(--pad);
  display:flex;align-items:center;justify-content:space-between;
  background:transparent;
  transition:background .5s var(--ease), padding .4s var(--ease);
}
header.scrolled{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding-top:14px;padding-bottom:14px;
  box-shadow:0 1px 0 rgba(31,37,46,.06);
}
.logo{
  font-family:var(--serif);
  font-size:24px;font-weight:600;
  letter-spacing:0.08em;
  color:#fff;
  transition:color .4s var(--ease);
}
.logo span{color:rgba(255,255,255,.55)}
header.scrolled .logo{color:var(--ink)}
header.scrolled .logo span{color:var(--gray-500)}

nav ul{display:flex;gap:36px;align-items:center}
nav a{
  font-size:13px;font-weight:500;
  letter-spacing:0.12em;
  color:rgba(255,255,255,.85);
  position:relative;padding:8px 0;
  transition:color .4s var(--ease);
}
nav a:hover{color:#fff}
header.scrolled nav a{color:var(--ink-2)}
header.scrolled nav a:hover{color:var(--gray-700)}

.nav-cta{
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.4);
  color:#fff !important;
  padding:14px 26px;
  font-size:13px;font-weight:500;
  letter-spacing:0.1em;
  border-radius:999px;
  transition:all .3s var(--ease);
  backdrop-filter:blur(8px);
}
.nav-cta:hover{background:#fff;color:var(--ink) !important;border-color:#fff}
header.scrolled .nav-cta{
  background:var(--ink);color:#fff !important;
  border-color:var(--ink);
}
header.scrolled .nav-cta:hover{background:var(--ink-3);border-color:var(--ink-3)}

/* =========================================================
   HERO (Full screen, Oramel-inspired)
   ========================================================= */
.hero{
  position:relative;
  height:100vh;
  min-height:720px;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.hero-bg{
  position:absolute;inset:0;
  z-index:0;
}
.hero-bg .ph-box{
  width:100%;height:100%;
}
.hero-bg .ph-meta .ph-icon{font-size:96px}
.hero-bg .ph-meta .ph-label{font-size:13px;letter-spacing:0.35em}
.hero-bg .ph-meta .ph-use{font-size:15px}
.hero-bg .ph-meta .ph-size{font-size:12px}

/* Hero slideshow (cross-fade + ken burns, transition-based) */
.hero-slideshow{
  position:absolute;inset:0;
  width:100%;height:100%;
  overflow:hidden;
}
.hero-slide{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.08);
  transition:opacity 2.5s var(--ease), transform 8s linear;
  will-change:opacity,transform;
  z-index:0;
}
.hero-slide.is-active{
  opacity:1;
  transform:scale(1.00);
  z-index:1;
}

/* オーバーレイ：左下にコピーを置くため、左を濃く・右を薄く */
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(
    to right,
    rgba(31,37,46,.65) 0%,
    rgba(31,37,46,.35) 45%,
    rgba(31,37,46,.10) 75%,
    rgba(31,37,46,.05) 100%
  );
}
.hero-overlay-bottom{
  position:absolute;left:0;right:0;bottom:0;
  height:35%;z-index:1;
  background:linear-gradient(to top, rgba(31,37,46,.6), transparent);
}

.hero-content{
  position:relative;z-index:2;
  padding:100px var(--pad) 40px;
  max-width:880px;
  width:100%;
}

.hero-label{
  font-size:12px;letter-spacing:0.35em;font-weight:500;
  color:rgba(255,255,255,.9);
  padding-left:60px;position:relative;
  margin-bottom:36px;
  opacity:0;
  animation:heroFadeUp 1.1s .8s var(--ease) forwards;
}
.hero-label::before{
  content:"";position:absolute;left:0;top:50%;
  width:44px;height:1px;background:rgba(255,255,255,.7);
}

.hero-main{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(40px,5.8vw,80px);
  line-height:1.18;
  letter-spacing:0.04em;
  color:#fff;
  margin-bottom:28px;
  opacity:0;
  animation:heroFadeUp 1.1s 1.0s var(--ease) forwards;
}
.hero-main .ext{
  font-weight:900;
  font-size:1.18em;
  display:inline-block;
}

.hero-tagline{
  font-family:var(--serif);
  font-size:clamp(14px,1.4vw,18px);
  letter-spacing:0.18em;
  color:rgba(255,255,255,.85);
  font-weight:300;
  margin-bottom:32px;
  opacity:0;
  animation:heroFadeUp 1.1s 1.15s var(--ease) forwards;
}

.hero-sub{
  font-size:15px;line-height:2.2;
  color:rgba(255,255,255,.78);
  font-weight:300;
  margin-bottom:48px;
  max-width:520px;
  letter-spacing:0.06em;
  opacity:0;
  animation:heroFadeUp 1.1s 1.3s var(--ease) forwards;
}

.hero-cta-wrap{
  display:flex;gap:24px;align-items:center;flex-wrap:wrap;
  opacity:0;
  animation:heroFadeUp 1.1s 1.45s var(--ease) forwards;
}

.btn-primary,.btn-secondary{
  display:inline-flex;align-items:center;gap:12px;
  font-size:14px;font-weight:500;
  letter-spacing:0.15em;
  transition:all .35s var(--ease);
}
.btn-primary{
  background:#fff;color:var(--ink);
  padding:20px 36px;
  border-radius:999px;
  position:relative;overflow:hidden;
}
.btn-primary::before{
  content:"";position:absolute;inset:0;
  background:var(--ink);
  transform:translateX(-100%);
  transition:transform .4s var(--ease);
}
.btn-primary:hover{color:#fff}
.btn-primary:hover::before{transform:translateX(0)}
.btn-primary span,.btn-primary .arrow{position:relative;z-index:1}
.btn-primary .arrow{
  display:inline-flex;align-items:center;
  font-size:14px;
  transition:transform .3s var(--ease);
}
.btn-primary:hover .arrow{transform:translateX(6px)}

.btn-secondary{
  color:#fff;
  padding:20px 0;
  position:relative;
  letter-spacing:0.2em;
}
.btn-secondary::after{
  content:"";position:absolute;
  left:0;right:0;bottom:14px;height:1px;
  background:rgba(255,255,255,.6);
  transition:background .25s var(--ease);
}
.btn-secondary:hover::after{background:#fff}

/* ライト背景セクション内のbtn-primary（CTAバンド、Final CTA等） */
.btn-primary.dark{
  background:var(--ink);color:#fff;
}
.btn-primary.dark::before{background:var(--ink-3)}
.btn-primary.dark:hover{color:#fff}
.btn-secondary.dark{
  color:var(--ink);
}
.btn-secondary.dark::after{background:var(--ink)}
.btn-secondary.dark:hover::after{background:var(--gray-700)}

/* Scroll indicator */
.hero-scroll{
  position:absolute;
  right:clamp(20px,3vw,40px);
  bottom:clamp(60px,8vw,100px);
  z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  opacity:0;
  animation:heroFadeUp 1.1s 1.7s var(--ease) forwards;
}
.hero-scroll-text{
  font-size:10px;
  letter-spacing:0.4em;
  color:rgba(255,255,255,.7);
  writing-mode:vertical-rl;
  font-weight:500;
}
.hero-scroll-line{
  width:1px;height:64px;
  background:rgba(255,255,255,.25);
  position:relative;overflow:hidden;
}
.hero-scroll-line::after{
  content:"";position:absolute;
  top:0;left:0;right:0;height:40%;
  background:#fff;
  animation:scrollLine 2.4s var(--ease) infinite;
}

@keyframes heroFadeUp{
  to{opacity:1;transform:translateY(0)}
}
@keyframes scrollLine{
  0%{transform:translateY(-100%)}
  50%{transform:translateY(160%)}
  100%{transform:translateY(160%)}
}

/* =========================================================
   Service quick nav (under hero)
   ========================================================= */
.hero-svcnav{
  background:#fff;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-bottom:1px solid var(--gray-200);
}
.hero-svcnav a{
  padding:40px 24px;
  position:relative;
  transition:background .3s var(--ease);
}
.hero-svcnav a:not(:last-child){border-right:1px solid var(--gray-200)}
.hero-svcnav a::before{
  content:"";position:absolute;
  left:0;bottom:-1px;
  width:0;height:2px;background:var(--ink);
  transition:width .4s var(--ease);
}
.hero-svcnav a:hover{background:var(--gray-50)}
.hero-svcnav a:hover::before{width:100%}
.hero-svcnav .sn{
  font-family:var(--serif);
  font-size:12px;color:var(--gray-500);
  letter-spacing:0.15em;font-weight:300;
  margin-bottom:14px;
}
.hero-svcnav .st{
  font-family:var(--serif);
  font-size:18px;font-weight:500;
  letter-spacing:0.04em;line-height:1.4;
  color:var(--ink);
}
.hero-svcnav .sa{
  font-size:10px;color:var(--gray-500);
  letter-spacing:0.22em;margin-top:10px;
  font-weight:400;
}

/* =========================================================
   Section headers
   ========================================================= */
.sec-head{margin-bottom:80px;}
.sec-label{
  font-size:11px;letter-spacing:0.35em;font-weight:500;
  color:var(--gray-700);
  display:inline-block;
  padding-left:32px;position:relative;
  margin-bottom:28px;
}
.sec-label::before{
  content:"";position:absolute;left:0;top:50%;
  width:20px;height:1px;background:var(--ink);
}
.sec-h2{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(30px,4.2vw,42px);
  line-height:1.45;letter-spacing:0.05em;
  margin-bottom:28px;
  color:var(--ink);
}
.sec-lead{
  font-size:15px;
  color:var(--gray-700);
  line-height:2.1;
  letter-spacing:0.04em;
}

/* =========================================================
   Results (light bg version)
   ========================================================= */
.results{background:var(--bg-soft);position:relative;overflow:hidden}
.results::before{
  content:"";position:absolute;
  top:-30%;right:-10%;
  width:60vw;height:60vw;
  background:radial-gradient(circle,rgba(31,37,46,.04) 0%,transparent 70%);
  pointer-events:none;
}
.results .wrap{position:relative}

.results-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.result-item{
  padding:48px 16px;
  position:relative;
}
.result-item:not(:last-child)::after{
  content:"";position:absolute;
  right:0;top:50%;transform:translateY(-50%);
  width:1px;height:60%;
  background:var(--gray-300);
}
.result-item .label{
  font-size:12px;letter-spacing:0.18em;
  color:var(--gray-700);
  margin-bottom:24px;
  font-weight:500;
}
.result-item .num{
  font-family:var(--serif);
  font-size:clamp(54px,6.5vw,86px);
  color:var(--ink);line-height:1;
  display:flex;align-items:baseline;gap:4px;
  font-weight:300;
  letter-spacing:-0.02em;
}
.result-item .num .unit{
  font-size:0.3em;color:var(--gray-600);
  margin-left:6px;letter-spacing:0.05em;
  font-family:var(--sans);font-weight:400;
}
.result-item .note{
  font-size:11px;color:var(--gray-500);
  margin-top:20px;letter-spacing:0.05em;
}
.results-cta{margin-top:80px;text-align:center}
.results-cta a{
  color:var(--ink);font-size:14px;
  letter-spacing:0.18em;font-weight:500;
  display:inline-flex;align-items:center;gap:16px;
  padding-bottom:10px;
  border-bottom:1px solid var(--ink);
  transition:gap .3s var(--ease);
}
.results-cta a:hover{gap:24px}

/* =========================================================
   Problem
   ========================================================= */
.problem .wrap{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:clamp(40px,6vw,100px);
}
.problem-list{display:flex;flex-direction:column;gap:0}
.problem-item{
  padding:36px 0 36px 40px;
  border-top:1px solid var(--gray-200);
  display:grid;
  grid-template-columns:60px 1fr;
  gap:32px;align-items:center;
  position:relative;
  transition:padding .35s var(--ease);
}
.problem-item:last-child{border-bottom:1px solid var(--gray-200)}
.problem-item::before{
  content:"";position:absolute;
  left:0;top:50%;transform:translateY(-50%);
  width:4px;height:0;background:var(--ink);
  transition:height .4s var(--ease);
}
.problem-item:hover{padding-left:52px}
.problem-item:hover::before{height:50%}
.problem-item .no{
  font-family:var(--serif);
  font-size:22px;color:var(--gray-400);
  font-weight:300;letter-spacing:0.1em;
}
.problem-item .txt{
  font-size:17px;font-weight:500;
  letter-spacing:0.04em;line-height:1.75;
  color:var(--ink-2);
}

/* =========================================================
   About WILL
   ========================================================= */
.about{background:var(--bg-soft);position:relative;overflow:hidden}
.about::before{
  content:"WILL";
  position:absolute;
  top:-20px;right:-40px;
  font-family:var(--serif);
  font-size:clamp(200px,28vw,420px);
  font-weight:600;
  color:rgba(31,37,46,.025);
  line-height:0.8;
  letter-spacing:-0.05em;
  pointer-events:none;
}
.about .wrap{position:relative}
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,90px);
  align-items:start;
  margin-bottom:96px;
}
.about-visual{aspect-ratio:4/5}
.about-text{
  font-size:15px;line-height:2.2;
  color:var(--gray-700);
  margin-bottom:48px;
  letter-spacing:0.04em;
}
.about-values{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}
.about-value{
  padding:32px 28px 32px 28px;
  background:#fff;
  position:relative;
}
.about-value::before{
  content:"";position:absolute;
  left:0;top:32px;bottom:32px;
  width:3px;background:var(--ink);
}
.about-value .vn{
  font-family:var(--serif);
  font-size:12px;color:var(--ink);
  letter-spacing:0.25em;font-weight:500;
  margin-bottom:20px;
}
.about-value h4{
  font-family:var(--serif);
  font-size:22px;font-weight:600;
  margin-bottom:16px;letter-spacing:0.06em;
  color:var(--ink);
}
.about-value p{
  font-size:14px;color:var(--gray-700);
  line-height:2;letter-spacing:0.03em;
}

/* =========================================================
   Service
   ========================================================= */
.service-list{display:flex;flex-direction:column;margin-top:80px}
.service-row{
  display:grid;
  grid-template-columns:80px 100px 240px 1fr 160px 60px;
  gap:32px;
  padding:40px 0;
  align-items:center;
  border-top:1px solid var(--gray-200);
  position:relative;
  transition:padding .35s var(--ease);
  cursor:pointer;
}
.service-row:last-child{border-bottom:1px solid var(--gray-200)}
.service-row::before{
  content:"";position:absolute;
  left:-20px;top:0;bottom:0;
  width:0;background:var(--gray-50);
  transition:width .4s var(--ease);
  z-index:-1;
}
.service-row:hover{padding-left:24px}
.service-row:hover::before{width:calc(100% + 40px)}
.service-row .sno{
  font-family:var(--serif);
  font-size:14px;color:var(--gray-400);
  letter-spacing:0.18em;font-weight:300;
}
.service-row .sthumb{aspect-ratio:1/1;width:100%}
.service-row .sthumb .ph-meta{padding:8px}
.service-row .sthumb .ph-meta .ph-icon{font-size:24px;margin-bottom:4px}
.service-row .sthumb .ph-meta .ph-label{font-size:9px;letter-spacing:0.18em;margin-bottom:0}
.service-row .sthumb .ph-meta .ph-use,
.service-row .sthumb .ph-meta .ph-size{display:none}
.service-row .stitle{
  font-family:var(--serif);
  font-size:24px;font-weight:600;
  letter-spacing:0.06em;line-height:1.45;
  color:var(--ink);
}
.service-row .stitle small{
  display:block;font-family:var(--sans);
  font-size:11px;color:var(--gray-500);
  letter-spacing:0.22em;font-weight:400;
  margin-top:8px;
}
.service-row .sdesc{
  font-size:14px;color:var(--gray-700);
  line-height:1.95;letter-spacing:0.04em;
}
.service-row .stag{
  font-size:11px;color:var(--ink);
  letter-spacing:0.15em;font-weight:600;
  padding-left:16px;position:relative;
}
.service-row .stag::before{
  content:"";position:absolute;
  left:0;top:50%;transform:translateY(-50%);
  width:8px;height:1px;background:var(--ink);
}
.service-row .sar{
  width:48px;height:48px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--gray-100);
  color:var(--ink);
  transition:all .35s var(--ease);
  margin-left:auto;
}
.service-row:hover .sar{background:var(--ink);color:#fff;transform:translateX(8px)}

.service-cta{text-align:center;margin-top:80px}

/* =========================================================
   Industry
   ========================================================= */
.industry{background:var(--bg-soft)}
.industry-tags{
  display:flex;flex-wrap:wrap;gap:14px 18px;
  margin-top:64px;
}
.industry-tag{
  font-size:13px;
  padding:16px 30px;
  background:#fff;
  letter-spacing:0.08em;
  position:relative;
  transition:padding .25s var(--ease), color .25s var(--ease);
  color:var(--ink);
}
.industry-tag::before{
  content:"";position:absolute;
  left:0;top:0;bottom:0;width:2px;
  background:var(--ink);
  opacity:0;transition:opacity .25s var(--ease);
}
.industry-tag:hover::before{opacity:1}
.industry-tag:hover{padding-left:36px}

/* =========================================================
   Case Study
   ========================================================= */
.case-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:56px 48px;
  margin-top:80px;
}
.case-item{
  cursor:pointer;
  display:flex;flex-direction:column;
}
.case-thumb{
  aspect-ratio:16/10;
  margin-bottom:32px;
  overflow:hidden;
}
.case-thumb .ph-box{
  transition:transform .8s var(--ease);
}
.case-item:hover .case-thumb .ph-box{transform:scale(1.04)}
.case-item .ctag{
  font-size:11px;letter-spacing:0.22em;
  color:var(--gray-700);font-weight:500;
  margin-bottom:16px;display:block;
  padding-left:16px;position:relative;
}
.case-item .ctag::before{
  content:"";position:absolute;
  left:0;top:50%;transform:translateY(-50%);
  width:8px;height:1px;background:var(--ink);
}
.case-item .ctitle{
  font-family:var(--serif);
  font-size:24px;font-weight:600;
  letter-spacing:0.04em;line-height:1.6;
  margin-bottom:18px;
  color:var(--ink);
  transition:color .25s var(--ease);
}
.case-item:hover .ctitle{color:var(--gray-700)}
.case-item .cdesc{
  font-size:14px;color:var(--gray-700);
  line-height:1.95;letter-spacing:0.04em;
}

/* =========================================================
   How it works (dark section, but softer than pure black)
   ========================================================= */
.how{
  background:var(--bg-deep);
  color:#fff;
  position:relative;overflow:hidden;
}
.how::before{
  content:"";position:absolute;
  top:-30%;right:-15%;
  width:60vw;height:60vw;
  background:radial-gradient(circle,rgba(255,255,255,.025) 0%,transparent 70%);
  pointer-events:none;
}
.how .wrap{position:relative}
.how .sec-label{color:var(--gray-400)}
.how .sec-label::before{background:#fff}
.how .sec-h2{color:#fff}
.how .sec-lead{color:var(--gray-400)}

.steps{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:28px;
  margin-top:80px;
}
.step{
  position:relative;
  padding-top:36px;
}
.step::before{
  content:"";position:absolute;
  top:0;left:0;right:0;
  height:1px;background:rgba(255,255,255,.15);
}
.step::after{
  content:"";position:absolute;
  top:0;left:0;
  width:30%;height:2px;background:#fff;
}
.step .sno{
  font-family:var(--serif);
  font-size:12px;color:#fff;
  letter-spacing:0.28em;font-weight:300;
  margin-bottom:22px;
}
.step .stt{
  font-family:var(--serif);
  font-size:22px;font-weight:600;
  letter-spacing:0.06em;
  margin-bottom:18px;
}
.step .sdc{
  font-size:13px;color:var(--gray-400);
  line-height:2;letter-spacing:0.03em;
}

.how-cta{margin-top:80px;text-align:center}
.how-cta .btn-primary{background:#fff;color:var(--ink)}
.how-cta .btn-primary::before{background:rgba(255,255,255,.85)}
.how-cta .btn-primary:hover{color:var(--ink)}

/* =========================================================
   Blog
   ========================================================= */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
  margin-top:80px;
}
.blog-item{cursor:pointer}
.blog-thumb{
  aspect-ratio:16/10;
  margin-bottom:28px;
  overflow:hidden;
}
.blog-thumb .ph-box{transition:transform .8s var(--ease)}
.blog-item:hover .blog-thumb .ph-box{transform:scale(1.04)}
.blog-meta{
  display:flex;gap:16px;align-items:center;
  font-size:11px;letter-spacing:0.18em;
  color:var(--gray-500);
  margin-bottom:18px;
}
.blog-meta .cat{color:var(--ink);font-weight:600}
.blog-title{
  font-family:var(--serif);
  font-size:18px;font-weight:600;
  line-height:1.75;letter-spacing:0.04em;
  color:var(--ink);
  transition:color .25s var(--ease);
}
.blog-item:hover .blog-title{color:var(--gray-700)}

.blog-cta{text-align:center;margin-top:64px}

/* =========================================================
   Final CTA
   ========================================================= */
.final{
  padding:clamp(100px,15vw,180px) 0;
  background:#fff;
  position:relative;overflow:hidden;
}
.final::before{
  content:"";position:absolute;
  top:0;left:50%;transform:translateX(-50%);
  width:900px;height:900px;
  background:radial-gradient(circle,rgba(31,37,46,.035) 0%,transparent 60%);
  pointer-events:none;
}
.final .wrap{position:relative;text-align:center}
.final-label{
  font-size:12px;letter-spacing:0.35em;font-weight:500;
  color:var(--gray-700);
  margin-bottom:36px;
}
.final h2{
  font-family:var(--serif);
  font-size:clamp(38px,3.5vw,80px);
  font-weight:600;
  line-height:1.45;letter-spacing:0.05em;
  margin-bottom:44px;
  color:var(--ink);
}
.final p{
  font-size:15px;line-height:2.2;
  color:var(--gray-700);
  max-width:580px;margin:0 auto 56px;
  letter-spacing:0.04em;
}
.final p strong{color:var(--ink);font-weight:600}
.final-cta{display:flex;gap:32px;justify-content:center;align-items:center;flex-wrap:wrap}

/* =========================================================
   Footer
   ========================================================= */
footer{
  background:var(--bg-deep);color:#fff;
  padding:96px var(--pad) 40px;
}
.footer-grid{
  max-width:var(--max);margin:0 auto;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:64px;
  padding-bottom:72px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-logo{
  font-family:var(--serif);
  font-size:28px;font-weight:600;
  letter-spacing:0.08em;margin-bottom:28px;
}
.footer-logo span{color:var(--gray-500)}
.footer-grid p{font-size:13px;color:var(--gray-400);line-height:2.1;letter-spacing:0.04em}
.footer-col h5{
  font-size:12px;letter-spacing:0.25em;
  color:#fff;font-weight:600;
  margin-bottom:26px;
}
.footer-col ul li{margin-bottom:14px}
.footer-col a{
  font-size:13px;color:var(--gray-300);
  letter-spacing:0.06em;
  transition:color .25s var(--ease);
}
.footer-col a:hover{color:#fff}
.footer-bottom{
  max-width:var(--max);margin:32px auto 0;
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;color:var(--gray-500);letter-spacing:0.12em;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1024px){
  .hero{min-height:640px}
  .hero-svcnav{grid-template-columns:repeat(2,1fr)}
  .hero-svcnav a:nth-child(2n){border-right:none}
  .hero-svcnav a:nth-child(n+3){border-top:1px solid var(--gray-200)}
  .hero-svcnav a:nth-child(5){grid-column:1/-1}
  .about-grid,.problem .wrap{grid-template-columns:1fr;gap:48px}
  .about-visual{max-width:520px}
  .about-values{grid-template-columns:1fr}
  .service-row{grid-template-columns:60px 80px 1fr 60px;gap:20px}
  .service-row .sdesc,.service-row .stag{display:none}
  .results-grid{grid-template-columns:repeat(2,1fr)}
  .result-item:nth-child(2)::after{display:none}
  .result-item:nth-child(1)::after,
  .result-item:nth-child(2)::after{display:none}
  .result-item{border-bottom:1px solid var(--gray-300);padding:36px 16px}
  .result-item:nth-child(3),.result-item:nth-child(4){border-bottom:none}
  .steps{grid-template-columns:repeat(2,1fr)}
  .case-grid,.blog-grid{grid-template-columns:1fr;gap:56px}
  nav ul{gap:20px}
  nav ul li:nth-child(n+5):not(:last-child){display:none}
}
@media (max-width:640px){
  .hero{min-height:560px;height:90vh}
  .hero-main{font-size:clamp(36px,9vw,52px);margin-bottom:24px}
  .hero-content{padding:90px var(--pad) 40px}
  .hero-scroll{display:none}
  nav ul li:not(:last-child){display:none}
  .results-grid{grid-template-columns:1fr}
  .result-item::after{display:none}
  .result-item{border-bottom:1px solid var(--gray-300);padding:32px 0}
  .result-item:last-child{border-bottom:none}
  .steps{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:40px;padding-bottom:48px}
  .footer-bottom{flex-direction:column;gap:14px;margin-top:24px}
  .problem-item{grid-template-columns:40px 1fr;gap:16px}
  .service-row{padding:32px 0;grid-template-columns:80px 1fr 40px;gap:16px}
  .service-row .sno{display:none}
  .hero-svcnav{grid-template-columns:1fr}
  .hero-svcnav a:not(:last-child){border-right:none;border-bottom:1px solid var(--gray-200)}
  .hero-svcnav a:nth-child(n+3){border-top:none}
  .final-cta{flex-direction:column;gap:20px}
}



/* =========================================================
   株式会社WILL / About Page Styles
   style.css の後に読み込まれる前提
   ========================================================= */

/* ===== About Hero ===== */
.about-hero{
  position:relative;
  height:70vh;
  min-height:560px;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.about-hero-bg{
  position:absolute;inset:0;
  z-index:0;
}
.about-hero-bg .ph-box{width:100%;height:100%}
.about-hero-bg .ph-meta .ph-icon{font-size:80px}
.about-hero-bg .ph-meta .ph-label{font-size:13px;letter-spacing:0.35em}
.about-hero-bg .ph-meta .ph-use{font-size:14px}

.about-hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(
    to right,
    rgba(31,37,46,.65) 0%,
    rgba(31,37,46,.4) 50%,
    rgba(31,37,46,.15) 100%
  );
}
.about-hero-overlay-bottom{
  position:absolute;left:0;right:0;bottom:0;
  height:35%;z-index:1;
  background:linear-gradient(to top, rgba(31,37,46,.5), transparent);
}

.about-hero-content{
  position:relative;z-index:2;
  padding:100px var(--pad) 60px;
  max-width:880px;
  width:100%;
}
.about-hero-label{
  font-size:12px;letter-spacing:0.4em;font-weight:500;
  color:rgba(255,255,255,.9);
  padding-left:60px;position:relative;
  margin-bottom:36px;
  opacity:0;
  animation:heroFadeUp 1.1s .5s var(--ease) forwards;
}
.about-hero-label::before{
  content:"";position:absolute;left:0;top:50%;
  width:44px;height:1px;background:rgba(255,255,255,.7);
}
.about-hero-main{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(40px,3.4vw,76px);
  line-height:1.2;
  letter-spacing:0.04em;
  color:#fff;
  margin-bottom:32px;
  opacity:0;
  animation:heroFadeUp 1.1s .7s var(--ease) forwards;
}
.about-hero-sub{
  font-size:15px;line-height:2.1;
  color:rgba(255,255,255,.85);
  font-weight:300;
  max-width:600px;
  letter-spacing:0.06em;
  opacity:0;
  animation:heroFadeUp 1.1s .9s var(--ease) forwards;
}
.about-hero-sub strong{
  display:block;
  color:#fff;
  font-weight:400;
  margin-top:20px;
  font-size:14px;
  letter-spacing:0.1em;
}

/* ===== Message ===== */
.about-message{background:var(--bg)}
.message-grid{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:clamp(40px,6vw,96px);
  align-items:start;
}
.message-visual{aspect-ratio:4/5}
.message-visual .ph-box{width:100%;height:100%}

.message-text .sec-label{margin-bottom:24px}
.message-text .sec-h2{margin-bottom:48px}
.message-text p{
  font-size:15px;line-height:2.2;
  color:var(--gray-700);
  letter-spacing:0.04em;
  margin-bottom:24px;
}
.message-text p:last-of-type{margin-bottom:0}
.message-text p strong{
  color:var(--ink);
  font-weight:600;
  font-family:var(--serif);
  font-size:17px;
  letter-spacing:0.05em;
}

.message-signature{
  margin-top:56px;
  padding-top:32px;
  border-top:1px solid var(--gray-200);
  display:flex;align-items:baseline;gap:20px;
}
.message-signature .ms-label{
  font-size:11px;
  letter-spacing:0.25em;
  color:var(--gray-500);
  font-weight:500;
}
.message-signature .ms-name{
  font-family:var(--serif);
  font-size:20px;font-weight:600;
  letter-spacing:0.08em;
  color:var(--ink);
}

/* ===== Mission / Vision ===== */
.mv{background:var(--bg-soft);position:relative;overflow:hidden}
.mv::before{
  content:"WILL";
  position:absolute;
  bottom:-40px;left:-40px;
  font-family:var(--serif);
  font-size:clamp(180px,24vw,360px);
  font-weight:600;
  color:rgba(31,37,46,.025);
  line-height:0.8;
  letter-spacing:-0.05em;
  pointer-events:none;
}
.mv .wrap{position:relative}
.mv-list{
  display:flex;
  flex-direction:column;
  gap:clamp(60px,8vw,120px);
}
.mv-item{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:clamp(32px,5vw,80px);
  align-items:start;
  position:relative;
}
.mv-item:not(:last-child){
  padding-bottom:clamp(60px,8vw,100px);
  border-bottom:1px solid var(--gray-200);
}
.mv-left{
  display:flex;flex-direction:column;
  gap:24px;
}
.mv-num{
  font-family:var(--serif);
  font-size:14px;
  color:var(--gray-500);
  letter-spacing:0.25em;
  font-weight:300;
}
.mv-label{
  font-family:var(--serif);
  font-size:clamp(28px,3vw,40px);
  font-weight:600;
  letter-spacing:0.08em;
  color:var(--ink);
  position:relative;
  padding-left:32px;
}
.mv-label::before{
  content:"";position:absolute;
  left:0;top:0.6em;
  width:20px;height:1px;
  background:var(--ink);
}
.mv-title{
  font-family:var(--serif);
  font-size:clamp(28px,4vw,46px);
  font-weight:600;
  line-height:1.5;
  letter-spacing:0.06em;
  color:var(--ink);
  margin-bottom:32px;
}
.mv-text{
  font-size:15px;line-height:2.2;
  color:var(--gray-700);
  letter-spacing:0.04em;
}

/* ===== Value ===== */
.about-value-sec{background:var(--bg)}
.value-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  margin-top:80px;
}
.value-item{
  padding:48px 36px;
  background:var(--bg-soft);
  position:relative;
  transition:transform .4s var(--ease);
}
.value-item::before{
  content:"";position:absolute;
  left:0;top:48px;bottom:48px;
  width:3px;background:var(--ink);
}
.value-item:hover{transform:translateY(-4px)}
.value-item .v-num{
  font-family:var(--serif);
  font-size:13px;
  color:var(--ink);
  letter-spacing:0.3em;
  font-weight:500;
  margin-bottom:20px;
  padding-left:16px;
}
.value-item .v-title{
  font-family:var(--serif);
  font-size:26px;
  font-weight:600;
  letter-spacing:0.08em;
  color:var(--ink);
  margin-bottom:24px;
  padding-left:16px;
}
.value-item .v-text{
  font-size:14px;
  line-height:2.1;
  color:var(--gray-700);
  letter-spacing:0.04em;
  padding-left:16px;
}

/* ===== What We Do ===== */
.what-we-do{background:var(--bg-soft)}
.wwd-list{
  margin-top:80px;
  display:flex;flex-direction:column;
}
.wwd-row{
  display:grid;
  grid-template-columns:80px 1fr 200px 60px;
  gap:32px;
  padding:36px 0;
  align-items:center;
  border-top:1px solid var(--gray-200);
  position:relative;
  transition:padding .35s var(--ease);
  cursor:pointer;
}
.wwd-row:last-child{border-bottom:1px solid var(--gray-200)}
.wwd-row::before{
  content:"";position:absolute;
  left:-20px;top:0;bottom:0;
  width:0;background:#fff;
  transition:width .4s var(--ease);
  z-index:-1;
}
.wwd-row:hover{padding-left:24px}
.wwd-row:hover::before{width:calc(100% + 40px)}

.wwd-row .wno{
  font-family:var(--serif);
  font-size:14px;color:var(--gray-400);
  letter-spacing:0.18em;font-weight:300;
}
.wwd-row .wtitle{
  font-family:var(--serif);
  font-size:22px;font-weight:600;
  letter-spacing:0.06em;line-height:1.5;
  color:var(--ink);
}
.wwd-row .wtitle small{
  display:block;font-family:var(--sans);
  font-size:11px;color:var(--gray-500);
  letter-spacing:0.22em;font-weight:400;
  margin-top:8px;
}
.wwd-row .wdesc{
  font-size:13px;color:var(--gray-700);
  line-height:1.8;letter-spacing:0.04em;
}
.wwd-row .war{
  width:44px;height:44px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;
  color:var(--ink);
  transition:all .35s var(--ease);
  margin-left:auto;
}
.wwd-row:hover .war{background:var(--ink);color:#fff;transform:translateX(8px)}

.wwd-cta{text-align:center;margin-top:80px}

/* ===== Company ===== */
.company{background:var(--bg)}
.company-info{
  margin-top:60px;
  border-top:1px solid var(--gray-200);
}
.company-row{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:32px;
  padding:28px 0;
  border-bottom:1px solid var(--gray-200);
  align-items:start;
}
.company-row dt{
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:0.2em;
  color:var(--gray-700);
  font-weight:500;
  padding-top:2px;
}
.company-row dd{
  font-size:15px;
  color:var(--ink);
  line-height:1.85;
  letter-spacing:0.04em;
  font-weight:400;
}
.company-row dd a{
  color:var(--ink);
  border-bottom:1px solid var(--gray-300);
  padding-bottom:1px;
  transition:border-color .25s var(--ease);
}
.company-row dd a:hover{border-bottom-color:var(--ink)}

.company-cta{margin-top:64px;text-align:center}

/* ===== Responsive ===== */
@media (max-width:1024px){
  .about-hero{height:60vh;min-height:480px}
  .message-grid{grid-template-columns:1fr;gap:48px}
  .message-visual{max-width:520px}
  .mv-item{grid-template-columns:1fr;gap:24px}
  .value-grid{grid-template-columns:1fr;gap:20px}
  .value-item{padding:36px 28px}
  .wwd-row{grid-template-columns:60px 1fr 60px;gap:20px}
  .wwd-row .wdesc{display:none}
  .company-row{grid-template-columns:160px 1fr;gap:24px}
}
@media (max-width:640px){
  .about-hero{height:auto;min-height:480px;padding:80px 0 40px}
  .about-hero-main{font-size:clamp(34px,8vw,48px)}
  .about-hero-content{padding:80px var(--pad) 40px}
  .mv-title{font-size:clamp(24px,6vw,32px)}
  .mv-label{font-size:clamp(22px,5vw,28px)}
  .wwd-row{padding:28px 0;grid-template-columns:1fr 40px;gap:16px}
  .wwd-row .wno{display:none}
  .company-row{grid-template-columns:1fr;gap:8px;padding:20px 0}
  .company-row dt{font-size:11px}
  .message-signature{flex-direction:column;gap:8px;align-items:flex-start}
}



/* =========================================================
   株式会社WILL / Service Page Styles
   style.css の後に読み込まれる前提
   ========================================================= */

/* ===== Service Hero ===== */
.service-hero{
  position:relative;
  height:70vh;
  min-height:560px;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.service-hero-bg{
  position:absolute;inset:0;
  z-index:0;
}
.service-hero-bg .ph-box{width:100%;height:100%}
.service-hero-bg .ph-meta .ph-icon{font-size:80px}

.service-hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(
    to right,
    rgba(31,37,46,.65) 0%,
    rgba(31,37,46,.4) 50%,
    rgba(31,37,46,.15) 100%
  );
}
.service-hero-overlay-bottom{
  position:absolute;left:0;right:0;bottom:0;
  height:35%;z-index:1;
  background:linear-gradient(to top, rgba(31,37,46,.5), transparent);
}

.service-hero-content{
  position:relative;z-index:2;
  padding:100px var(--pad) 60px;
  max-width:880px;
  width:100%;
}
.service-hero-label{
  font-size:12px;letter-spacing:0.4em;font-weight:500;
  color:rgba(255,255,255,.9);
  padding-left:60px;position:relative;
  margin-bottom:36px;
  opacity:0;
  animation:heroFadeUp 1.1s .5s var(--ease) forwards;
}
.service-hero-label::before{
  content:"";position:absolute;left:0;top:50%;
  width:44px;height:1px;background:rgba(255,255,255,.7);
}
.service-hero-main{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(38px,3.4vw,72px);
  line-height:1.25;
  letter-spacing:0.04em;
  color:#fff;
  margin-bottom:32px;
  opacity:0;
  animation:heroFadeUp 1.1s .7s var(--ease) forwards;
}
.service-hero-sub{
  font-size:15px;line-height:2.1;
  color:rgba(255,255,255,.85);
  font-weight:300;
  max-width:600px;
  letter-spacing:0.06em;
  margin-bottom:44px;
  opacity:0;
  animation:heroFadeUp 1.1s .9s var(--ease) forwards;
}
.service-hero-cta{
  display:flex;gap:24px;align-items:center;flex-wrap:wrap;
  opacity:0;
  animation:heroFadeUp 1.1s 1.1s var(--ease) forwards;
}

/* ===== Service Concept ===== */
.svc-concept{background:var(--bg);text-align:center}
.svc-concept .wrap{max-width:880px}
.svc-concept .sec-label{
  padding-left:0;display:block;text-align:center;
}
.svc-concept .sec-label::before{
  left:50%;transform:translateX(-50%);top:-12px;
}
.svc-concept .sec-h2{
  text-align:center;
  margin-bottom:40px;
}
.svc-concept-text{
  font-size:15px;line-height:2.3;
  color:var(--gray-700);
  letter-spacing:0.04em;
  margin-bottom:40px;
}
.svc-concept-note{
  display:inline-block;
  padding:24px 40px;
  background:var(--bg-soft);
  font-family:var(--serif);
  font-size:17px;
  font-weight:500;
  letter-spacing:0.06em;
  color:var(--ink);
  position:relative;
}
.svc-concept-note::before,
.svc-concept-note::after{
  content:"";position:absolute;
  width:1px;height:20px;
  background:var(--ink);
  top:50%;transform:translateY(-50%);
}
.svc-concept-note::before{left:-12px}
.svc-concept-note::after{right:-12px}

/* ===== Problem Cards ===== */
.svc-problems{background:var(--bg-soft)}
.pc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:64px;
}
.pc-card{
  background:#fff;
  padding:40px 32px;
  position:relative;
  transition:transform .4s var(--ease);
}
.pc-card::before{
  content:"";position:absolute;
  left:0;top:40px;bottom:40px;
  width:3px;background:var(--ink);
}
.pc-card:hover{transform:translateY(-4px)}
.pc-num{
  font-family:var(--serif);
  font-size:12px;color:var(--gray-500);
  letter-spacing:0.25em;font-weight:500;
  margin-bottom:16px;
  padding-left:16px;
}
.pc-title{
  font-family:var(--serif);
  font-size:22px;font-weight:600;
  letter-spacing:0.06em;
  color:var(--ink);
  margin-bottom:20px;
  padding-left:16px;
  line-height:1.5;
}
.pc-text{
  font-size:14px;line-height:1.95;
  color:var(--gray-700);
  letter-spacing:0.04em;
  margin-bottom:24px;
  padding-left:16px;
}
.pc-services{
  padding-left:16px;
  padding-top:20px;
  border-top:1px solid var(--gray-200);
}
.pc-services-label{
  font-size:10px;letter-spacing:0.25em;
  color:var(--gray-500);font-weight:500;
  margin-bottom:12px;
}
.pc-services-list{
  display:flex;flex-wrap:wrap;gap:6px 10px;
}
.pc-services-list span{
  font-size:11px;font-weight:500;
  color:var(--ink);
  letter-spacing:0.06em;
}
.pc-services-list span:not(:last-child)::after{
  content:"／";
  color:var(--gray-400);
  margin-left:10px;
}

/* ===== 5 Service Detail Blocks ===== */
.svc-detail{background:var(--bg)}
.svc-detail-list{
  display:flex;flex-direction:column;
  gap:clamp(80px,10vw,140px);
  margin-top:80px;
}
.svc-detail-block{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:clamp(40px,6vw,80px);
  align-items:start;
}
.svc-detail-visual{
  aspect-ratio:4/5;
  position:sticky;
  top:120px;
}
.svc-detail-visual .ph-box{width:100%;height:100%}

.svc-detail-info{
  padding-top:8px;
}
.svc-detail-num{
  font-family:var(--serif);
  font-size:13px;
  color:var(--gray-500);
  letter-spacing:0.3em;
  font-weight:500;
  margin-bottom:24px;
  padding-left:32px;
  position:relative;
}
.svc-detail-num::before{
  content:"";position:absolute;
  left:0;top:50%;transform:translateY(-50%);
  width:20px;height:1px;background:var(--ink);
}
.svc-detail-title{
  font-family:var(--serif);
  font-size:clamp(28px,3.4vw,42px);
  font-weight:600;
  letter-spacing:0.06em;
  color:var(--ink);
  margin-bottom:12px;
  line-height:1.4;
}
.svc-detail-title small{
  display:block;
  font-family:var(--sans);
  font-size:11px;
  color:var(--gray-500);
  letter-spacing:0.25em;
  font-weight:400;
  margin-top:10px;
}
.svc-detail-catch{
  font-family:var(--serif);
  font-size:17px;
  color:var(--ink);
  font-weight:500;
  letter-spacing:0.06em;
  margin:32px 0;
  line-height:1.7;
}
.svc-detail-body{
  font-size:14px;line-height:2.1;
  color:var(--gray-700);
  letter-spacing:0.04em;
  margin-bottom:40px;
}

/* 対応内容 / 料金などの共通ブロック */
.svc-block{
  margin-bottom:32px;
}
.svc-block-label{
  font-size:11px;letter-spacing:0.25em;
  color:var(--ink);font-weight:600;
  margin-bottom:18px;
  padding-left:14px;
  position:relative;
}
.svc-block-label::before{
  content:"";position:absolute;
  left:0;top:50%;transform:translateY(-50%);
  width:6px;height:1px;background:var(--ink);
}

/* 対応内容 - tag list */
.svc-features{
  display:flex;flex-wrap:wrap;gap:8px;
}
.svc-features span{
  font-size:12px;
  padding:8px 16px;
  background:var(--bg-soft);
  letter-spacing:0.04em;
  color:var(--ink);
}

/* 料金リスト */
.svc-pricing{
  display:flex;flex-direction:column;
}
.svc-pricing-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  padding:14px 0;
  border-bottom:1px dashed var(--gray-200);
  align-items:baseline;
}
.svc-pricing-row:last-child{border-bottom:none}
.svc-pricing-label{
  font-size:13px;
  color:var(--gray-700);
  letter-spacing:0.04em;
}
.svc-pricing-price{
  font-family:var(--serif);
  font-size:15px;
  font-weight:500;
  color:var(--ink);
  letter-spacing:0.04em;
  text-align:right;
}

.svc-detail-cta{
  margin-top:40px;
}

/* ===== Pricing Overview ===== */
.svc-pricing-section{background:var(--bg-soft)}
.svc-pricing-table{
  margin-top:64px;
  border-top:1px solid var(--ink);
}
.spt-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:32px;
  padding:28px 0;
  border-bottom:1px solid var(--gray-200);
  align-items:baseline;
}
.spt-row dt{
  font-family:var(--serif);
  font-size:18px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:0.05em;
}
.spt-row dd{
  font-family:var(--serif);
  font-size:20px;
  font-weight:500;
  color:var(--ink);
  letter-spacing:0.04em;
}
.spt-notes{
  margin-top:32px;
  padding-left:16px;
  position:relative;
}
.spt-notes::before{
  content:"";position:absolute;
  left:0;top:0;bottom:0;
  width:2px;background:var(--gray-400);
}
.spt-notes p{
  font-size:12px;
  color:var(--gray-700);
  line-height:2;
  letter-spacing:0.04em;
}
.svc-pricing-cta{margin-top:56px;text-align:center}

/* ===== Service Flow (light bg, different from TOP) ===== */
.svc-flow{background:var(--bg)}
.svc-flow-steps{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:28px;
  margin-top:80px;
}
.svc-flow-step{
  position:relative;
  padding-top:36px;
}
.svc-flow-step::before{
  content:"";position:absolute;
  top:0;left:0;right:0;
  height:1px;background:var(--gray-200);
}
.svc-flow-step::after{
  content:"";position:absolute;
  top:0;left:0;
  width:30%;height:2px;background:var(--ink);
}
.svc-flow-step .sfno{
  font-family:var(--serif);
  font-size:12px;color:var(--ink);
  letter-spacing:0.28em;font-weight:500;
  margin-bottom:22px;
}
.svc-flow-step .sftt{
  font-family:var(--serif);
  font-size:22px;font-weight:600;
  letter-spacing:0.06em;
  margin-bottom:18px;
  color:var(--ink);
}
.svc-flow-step .sfdc{
  font-size:13px;color:var(--gray-700);
  line-height:2;letter-spacing:0.03em;
}

/* ===== FAQ ===== */
.svc-faq{background:var(--bg-soft)}
.faq-list{
  margin-top:64px;
  border-top:1px solid var(--ink);
}
.faq-item{
  border-bottom:1px solid var(--gray-200);
  background:transparent;
  transition:background .25s var(--ease);
}
.faq-item.is-open{background:#fff}
.faq-question{
  width:100%;
  padding:32px 24px 32px 28px;
  display:flex;
  align-items:center;
  gap:24px;
  text-align:left;
  cursor:pointer;
  position:relative;
}
.faq-question::before{
  content:"";position:absolute;
  left:0;top:0;bottom:0;
  width:3px;background:var(--ink);
  transform:scaleY(0);transform-origin:center;
  transition:transform .35s var(--ease);
}
.faq-item.is-open .faq-question::before{transform:scaleY(1)}

.faq-q-label{
  font-family:var(--serif);
  font-size:26px;
  font-weight:500;
  color:var(--gray-400);
  letter-spacing:0.04em;
  flex-shrink:0;
  line-height:1;
  transition:color .25s var(--ease);
}
.faq-item.is-open .faq-q-label{color:var(--ink)}

.faq-q-text{
  flex:1;
  font-size:16px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:0.04em;
  line-height:1.6;
}

.faq-toggle{
  width:36px;height:36px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--gray-100);
  position:relative;
  transition:background .3s var(--ease);
}
.faq-toggle::before,
.faq-toggle::after{
  content:"";position:absolute;
  background:var(--ink);
  top:50%;left:50%;
  transition:transform .35s var(--ease), background .25s var(--ease);
}
.faq-toggle::before{
  width:14px;height:1px;
  transform:translate(-50%,-50%);
}
.faq-toggle::after{
  width:1px;height:14px;
  transform:translate(-50%,-50%);
}
.faq-item.is-open .faq-toggle{background:var(--ink)}
.faq-item.is-open .faq-toggle::before,
.faq-item.is-open .faq-toggle::after{background:#fff}
.faq-item.is-open .faq-toggle::after{transform:translate(-50%,-50%) scaleY(0)}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .5s var(--ease);
}
.faq-item.is-open .faq-answer{max-height:500px}
.faq-a-inner{
  padding:0 24px 32px 78px;
  display:flex;
  gap:24px;
  align-items:flex-start;
}
.faq-a-label{
  font-family:var(--serif);
  font-size:24px;
  font-weight:500;
  color:var(--ink);
  letter-spacing:0.04em;
  line-height:1;
  flex-shrink:0;
  padding-top:2px;
}
.faq-a-text{
  font-size:14px;
  line-height:2.1;
  color:var(--gray-700);
  letter-spacing:0.04em;
}

/* ===== Responsive ===== */
@media (max-width:1024px){
  .service-hero{height:60vh;min-height:480px}
  .pc-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .svc-detail-block{grid-template-columns:1fr;gap:40px}
  .svc-detail-visual{position:relative;top:0;max-width:520px}
  .svc-flow-steps{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media (max-width:640px){
  .service-hero{height:auto;min-height:480px}
  .service-hero-content{padding:80px var(--pad) 40px}
  .service-hero-main{font-size:clamp(34px,8vw,48px)}
  .pc-grid{grid-template-columns:1fr;gap:16px}
  .pc-card{padding:32px 24px}
  .svc-concept-note{padding:20px 28px;font-size:15px}
  .svc-detail-title{font-size:clamp(24px,6vw,32px)}
  .spt-row{grid-template-columns:1fr;gap:8px;padding:20px 0}
  .spt-row dt{font-size:14px;color:var(--gray-700)}
  .spt-row dd{font-size:18px}
  .svc-flow-steps{grid-template-columns:1fr;gap:32px}
  .faq-question{padding:24px 16px 24px 20px;gap:16px}
  .faq-q-label{font-size:22px}
  .faq-q-text{font-size:14px}
  .faq-a-inner{padding:0 16px 24px 56px;gap:16px}
  .faq-a-label{font-size:20px}
  .faq-a-text{font-size:13px}
}


/* =========================================================
   株式会社WILL / Case Study Page Styles
   style.css の後に読み込まれる前提
   ========================================================= */

/* ===== Case Hero ===== */
.case-hero{
  position:relative;
  height:70vh;
  min-height:560px;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.case-hero-bg{
  position:absolute;inset:0;
  z-index:0;
}
.case-hero-bg .ph-box{width:100%;height:100%}
.case-hero-bg .ph-meta .ph-icon{font-size:80px}

.case-hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(
    to right,
    rgba(31,37,46,.65) 0%,
    rgba(31,37,46,.4) 50%,
    rgba(31,37,46,.15) 100%
  );
}
.case-hero-overlay-bottom{
  position:absolute;left:0;right:0;bottom:0;
  height:35%;z-index:1;
  background:linear-gradient(to top, rgba(31,37,46,.5), transparent);
}

.case-hero-content{
  position:relative;z-index:2;
  padding:100px var(--pad) 60px;
  max-width:880px;
  width:100%;
}
.case-hero-label{
  font-size:12px;letter-spacing:0.4em;font-weight:500;
  color:rgba(255,255,255,.9);
  padding-left:60px;position:relative;
  margin-bottom:36px;
  opacity:0;
  animation:heroFadeUp 1.1s .5s var(--ease) forwards;
}
.case-hero-label::before{
  content:"";position:absolute;left:0;top:50%;
  width:44px;height:1px;background:rgba(255,255,255,.7);
}
.case-hero-main{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(38px,3.4vw,72px);
  line-height:1.3;
  letter-spacing:0.04em;
  color:#fff;
  margin-bottom:32px;
  opacity:0;
  animation:heroFadeUp 1.1s .7s var(--ease) forwards;
}
.case-hero-sub{
  font-size:15px;line-height:2.1;
  color:rgba(255,255,255,.85);
  font-weight:300;
  max-width:600px;
  letter-spacing:0.06em;
  margin-bottom:44px;
  opacity:0;
  animation:heroFadeUp 1.1s .9s var(--ease) forwards;
}
.case-hero-cta{
  display:flex;gap:24px;align-items:center;flex-wrap:wrap;
  opacity:0;
  animation:heroFadeUp 1.1s 1.1s var(--ease) forwards;
}

/* ===== Results Summary ===== */
.cs-results{background:var(--bg)}
.cs-results-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  margin-top:72px;
  border-top:1px solid var(--gray-200);
  border-bottom:1px solid var(--gray-200);
}
.cs-result-item{
  padding:48px 24px;
  position:relative;
}
.cs-result-item:not(:last-child)::after{
  content:"";position:absolute;
  right:0;top:50%;transform:translateY(-50%);
  width:1px;height:60%;
  background:var(--gray-200);
}
.cs-result-item .label{
  font-size:12px;letter-spacing:0.18em;
  color:var(--gray-700);
  margin-bottom:24px;
  font-weight:500;
}
.cs-result-item .num{
  font-family:var(--serif);
  font-size:clamp(48px,5.8vw,76px);
  color:var(--ink);line-height:1;
  display:flex;align-items:baseline;gap:4px;
  font-weight:300;
  letter-spacing:-0.02em;
}
.cs-result-item .num .unit{
  font-size:0.3em;color:var(--gray-600);
  margin-left:6px;letter-spacing:0.05em;
  font-family:var(--sans);font-weight:400;
}
.cs-results-note{
  margin-top:24px;
  font-size:11px;
  color:var(--gray-500);
  letter-spacing:0.04em;
  text-align:right;
}

/* ===== Category Filter ===== */
.cs-filter-section{background:var(--bg-soft)}
.case-filter{
  display:flex;flex-wrap:wrap;
  gap:0;
  margin-top:48px;
  border-top:1px solid var(--gray-200);
  border-bottom:1px solid var(--gray-200);
}
.case-filter-btn{
  font-family:inherit;
  font-size:13px;
  letter-spacing:0.08em;
  font-weight:500;
  color:var(--gray-700);
  padding:20px 32px;
  background:transparent;
  cursor:pointer;
  position:relative;
  transition:color .3s var(--ease), background .3s var(--ease);
}
.case-filter-btn:not(:last-child){
  border-right:1px solid var(--gray-200);
}
.case-filter-btn::before{
  content:"";position:absolute;
  left:0;right:0;bottom:-1px;
  height:2px;background:var(--ink);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .35s var(--ease);
}
.case-filter-btn:hover{color:var(--ink)}
.case-filter-btn.is-active{
  color:var(--ink);
  background:#fff;
  font-weight:600;
}
.case-filter-btn.is-active::before{transform:scaleX(1)}

/* ===== Case Study List ===== */
.cs-list-section{background:var(--bg-soft)}
.case-grid-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:56px 48px;
  margin-top:64px;
}
.case-card{
  display:flex;flex-direction:column;
  cursor:pointer;
  transition:opacity .3s var(--ease), transform .4s var(--ease);
}
.case-card.is-hidden{
  display:none;
}
.case-card:hover{opacity:0.85}
.case-card-thumb{
  aspect-ratio:16/10;
  overflow:hidden;
  margin-bottom:28px;
  position:relative;
}
.case-card-thumb .ph-box{
  transition:transform .8s var(--ease);
}
.case-card:hover .case-card-thumb .ph-box{transform:scale(1.05)}
.case-card-tags{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:18px;
}
.case-tag{
  font-size:11px;
  padding:5px 14px;
  letter-spacing:0.08em;
  font-weight:500;
}
.case-tag.cat{
  background:var(--ink);
  color:#fff;
}
.case-tag.industry{
  background:#fff;
  color:var(--ink);
  border:1px solid var(--gray-200);
}
.case-card-title{
  font-family:var(--serif);
  font-size:22px;
  font-weight:600;
  letter-spacing:0.05em;
  line-height:1.55;
  color:var(--ink);
  margin-bottom:20px;
  transition:color .25s var(--ease);
}
.case-card:hover .case-card-title{color:var(--gray-700)}

.case-card-summary{
  display:flex;flex-direction:column;
  gap:12px;
  margin-bottom:24px;
  padding:20px 0;
  border-top:1px solid var(--gray-200);
  border-bottom:1px solid var(--gray-200);
}
.case-card-summary-row{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:16px;
  font-size:13px;
  line-height:1.85;
  letter-spacing:0.03em;
}
.case-card-summary-row dt{
  font-size:11px;
  color:var(--gray-500);
  letter-spacing:0.18em;
  font-weight:500;
  padding-top:2px;
}
.case-card-summary-row dd{
  color:var(--gray-700);
}

.case-card-services{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:24px;
}
.case-card-services .label{
  font-size:11px;
  letter-spacing:0.18em;
  color:var(--gray-500);
  font-weight:500;
  margin-right:8px;
  padding-top:6px;
}
.case-card-services .svc{
  font-size:12px;
  color:var(--ink);
  font-weight:500;
  padding:4px 12px;
  background:var(--bg-soft);
  letter-spacing:0.04em;
}
.case-card:hover .case-card-services .svc{
  background:#fff;
}

.case-card-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.15em;
  color:var(--ink);
  padding-bottom:6px;
  border-bottom:1px solid var(--ink);
  transition:gap .3s var(--ease);
  align-self:flex-start;
}
.case-card:hover .case-card-link{gap:20px}

/* ===== Featured Case ===== */
.cs-featured{
  background:var(--bg-deep);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.cs-featured::before{
  content:"";position:absolute;
  top:-30%;right:-15%;
  width:60vw;height:60vw;
  background:radial-gradient(circle,rgba(255,255,255,.04) 0%,transparent 70%);
  pointer-events:none;
}
.cs-featured .wrap{position:relative}

.cs-featured-label{
  font-size:11px;
  letter-spacing:0.4em;
  font-weight:500;
  color:#fff;
  padding-left:32px;
  position:relative;
  margin-bottom:32px;
  display:inline-block;
}
.cs-featured-label::before{
  content:"";position:absolute;
  left:0;top:50%;transform:translateY(-50%);
  width:20px;height:1px;background:#fff;
}

.cs-featured-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,96px);
  align-items:center;
}
.cs-featured-visual{
  aspect-ratio:4/3;
  position:relative;
}
.cs-featured-visual .ph-box{width:100%;height:100%}

.cs-featured-info{
  padding:24px 0;
}
.cs-featured-title{
  font-family:var(--serif);
  font-size:clamp(28px,3.6vw,44px);
  font-weight:600;
  line-height:1.5;
  letter-spacing:0.05em;
  margin-bottom:32px;
  color:#fff;
}
.cs-featured-body{
  font-size:15px;
  line-height:2.1;
  color:var(--gray-300);
  letter-spacing:0.04em;
  margin-bottom:48px;
}

.cs-featured-breakdown{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
  margin-bottom:48px;
  border-top:1px solid rgba(255,255,255,.12);
}
.cs-featured-breakdown-item{
  padding:24px 16px 24px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.cs-featured-breakdown-item:nth-child(odd){
  padding-right:24px;
  border-right:1px solid rgba(255,255,255,.12);
}
.cs-featured-breakdown-item:nth-child(even){
  padding-left:24px;
}
.cs-bd-label{
  font-size:12px;
  letter-spacing:0.1em;
  color:var(--gray-400);
  margin-bottom:10px;
}
.cs-bd-value{
  font-family:var(--serif);
  font-size:28px;
  font-weight:300;
  color:#fff;
  letter-spacing:0.02em;
}
.cs-bd-value .unit{
  font-size:14px;
  color:var(--gray-400);
  margin-left:4px;
  font-family:var(--sans);
  font-weight:400;
}

.cs-featured-cta a{
  display:inline-flex;align-items:center;gap:12px;
  background:#fff;
  color:var(--ink);
  padding:18px 32px;
  border-radius:999px;
  font-size:13px;
  font-weight:500;
  letter-spacing:0.15em;
  transition:all .3s var(--ease);
  position:relative;
  overflow:hidden;
}
.cs-featured-cta a::before{
  content:"";position:absolute;inset:0;
  background:var(--gray-200);
  transform:translateX(-100%);
  transition:transform .35s var(--ease);
}
.cs-featured-cta a:hover::before{transform:translateX(0)}
.cs-featured-cta a span{position:relative;z-index:1}
.cs-featured-cta a .arrow{
  position:relative;z-index:1;
  transition:transform .3s var(--ease);
}
.cs-featured-cta a:hover .arrow{transform:translateX(6px)}

/* ===== Support Area ===== */
.cs-support{background:var(--bg)}
.cs-support-block{
  margin-top:64px;
}
.cs-support-block + .cs-support-block{
  margin-top:48px;
}
.cs-support-label{
  font-family:var(--serif);
  font-size:14px;
  letter-spacing:0.2em;
  font-weight:600;
  color:var(--ink);
  margin-bottom:24px;
  padding-left:16px;
  position:relative;
}
.cs-support-label::before{
  content:"";position:absolute;
  left:0;top:50%;transform:translateY(-50%);
  width:8px;height:1px;background:var(--ink);
}
.cs-support-tags{
  display:flex;flex-wrap:wrap;gap:10px 14px;
}
.cs-support-tag{
  font-size:13px;
  padding:12px 24px;
  background:var(--bg-soft);
  letter-spacing:0.06em;
  color:var(--ink);
  position:relative;
  transition:padding .25s var(--ease);
}
.cs-support-tag::before{
  content:"";position:absolute;
  left:0;top:0;bottom:0;width:2px;
  background:var(--ink);
  opacity:0;transition:opacity .25s var(--ease);
}
.cs-support-tag:hover::before{opacity:1}
.cs-support-tag:hover{padding-left:30px}

/* ===== Responsive ===== */
@media (max-width:1024px){
  .case-hero{height:60vh;min-height:480px}
  .cs-results-grid{grid-template-columns:repeat(2,1fr)}
  .cs-result-item:nth-child(2)::after{display:none}
  .cs-result-item{border-bottom:1px solid var(--gray-200);padding:36px 16px}
  .cs-result-item:nth-child(3),
  .cs-result-item:nth-child(4){border-bottom:none}
  .case-grid-list{grid-template-columns:1fr;gap:56px}
  .cs-featured-grid{grid-template-columns:1fr;gap:48px}
  .cs-featured-visual{max-width:560px}
  .case-filter{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}
  .case-filter-btn{padding:18px 24px;flex-shrink:0;font-size:12px}
}
@media (max-width:640px){
  .case-hero{height:auto;min-height:480px}
  .case-hero-content{padding:80px var(--pad) 40px}
  .case-hero-main{font-size:clamp(28px,7vw,40px);line-height:1.4}
  .cs-results-grid{grid-template-columns:1fr;border-top:1px solid var(--gray-200)}
  .cs-result-item{border-bottom:1px solid var(--gray-200);padding:28px 0}
  .cs-result-item::after{display:none}
  .cs-result-item:last-child{border-bottom:none}
  .cs-featured-title{font-size:clamp(22px,5.5vw,28px)}
  .cs-featured-breakdown{grid-template-columns:1fr}
  .cs-featured-breakdown-item:nth-child(odd){
    padding-right:0;
    border-right:none;
  }
  .cs-featured-breakdown-item:nth-child(even){padding-left:0}
  .case-card-summary-row{grid-template-columns:1fr;gap:4px}
  .case-card-summary-row dt{font-size:10px;letter-spacing:0.22em}
}

/* =========================================================
   株式会社WILL / Blog Page Styles
   style.css の後に読み込まれる前提
   ========================================================= */

/* ===== Blog Hero ===== */
.blog-hero{
  position:relative;
  height:70vh;
  min-height:560px;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.blog-hero-bg{
  position:absolute;inset:0;
  z-index:0;
}
.blog-hero-bg .ph-box{width:100%;height:100%}
.blog-hero-bg .ph-meta .ph-icon{font-size:80px}

.blog-hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(
    to right,
    rgba(31,37,46,.65) 0%,
    rgba(31,37,46,.4) 50%,
    rgba(31,37,46,.15) 100%
  );
}
.blog-hero-overlay-bottom{
  position:absolute;left:0;right:0;bottom:0;
  height:35%;z-index:1;
  background:linear-gradient(to top, rgba(31,37,46,.5), transparent);
}

.blog-hero-content{
  position:relative;z-index:2;
  padding:100px var(--pad) 60px;
  max-width:880px;
  width:100%;
}
.blog-hero-label{
  font-size:12px;letter-spacing:0.4em;font-weight:500;
  color:rgba(255,255,255,.9);
  padding-left:60px;position:relative;
  margin-bottom:36px;
  opacity:0;
  animation:heroFadeUp 1.1s .5s var(--ease) forwards;
}
.blog-hero-label::before{
  content:"";position:absolute;left:0;top:50%;
  width:44px;height:1px;background:rgba(255,255,255,.7);
}
.blog-hero-main{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(38px,3.4vw,72px);
  line-height:1.3;
  letter-spacing:0.04em;
  color:#fff;
  margin-bottom:32px;
  opacity:0;
  animation:heroFadeUp 1.1s .7s var(--ease) forwards;
}
.blog-hero-sub{
  font-size:15px;line-height:2.1;
  color:rgba(255,255,255,.85);
  font-weight:300;
  max-width:600px;
  letter-spacing:0.06em;
  margin-bottom:44px;
  opacity:0;
  animation:heroFadeUp 1.1s .9s var(--ease) forwards;
}
.blog-hero-cta{
  display:flex;gap:24px;align-items:center;flex-wrap:wrap;
  opacity:0;
  animation:heroFadeUp 1.1s 1.1s var(--ease) forwards;
}

/* =========================================================
   Featured Articles
   1記事大型 + 2記事横並び
   ========================================================= */
.bl-featured{background:var(--bg)}
.bl-feat-list{
  margin-top:72px;
  display:flex;flex-direction:column;
  gap:56px;
}

/* Featured Main (大型横長) */
.bl-feat-main{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:clamp(40px,5vw,72px);
  align-items:center;
  cursor:pointer;
}
.bl-feat-main-thumb{
  aspect-ratio:4/3;
  overflow:hidden;
  position:relative;
}
.bl-feat-main-thumb .ph-box{transition:transform .8s var(--ease)}
.bl-feat-main:hover .bl-feat-main-thumb .ph-box{transform:scale(1.04)}

.bl-feat-main-info .bl-feat-badge{
  display:inline-block;
  font-size:10px;letter-spacing:0.3em;
  color:var(--ink);font-weight:600;
  margin-bottom:24px;
  padding-left:24px;position:relative;
}
.bl-feat-main-info .bl-feat-badge::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:14px;height:1px;background:var(--ink);
}
.bl-feat-meta{
  display:flex;gap:16px;align-items:center;
  font-size:11px;letter-spacing:0.18em;
  color:var(--gray-500);
  margin-bottom:18px;
}
.bl-feat-meta .cat{
  color:var(--ink);font-weight:600;
  padding:4px 12px;background:var(--bg-soft);
}
.bl-feat-meta .date{font-family:var(--serif);font-weight:500}

.bl-feat-main-title{
  font-family:var(--serif);
  font-size:clamp(24px,2.8vw,36px);
  font-weight:600;
  line-height:1.55;
  letter-spacing:0.04em;
  color:var(--ink);
  margin-bottom:24px;
  transition:color .25s var(--ease);
}
.bl-feat-main:hover .bl-feat-main-title{color:var(--gray-700)}

.bl-feat-main-excerpt{
  font-size:14px;line-height:2;
  color:var(--gray-700);
  letter-spacing:0.04em;
  margin-bottom:28px;
}
.bl-feat-services{
  display:flex;flex-wrap:wrap;gap:8px;
  align-items:center;
  margin-bottom:32px;
}
.bl-feat-services .label{
  font-size:10px;
  letter-spacing:0.2em;
  color:var(--gray-500);
  font-weight:500;
  margin-right:6px;
}
.bl-feat-services .svc{
  font-size:11px;
  padding:4px 12px;
  background:var(--bg-soft);
  color:var(--ink);
  letter-spacing:0.04em;
}
.bl-feat-link{
  display:inline-flex;align-items:center;gap:12px;
  font-size:13px;font-weight:600;
  letter-spacing:0.15em;
  color:var(--ink);
  padding-bottom:6px;
  border-bottom:1px solid var(--ink);
  transition:gap .3s var(--ease);
}
.bl-feat-main:hover .bl-feat-link{gap:20px}

/* Featured Sub (2カラム) */
.bl-feat-subs{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px 48px;
}
.bl-feat-sub{cursor:pointer}
.bl-feat-sub-thumb{
  aspect-ratio:16/10;
  overflow:hidden;
  margin-bottom:24px;
}
.bl-feat-sub-thumb .ph-box{transition:transform .8s var(--ease)}
.bl-feat-sub:hover .bl-feat-sub-thumb .ph-box{transform:scale(1.04)}

.bl-feat-sub-title{
  font-family:var(--serif);
  font-size:20px;
  font-weight:600;
  letter-spacing:0.04em;
  line-height:1.65;
  color:var(--ink);
  margin-bottom:18px;
  transition:color .25s var(--ease);
}
.bl-feat-sub:hover .bl-feat-sub-title{color:var(--gray-700)}

.bl-feat-sub-excerpt{
  font-size:13px;line-height:1.95;
  color:var(--gray-700);
  letter-spacing:0.04em;
  margin-bottom:20px;
}

/* =========================================================
   Category
   ========================================================= */
.bl-category{background:var(--bg-soft)}
.bl-cat-list{
  margin-top:64px;
  display:flex;flex-direction:column;
  border-top:1px solid var(--gray-200);
}
.bl-cat-row{
  display:grid;
  grid-template-columns:60px 200px 1fr 80px 60px;
  gap:24px;
  padding:28px 0;
  align-items:center;
  border-bottom:1px solid var(--gray-200);
  cursor:pointer;
  position:relative;
  transition:padding .3s var(--ease);
}
.bl-cat-row::before{
  content:"";position:absolute;
  left:-20px;top:0;bottom:0;
  width:0;background:#fff;
  transition:width .35s var(--ease);
  z-index:-1;
}
.bl-cat-row:hover{padding-left:24px}
.bl-cat-row:hover::before{width:calc(100% + 40px)}

.bl-cat-row .cno{
  font-family:var(--serif);
  font-size:13px;color:var(--gray-400);
  letter-spacing:0.15em;font-weight:300;
}
.bl-cat-row .cname{
  font-family:var(--serif);
  font-size:20px;font-weight:600;
  letter-spacing:0.05em;
  color:var(--ink);
}
.bl-cat-row .cdesc{
  font-size:13px;color:var(--gray-700);
  line-height:1.85;letter-spacing:0.04em;
}
.bl-cat-row .ccount{
  font-size:11px;color:var(--gray-500);
  letter-spacing:0.18em;font-weight:500;
  text-align:right;
}
.bl-cat-row .ccount .num{
  font-family:var(--serif);
  font-size:18px;
  color:var(--ink);font-weight:500;
  margin-right:4px;
}
.bl-cat-row .car{
  width:40px;height:40px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;
  color:var(--ink);
  transition:all .35s var(--ease);
  margin-left:auto;
}
.bl-cat-row:hover .car{background:var(--ink);color:#fff;transform:translateX(6px)}

/* =========================================================
   Article List
   ========================================================= */
.bl-articles{background:var(--bg)}
.bl-article-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:56px 40px;
  margin-top:72px;
}
.bl-article{cursor:pointer}
.bl-article-thumb{
  aspect-ratio:16/10;
  overflow:hidden;
  margin-bottom:24px;
}
.bl-article-thumb .ph-box{transition:transform .8s var(--ease)}
.bl-article:hover .bl-article-thumb .ph-box{transform:scale(1.05)}

.bl-article-meta{
  display:flex;gap:14px;align-items:center;
  font-size:11px;letter-spacing:0.18em;
  color:var(--gray-500);
  margin-bottom:16px;
}
.bl-article-meta .cat{
  color:var(--ink);font-weight:600;
}
.bl-article-meta .date{font-family:var(--serif)}

.bl-article-title{
  font-family:var(--serif);
  font-size:17px;font-weight:600;
  line-height:1.75;
  letter-spacing:0.04em;
  color:var(--ink);
  margin-bottom:14px;
  transition:color .25s var(--ease);
}
.bl-article:hover .bl-article-title{color:var(--gray-700)}

.bl-article-excerpt{
  font-size:13px;line-height:1.95;
  color:var(--gray-700);
  letter-spacing:0.04em;
}

.bl-article-list-cta{
  margin-top:80px;text-align:center;
}

/* =========================================================
   Service CTA Block
   ========================================================= */
.bl-svc-cta{background:var(--bg-soft)}
.bl-svc-cta .wrap{
  max-width:880px;
  text-align:center;
}
.bl-svc-cta-label{
  font-size:11px;letter-spacing:0.35em;font-weight:500;
  color:var(--gray-700);
  display:inline-block;
  padding-left:32px;position:relative;
  margin-bottom:32px;
}
.bl-svc-cta-label::before{
  content:"";position:absolute;left:0;top:50%;
  width:20px;height:1px;background:var(--ink);
}
.bl-svc-cta h2{
  font-family:var(--serif);
  font-size:clamp(28px,3.6vw,44px);
  font-weight:600;
  line-height:1.5;
  letter-spacing:0.05em;
  margin-bottom:32px;
  color:var(--ink);
}
.bl-svc-cta p{
  font-size:15px;line-height:2.2;
  color:var(--gray-700);
  max-width:580px;margin:0 auto 48px;
  letter-spacing:0.04em;
}

/* ===== Responsive ===== */
@media (max-width:1024px){
  .blog-hero{height:60vh;min-height:480px}
  .bl-feat-main{grid-template-columns:1fr;gap:32px}
  .bl-feat-main-thumb{max-width:680px}
  .bl-feat-subs{grid-template-columns:1fr;gap:48px}
  .bl-cat-row{
    grid-template-columns:50px 1fr 60px 40px;
    gap:16px;padding:24px 0;
  }
  .bl-cat-row .cdesc{display:none}
  .bl-article-grid{grid-template-columns:repeat(2,1fr);gap:48px 32px}
}
@media (max-width:640px){
  .blog-hero{height:auto;min-height:480px}
  .blog-hero-content{padding:80px var(--pad) 40px}
  .blog-hero-main{font-size:clamp(28px,7vw,40px);line-height:1.4}
  .bl-feat-main-title{font-size:clamp(20px,5.5vw,26px)}
  .bl-cat-row{grid-template-columns:1fr 50px 32px;gap:12px}
  .bl-cat-row .cno{display:none}
  .bl-cat-row .ccount{font-size:10px}
  .bl-cat-row .ccount .num{font-size:15px}
  .bl-article-grid{grid-template-columns:1fr;gap:48px}
}


/* =========================================================
   株式会社WILL / Contact Page Styles
   style.css の後に読み込まれる前提
   ========================================================= */

/* ===== Contact Hero ===== */
.contact-hero{
  position:relative;
  height:70vh;
  min-height:560px;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.contact-hero-bg{
  position:absolute;inset:0;
  z-index:0;
}
.contact-hero-bg .ph-box{width:100%;height:100%}
.contact-hero-bg .ph-meta .ph-icon{font-size:80px}

.contact-hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(
    to right,
    rgba(31,37,46,.65) 0%,
    rgba(31,37,46,.4) 50%,
    rgba(31,37,46,.15) 100%
  );
}
.contact-hero-overlay-bottom{
  position:absolute;left:0;right:0;bottom:0;
  height:35%;z-index:1;
  background:linear-gradient(to top, rgba(31,37,46,.5), transparent);
}

.contact-hero-content{
  position:relative;z-index:2;
  padding:100px var(--pad) 60px;
  max-width:880px;
  width:100%;
}
.contact-hero-label{
  font-size:12px;letter-spacing:0.4em;font-weight:500;
  color:rgba(255,255,255,.9);
  padding-left:60px;position:relative;
  margin-bottom:36px;
  opacity:0;
  animation:heroFadeUp 1.1s .5s var(--ease) forwards;
}
.contact-hero-label::before{
  content:"";position:absolute;left:0;top:50%;
  width:44px;height:1px;background:rgba(255,255,255,.7);
}
.contact-hero-main{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(38px,3.4vw,72px);
  line-height:1.3;
  letter-spacing:0.04em;
  color:#fff;
  margin-bottom:32px;
  opacity:0;
  animation:heroFadeUp 1.1s .7s var(--ease) forwards;
}
.contact-hero-sub{
  font-size:15px;line-height:2.1;
  color:rgba(255,255,255,.85);
  font-weight:300;
  max-width:640px;
  letter-spacing:0.06em;
  margin-bottom:32px;
  opacity:0;
  animation:heroFadeUp 1.1s .9s var(--ease) forwards;
}
.contact-hero-note{
  display:flex;gap:24px;flex-wrap:wrap;
  opacity:0;
  animation:heroFadeUp 1.1s 1.1s var(--ease) forwards;
}
.contact-hero-note span{
  font-size:12px;
  color:rgba(255,255,255,.75);
  letter-spacing:0.08em;
  padding-left:16px;
  position:relative;
}
.contact-hero-note span::before{
  content:"";position:absolute;
  left:0;top:50%;transform:translateY(-50%);
  width:6px;height:1px;background:rgba(255,255,255,.5);
}

/* =========================================================
   Contact Lead
   ========================================================= */
.ct-lead{background:var(--bg)}
.ct-lead-grid{
  margin-top:64px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--gray-200);
  border-bottom:1px solid var(--gray-200);
}
.ct-lead-item{
  padding:32px 28px;
  display:flex;align-items:center;gap:20px;
  position:relative;
  background:transparent;
  transition:background .3s var(--ease);
}
.ct-lead-item:not(:nth-child(3n))::after{
  content:"";position:absolute;
  right:0;top:20%;bottom:20%;
  width:1px;background:var(--gray-200);
}
.ct-lead-item:nth-child(n+4){
  border-top:1px solid var(--gray-200);
}
.ct-lead-item:hover{background:var(--bg-soft)}
.ct-lead-mark{
  width:32px;height:32px;
  flex-shrink:0;
  background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  font-size:14px;
  font-weight:600;
}
.ct-lead-text{
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  letter-spacing:0.04em;
  line-height:1.6;
}

.ct-lead-note{
  margin-top:48px;
  text-align:center;
  font-size:14px;
  color:var(--gray-700);
  line-height:2;
  letter-spacing:0.04em;
}

/* =========================================================
   Form 共通：選択肢ボタン
   ========================================================= */
.opt-group{
  display:grid;
  gap:12px;
}
.opt-group.cols-2{grid-template-columns:repeat(2,1fr)}
.opt-group.cols-3{grid-template-columns:repeat(3,1fr)}
.opt-group.cols-4{grid-template-columns:repeat(4,1fr)}

.opt-input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.opt-label{
  display:flex;align-items:center;justify-content:center;
  min-height:64px;
  padding:18px 20px;
  background:#fff;
  border:1px solid var(--gray-300);
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  text-align:center;
  cursor:pointer;
  transition:all .25s var(--ease);
  letter-spacing:0.04em;
  line-height:1.5;
  position:relative;
}
.opt-label:hover{
  border-color:var(--ink);
  background:var(--bg-soft);
}
.opt-input:checked + .opt-label{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}
.opt-input:checked + .opt-label::before{
  content:"";
  position:absolute;
  left:16px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;
  background:#fff;
  border-radius:50%;
}
.opt-input:focus-visible + .opt-label{
  box-shadow:0 0 0 3px rgba(31,37,46,.15);
}

/* =========================================================
   Consultation Type
   ========================================================= */
.ct-type{background:var(--bg-soft)}
.ct-type-form{
  margin-top:56px;
}
.ct-type-form .opt-group{
  grid-template-columns:repeat(4,1fr);
}
.ct-type-form .opt-label{
  min-height:84px;
  font-size:14px;
}

/* =========================================================
   Step Form
   ========================================================= */
.ct-form-section{background:var(--bg)}
.ct-form{
  margin-top:24px;
}
.ct-step{
  padding:64px 0;
  border-top:1px solid var(--gray-200);
  position:relative;
}
.ct-step:first-child{border-top:none;padding-top:24px}
.ct-step-header{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:32px;
  margin-bottom:40px;
  align-items:start;
}
.ct-step-num{
  font-family:var(--serif);
  font-size:14px;
  letter-spacing:0.3em;
  color:var(--ink);
  font-weight:500;
  padding-top:8px;
  position:relative;
  padding-left:32px;
}
.ct-step-num::before{
  content:"";position:absolute;
  left:0;top:18px;
  width:20px;height:1px;background:var(--ink);
}
.ct-step-title{
  font-family:var(--serif);
  font-size:clamp(22px,2.6vw,32px);
  font-weight:600;
  letter-spacing:0.04em;
  color:var(--ink);
  line-height:1.5;
  margin-bottom:14px;
}
.ct-step-note{
  font-size:13px;
  color:var(--gray-700);
  line-height:1.85;
  letter-spacing:0.04em;
}
.ct-step-body{
  padding-left:152px;
}

/* テキスト入力 */
.ct-input-group{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px 32px;
}
.ct-input-group .full{grid-column:1/-1}
.ct-field{
  display:flex;flex-direction:column;
}
.ct-field-label{
  font-size:12px;
  letter-spacing:0.12em;
  color:var(--ink);
  font-weight:600;
  margin-bottom:10px;
  display:flex;align-items:center;gap:10px;
}
.ct-field-label .required{
  font-size:10px;
  background:var(--ink);
  color:#fff;
  padding:2px 8px;
  letter-spacing:0.1em;
  font-weight:500;
}
.ct-field-label .optional{
  font-size:10px;
  background:var(--bg-soft);
  color:var(--gray-700);
  padding:2px 8px;
  letter-spacing:0.1em;
  font-weight:500;
}
.ct-field input,
.ct-field textarea{
  width:100%;
  padding:16px 20px;
  background:#fff;
  border:1px solid var(--gray-300);
  font-family:inherit;
  font-size:15px;
  color:var(--ink);
  letter-spacing:0.04em;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.ct-field textarea{
  resize:vertical;
  min-height:140px;
  line-height:1.8;
}
.ct-field input:focus,
.ct-field textarea:focus{
  outline:none;
  border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(31,37,46,.06);
}
.ct-field input::placeholder,
.ct-field textarea::placeholder{
  color:var(--gray-400);
}

/* 送信ボタンエリア */
.ct-submit-area{
  margin-top:64px;
  padding-top:56px;
  border-top:1px solid var(--gray-200);
  text-align:center;
}
.ct-submit-notes{
  margin-bottom:40px;
  font-size:12px;
  color:var(--gray-700);
  line-height:2.2;
  letter-spacing:0.04em;
}
.ct-submit-btn{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--ink);
  color:#fff;
  padding:24px 56px;
  border-radius:999px;
  border:none;
  font-family:inherit;
  font-size:15px;
  font-weight:500;
  letter-spacing:0.15em;
  cursor:pointer;
  transition:all .35s var(--ease);
  position:relative;
  overflow:hidden;
}
.ct-submit-btn::before{
  content:"";position:absolute;inset:0;
  background:var(--ink-3);
  transform:translateX(-100%);
  transition:transform .4s var(--ease);
}
.ct-submit-btn:hover::before{transform:translateX(0)}
.ct-submit-btn span,
.ct-submit-btn .arrow{position:relative;z-index:1}
.ct-submit-btn .arrow{
  transition:transform .3s var(--ease);
}
.ct-submit-btn:hover .arrow{transform:translateX(6px)}

/* =========================================================
   Direct Contact
   ========================================================= */
.ct-direct{
  background:var(--bg-deep);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.ct-direct::before{
  content:"";position:absolute;
  top:-30%;right:-15%;
  width:60vw;height:60vw;
  background:radial-gradient(circle,rgba(255,255,255,.03) 0%,transparent 70%);
  pointer-events:none;
}
.ct-direct .wrap{position:relative;text-align:center;max-width:880px}
.ct-direct .sec-label{color:var(--gray-400)}
.ct-direct .sec-label::before{background:#fff}
.ct-direct .sec-h2{color:#fff;margin-bottom:24px}
.ct-direct .sec-head p{
  font-size:15px;
  color:var(--gray-400);
  line-height:2;
  letter-spacing:0.04em;
}

.ct-direct-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
  margin-top:64px;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.ct-direct-item{
  padding:48px 24px;
  position:relative;
}
.ct-direct-item:first-child::after{
  content:"";position:absolute;
  right:0;top:25%;bottom:25%;
  width:1px;background:rgba(255,255,255,.12);
}
.ct-direct-label{
  font-size:11px;
  letter-spacing:0.3em;
  color:var(--gray-400);
  font-weight:500;
  margin-bottom:18px;
}
.ct-direct-value{
  font-family:var(--serif);
  font-size:clamp(22px,2.6vw,32px);
  color:#fff;
  font-weight:500;
  letter-spacing:0.04em;
  display:inline-block;
  padding-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.3);
  transition:border-color .3s var(--ease);
}
.ct-direct-value:hover{border-bottom-color:#fff}

.ct-direct-hours{
  margin-top:36px;
  font-size:12px;
  color:var(--gray-400);
  letter-spacing:0.12em;
}
.ct-direct-hours strong{
  color:#fff;
  font-weight:500;
  margin-left:8px;
}

/* =========================================================
   FAQ（contact版 - service.cssと同等）
   ========================================================= */
.ct-faq{background:var(--bg-soft)}
.ct-faq .faq-list{
  margin-top:64px;
  border-top:1px solid var(--ink);
}
.ct-faq .faq-item{
  border-bottom:1px solid var(--gray-200);
  background:transparent;
  transition:background .25s var(--ease);
}
.ct-faq .faq-item.is-open{background:#fff}
.ct-faq .faq-question{
  width:100%;
  padding:32px 24px 32px 28px;
  display:flex;
  align-items:center;
  gap:24px;
  text-align:left;
  cursor:pointer;
  position:relative;
  background:none;
  border:none;
}
.ct-faq .faq-question::before{
  content:"";position:absolute;
  left:0;top:0;bottom:0;
  width:3px;background:var(--ink);
  transform:scaleY(0);transform-origin:center;
  transition:transform .35s var(--ease);
}
.ct-faq .faq-item.is-open .faq-question::before{transform:scaleY(1)}
.ct-faq .faq-q-label{
  font-family:var(--serif);
  font-size:26px;
  font-weight:500;
  color:var(--gray-400);
  letter-spacing:0.04em;
  flex-shrink:0;
  line-height:1;
  transition:color .25s var(--ease);
}
.ct-faq .faq-item.is-open .faq-q-label{color:var(--ink)}
.ct-faq .faq-q-text{
  flex:1;
  font-size:16px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:0.04em;
  line-height:1.6;
}
.ct-faq .faq-toggle{
  width:36px;height:36px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--gray-100);
  position:relative;
  transition:background .3s var(--ease);
}
.ct-faq .faq-toggle::before,
.ct-faq .faq-toggle::after{
  content:"";position:absolute;
  background:var(--ink);
  top:50%;left:50%;
  transition:transform .35s var(--ease), background .25s var(--ease);
}
.ct-faq .faq-toggle::before{
  width:14px;height:1px;
  transform:translate(-50%,-50%);
}
.ct-faq .faq-toggle::after{
  width:1px;height:14px;
  transform:translate(-50%,-50%);
}
.ct-faq .faq-item.is-open .faq-toggle{background:var(--ink)}
.ct-faq .faq-item.is-open .faq-toggle::before,
.ct-faq .faq-item.is-open .faq-toggle::after{background:#fff}
.ct-faq .faq-item.is-open .faq-toggle::after{
  transform:translate(-50%,-50%) scaleY(0);
}
.ct-faq .faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .5s var(--ease);
}
.ct-faq .faq-item.is-open .faq-answer{max-height:500px}
.ct-faq .faq-a-inner{
  padding:0 24px 32px 78px;
  display:flex;
  gap:24px;
  align-items:flex-start;
}
.ct-faq .faq-a-label{
  font-family:var(--serif);
  font-size:24px;
  font-weight:500;
  color:var(--ink);
  letter-spacing:0.04em;
  line-height:1;
  flex-shrink:0;
  padding-top:2px;
}
.ct-faq .faq-a-text{
  font-size:14px;
  line-height:2.1;
  color:var(--gray-700);
  letter-spacing:0.04em;
}

/* =========================================================
   Thanks Page
   ========================================================= */
.thanks-section{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  padding:120px var(--pad) 80px;
  position:relative;
  overflow:hidden;
}
.thanks-section::before{
  content:"";position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:900px;height:900px;
  background:radial-gradient(circle,rgba(31,37,46,.035) 0%,transparent 60%);
  pointer-events:none;
}
.thanks-content{
  position:relative;
  max-width:680px;
  text-align:center;
}
.thanks-icon{
  font-family:var(--serif);
  font-size:72px;
  font-weight:300;
  color:var(--ink);
  line-height:1;
  margin-bottom:32px;
}
.thanks-label{
  font-size:11px;
  letter-spacing:0.4em;
  color:var(--gray-700);
  font-weight:500;
  margin-bottom:32px;
}
.thanks-title{
  font-family:var(--serif);
  font-size:clamp(28px,3.6vw,44px);
  font-weight:600;
  line-height:1.5;
  letter-spacing:0.05em;
  color:var(--ink);
  margin-bottom:40px;
}
.thanks-text{
  font-size:15px;
  line-height:2.2;
  color:var(--gray-700);
  letter-spacing:0.04em;
  margin-bottom:56px;
}
.thanks-cta{
  display:flex;
  gap:24px;
  justify-content:center;
  flex-wrap:wrap;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1024px){
  .contact-hero{height:60vh;min-height:480px}
  .ct-lead-grid{grid-template-columns:repeat(2,1fr)}
  .ct-lead-item:not(:nth-child(3n))::after{display:none}
  .ct-lead-item:not(:nth-child(2n))::after{
    content:"";position:absolute;
    right:0;top:20%;bottom:20%;
    width:1px;background:var(--gray-200);
  }
  .ct-lead-item:nth-child(n+3){
    border-top:1px solid var(--gray-200);
  }
  .ct-type-form .opt-group{grid-template-columns:repeat(2,1fr)}
  .opt-group.cols-3,
  .opt-group.cols-4{grid-template-columns:repeat(2,1fr)}
  .ct-step-header{grid-template-columns:1fr;gap:12px}
  .ct-step-num{padding-top:0}
  .ct-step-body{padding-left:0}
}
@media (max-width:640px){
  .contact-hero{height:auto;min-height:480px}
  .contact-hero-content{padding:80px var(--pad) 40px}
  .contact-hero-main{font-size:clamp(28px,7vw,40px);line-height:1.4}
  .ct-lead-grid{grid-template-columns:1fr}
  .ct-lead-item::after{display:none !important}
  .ct-lead-item:not(:first-child){
    border-top:1px solid var(--gray-200);
  }
  .ct-type-form .opt-group,
  .opt-group.cols-2,
  .opt-group.cols-3,
  .opt-group.cols-4{grid-template-columns:1fr}
  .opt-label{min-height:56px;font-size:13px}
  .ct-input-group{grid-template-columns:1fr;gap:18px}
  .ct-step{padding:48px 0}
  .ct-step-title{font-size:clamp(20px,5.5vw,26px)}
  .ct-direct-grid{grid-template-columns:1fr}
  .ct-direct-item:first-child::after{
    display:none;
  }
  .ct-direct-item:first-child{
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .ct-submit-btn{padding:20px 36px;font-size:13px;width:100%}
  .thanks-cta{flex-direction:column;gap:16px}
}


/* =========================================================
   株式会社WILL / Blog Article Detail Page Styles
   style.css の後に読み込まれる前提
   ========================================================= */

/* ===== Breadcrumb ===== */
.bd-breadcrumb{
  background:var(--bg-soft);
  padding:24px var(--pad) 20px;
  padding-top:96px;
  border-bottom:1px solid var(--gray-200);
}
.bd-breadcrumb ol{
  max-width:var(--max);
  margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;
  gap:8px 12px;
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--gray-700);
  list-style:none;padding:0;
}
.bd-breadcrumb ol li{
  display:flex;align-items:center;gap:12px;
}
.bd-breadcrumb ol li:not(:last-child)::after{
  content:"/";
  color:var(--gray-400);
  font-weight:300;
}
.bd-breadcrumb a{
  color:var(--gray-700);
  transition:color .2s var(--ease);
}
.bd-breadcrumb a:hover{color:var(--ink)}
.bd-breadcrumb li:last-child span{
  color:var(--ink);
  font-weight:500;
}

/* ===== Article Hero ===== */
.article-hero{
  background:var(--bg);
  padding:clamp(60px,8vw,100px) 0 clamp(40px,5vw,60px);
}
.article-hero .wrap{max-width:880px}

.article-meta{
  display:flex;align-items:center;gap:16px;
  margin-bottom:32px;
  font-size:11px;
  letter-spacing:0.18em;
  color:var(--gray-500);
}
.article-meta .cat{
  color:#fff;
  background:var(--ink);
  font-weight:600;
  padding:5px 14px;
  letter-spacing:0.1em;
}
.article-meta .date{
  font-family:var(--serif);
  font-weight:500;
}
.article-meta .update{
  color:var(--gray-500);
  font-size:11px;
}

.article-title{
  font-family:var(--serif);
  font-size:clamp(28px,3.6vw,46px);
  font-weight:600;
  line-height:1.55;
  letter-spacing:0.04em;
  color:var(--ink);
  margin-bottom:36px;
}

.article-lead-hero{
  font-size:15px;
  line-height:2.1;
  color:var(--gray-700);
  letter-spacing:0.04em;
  padding-left:24px;
  border-left:3px solid var(--ink);
}

/* ===== Eyecatch Image ===== */
.article-eyecatch{
  background:var(--bg);
  padding:0 0 clamp(40px,5vw,72px);
}
.article-eyecatch .wrap{max-width:var(--max)}
.article-eyecatch-img{
  aspect-ratio:16/9;
  overflow:hidden;
}
.article-eyecatch-img .ph-box{width:100%;height:100%}
.article-eyecatch-img .ph-meta .ph-icon{font-size:80px}
.article-eyecatch-img .ph-meta .ph-label{font-size:13px;letter-spacing:0.3em}

/* ===== Article Body ===== */
.article-body{
  background:var(--bg);
  padding-bottom:clamp(60px,8vw,100px);
}
.article-body .wrap{max-width:760px}

/* Lead introduction */
.article-intro{
  margin-bottom:64px;
  padding:32px 36px;
  background:var(--bg-soft);
  font-size:14px;
  line-height:2.1;
  color:var(--ink-2);
  letter-spacing:0.04em;
  position:relative;
}
.article-intro::before{
  content:"";position:absolute;
  left:0;top:0;bottom:0;
  width:3px;background:var(--ink);
}

/* TOC（目次） */
.article-toc{
  margin-bottom:80px;
  padding:32px 0 32px 28px;
  position:relative;
  background:transparent;
}
.article-toc::before{
  content:"";position:absolute;
  left:0;top:0;bottom:0;
  width:3px;background:var(--ink);
}
.toc-label{
  font-family:var(--serif);
  font-size:14px;
  letter-spacing:0.25em;
  color:var(--ink);
  font-weight:600;
  margin-bottom:24px;
}
.toc-list{
  list-style:none;padding:0;
  display:flex;flex-direction:column;
  gap:12px;
}
.toc-list li{
  display:flex;align-items:baseline;gap:14px;
  font-size:14px;
  line-height:1.7;
}
.toc-list .toc-num{
  font-family:var(--serif);
  font-size:13px;
  color:var(--gray-500);
  font-weight:500;
  letter-spacing:0.1em;
  flex-shrink:0;
  width:24px;
}
.toc-list a{
  color:var(--gray-700);
  transition:color .25s var(--ease), padding .25s var(--ease);
  letter-spacing:0.04em;
  display:inline-block;
}
.toc-list a:hover{
  color:var(--ink);
  padding-left:6px;
}

/* 本文 */
.article-body h2{
  font-family:var(--serif);
  font-size:clamp(22px,2.6vw,30px);
  font-weight:600;
  line-height:1.55;
  letter-spacing:0.04em;
  color:var(--ink);
  margin-top:72px;
  margin-bottom:32px;
  padding-top:32px;
  border-top:1px solid var(--gray-200);
  position:relative;
}
.article-body h2:first-of-type{margin-top:0}
.article-body h2 .h2-num{
  display:block;
  font-family:var(--serif);
  font-size:12px;
  letter-spacing:0.3em;
  color:var(--gray-500);
  font-weight:500;
  margin-bottom:12px;
}

.article-body h3{
  font-family:var(--serif);
  font-size:18px;
  font-weight:600;
  line-height:1.6;
  letter-spacing:0.04em;
  color:var(--ink);
  margin-top:40px;
  margin-bottom:20px;
  padding-left:16px;
  position:relative;
}
.article-body h3::before{
  content:"";position:absolute;
  left:0;top:0.4em;bottom:0.4em;
  width:3px;background:var(--ink);
}

.article-body p{
  font-size:15px;
  line-height:2.2;
  color:var(--ink-3);
  letter-spacing:0.04em;
  margin-bottom:24px;
}
.article-body p strong{
  font-weight:600;
  color:var(--ink);
}

.article-body ul,
.article-body ol{
  margin-bottom:24px;
  padding-left:0;
  list-style:none;
}
.article-body ul li,
.article-body ol li{
  font-size:15px;
  line-height:2.1;
  color:var(--ink-3);
  letter-spacing:0.04em;
  margin-bottom:8px;
  padding-left:24px;
  position:relative;
}
.article-body ul li::before{
  content:"";position:absolute;
  left:0;top:0.85em;
  width:8px;height:1px;
  background:var(--ink);
}
.article-body ol{counter-reset:list}
.article-body ol li{counter-increment:list}
.article-body ol li::before{
  content:counter(list);
  font-family:var(--serif);
  position:absolute;
  left:0;top:0;
  font-size:13px;
  color:var(--ink);
  font-weight:500;
}

/* まとめブロック */
.article-summary{
  margin-top:80px;
  padding:48px 40px;
  background:var(--bg-soft);
  position:relative;
}
.article-summary::before{
  content:"";position:absolute;
  left:0;top:0;bottom:0;
  width:3px;background:var(--ink);
}
.article-summary-label{
  font-family:var(--serif);
  font-size:11px;
  letter-spacing:0.35em;
  color:var(--ink);
  font-weight:600;
  margin-bottom:20px;
}
.article-summary h2{
  border-top:none;
  margin-top:0;
  padding-top:0;
  margin-bottom:24px;
  font-size:24px;
}
.article-summary p{
  margin-bottom:0;
}
.article-summary p + p{margin-top:16px}

/* ===== 関連サービスCTA ===== */
.article-svc-cta{
  background:var(--bg-soft);
  padding:clamp(60px,8vw,100px) 0;
}
.article-svc-cta .wrap{
  max-width:760px;
}
.article-svc-cta-inner{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:48px;
  align-items:center;
  background:#fff;
  padding:clamp(40px,5vw,60px);
  position:relative;
}
.article-svc-cta-inner::before{
  content:"";position:absolute;
  left:0;top:0;bottom:0;
  width:3px;background:var(--ink);
}
.article-svc-cta-label{
  font-family:var(--serif);
  font-size:11px;
  letter-spacing:0.35em;
  color:var(--ink);
  font-weight:600;
  margin-bottom:24px;
}
.article-svc-cta-title{
  font-family:var(--serif);
  font-size:clamp(20px,2.4vw,28px);
  font-weight:600;
  line-height:1.6;
  letter-spacing:0.05em;
  color:var(--ink);
  margin-bottom:20px;
}
.article-svc-cta-text{
  font-size:14px;
  line-height:2;
  color:var(--gray-700);
  letter-spacing:0.04em;
}
.article-svc-cta-button{
  display:flex;justify-content:flex-end;
}

/* ===== 関連記事 ===== */
.article-related{
  background:var(--bg);
  padding:clamp(80px,10vw,120px) 0;
}
.article-related-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px 32px;
  margin-top:64px;
}
.related-card{cursor:pointer}
.related-card-thumb{
  aspect-ratio:16/10;
  overflow:hidden;
  margin-bottom:20px;
}
.related-card-thumb .ph-box{transition:transform .8s var(--ease)}
.related-card:hover .related-card-thumb .ph-box{transform:scale(1.05)}
.related-card-meta{
  display:flex;gap:14px;align-items:center;
  font-size:10px;letter-spacing:0.2em;
  color:var(--gray-500);
  margin-bottom:14px;
}
.related-card-meta .cat{color:var(--ink);font-weight:600}
.related-card-title{
  font-family:var(--serif);
  font-size:16px;
  font-weight:600;
  line-height:1.7;
  letter-spacing:0.04em;
  color:var(--ink);
  transition:color .25s var(--ease);
}
.related-card:hover .related-card-title{color:var(--gray-700)}

/* ===== Responsive ===== */
@media (max-width:1024px){
  .article-svc-cta-inner{
    grid-template-columns:1fr;
    gap:32px;
  }
  .article-svc-cta-button{justify-content:flex-start}
  .article-related-grid{grid-template-columns:repeat(2,1fr);gap:32px}
  .article-related-grid .related-card:last-child{display:none}
}
@media (max-width:640px){
  .bd-breadcrumb{padding-top:80px}
  .bd-breadcrumb ol{font-size:10px;gap:6px 8px}
  .bd-breadcrumb ol li{gap:8px}
  .article-title{font-size:clamp(22px,6vw,28px)}
  .article-lead-hero{font-size:14px;padding-left:18px}
  .article-intro{padding:24px 24px;font-size:13px}
  .article-toc{padding:24px 0 24px 20px}
  .article-body h2{font-size:clamp(20px,5.5vw,24px);margin-top:56px;padding-top:24px}
  .article-body h3{font-size:16px;margin-top:32px}
  .article-body p{font-size:14px;line-height:2}
  .article-summary{padding:32px 24px}
  .article-svc-cta-inner{padding:32px 24px}
  .article-related-grid{grid-template-columns:1fr;gap:32px}
  .article-related-grid .related-card:last-child{display:block}
}