:root{
  --bg-0:#0f1a13;
  --bg-1:#4d5a4a;
  --bg-2:#848b7d;
  --bg-3:#e9eee6;
  --bg-paper: #c9d7bc;

  --txt:#f3f5f2;
  --txt-d:#0e1410;

  --card:#ffffff;
  --line:rgba(255,255,255,.25);
  --radius:14px;

  --shadow: 0 16px 36px rgba(0,0,0,.14);

  --slice-h: 120px;   /* 斜めの高さ（大きいほどダイナミック） */
  --slice-cut: 56px;  /* 斜めの落差（大きいほど傾く） */
}

.accent__1{
  color: #6da45f;
}

.accent__2{
  font-weight:700;
}

.accent__3{
    font-size:2.5rem
}

.accent__4{
    font-size:1.6rem
}

.accent__5{
    font-size:1.1rem
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans JP",sans-serif;
  background: var(--bg-0);
}

a{color:inherit;text-decoration:none}
.container{width:min(1040px,92vw);margin-inline:auto}

/* ---------- Header ---------- */
.header{
  color: #ffffff;
  position:fixed;top:0;left:0;right:0;z-index:50;
  backdrop-filter: blur(10px);
  background: linear-gradient(to bottom, rgba(15,26,19,.72), rgba(15,26,19,.18));
}

.header__inner{
  height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.header__brand{
  display:flex;
  align-items:center;          /* ロゴ自体も縦中央 */
}

.header__brand img{height:48px}
.header__nav{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:13px;
  opacity:.92;
}

.header__nav a{opacity:.86}
.header__nav a:hover{opacity:1}
.header__pill{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
}

/* ---------- Hero ---------- */
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding-top:80px;
  color:var(--txt);
}

.hero__bg{
  background-position: 65% 40%;
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.62)),
    url("../img/hero.jpeg") center/cover no-repeat;
}

@media (max-width: 1024px){
  .hero__bg{ background-position: 68% 42%; }
}
@media (max-width: 640px){
  .hero__bg{ background-position: 72% 38%; }
}

.hero__inner{position:relative;z-index:2}
.hero__copy{max-width:560px}
.hero__title{
  font-size:30px;
  margin:14px 0 10px;
  letter-spacing:.02em;
}
.hero__lead{
  margin:0 0 18px;
  opacity:.90;
  line-height:1.8;
}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}

/* Hero→Companyを自然につなぐフェード */
.hero__fade{
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:220px;
  z-index:1;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(15,26,19,.35) 40%,
    rgba(77,90,74,1) 100%
  );
}

.hero__scroll{
  position:absolute;
  left:50%;
  bottom:32px;
  transform:translateX(-50%);
  width:2px;
  height:56px;
  z-index:3;
}

.hero__scroll span{
  display:block;
  width:100%;
  height:100%;
  border-radius:999px;

  /* ベースの薄い線 */
  background: rgba(255,255,255,.25);
  overflow:hidden;
  position:relative;
}

/* 流れるグラデ（ハイライト） */
.hero__scroll span::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-60%;               /* 上から出てくる */
  height:60%;             /* ハイライトの長さ */
  border-radius:999px;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,.95),
    rgba(255,255,255,0)
  );

  animation: scrollGlow 2.2s ease-in-out infinite;
}

@keyframes scrollGlow{
  0%   { transform: translateY(0);     opacity:0; }
  20%  { opacity:1; }
  80%  { opacity:1; }
  100% { transform: translateY(220%); opacity:0; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.30);
  background:rgba(255,255,255,.12);
  color:var(--txt);
  cursor:pointer;
  backdrop-filter: blur(6px);
}
.btn:hover{background:rgba(255,255,255,.16)}
.btn--ghost{background:transparent}
.btn--wide{width:220px}

/* ---------- Sections ---------- */
.section{
  position:relative;
  padding: 92px 0;
  overflow: clip; /* 斜めパーツのため */
}
.section--dark{background:var(--bg-1); color:var(--txt)}
.section--mid{background:var(--bg-2); color:var(--txt)}
.section--light{background:var(--bg-3); color:var(--txt-d)}

.section__title{
  margin:0 0 12px;
  font-size:28px;
  letter-spacing:.04em;
}

.section__sub{margin:0 0 26px;opacity:.80}
.center{text-align:center}
.lead{
  margin:0;
  opacity:.90;
  line-height:1.9;
  font-size: 15px;}

/* ---------- Slice (斜め境界：交互 + ふわっと表示) ---------- */
.slice{
  position:relative;
  overflow: clip;

  --slice-rot: -2.8deg;
  --slice-h: 104px;
  --slice-top: -56px;
  --slice-shadow-h: 86px;

  --_prev: var(--bg-0);
}
.slice.slice--alt{
  --slice-rot: 3.0deg;
}

/* 斜め本体 */
.slice::before{
  content:"";
  position:absolute;
  left:-10vw;
  right:-10vw;
  top: calc(var(--slice-top) - 2px);
  height: calc(var(--slice-h) + 6px);
  background: var(--_prev);
  transform: rotate(var(--slice-rot)) translateY(14px);
  transform-origin: center;
  opacity: 0;
  filter: blur(1px);
  transition:
    opacity .75s ease,
    transform .75s cubic-bezier(.2,.8,.2,1),
    filter .75s ease;
  will-change: opacity, transform, filter;
}

