@charset "UTF-8";

/* =========================================================
   AXCELERATOR - style.css
   GIG(giginc.co.jp)のデザイン言語を参考にした自作スタイル
   ・モノトーン + イエローのアクセント
   ・斜め(スラッシュ)モチーフ
   ・英字は Oswald / 和文は Noto Sans JP
   ========================================================= */

/* ---------- 変数 ---------- */
:root{
  --black:#111111;
  --black2:#1a1a1a;
  --white:#ffffff;
  --gray:#f4f4f4;
  --gray2:#e6e6e6;
  --text:#222222;
  --muted:#777777;
  --yellow:#e8d44d;
  --skew:-12deg;              /* 全体で使う斜めの角度 */
  --hd-h:80px;
  --wrap:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- リセット ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  color:var(--text);
  background:var(--white);
  font-family:"Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:15px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,p{margin:0;}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit;}

.wrap{width:min(100% - 48px,var(--wrap));margin-inline:auto;}

/* 英字見出し共通 */
.en,.ttl,.card__ttl,.gnav a,.btn,.hero__tag,.hero__en,.logo__txt{
  font-family:"Oswald","Noto Sans JP",sans-serif;
  font-weight:500;
  letter-spacing:.12em;
}

/* =========================================================
   プレースホルダ画像 (.ph)
   実写真に差し替える前提のダミー。背景を画像に置き換えるだけでOK
   ========================================================= */
.ph{
  position:relative;
  background:linear-gradient(135deg,#d9d9d9 0%,#bdbdbd 55%,#cfcfcf 100%);
  overflow:hidden;
}
.ph::after{
  content:"IMAGE";
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-family:"Oswald",sans-serif;
  font-size:12px;letter-spacing:.3em;
  color:rgba(0,0,0,.28);
}
.ph--a{background:linear-gradient(135deg,#cfd4d8,#a9b2ba);}
.ph--b{background:linear-gradient(135deg,#d5d0c8,#b0a89c);}
.ph--c{background:linear-gradient(135deg,#dcd6cc,#bcae9a);}
.ph--d{background:linear-gradient(135deg,#cdd6de,#9fb2c2);}
.ph--e{background:linear-gradient(135deg,#c9ced6,#9aa3b0);}
.ph--f{background:linear-gradient(135deg,#cdd3c6,#9fae92);}
.ph--g{background:linear-gradient(135deg,#d8d3cb,#b4a999);}
.ph--h{background:linear-gradient(135deg,#d2d7db,#aab3bb);}
.ph--i{background:linear-gradient(135deg,#d7d2ca,#b2a99b);}
.ph--j{background:linear-gradient(135deg,#ccd4d9,#a3b0b9);}

/* =========================================================
   HEADER
   ========================================================= */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--hd-h);
  transition:background .4s var(--ease),box-shadow .4s var(--ease);
}
.hd.is-stuck{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(0,0,0,.07);
}
/* ヒーロー上ではナビが黒面に重なるため白抜き。スクロール後は黒に戻す */
.gnav{color:var(--white);transition:color .4s var(--ease);}
.hd.is-stuck .gnav{color:var(--black);}
.burger{color:var(--black);}
.hd__inner{
  height:100%;
  width:min(100% - 48px,1440px);
  margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
}

/* ロゴ */
.logo{display:inline-flex;align-items:center;gap:10px;}
.logo__mark{display:inline-flex;align-items:flex-end;gap:3px;height:18px;}
.logo__mark i{
  display:block;width:3px;background:currentColor;
  transform:skewX(var(--skew));
}
.logo__mark i:nth-child(1){height:10px;}
.logo__mark i:nth-child(2){height:16px;}
.logo__mark i:nth-child(3){height:13px;}
.logo__mark i:nth-child(4){height:7px;}
.logo__txt{font-size:19px;font-weight:600;letter-spacing:.06em;white-space:nowrap;}

/* グローバルナビ */
.gnav__list{display:flex;align-items:center;gap:30px;}
.gnav a{
  position:relative;display:inline-flex;align-items:center;gap:5px;
  font-size:13px;padding:8px 0;white-space:nowrap;
}
.gnav a::after{
  content:"";position:absolute;left:0;bottom:2px;
  width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease);
}
.gnav a:hover::after{transform:scaleX(1);transform-origin:left;}
/* 現在地 */
.gnav a.is-current::after{transform:scaleX(1);background:var(--yellow);height:2px;}
.caret{
  width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
}

/* ドロップダウン */
.has-sub{position:relative;}
.sub{
  position:absolute;top:100%;left:50%;translate:-50% 0;
  min-width:220px;padding:10px 0;
  background:var(--white);
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0);}
.sub a{
  display:block;padding:9px 22px;font-family:"Noto Sans JP",sans-serif;
  font-size:13px;letter-spacing:.02em;color:var(--text);
}
.sub a::after{display:none;}
.sub a:hover{background:var(--gray);}

/* ハンバーガー */
.burger{display:none;width:28px;height:20px;position:relative;}
.burger span{
  position:absolute;left:0;width:100%;height:2px;background:currentColor;
  transition:transform .35s var(--ease),opacity .2s;
}
.burger span:nth-child(1){top:0;}
.burger span:nth-child(2){top:9px;}
.burger span:nth-child(3){bottom:0;}
.burger.is-open span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.burger.is-open span:nth-child(2){opacity:0;}
.burger.is-open span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}

/* =========================================================
   HERO  (斜め分割 + スラブ)
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  background:var(--white);
  color:var(--black);
}
/* 右側の黒面を斜めに切る */
.hero__dark{
  position:absolute;inset:0;
  background:var(--black);
  clip-path:polygon(58% 0, 100% 0, 100% 100%, 42% 100%);
}
/* 黄色い斜めライン */
.hero__line{
  position:absolute;top:-10%;left:72%;
  width:1px;height:130%;
  background:var(--yellow);
  transform:rotate(9deg);
  transform-origin:top center;
}

/* ロゴタイプ風のスラブ（斜めに切り抜いた画像の代替） */
.hero__art{
  position:absolute;top:50%;left:52%;translate:-50% -50%;
  display:flex;align-items:center;gap:22px;
  width:min(760px,72vw);height:min(360px,42vh);
}
.slab{
  display:block;flex:1;height:100%;
  background:linear-gradient(150deg,#cfc9bd,#8f887b);
  transform:skewX(var(--skew));
}
.slab--2{height:62%;align-self:flex-end;}
.slab--3{height:88%;}
.slab--4{height:74%;align-self:flex-start;}
.slab--5{
  height:56%;align-self:flex-end;
  /* 「A」のような三角形に */
  clip-path:polygon(50% 0,100% 100%,72% 100%,50% 42%,28% 100%,0 100%);
  transform:skewX(0deg);
}

/* ヒーローのコピー */
.hero__copy{
  position:absolute;left:max(24px,6vw);bottom:12vh;
  display:flex;align-items:center;gap:26px;
  z-index:2;
}
.hero__tag{
  font-size:clamp(28px,3.2vw,42px);
  line-height:1.24;letter-spacing:.14em;
  font-weight:600;margin:0;
}
.hero__slash{
  width:1px;height:96px;background:var(--black);
  transform:rotate(18deg);
  flex:none;
}
.hero__en{
  font-size:clamp(12px,1.05vw,15px);
  line-height:2;letter-spacing:.08em;font-weight:500;
}
.hero__jp{
  margin-top:10px;
  font-size:12px;color:var(--muted);letter-spacing:.04em;
}

/* SCROLL 縦書き */
.scroll{
  position:absolute;right:26px;bottom:18vh;z-index:2;
  writing-mode:vertical-rl;
  font-family:"Oswald",sans-serif;font-size:11px;letter-spacing:.36em;
  color:var(--white);
}
.scroll::after{
  content:"";position:absolute;left:50%;top:calc(100% + 10px);
  width:1px;height:52px;background:rgba(255,255,255,.4);
  overflow:hidden;
}

/* =========================================================
   セクション共通
   ========================================================= */
.sec{position:relative;padding:clamp(80px,10vw,140px) 0;}

.ttl{
  position:relative;
  display:inline-block;
  font-size:clamp(34px,4.4vw,58px);
  font-weight:600;letter-spacing:.16em;line-height:1;
  padding-left:6px;
}
.ttl__slash{
  position:absolute;left:-46px;top:-16px;
  width:9px;height:74px;
  background:var(--yellow);
  transform:rotate(18deg);
}
.ttl--inv{color:var(--white);}

.sec__head{max-width:520px;}
.sec__head--center{max-width:none;text-align:center;margin-bottom:56px;}
.sec__head--center .ttl__slash{left:-40px;}
.sec__desc{
  margin-top:26px;
  font-size:14px;line-height:2.1;color:#444;
}
.sec__head--center .sec__desc{margin-inline:auto;max-width:640px;}
.sec__more{margin-top:56px;text-align:center;}

/* ボタン */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  font-size:13px;letter-spacing:.2em;
  padding:14px 2px;
  border-bottom:1px solid currentColor;
  transition:gap .3s var(--ease);
}
.btn:hover{gap:24px;}
.btn__arw{
  position:relative;width:34px;height:1px;background:currentColor;flex:none;
}
.btn__arw::after{
  content:"";position:absolute;right:0;top:-3px;
  width:8px;height:1px;background:currentColor;
  transform:rotate(32deg);transform-origin:right center;
}
.btn--inv{color:var(--white);}

/* =========================================================
   SERVICE カード（互い違い + 斜め画像）
   ========================================================= */
.cards{
  margin-top:60px;
  display:grid;grid-template-columns:1fr 1fr;
  gap:38px;
  align-items:start;
}
.cards__col{display:flex;flex-direction:column;gap:38px;}
.cards__col--offset{margin-top:-180px;}   /* 右列を上にずらして互い違いに */

.card{
  position:relative;
  display:block;
  background:var(--white);
  box-shadow:0 14px 40px rgba(0,0,0,.09);
  overflow:hidden;
  isolation:isolate;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 54px rgba(0,0,0,.14);}

/* 画像を左に、斜めに切って配置 */
.card__img{
  position:absolute;left:0;top:0;bottom:0;
  width:64%;
  clip-path:polygon(0 0, 100% 0, 62% 100%, 0 100%);
  z-index:-1;
}
.card__body{
  display:block;
  margin-left:44%;
  padding:36px 34px 40px;
  background:var(--white);
  clip-path:polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  padding-left:82px;
}
.card__cat{display:block;font-size:12px;letter-spacing:.06em;color:#555;}
.card__ttl{
  display:block;margin-top:10px;
  font-size:clamp(20px,1.7vw,26px);
  font-weight:600;letter-spacing:.1em;line-height:1.35;
}
.card__txt{
  display:block;margin-top:18px;
  font-size:13px;line-height:2;color:#555;
}
.card__arw{
  display:block;margin-top:24px;margin-left:auto;
  width:38px;height:1px;background:#333;position:relative;
  transition:width .3s var(--ease);
}
.card__arw::after{
  content:"";position:absolute;right:0;top:-3px;
  width:9px;height:1px;background:#333;
  transform:rotate(32deg);transform-origin:right center;
}
.card:hover .card__arw{width:56px;}

/* ABOUT内の小カード */
.card--sm .card__img{width:58%;left:auto;right:0;clip-path:polygon(38% 0,100% 0,100% 100%,0 100%);}
.card--sm .card__body{
  margin-left:0;margin-right:44%;
  padding:26px 24px 28px;
  clip-path:polygon(0 0,100% 0,82% 100%,0 100%);
  padding-right:60px;
}
.card--sm .card__ttl{font-size:22px;}
.card--sm .card__arw{margin-left:0;}

/* カード内の料金・タグ */
.card__price{
  display:flex;flex-wrap:wrap;gap:6px 20px;
  margin-top:18px;padding-top:14px;
  border-top:1px solid var(--gray2);
}
/* 金額の途中で改行させない */
.card__price i{
  font-style:normal;white-space:nowrap;
  font-size:12px;letter-spacing:.02em;color:#555;
}
.card__price b{
  font-family:"Oswald",sans-serif;font-size:18px;font-weight:600;
  letter-spacing:.03em;color:var(--black);margin:0 1px;
}
.card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;}
.card__tags i{
  font-style:normal;font-size:11px;letter-spacing:.02em;
  padding:3px 9px;background:var(--gray);color:#555;
}
.card__txt b{font-weight:700;color:var(--black);}

/* その他 */
.others{
  margin-top:80px;padding:34px 38px;
  background:var(--gray);
  display:flex;align-items:baseline;gap:34px;flex-wrap:wrap;
}
.others__h{
  font-family:"Oswald",sans-serif;font-size:12px;letter-spacing:.22em;
  color:var(--black);flex:none;
}
.others__list{display:flex;flex-wrap:wrap;gap:10px 26px;}
.others__list li{
  position:relative;font-size:13px;color:#555;padding-left:14px;
}
.others__list li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:6px;height:1px;background:var(--yellow);
}

/* =========================================================
   STRENGTH
   ========================================================= */
.sec--client{background:var(--gray);}
.strength{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--gray2);border:1px solid var(--gray2);
}
.strength__item{
  background:var(--white);
  padding:44px 40px 46px;
  position:relative;
  opacity:0;transform:translateY(16px);
}
.strength.is-in .strength__item{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--i) * 90ms);
}
.strength__no{
  display:block;
  font-family:"Oswald",sans-serif;font-size:13px;font-weight:600;letter-spacing:.2em;
  color:var(--black);
  padding-left:20px;position:relative;
}
.strength__no::before{
  content:"";position:absolute;left:0;top:2px;
  width:7px;height:16px;background:var(--yellow);
  transform:rotate(18deg);
}
.strength__ttl{
  display:block;margin-top:16px;
  font-size:17px;font-weight:700;line-height:1.65;letter-spacing:.02em;
}
.strength__txt{margin-top:14px;font-size:13px;line-height:2;color:#555;}
.strength__txt b{font-weight:700;color:var(--black);}

/* =========================================================
   FLOW
   ========================================================= */
.flow{margin:34px 0 36px;counter-reset:flow;}
.flow__item{
  display:flex;gap:18px;
  padding:16px 0;
  border-bottom:1px solid var(--gray2);
}
.flow__item:last-child{border-bottom:0;}
.flow__no{
  font-family:"Oswald",sans-serif;font-size:13px;font-weight:600;letter-spacing:.16em;
  color:var(--muted);flex:none;padding-top:4px;
}
.flow__ttl{display:block;font-size:15px;font-weight:700;letter-spacing:.02em;}
.flow__txt{margin-top:4px;font-size:12.5px;line-height:1.85;color:#666;}

/* ABOUT本文 */
.about__body{margin-top:24px;font-size:13.5px;line-height:2.1;color:#555;}

/* =========================================================
   ABOUT
   ========================================================= */
.sec--about{overflow:hidden;padding-top:clamp(90px,11vw,150px);}
.about__bg{
  position:absolute;right:0;top:0;
  width:68%;height:74%;
  filter:saturate(.7);
}
.about__bg::after{content:"";}
/* 左上から伸びる薄いグレーの斜め面 */
.about__panel{
  position:absolute;left:-6%;top:-4%;
  width:52%;height:108%;
  background:var(--gray);
  transform:skewX(var(--skew));
  z-index:0;
}
.about__inner{position:relative;z-index:1;}
.about__head{max-width:480px;}
.about__msg{
  margin-top:34px;
  font-size:clamp(19px,2vw,26px);
  font-weight:700;line-height:1.75;letter-spacing:.04em;
}
.about__cards{
  margin-top:70px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}

/* =========================================================
   RECRUIT
   ========================================================= */
.sec--recruit{padding:0;}
.recruit__img{
  position:absolute;left:0;top:0;
  width:56%;height:100%;
}
.recruit__inner{
  position:relative;
  min-height:520px;
  display:flex;align-items:center;justify-content:flex-end;
}
.recruit__box{
  position:relative;
  width:min(560px,100%);
  background:var(--white);
  padding:clamp(40px,5vw,68px);
  box-shadow:0 18px 50px rgba(0,0,0,.1);
  margin:80px 0;
}

/* =========================================================
   CONTACT (黒帯)
   ========================================================= */
.cta{
  position:relative;
  background:var(--black);
  color:var(--white);
  padding:clamp(80px,9vw,120px) 0;
  overflow:hidden;
}
.cta__line{
  position:absolute;top:-20%;left:16%;
  width:1px;height:140%;
  background:rgba(232,212,77,.7);
  transform:rotate(12deg);
}
.cta__inner{position:relative;text-align:center;}
.cta__inner .ttl__slash{left:-40px;}
.cta__txt{
  margin:30px 0 40px;
  font-size:14px;line-height:2.1;color:rgba(255,255,255,.78);
}

/* =========================================================
   下層ページ共通の見出し（PAGE HEAD）
   ========================================================= */
.phead{
  position:relative;
  min-height:clamp(280px,38vh,380px);
  display:flex;align-items:center;
  background:var(--white);
  overflow:hidden;
  padding-top:var(--hd-h);
}
.phead__dark{
  position:absolute;inset:0;
  background:var(--black);
  clip-path:polygon(52% 0, 100% 0, 100% 100%, 34% 100%);
  transform:translateY(-100%);
  transition:transform 1s var(--ease);
}
body.is-ready .phead__dark{transform:translateY(0);}
.phead__line{
  position:absolute;top:-10%;left:70%;
  width:1px;height:130%;
  background:var(--yellow);
  transform-origin:top center;
  transform:rotate(9deg) scaleY(0);
  transition:transform .9s var(--ease) .4s;
}
body.is-ready .phead__line{transform:rotate(9deg) scaleY(1);}
.phead__inner{position:relative;z-index:1;}
.phead__en{
  font-family:"Oswald",sans-serif;
  font-size:clamp(34px,4.6vw,58px);font-weight:600;letter-spacing:.16em;line-height:1;
  position:relative;display:inline-block;
}
.phead__en::before{
  content:"";position:absolute;left:-38px;top:-14px;
  width:9px;height:70px;background:var(--yellow);
  transform:rotate(18deg);
}
.phead__jp{
  margin-top:18px;
  font-size:14px;font-weight:500;letter-spacing:.08em;color:#555;
}

/* =========================================================
   汎用ブロック
   ========================================================= */
.lead{max-width:760px;}
.lead__catch{
  font-size:clamp(19px,2.2vw,27px);
  font-weight:700;line-height:1.85;letter-spacing:.02em;
}
.lead__catch em{
  font-style:normal;
  background:linear-gradient(transparent 62%,rgba(232,212,77,.55) 62%);
}
.lead__body{margin-top:28px;font-size:14px;line-height:2.15;color:#444;}
.lead__body + .lead__body{margin-top:20px;}

/* 3つの特徴 */
.feats{display:grid;gap:1px;background:var(--gray2);border:1px solid var(--gray2);margin-top:64px;}
.feat{
  background:var(--white);
  display:grid;grid-template-columns:auto 1fr;gap:0 34px;
  padding:46px 44px 48px;
  opacity:0;transform:translateY(16px);
}
.feats.is-in .feat{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--i) * 100ms);
}
.feat__no{
  font-family:"Oswald",sans-serif;font-size:34px;font-weight:600;letter-spacing:.04em;
  color:var(--gray2);line-height:1;grid-row:span 2;
  position:relative;padding-left:18px;
}
.feat__no::before{
  content:"";position:absolute;left:0;top:2px;
  width:7px;height:26px;background:var(--yellow);transform:rotate(18deg);
}
.feat__ttl{font-size:18px;font-weight:700;line-height:1.6;letter-spacing:.02em;}
.feat__txt{margin-top:14px;font-size:13.5px;line-height:2.05;color:#555;}
.feat__txt + .feat__txt{margin-top:12px;}

/* こんなお悩み */
.sec--worry{background:var(--black);color:var(--white);}
.sec--worry .sec__desc{color:rgba(255,255,255,.72);}
.worries{
  display:grid;grid-template-columns:1fr 1fr;gap:14px 34px;
  margin-top:52px;
}
.worry{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.14);
  font-size:14px;line-height:1.85;
  opacity:0;transform:translateY(12px);
}
.worries.is-in .worry{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:calc(var(--i) * 70ms);
}
.worry::before{
  content:"";flex:none;margin-top:.62em;
  width:9px;height:9px;background:var(--yellow);
  transform:skewX(var(--skew));
}

/* =========================================================
   CASE（BEFORE / AFTER）
   ========================================================= */
.cases{
  margin-top:60px;
  display:grid;grid-template-columns:1fr 1fr;gap:34px;
}
.case{
  background:var(--white);
  box-shadow:0 14px 40px rgba(0,0,0,.09);
  padding:38px 36px 34px;
  opacity:0;transform:translateY(18px);
}
.cases.is-in .case{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--i) * 90ms);
}
.case__head{display:flex;align-items:center;gap:14px;}
.case__no{
  position:relative;padding-left:18px;
  font-family:"Oswald",sans-serif;font-size:12px;font-weight:600;letter-spacing:.2em;
}
.case__no::before{
  content:"";position:absolute;left:0;top:1px;
  width:7px;height:15px;background:var(--yellow);transform:rotate(18deg);
}
.case__cat{
  font-size:11px;letter-spacing:.04em;color:#555;
  background:var(--gray);padding:4px 10px;
}
.case__ttl{
  margin-top:16px;
  font-size:17px;font-weight:700;line-height:1.65;letter-spacing:.02em;
}

/* BEFORE / AFTER を斜めに噛み合わせる */
.case__ba{display:flex;margin-top:22px;}
.case__col{padding:22px 20px;flex:1;}
.case__col--b{
  background:var(--gray);
  clip-path:polygon(0 0,100% 0,88% 100%,0 100%);
  padding-right:34px;
}
.case__col--a{
  background:var(--black);color:var(--white);
  clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);
  margin-left:-14px;
  padding-left:34px;
}
.case__lbl{
  display:block;
  font-family:"Oswald",sans-serif;font-size:10px;font-weight:600;letter-spacing:.22em;
  color:var(--muted);
}
.case__col--a .case__lbl{color:var(--yellow);}
.case__col p{margin-top:10px;font-size:12.5px;line-height:1.9;}
.case__col--b p{color:#555;}
.case__col--a p{color:rgba(255,255,255,.9);}

.case__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px;}
.case__tags li{
  font-size:11px;letter-spacing:.02em;
  padding:4px 10px;border:1px solid var(--gray2);color:#555;
}
.case__note{
  margin-top:34px;
  font-size:12px;line-height:1.9;color:var(--muted);
}

@media (max-width:900px){
  .cases{grid-template-columns:1fr;gap:22px;}
  .case{padding:28px 22px 26px;}
  /* スペースの都合でSPでは非表示にする項目 */
  .worry--pc{display:none;}
  /* SPでは斜めの噛み合わせをやめ、縦積みにする（横幅が足りず文字が潰れるため） */
  .case__ba{flex-direction:column;margin-top:18px;}
  .case__col--b{clip-path:polygon(0 0,100% 0,100% 88%,0 100%);padding:18px 20px 26px;}
  .case__col--a{clip-path:polygon(0 12%,100% 0,100% 100%,0 100%);margin-left:0;margin-top:-10px;padding:26px 20px 20px;}
}

/* 箇条書き */
.list{margin-top:22px;}
.list li{
  position:relative;padding-left:18px;
  font-size:13.5px;line-height:2.05;color:#555;
}
.list li::before{
  content:"";position:absolute;left:0;top:.92em;
  width:8px;height:1px;background:var(--yellow);
}

/* STEP */
.steps{margin-top:56px;counter-reset:s;}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:0 30px;
  padding:32px 0;
  border-top:1px solid var(--gray2);
}
.step:last-child{border-bottom:1px solid var(--gray2);}
.step__no{
  font-family:"Oswald",sans-serif;font-size:12px;font-weight:600;letter-spacing:.2em;
  color:var(--muted);padding-top:5px;white-space:nowrap;
}
.step__ttl{font-size:17px;font-weight:700;letter-spacing:.02em;}
.step__txt{margin-top:10px;font-size:13.5px;line-height:2.05;color:#555;}
.step__note{margin-top:8px;font-size:12px;color:var(--muted);}

/* テーブル */
.tblwrap{margin-top:40px;overflow-x:auto;}
.tbl{width:100%;border-collapse:collapse;min-width:520px;}
.tbl th,.tbl td{
  padding:18px 20px;
  border:1px solid var(--gray2);
  font-size:13.5px;line-height:1.9;text-align:left;vertical-align:top;
}
.tbl th{
  background:var(--gray);font-weight:500;color:#333;
  width:210px;white-space:nowrap;
}
.tbl .yen{
  font-family:"Oswald",sans-serif;font-size:19px;font-weight:600;
  letter-spacing:.03em;color:var(--black);
}
.note{margin-top:18px;font-size:12px;line-height:1.95;color:var(--muted);}

/* FAQ */
.faq{margin-top:52px;border-top:1px solid var(--gray2);}
.faq__item{border-bottom:1px solid var(--gray2);}
.faq__q{
  width:100%;text-align:left;
  display:flex;gap:16px;align-items:flex-start;
  padding:22px 44px 22px 0;
  position:relative;
  font-size:15px;font-weight:700;line-height:1.75;letter-spacing:.02em;
}
.faq__q::before{
  content:"Q";flex:none;
  font-family:"Oswald",sans-serif;font-size:15px;font-weight:600;
  color:var(--yellow);line-height:1.75;
}
.faq__q::after{
  content:"";position:absolute;right:8px;top:32px;
  width:11px;height:11px;
  border-right:1.5px solid var(--black);border-bottom:1.5px solid var(--black);
  transform:rotate(45deg);transform-origin:center;
  transition:transform .35s var(--ease);
}
.faq__item.is-open .faq__q::after{transform:rotate(225deg);}
.faq__a{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .4s var(--ease);
}
.faq__item.is-open .faq__a{grid-template-rows:1fr;}
.faq__a > div{overflow:hidden;}
.faq__a p{
  display:flex;gap:16px;
  padding:0 44px 24px 0;
  font-size:13.5px;line-height:2.05;color:#555;
}
.faq__a p::before{
  content:"A";flex:none;
  font-family:"Oswald",sans-serif;font-size:15px;font-weight:600;
  color:var(--muted);line-height:1.6;
}

/* プロフィール */
.prof{
  display:grid;grid-template-columns:300px 1fr;gap:48px;
  margin-top:56px;align-items:start;
}
.prof__img{aspect-ratio:3/4;}
.prof__name{font-size:20px;font-weight:700;letter-spacing:.04em;}
.prof__txt{margin-top:20px;font-size:13.5px;line-height:2.1;color:#555;}
.prof__txt + .prof__txt{margin-top:14px;}
.prof__h{
  margin-top:32px;
  font-family:"Oswald",sans-serif;font-size:12px;letter-spacing:.2em;
}

/* フォーム */
.form{margin-top:52px;max-width:720px;}
.field{margin-bottom:28px;}
.field__l{
  display:flex;align-items:center;gap:10px;
  font-size:13px;font-weight:500;letter-spacing:.04em;margin-bottom:10px;
}
.req{
  font-size:10px;letter-spacing:.06em;
  background:var(--black);color:var(--white);padding:3px 7px;
}
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field select,
.field textarea{
  width:100%;padding:14px 16px;
  border:1px solid var(--gray2);background:var(--white);
  font-family:inherit;font-size:14px;line-height:1.7;color:var(--text);
  border-radius:0;
  transition:border-color .25s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--black);
}
.field textarea{min-height:180px;resize:vertical;}
.form__note{font-size:12px;line-height:1.9;color:var(--muted);margin-bottom:26px;}
.submit{
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 44px;
  background:var(--black);color:var(--white);
  font-family:"Oswald","Noto Sans JP",sans-serif;
  font-size:13px;letter-spacing:.2em;
  transition:gap .3s var(--ease),background .25s;
}
.submit:hover{gap:24px;background:#333;}

/* 連絡先 */
.contacts{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--gray2);border:1px solid var(--gray2);
  margin-top:56px;
}
.contacts__i{background:var(--white);padding:32px 30px;}
.contacts__h{
  font-family:"Oswald",sans-serif;font-size:11px;letter-spacing:.2em;color:var(--muted);
}
.contacts__v{
  margin-top:12px;
  font-family:"Oswald",sans-serif;font-size:22px;font-weight:600;letter-spacing:.04em;
}
.contacts__s{margin-top:8px;font-size:12px;color:var(--muted);}

/* =========================================================
   規約系ページ
   ========================================================= */
.legal{max-width:820px;}
.legal__lead{font-size:13.5px;line-height:2.1;color:#444;}
.legal__h{
  margin-top:52px;
  display:flex;align-items:baseline;gap:12px;
  font-size:16px;font-weight:700;letter-spacing:.02em;line-height:1.6;
}
.legal__h::before{
  content:"";flex:none;
  width:7px;height:15px;background:var(--yellow);
  transform:rotate(18deg);
}
.legal p{margin-top:14px;font-size:13.5px;line-height:2.1;color:#555;}
.legal .list{margin-top:12px;}
.legal__rev{
  margin-top:56px;padding-top:22px;
  border-top:1px solid var(--gray2);
  font-size:12px;color:var(--muted);
}
@media (max-width:900px){
  .legal__h{margin-top:38px;font-size:15px;}
}

/* =========================================================
   FOOTER
   ========================================================= */
.ft{background:var(--black2);color:rgba(255,255,255,.72);padding:80px 0 0;}
.ft__inner{
  display:grid;grid-template-columns:1fr 2fr;gap:60px;
  padding-bottom:60px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.logo--ft{color:var(--white);}
.ft__addr{margin-top:22px;font-size:12px;line-height:2;color:rgba(255,255,255,.55);}
.ft__sns{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px;}
.ft__sns a{font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.6);}
.ft__sns a:hover{color:var(--white);}

.ft__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.ft__h{
  font-family:"Oswald",sans-serif;font-size:12px;letter-spacing:.2em;
  color:var(--white);margin-bottom:18px;
}
.ft__col li{margin-bottom:11px;}
.ft__col a{font-size:12.5px;color:rgba(255,255,255,.62);transition:color .25s;}
.ft__col a:hover{color:var(--white);}

.ft__cr{
  padding:26px 0 30px;text-align:center;
  font-family:"Oswald",sans-serif;font-size:11px;letter-spacing:.16em;
  color:rgba(255,255,255,.4);
}

/* =========================================================
   固定CTA / Cookie
   ========================================================= */
.fab{
  position:fixed;right:22px;bottom:22px;z-index:90;
  display:inline-flex;align-items:center;gap:12px;
  padding:8px 8px 8px 10px;
  background:var(--white);color:var(--black);
  border-radius:999px;
  box-shadow:0 8px 26px rgba(0,0,0,.2);
  transition:transform .3s var(--ease);
}
.fab:hover{transform:translateY(-3px);}
/* box-sizing:border-box のため height にパディングが含まれ、
   中身が潰れてバーがはみ出し・円が楕円になっていた。
   32pxの正円を明示し、バーは下端から9pxで揃える */
.fab__mark{
  flex:none;
  width:32px;height:32px;
  display:inline-flex;align-items:flex-end;justify-content:center;gap:2px;
  padding:0 0 9px;
  border-radius:50%;background:var(--gray2);
}
.fab__mark i{display:block;width:2px;background:var(--black);transform:skewX(var(--skew));}
.fab__mark i:nth-child(1){height:8px;}
.fab__mark i:nth-child(2){height:13px;}
.fab__mark i:nth-child(3){height:10px;}
.fab__mark i:nth-child(4){height:5px;}
.fab__txt{font-size:12.5px;letter-spacing:.02em;}
.fab__arw{
  width:30px;height:30px;border-radius:50%;background:var(--black);
  position:relative;flex:none;
}
.fab__arw::after{
  content:"";position:absolute;left:50%;top:52%;translate:-50% -50%;
  width:6px;height:6px;border-top:1.5px solid var(--white);border-right:1.5px solid var(--white);
  transform:rotate(-45deg);
}

.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:rgba(255,255,255,.97);
  box-shadow:0 -2px 18px rgba(0,0,0,.1);
  padding:16px 56px 16px 24px;
  display:flex;align-items:center;gap:24px;
}
/* display:flex が [hidden] の display:none に勝ってしまうため明示的に打ち消す */
.cookie[hidden]{display:none;}
.cookie__txt{font-size:12px;line-height:1.8;flex:1;}
.cookie__btns{display:flex;gap:10px;flex:none;}
.cookie__btn{
  padding:9px 22px;font-size:12px;letter-spacing:.04em;
  border:1px solid var(--black);background:var(--white);
  transition:background .25s,color .25s;
}
.cookie__btn:hover{background:var(--gray);}
.cookie__btn--ok{background:var(--black);color:var(--white);}
.cookie__btn--ok:hover{background:#333;}
.cookie__close{
  position:absolute;right:16px;top:50%;translate:0 -50%;
  font-size:20px;line-height:1;color:#666;
}

/* =========================================================
   ローディング
   ========================================================= */
body.is-loading{overflow:hidden;}
/* セッション2ページ目以降。headのインラインscriptが付与し、描画前にローダーを消す */
.no-loader .loader{display:none !important;}
.no-loader body.is-loading{overflow:visible;}

.loader{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  pointer-events:none;
}
/* 2枚のパネルが斜めに割れて上下へ抜ける */
.loader__panel{
  position:absolute;inset:0;
  background:var(--black);
  transition:transform 1s var(--ease);
}
.loader__panel--1{clip-path:polygon(0 0,100% 0,100% 42%,0 58%);}
.loader__panel--2{clip-path:polygon(0 58%,100% 42%,100% 100%,0 100%);}
.loader.is-out .loader__panel--1{transform:translateY(-102%);}
.loader.is-out .loader__panel--2{transform:translateY(102%);}

.loader__logo{
  position:relative;z-index:1;
  color:var(--white);
  display:flex;flex-direction:column;align-items:center;gap:16px;
  transition:opacity .4s var(--ease),transform .6s var(--ease);
}
.loader__logo .logo__txt{
  font-family:"Oswald",sans-serif;font-size:22px;font-weight:600;letter-spacing:.24em;
}
.loader.is-out .loader__logo{opacity:0;transform:translateY(-14px);}

/* 読み込みバー */
.loader__bar{
  display:block;width:140px;height:1px;
  background:rgba(255,255,255,.22);overflow:hidden;
}
.loader__bar i{
  display:block;height:100%;width:100%;
  background:var(--yellow);
  transform:scaleX(0);transform-origin:left;
  animation:loadbar 1.1s var(--ease) forwards;
}
@keyframes loadbar{to{transform:scaleX(1);}}

/* =========================================================
   ページ遷移の幕
   メニューでページを切り替えるたび、黒パネルが上下から斜めに閉じる。
   遷移先では通常の登場アニメーションが再生される
   ========================================================= */
.pt{position:fixed;inset:0;z-index:150;pointer-events:none;}
.pt__p{
  position:absolute;inset:0;
  background:var(--black);
  will-change:transform;
}
.pt__p--1{
  clip-path:polygon(0 0,100% 0,100% 42%,0 58%);
  transform:translateY(-102%);
}
.pt__p--2{
  clip-path:polygon(0 58%,100% 42%,100% 100%,0 100%);
  transform:translateY(102%);
}
.pt.is-on .pt__p{
  transform:translateY(0);
  transition:transform .42s var(--ease);
}

/* 遷移先: 黒い幕が閉じた状態で表示され、同じ速さで開く。
   headのインラインscriptが描画前に .pt-in を付けるのでチラつかない */
.pt-in .pt__p{
  transform:translateY(0);
}
.pt-in.pt-open .pt__p--1{transform:translateY(-102%);transition:transform .42s var(--ease);}
.pt-in.pt-open .pt__p--2{transform:translateY(102%);transition:transform .42s var(--ease);}

/* =========================================================
   ヒーローの登場アニメーション
   ========================================================= */
/* スラブが下から立ち上がる */
.slab{
  clip-path:inset(100% 0 0 0);
  transition:clip-path 1.1s var(--ease);
}
.slab--5{clip-path:polygon(50% 100%,100% 100%,72% 100%,50% 100%,28% 100%,0 100%);}
body.is-ready .slab{clip-path:inset(0 0 0 0);}
body.is-ready .slab--5{clip-path:polygon(50% 0,100% 100%,72% 100%,50% 42%,28% 100%,0 100%);}
body.is-ready .slab--1{transition-delay:.05s;}
body.is-ready .slab--2{transition-delay:.15s;}
body.is-ready .slab--3{transition-delay:.25s;}
body.is-ready .slab--4{transition-delay:.35s;}
body.is-ready .slab--5{transition-delay:.45s;transition-property:clip-path;}

/* 黒面が上から降ってくる */
.hero__dark{
  transform:translateY(-100%);
  transition:transform 1.15s var(--ease);
}
body.is-ready .hero__dark{transform:translateY(0);}

/* 黄色ラインも上から降りてくる（上端を起点に伸びる） */
.hero__line{
  transform-origin:top center;
  transform:rotate(9deg) scaleY(0);
  transition:transform 1.1s var(--ease) .45s;
}
body.is-ready .hero__line{transform:rotate(9deg) scaleY(1);}

/* コピーは順番にフェードアップ */
.hero__tag,.hero__slash,.hero__lead,.scroll{
  opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
body.is-ready .hero__tag{opacity:1;transform:none;transition-delay:.55s;}
body.is-ready .hero__slash{opacity:1;transform:rotate(18deg);transition-delay:.7s;}
body.is-ready .hero__lead{opacity:1;transform:none;transition-delay:.85s;}
body.is-ready .scroll{opacity:1;transform:none;transition-delay:1s;}
@media (max-width:900px){
  body.is-ready .hero__slash{transform:rotate(0);}
}

/* SCROLL の線が繰り返し流れる */
.scroll::after{
  animation:scrollline 2.2s var(--ease) infinite;
}
@keyframes scrollline{
  0%{transform:scaleY(0);transform-origin:top;}
  45%{transform:scaleY(1);transform-origin:top;}
  55%{transform:scaleY(1);transform-origin:bottom;}
  100%{transform:scaleY(0);transform-origin:bottom;}
}

/* =========================================================
   スクロール表示アニメーション
   ========================================================= */
.reveal{opacity:0;transform:translateY(28px);}
.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}

/* 見出しを1文字ずつ */
.ttl .ch{
  display:inline-block;
  opacity:0;transform:translateY(90%) skewY(6deg);
}
.ttl.is-in .ch{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease),transform .7s var(--ease);
}
/* 文字送りの遅延はJSで --i を振って算出 */
.ttl.is-in .ch{transition-delay:calc(var(--i) * 42ms);}
/* 文字割りした見出し自体はふわっと動かさない（二重になるため） */
.ttl.reveal{opacity:1;transform:none;}
/* スラッシュは伸びる */
.ttl__slash{
  transform:rotate(18deg) scaleY(0);transform-origin:top;
  transition:transform .8s var(--ease);
}
.ttl.is-in .ttl__slash{transform:rotate(18deg) scaleY(1);}

/* 画像のワイプ表示
   斜めのclip-pathを保ったまま出したいので、同じ頂点数のまま
   「上端に潰した形」から本来の形へ transition させる */
.card__img,.post__img,.about__bg,.recruit__img{
  transition:clip-path 1s var(--ease),transform .6s var(--ease);
}

/* SERVICEカード: polygon(0 0, 100% 0, 62% 100%, 0 100%) */
.card__img{clip-path:polygon(0 0,100% 0,100% 0,0 0);}
.card.is-in .card__img{clip-path:polygon(0 0,100% 0,62% 100%,0 100%);}

/* ABOUT内の小カード: polygon(38% 0,100% 0,100% 100%,0 100%) */
.card--sm .card__img{clip-path:polygon(38% 0,100% 0,100% 0,38% 0);}
.card--sm.is-in .card__img{clip-path:polygon(38% 0,100% 0,100% 100%,0 100%);}

/* BLOG: polygon(0 0,100% 0,100% 88%,0 100%) */
.post__img{clip-path:polygon(0 0,100% 0,100% 0,0 0);}
.post.is-in .post__img{clip-path:polygon(0 0,100% 0,100% 88%,0 100%);}

/* 矩形のものは inset でOK
   ※ IntersectionObserverはclip適用後の面積で判定するため、
     clipで潰れた要素自身は監視できない。親セクションで制御する */
.about__bg,.recruit__img{clip-path:inset(0 0 100% 0);}
.sec--about.is-in .about__bg,
.sec--recruit.is-in .recruit__img{clip-path:inset(0 0 0 0);}

/* ホバーで画像をわずかにズーム */
.card:hover .card__img{transform:scale(1.03);}

/* SP: 画像は上に回り込むので形を変える */
@media (max-width:900px){
  .card__img,.card--sm .card__img,.post__img{
    clip-path:polygon(0 0,100% 0,100% 84%,0 100%);
    opacity:0;transform:translateY(16px);
    transition:opacity .8s var(--ease),transform .8s var(--ease);
  }
  .card.is-in .card__img,
  .card--sm.is-in .card__img,
  .post.is-in .post__img{opacity:1;transform:none;clip-path:polygon(0 0,100% 0,100% 84%,0 100%);}
  .about__bg,.recruit__img{clip-path:inset(0 0 100% 0);}
}

/* パララックス対象（JSが --py を更新） */
.hero__art{will-change:transform;}
body.is-ready .hero__art{translate:-50% calc(-50% + var(--py,0px));}
.about__bg{will-change:transform;}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
  .reveal,.ttl .ch,.strength__item{opacity:1;transform:none;}
  .card__img,.post__img,.about__bg,.recruit__img,.slab{clip-path:none;}
  .hero__dark,.hero__line,.hero__tag,.hero__slash,.hero__lead,.scroll{opacity:1;transform:none;}
  .loader{display:none;}
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:1100px){
  .cards__col--offset{margin-top:-90px;}
}

@media (max-width:900px){
  :root{--hd-h:64px;}
  .burger{display:block;}

  /* backdrop-filter は fixed 要素の包含ブロックを作ってしまうため、
     スクロール後にドロワー(.gnav position:fixed inset:0)が
     ヘッダーの高さ64px内に閉じ込められ、1項目しか見えなくなっていた。
     SPでは backdrop-filter を使わず不透明背景にする */
  .hd.is-stuck{
    backdrop-filter:none;
    background:var(--white);
  }

  /* SP用ドロワー */
  .gnav{
    position:fixed;inset:0;
    color:var(--black);          /* ドロワーは白背景なので文字は黒 */
    background:var(--white);
    padding:calc(var(--hd-h) + 24px) 24px 40px;
    overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-12px);
    transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
  }
  .gnav.is-open{opacity:1;visibility:visible;transform:none;}
  .gnav__list{flex-direction:column;align-items:stretch;gap:0;}
  .gnav__list > li{border-bottom:1px solid var(--gray2);}
  /* inline-flexだと文字幅しか当たり判定がないので、行全体をタップ可能にする */
  .gnav__list > li > a{
    display:flex;width:100%;
    font-size:16px;padding:18px 4px;
    justify-content:space-between;align-items:center;
  }
  .gnav__list > li > a::after{display:none;} /* 下線アニメは行幅だと不自然なので無効化 */
  .sub a{display:block;width:100%;}
  .sub{
    position:static;translate:none;transform:none;
    opacity:1;visibility:visible;box-shadow:none;
    padding:0 0 14px;min-width:0;display:none;
  }
  .has-sub.is-open .sub{display:block;}
  .sub a{padding:8px 14px;color:var(--muted);}

  /* HERO
     黒帯の開始位置が下すぎて、白文字のコピーが白背景側にはみ出していたため
     黒い面を広げて、コピーが必ず黒の上に乗るようにする */
  .hero__dark{clip-path:polygon(0 50%, 100% 34%, 100% 100%, 0 100%);}
  .hero__line{left:82%;}
  .hero__art{top:32%;left:50%;width:84vw;height:26vh;gap:12px;}
  /* top基準だと黒帯（左端62%〜）より上にはみ出し、白文字が白背景に乗ってしまうため
     下端基準にして必ず黒帯の内側に収める */
  .hero__copy{
    left:24px;right:24px;top:auto;bottom:13vh;
    flex-direction:column;align-items:flex-start;gap:14px;
    color:var(--white);
  }
  .hero__tag{font-size:26px;line-height:1.25;}
  .hero__slash{width:60px;height:1px;transform:rotate(0);}
  .hero__jp{color:rgba(255,255,255,.6);}
  .scroll{bottom:24px;right:16px;}

  /* セクション */
  .ttl__slash{left:-24px;top:-12px;width:7px;height:58px;}
  .sec__head--center .ttl__slash,.cta__inner .ttl__slash{left:-24px;}

  /* カードは1列に、画像は上に。
     6枚並ぶと縦に長くなりすぎるため、SPでは画像・余白・文字を詰める */
  .cards{grid-template-columns:1fr;gap:14px;}
  .cards__col{gap:14px;}
  .cards__col--offset{margin-top:14px;}
  /* SPでは画像を出さない（写真が未確定のため。差し替え時はここを外す） */
  .card__img{display:none;}
  .card__body{
    margin-left:0;margin-top:0;
    padding:24px;
    clip-path:none;
    position:relative;z-index:1;
  }
  .card__cat{font-size:11px;}
  /* スペースの都合でSPでは英字タイトルを1行に（HTML内の<br>を無効化する） */
  .card__ttl{margin-top:8px;font-size:19px;line-height:1.3;}
  .card__ttl br{display:none;}
  .card__txt{margin-top:12px;font-size:12.5px;line-height:1.85;}
  .card__arw{margin-top:18px;margin-right:2px;}
  .card__price{margin-top:14px;padding-top:12px;}
  .card__tags{margin-top:12px;}
  .card--sm .card__img{display:none;}
  .card--sm .card__body{margin-right:0;padding:24px;clip-path:none;}

  .strength{grid-template-columns:1fr;}
  .strength__item{padding:32px 26px 34px;}
  .others{margin-top:52px;padding:26px 24px;flex-direction:column;gap:16px;}

  /* 表は横スクロールさせず、ラベル／値を縦積みにする */
  .tblwrap{overflow-x:visible;margin-top:28px;}
  .tbl{min-width:0;}
  .tbl thead{display:none;}          /* 「項目 / 料金（税別）」の見出し行はSPでは不要 */
  .tbl tbody,.tbl tr,.tbl th,.tbl td{display:block;width:auto;}
  .tbl tr{border:1px solid var(--gray2);margin-bottom:-1px;}
  .tbl th{
    border:0;border-bottom:1px solid var(--gray2);
    white-space:normal;width:auto;
    padding:12px 16px;font-size:12px;letter-spacing:.06em;
  }
  .tbl td{border:0;padding:16px;}

  /* 下層ページ
     斜めの黒面が見出しに重なって文字が隠れていたため、
     SPでは「下端の固定高ウェッジ」にして本文と重ならないようにする。
     あわせて高さを詰め、要点がすぐ見えるようにする */
  .phead{
    min-height:0;
    padding-top:calc(var(--hd-h) + 26px);
    padding-bottom:96px;   /* ウェッジ72px + 余白 */
  }
  .phead__dark{
    inset:auto 0 0 0;      /* 上下いっぱいをやめ、下端だけに */
    height:72px;
    clip-path:polygon(0 45%,100% 0,100% 100%,0 100%);
  }
  .phead__line{left:76%;}
  .phead__en::before{left:-22px;top:-10px;width:7px;height:54px;}
  .phead__jp{margin-top:12px;}

  /* セクションの余白も詰める */
  .sec{padding:56px 0 64px;}
  .feat{grid-template-columns:1fr;gap:14px;padding:32px 24px 34px;}
  .feat__no{grid-row:auto;font-size:26px;}
  .worries{grid-template-columns:1fr;gap:0;}
  .step{grid-template-columns:1fr;gap:10px;padding:26px 0;}
  .tbl th{width:auto;}
  .prof{grid-template-columns:1fr;gap:28px;}
  .prof__img{max-width:260px;}
  .contacts{grid-template-columns:1fr;}

  /* ABOUT */
  .about__bg{position:relative;width:100%;height:220px;margin-bottom:36px;}
  .about__panel{display:none;}
  .about__cards{grid-template-columns:1fr;gap:20px;margin-top:44px;}

  /* RECRUIT */
  .recruit__img{position:relative;width:100%;height:240px;}
  .recruit__inner{min-height:0;}
  .recruit__box{margin:-40px 0 70px;box-shadow:0 12px 34px rgba(0,0,0,.12);}

  /* FOOTER（縦に長くなりすぎるため詰める） */
  .ft{padding-top:52px;}
  .ft__inner{grid-template-columns:1fr;gap:32px;padding-bottom:36px;}
  .ft__nav{grid-template-columns:1fr 1fr;gap:24px;}
  .ft__addr{margin-top:16px;}
  .ft__col li{margin-bottom:8px;}
  .ft__h{margin-bottom:12px;}

  /* お問い合わせフォームもコンパクトに */
  .form{margin-top:32px;}
  .field{margin-bottom:18px;}
  .field__l{margin-bottom:7px;}
  .field input[type=text],
  .field input[type=email],
  .field input[type=tel],
  .field select,
  .field textarea{padding:11px 13px;}
  .field textarea{min-height:120px;}
  .form__note{margin-bottom:18px;}
  .submit{padding:14px 36px;}
  .contacts{margin-top:32px;}
  .contacts__i{padding:22px 20px;}

  /* 固定CTA / Cookie */
  .fab{right:14px;bottom:14px;padding:6px 6px 6px 8px;}
  .fab__txt{display:none;}
  .cookie{flex-direction:column;align-items:stretch;gap:14px;padding:18px 20px 20px;}
  .cookie__btns{justify-content:stretch;}
  .cookie__btn{flex:1;}
}

@media (max-width:520px){
  /* フッターは1列にすると縦に長くなりすぎるので2列を維持する */
  .ft__nav{grid-template-columns:1fr 1fr;gap:20px;}
  .ft__col a{font-size:12px;}
  .hero__tag{font-size:24px;}
  .hero__en{font-size:12px;}
}

/* =========================================================
   BLOG
   ========================================================= */
.posts{
  margin-top:60px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:34px;
}
.post{display:block;}
.post__img{
  display:block;width:100%;aspect-ratio:16/10;
  clip-path:polygon(0 0,100% 0,100% 88%,0 100%);
  transition:transform .5s var(--ease);
}
.post:hover .post__img{transform:scale(1.03);}
.post__meta{
  display:flex;align-items:center;gap:14px;margin-top:20px;
  font-size:11px;letter-spacing:.08em;color:var(--muted);
}
.post__cat{
  font-family:"Oswald",sans-serif;
  border:1px solid var(--gray2);padding:3px 10px;color:#444;
}
.post__ttl{
  display:block;margin-top:12px;
  font-size:14.5px;line-height:1.8;font-weight:500;
}
.post:hover .post__ttl{text-decoration:underline;text-underline-offset:4px;}

@media (max-width:900px){
  .posts{grid-template-columns:1fr;gap:36px;}
}