/* 薄い陰影 */
.slice::after{
  content:"";
  position:absolute;
  left:-10vw;
  right:-10vw;
  top: -4px;
  height: calc(var(--slice-shadow-h)+ 8px);
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,.16), rgba(0,0,0,0));
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity .75s ease,
    transform .75s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

/* 可視化でふわっと */
.slice.is-slice-visible::before{
  opacity: 1;
  transform: rotate(var(--slice-rot)) translateY(0);
  filter: blur(0);
}
.slice.is-slice-visible::after{
  opacity: .10;
  transform: translateY(0);
}

/* Hero直後はなし */
.slice--over-hero::before,
.slice--over-hero::after{
  display:none;
}

/* 前色の指定 */
#company{ --_prev: var(--bg-0); padding-top:120px;}   /* Hero暗部 */
#service{ --_prev: var(--bg-1); }   /* Company */
#strength{ --_prev: var(--bg-2); }  /* Service */
#voices{ --_prev: var(--bg-3); }  /* Strength → Voices の境目 */
#faq{ --_prev: var(--bg-paper); }       /* Strength */
#contact{ --_prev: var(--bg-2); }   /* FAQ */
#sns{ --_prev: var(--bg-1); }       /* Contact */
.footer{ --_prev: var(--bg-2); }    /* SNS */

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .slice::before, .slice::after{
    transition:none;
    opacity:1;
    transform: rotate(var(--slice-rot));
    filter:none;
  }
}

/* ---------- Layout blocks ---------- */
.split{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:24px;
  align-items:start;
}
.meta{margin:0;padding:0}
.meta div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.20);
}
.meta dt{opacity:.85}
.meta dd{margin:0}

/* company card */
/* Company レイアウト：表を左、文章を右 */
.companyGrid{
  display:grid;
  grid-template-columns: 0.95fr 1.05fr; /* 表:文章 の比率は好みで */
  gap: 48px;
  align-items: start;
  margin-top: 18px;
}

/* 「代表の一言」(1行) の見た目 */
.companyKicker{
  margin: 0 0 18px;
  font-size: 26px;
  letter-spacing: .06em;
  line-height: 1.2;
  color: #f3f5f2
}

/* 表のY軸を「代表の一言」の“文字の中央”に合わせる
   └ 1行のline-height(1.2)の半分だけ下げる */
.companyMeta{
  padding-top: calc(1em * 1.2 / 2);
}

/* meta（dl）の既存スタイルが効いてる前提でOK。
   もし meta の中がズレるならこれも足す */
.companyMeta div{
  align-items: center;
}

/* SPでは縦積みに戻す */
@media (max-width: 900px){
  .companyGrid{
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .companyMeta{
    padding-top: 0; /* 縦積みでは不要 */
  }
}


/* Service card */
.serviceCard{
  margin-top:18px;
  background: rgba(255,255,255,.94);
  color: var(--txt-d);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display:grid;
  grid-template-columns: 1fr 1fr;
  overflow:hidden;

  max-width: 980px;         /* 横にデカすぎ問題を抑える */
  margin-inline: auto;      /* 中央寄せ */
}
.serviceCard__col{
  padding:34px 34px 30px;
  min-height: 240px;        /* 高さが揃って綺麗に見える */
  display:flex;
  flex-direction:column;
  gap:14px;
}

.serviceCard__col + .serviceCard__col{
  border-left: 1px solid rgba(0,0,0,.08);
}

.serviceHead{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.serviceHead__title{
  margin:0;
  font-size:18px;
  letter-spacing:.04em;
  line-height:1.2;
}

/* 見出し下のライン（主張しすぎない） */
.serviceHead__line{
  display:block;
  height:1px;
  width: 100%; /* 好みで48〜72 */
  background: rgba(15,26,19,.28);
}

.serviceCard p{
  margin:0;
  opacity:.82;
  line-height:1.9;
}

/* Strength story */
.story{display:grid;gap:18px;margin-top:26px}
.story__item{
  display:grid;
  grid-template-columns: 72px 1fr;
  gap:16px;
  align-items:start;
  padding:18px 0;
  border-top: 1px solid rgba(0,0,0,.10);
}
.story__item:first-child{border-top:0}
.story__num{font-weight:700;font-size:28px;opacity:.40}
.story__body h3{margin:0 0 6px}
.story__body p{margin:0;opacity:.78;line-height:1.9}

/* =========================
   Voices
========================= */

#voices{
  background: var(--bg-paper);
  color: var(--txt-d);

  /* ★左下りの角度を調整（値を好きに） */
  --slice-rot: -2.2deg;   /* 例：緩くする */
  --slice-h: 110px;       /* 任意：高さも調整したければ */
  --slice-top: -56px;     /* 任意：位置 */
}

.voicesGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 64px;
}

.voiceCard{
  background: #ffffff;
  border-radius: 14px;
  padding: 20px 36px 0px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  height: 100%;
  /* transition: transform .35s ease, box-shadow .35s ease; */
  /* size: 42px; */
}

.voiceCard:hover{
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,.10);
}

.voiceBody{
  font-size: 14px;
  line-height: 1.8;
  color: #2f2f2f;
  padding-bottom: 32px;
}

.voiceMeta{
  margin-top: 32px;
  font-size: 14px;
  letter-spacing: .08em;
  font-weight: 600;

  background: #5e6a5a; 
  color: #fff;

  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% + 72px); /* 36px × 2 */
  margin-left: -36px;
  padding: 18px 36px;
}

.metaIcon{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);

  display: flex;
  align-items: center;
  justify-content: center;
}

.metaSvg{
  width: 18px;
  height: 18px;
  fill: #ffffff;
}

/* レスポンシブ */

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

@media (max-width: 640px){
  .voicesGrid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
}


/* Accordion */
.accordion{
  margin-top:18px;
  border-radius: var(--radius);
  overflow:hidden;
  background: rgba(255,255,255,.06);
}

.accordion__q{
  font-weight: 600;
}

.section--light .accordion{background: rgba(0,0,0,.02)}
.accordion__q{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 18px;
  border:0;
  color:inherit;
  background: transparent;
  cursor:pointer;
  font-size:15px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.section--light .accordion__q{border-top-color: rgba(0,0,0,.08)}
.accordion__q:first-child{border-top:0}
.accordion__q:hover{background: rgba(255,255,255,.06)}
.section--light .accordion__q:hover{background: rgba(0,0,0,.03)}
.accordion__a{padding:0 18px 16px}
.accordion__icon{opacity:.75}

/* Form */
.form{margin-top:22px}
.hidden{display:none}
.form__row{border:0;padding:0;margin:0 0 14px}
.form__label{margin-bottom:10px;opacity:.85}
.radio{margin-right:18px}
.form__grid{
  display:grid;
  gap:14px;
  grid-template-columns:1fr 1fr;
}
.form__actions{
  display:flex;
  justify-content:flex-end;  /* ← 右端に寄せる */
  margin-top:32px;           /* ← 上との距離を広げる */
}
@media (max-width:600px){
  .form__actions{
    justify-content:center;
  }
}
.field{display:grid;gap:8px}
.field--full{grid-column:1 / -1}
.field input,.field textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: var(--txt);
}
.check{display:flex;align-items:center;gap:10px}

.check a{
  text-decoration: underline;
}

.field.required > span::after{
  content: " *";
  color: #e5484d;
  font-size: 0.9em;
  margin-left: 4px;
}

/* SNS */
/* .sns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  max-width:640px;
  margin:40px auto 0;
}

.sns__card{
  background:#fff;
  color:var(--txt-d);
  border-radius:var(--radius);
  padding:36px 24px;
  text-align:center;
  text-decoration:none;
  box-shadow:var(--shadow);

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;

  transition:transform .25s ease, box-shadow .25s ease;
}

.sns__card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.sns__icon{
  width:60px;
  height:60px;
  object-fit:contain;
}

.sns__name{
  font-size:18px;
  font-weight:600;
}

.sns__handle{
  font-size:14px;
  opacity:.6;
}

.sns__card:nth-child(1){
  border-top:4px solid #E1306C; 
}

.sns__card:nth-child(2){
  border-top:4px solid #000000;
} */

/* Footer */
.footer{
  background: var(--bg-1);
  color: var(--txt);
  position: relative;
  z-index: 5; /* SNSより手前に見せる */
}

.footer::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-80px;              /* SNS側に食い込ませる */
  height:80px;            /* 影の広がり */
  pointer-events:none;

  background: linear-gradient(
    to top,
    rgba(0,0,0,.35),
    rgba(0,0,0,.12),
    rgba(0,0,0,0)
  );
  opacity:.9;
}

.footer__inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  padding: 34px 0;
}
.footer__logo{height:30px}
.footer__mini{opacity:.9;margin-top:8px}
.footer__link{display:inline-block;margin-top:10px;opacity:.85}
.footer__copy{opacity:.85}

/* ---------- Reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  /* .header__nav{display:none} */
  .header__nav{
    gap: 10px;
    font-size: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .header__pill{padding: 6px 10px;}
  .hero__title{font-size:36px}
  .split{grid-template-columns:1fr}
  .serviceCard{grid-template-columns:1fr}
  .serviceCard__col + .serviceCard__col{
    border-left:0;
    border-top:1px solid rgba(0,0,0,.08);
  }
  .form__grid{grid-template-columns:1fr}
}

/* =========================
   Thanks page
========================= */

.thanks-page{
  min-height: calc(100vh - 120px); /* footer分を引く */
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(255,255,255,.05), transparent 60%),
    var(--bg-2);
  color: var(--txt);

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  padding: 0 20px;
}

.thanks-inner{
  max-width: 600px;
}

.thanks-page h1{
  font-size: 32px;
  margin-bottom: 18px;
}

.thanks-page p{
  opacity:.85;
  line-height:1.8;
  margin-bottom: 32px;
}