:root{
  --pink:#FC0FC0;
  --purple:#4B03A9;
  --ink:#303237;
  --bg1:#e7c6ff;
  --bg2:#a9c8ff;
  --bg3:#ffc1e5;
  --bg-top: var(--bg2);  /* 上: 青 */
  --bg-mid: var(--bg3);  /* 中: ピンク */
  --bg-btm: var(--bg1);  /* 下: 薄むらさき */
}

:root{
  /* 画面の上限（背景用） */
  --page-max: 1440px;

  /* コンテンツ幅トークン */
  --container-wide:   1200px;  /* HERO/ヘッダー/フッター */
  --container-base:   1100px;  /* 標準の本文 */
  --container-narrow:  900px;  /* ニュース等の狭め */

  --gutter: 20px;              /* 左右の余白 */
}

body{ 
  margin:0 auto;
  font-family:"Noto Sans JP", "Zen Kaku Gothic New",system-ui, -apple-system, Helvetica, Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color:var(--ink);
 }

.zen-kaku-gothic-new-regular {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}


*{box-sizing:border-box;}



/* ===== Header ===== */
.header{
  position:sticky; 
  top:0; 
  z-index:20;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(0,0,0,.04);
}

.header__inner{
  max-width:1400px; 
  margin: auto;
  display:flex; 
  align-items:center;
  justify-content:space-between; 
  gap:20px;
  padding:30px 20px;
}

.logo{
  display:flex; 
  gap:10px; 
  font-weight:900; 
  letter-spacing:.5px;
}

.nav{
  margin-left:0;
  display:none; 
  gap:22px;
  flex: 1;
  justify-content:center; 
}

.nav a{
  font-size:14px; 
  text-decoration:none; 
  color:#000; 
  opacity:.9;
  letter-spacing:.5px;
  font-family: "Zen Kaku Gothic New";
}

.actions{
  display:flex; 
  gap:10px; 
  margin-left:auto;
}


/* どのボタンにも使えるサイズユーティリティ */
.u-btn-sm{ padding:6px 10px; }
.u-btn-md{ padding:8px 20px; }
.u-btn-lg{ padding:12px 18px; }

.btn{
  appearance:none;
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  font-weight:700;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  border-radius:5px;
}

/* 色だけバリアント */
.btn--primary{ background:var(--pink); color:#fff; }
.btn--login{ background:#fff; color:#FC0FC0; border:1px solid #FC0FC0; }

/* フッター専用の微調整はスコープして書く（←重要） */
.siteFooter .btn{ font-size:13px; border-radius:5px; }

.btn--iconAfter{
  --icon: none;                /* デフォルトは何も表示しない */
  --icon-size:1em;
  --icon-left:6px;
  --icon-gap: .55em;
  display:inline-flex;
  align-items:center;
  gap:var(--icon-gap);
}

.btn--iconAfter::after{
  content:"";
  width:var(--icon-size);
  height:var(--icon-size);
  display:inline-block;
  background-image:var(--icon);      /* ← ここに差し込まれる */
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}


.icon--search   { --icon: url("../image/seach_icon.svg"); }
.icon--login { --icon: url("../image/login_icon.svg"); }

.u-arrow{ 
  font-size:.7em; 
  line-height:1; 
  display:inline-block; 
  transform:translateY(0.5px); 
  margin-left:.45em;
}

.btn--login{
  background:#fff; 
  color:#FC0FC0 !important;
  border:1px solid #FC0FC0;
}

@media (min-width:960px){ 
  .nav{display:flex} 
  .actions{margin-left:0}
 }

.nav a[aria-current="page"]{
  opacity:1; 
  font-weight:700; 
  border-bottom:2px solid currentColor; 
  padding-bottom:2px;
}

/* ===== Hero ===== */
.hero{
  position:relative; 
  z-index: 1;
  overflow: visible;
  --hero-pad: 20px;     
  /* ベースの柔らかいグラデ背景 */
  background:
    radial-gradient(1000px 420px at 60% 40%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(900px 380px at 40% 60%, rgba(255,255,255,.14), transparent 65%),
    linear-gradient(180deg, var(--bg2) 0%, var(--bg3) 100%);
}

.hero__inner{
  max-width:1200px; 
  margin:0 auto;
  display:grid; 
  grid-template-columns:1.05fr 1fr;
  gap:32px; 
  align-items:center;
  padding:72px 0px 140px;
  position:relative; 
  z-index:2;
}

@media (max-width:960px){
  .hero__inner{
    grid-template-columns:1fr; 
    padding:80px 18px 120px}
}

/* 背景リング（位置を数値でコントロール） */
.hero__ring{
  position:absolute;
  inset: 0;
  pointer-events:none;
  z-index:1;
  filter:saturate(140%);
}

.hero__ring > img{
--hero-size: clamp(520px, 78vmin, 800px);
--hero-x: 50%;
--hero-y: 50%;
  position:absolute;
   left: var(--hero-x);
   top:  var(--hero-y);
   transform: translate(-50%, -50%);
   width: min(var(--hero-size), calc(100vw - 2*var(--hero-pad)));
   height:auto;
   opacity:.92;
   user-select:none;
}

/* 画面幅で微調整したければここで */
@media (max-width:960px){
  .hero__ring > img{
    --hero-size: clamp(360px, 70vmin, 780px);
    --hero-x: 50%;
    --hero-y: 58%
  }
}

/* 左カラム：コピー */
.hero__copy h1{
  margin:0 0 14px; 
  font-weight:900; 
  line-height:1.3;
  font-size:clamp(22px, 3vw + 12px, 34px);
  letter-spacing:.02em;
}

.hero__copy p{
  margin:0 0 18px; 
  line-height:1.9; 
  opacity:.9;
  font-size:clamp(14px, 1.2vw + 10px, 16.5px);
}

.hero__cta{
  display:flex; 
  gap:12px; 
  flex-wrap:wrap;
}

.cta-btn{
  display:inline-flex; 
  align-items:center;
  padding:12px 18px; 
  border-radius:5px;
  text-decoration:none;
  gap:.45em;  
  font-weight:700;
  color:#fff;
  line-height:1;
  border:0;
}

.cta-btn--pink{   background:var(--pink);}
.cta-btn--purple{ background:var(--purple);}
.cta-btn:hover{ filter:brightness(1.03); }
.cta-btn:active{ transform:translateY(1px); }


/* 右カラム：デバイス群（PNG） */
.devices{
  position:relative; 
  min-height:360px;
  margin-left:auto;
  width:min(560px, 100%)
}

.dev{
  position:absolute; 
  display:block; 
  max-width:100%; 
  height:auto
}


/* 下部の淡い巨大テキスト */
.hero__watermark{
  position:absolute;
  left:50%;
   font-size: 180px; 
   letter-spacing: -0.035em; 
   font-feature-settings: "palt" 1;
   text-rendering: optimizeLegibility; 
   white-space: nowrap;           
  transform:translateX(-50%);   
  bottom:clamp(-0.5em, -0.5em, -0.1em);  
  width:max-content;             
  white-space:nowrap;            
  z-index:5;
  font-weight:100;
  font-size:clamp(56px, 16vw, 160px);
  background:linear-gradient(90deg,#5270ff,#9a6ef5,#c66fe9,#e773db,#ff7bce);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;

  opacity:.42;
  pointer-events:none;
  user-select:none;
}

.hero + section { position: relative; z-index: 0; }

/* ===== About ===== */
.about{
  background:#fff;
}

.about__inner{
  max-width:1100px; 
  margin:0 auto; 
  padding:100px 20px;
}

.about .eyebrow{
  color:var(--pink); 
  font-weight:700; 
  font-size:13px; 
  letter-spacing:.12em; 
  margin:0 0 10px;
  text-align: left;
}

.about h2{
  margin:0 0 14px; 
  font-size:clamp(18px,2.2vw,24px); 
  line-height:1.8; 
  font-weight:900;
}

.about .lead{
  margin:0 0 18px; 
  color:#4a4a57; 
  line-height:2;
}

.u-right{
  display:block;
  width:fit-content;
  margin-left:auto;
}

.about .more{
  display:inline-flex; 
  gap:.5em; 
  align-items: center;
  text-decoration:none; 
  font-weight:700;
  color:#222; 
  border-bottom:1.5px solid currentColor; 
  padding-bottom:2px;
}

.about .more.u-right{
  display:block;        
  width:fit-content;
  margin-left:auto;     
}

.about .more span{
  transition:transform .2s ease;
}

.about .more:hover span{
  transform:translateX(3px);
}

.bgCanvas{
  position: relative;
  overflow: hidden;
  /* 必要なら見た目を安定させる最低高 */
  /* min-height: 100vh; */
  background:
    radial-gradient(900px 380px at 10% 6%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(900px 380px at 90% 94%, rgba(255,255,255,.45), transparent 60%),
    linear-gradient(180deg, #fbe7f4 0%, #FFEFF9 52%, #DBC9FF 100%);
}

/* 中央リング（PNG） */
.bgCanvas__ring{
  position:absolute;
  left:50%;
  top:46%;
  transform:translate(-50%, -50%);
  pointer-events:none;
  z-index:1;                /* 背景より前、本文より後ろ */
  filter:saturate(140%);
}

.bgCanvas__ring > img{
  --ring-size: clamp(1000px, 155vmin, 1700px);  
  width:var(--ring-size);
  height:auto;
  opacity:.92;
  filter:drop-shadow(0 40px 120px rgba(90,67,255,.25));
  -webkit-mask-image:radial-gradient(60% 60% at 50% 50%, #000 60%, transparent 82%);
          mask-image:radial-gradient(60% 60% at 50% 50%, #000 60%, transparent 82%);
}

/* 本文をリングの上に出す（リングは除外！） */
.bgCanvas > :not(.bgCanvas__ring){
  position:relative;
  z-index:2;   /* ← 1 → 2 に上げる */
}

/* スマホ調整（必要に応じて） */
@media (max-width: 960px){
  .bgCanvas__ring{ top:48%; }
  .bgCanvas__ring > img{ width:min(120vmin, 1000px); }
}


/* 既存セクション側の背景は消しておく（重ね塗り防止） */
.usecase, .features, .collab{ background: transparent; border-top: 0; }


/* ===== Use Case ===== */
.usecase__inner{
  max-width:1100px; 
  margin:0 auto; 
  padding:70px 20px 86px;
}

.usecase .eyebrow{
  text-align:center; 
  margin:0; 
  color:var(--pink);
  font-weight:700;
  font-size:13px; 
  letter-spacing:.14em; 
}

.usecase__title{
  text-align:center; 
  margin:10px 0 34px;
  font-size:28px; 
  font-weight:900; 
  letter-spacing:.02em;
}

.usecase__grid{
  list-style:none; 
  margin:0; padding:0;
  display:grid; 
  gap:24px;
  grid-template-columns:repeat(3, minmax(0,1fr));
  align-items:start;
}

@media (max-width:960px){
  .usecase__grid{grid-template-columns:1fr; gap:10px}
}

.usecase__item{
  padding:22px 0 20px 0;
  text-align:center;
}

.usecase__ill{
  width:140px; 
  height:140px; 
  margin:0 auto 12px;
  display:grid; 
  place-items:center;
}

.usecase__ill img{
  max-width:100%; 
  max-height:100%;
  display:block;
}

.usecase__itemTitle{
  font-size:16px; 
  font-weight:900; 
  margin:20px 0;
}

.usecase__desc{
  margin:0; 
  color:#4a4a57; 
  line-height:1.9; 
  font-size: 15px;
}


/* ===== Features ===== */
.features{
  position:relative; 
  overflow:hidden;
}

.features__inner{
  position:relative; 
  z-index:2;
  max-width:1100px; 
  margin:0 auto; 
  padding:72px 20px 96px;
  text-align:center;
}

.features .eyebrow{
  margin:0; 
  color:var(--pink);
  font-weight:700; 
  font-size:13px; 
  letter-spacing:.14em; 
}

.features__title{
  margin:10px 0 28px;
  font-size:clamp(18px,2.3vw,22px); 
  line-height:1.9; 
  font-weight:900;
}

.feature__heading{
 padding: 0 0 10px 0;
}

/* ヒーロー帯画像 */
.features__hero{
  margin:0 auto 26px; 
  max-width:900px;
}

.features__hero img{
  display:block; 
  width:100%; 
  height:auto;
}

/* 機能行 */
.feature{
  display:grid; 
  grid-template-columns: 1fr 1fr; 
  align-items:center;
  gap:40px; 
  text-align:left; 
  margin:38px 0;
}

.feature--reverse{ 
  grid-template-columns: 1fr 1fr;
 }

.feature--reverse .feature__media{ order:2 }
.feature--reverse .feature__body{ order:1 }

@media (max-width:960px){
  .feature, .feature--reverse{
    grid-template-columns:1fr; 
    text-align:center; 
    gap:18px; 
    margin:28px 0;
  }

  .feature--reverse .feature__media, .feature--reverse .feature__body{
    order:initial;
  }
}

.feature__media{
  justify-self:center;
  width:min(520px, 100%); /* 画像幅の上限 */
}

.feature__media img{
  display:block; 
  width:100%; 
  height:auto; 
  border-radius:10px;
}

.feature__heading{ 
  margin:0 0 10px; 
  font-size:18px; 
  font-weight:900;
 }

.feature__text{ 
  margin:0; 
  color:#4a4a57; 
  line-height:1.9; 
  font-size:15px;
 }


/* ===== Collaboration ===== */
.collab{
  position:relative; 
  overflow:hidden;
}

/* グリッドはそのまま2カラム */
.collab__inner{
  max-width:1000px;
  margin:0 auto;
  padding:40px 20px 96px;  
  display:flex;
  gap:60px;
  align-items:center;
}

/* ⬇︎ 見出し2行だけ全幅に広げて中央寄せ */
.collab__center{
  grid-column: 1 / -1;   /* 2カラムをまたぐ */
  text-align: center;
}

.collab .eyebrow{
  color:var(--pink); 
  font-weight:700; 
  font-size:13px;
  letter-spacing:.14em;
  margin:0 0 8px;
}

.collab__maintitle{
  max-width:1100px;        /* 本文と同じ横幅にそろえる */
  margin: 0 auto 8px;      /* 中央寄せ */
  padding: 84px 20px 0;    /* 上の余白はここで確保 */
  text-align: center;
}

.collab__title{
  margin:0 0 12px; 
  font-weight:900;
  font-size:clamp(20px,2.6vw,26px); 
  letter-spacing:.02em;
}

.collab__lead{
  margin:0; 
  color:#4a4a57; 
  line-height:1.95; 
  font-size:15px;
}

.collab__media{
  margin:0; 
  justify-self:center; 
  width:100%; 
  filter:saturate(110%);
}

.collab__media img{
  display:block; 
  width:100%; 
  height:auto; 
  box-shadow:0 18px 40px rgba(90,67,255,.15), 0 2px 0 rgba(255,255,255,.6) inset;
}

@media (max-width:960px){
  .collab__maintitle{ padding:72px 20px 0; }
  .collab__inner{ flex-direction:column; gap:22px; padding:20px 20px 80px; }
}

/* ===== News ===== */
.news{
  background:#fff;
  border-top:1px solid rgba(0,0,0,.06);
}

.news__maintitle{
  max-width:1100px;        /* 本文と同じ横幅にそろえる */
  margin: 0 auto 8px;      /* 中央寄せ */
  padding: 84px 20px 0;    /* 上の余白はここで確保 */
  text-align: center;
}


.news__inner{
  max-width:900px; 
  margin:0 auto;
  padding:60px 20px 100px;
}

.news .eyebrow{
  color:var(--pink); 
  font-weight:700; 
  font-size:13px;
  letter-spacing:.14em; 
  margin:0 0 6px;
}

.news__title{
  margin:0 0 18px; 
  font-weight:900; 
  font-size:clamp(18px,2.2vw,22px);
}

.news__list{
  list-style:none; 
  margin:24px 0 0; 
  padding:0;
}

.news__item{
  position:relative; 
  padding:14px 0 6px;
}

.news__tag{
  display:inline-block; 
  margin-right:10px;
  font-size:12px; 
  font-weight:700; 
  letter-spacing:.06em;
  padding:4px 12px; 
  border-radius:999px;
  background:#FC0FC0; 
  color:#fff;
}

.news__link{
  display:grid; 
  grid-template-columns:1fr; 
  grid-template-rows: auto auto;  /* 見出し → 日付 */
  align-items:start;
  gap:4px;                        /* 見出しと日付の間隔 */
  text-decoration:none;
  color:inherit;
}

.news__headline{
  font-weight:700;
  padding: 20px 0;
}

.news__date{
  justify-self:start;   
  color:#666; 
  font-size:13px;
  padding-bottom: 8px;
}

.news__divider{
  height:1px; 
  background:rgba(0,0,0,.15); 
  margin-top:12px;
}

.news__moreWrap{
  display:flex; 
  justify-content:center; 
  padding:40px 0 4px;
}

.btn--pill{
  background:var(--pink); 
  color:#fff; 
  font-weight:700; 
  padding: 26px 100px;
  text-decoration:none;
  display:inline-block;
}

.news .btn--pill{ 
  border-radius:100px;
}


/* ===== Promo / Careers cards ===== */
.infoCards{
  background:#fff;
  padding:0 0 90px;  /* 上は news との距離を news 側で確保済み */
}
.infoCards__inner{
  max-width:1300px; 
  margin:0 auto; 
  padding:0 20px;
  display:grid; 
  gap:30px; 
  grid-template-columns:1fr 1fr;
}
@media (max-width:960px){
  .infoCards__inner{grid-template-columns:1fr}
}

.card{
  background:#FFEFF9; 
  color: #303237;
  border: none;
  border-radius:16px; 
  min-height:180px;
  position:relative; 
  overflow:hidden;
  display:grid; 
  grid-template-columns:1fr; 
  padding:0;
}

/* プロモカード（左） */
.card--promo{
  background:#FFEFF9;
  display:grid; 
  grid-template-columns:1fr 220px; 
  align-items:center;
  gap:0; 
  padding:0;
}

@media (max-width:960px){ .card--promo{grid-template-columns:1fr} }

.card__body{
  padding: 40px 30px;
}

.card__title{
  margin:4px 0 8px; 
  font-weight:900; 
  font-size:28px;
}

.card--promo .card__body .card__title {
  text-align: center;
}

.eyebrow {
  text-align: center;
}

.card__media{
  margin:0; 
  align-self:stretch; 
  display:grid; 
  place-items:center; 
  background:transparent;
}

.card__media img{
  max-width:92%; 
  height:auto; 
  display:block; 
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.12))}

.card__cta{
  display:flex; 
  gap:8px;
  justify-content: center; 
}

.chip{
  display:inline-flex; 
  align-items:center;
  padding:8px 12px; 
  border-radius:5px;
  background:var(--purple); 
  color:#fff; 
  text-decoration:none; 
  font-weight:700; 
  font-size:13px;
  gap:.45em; 
}

.chip--ghost{
  background:#FC0FC0; 
  color:#FFF; 
  box-shadow:none;
}

.chip.btn--iconAfter{
  position:relative;
  --icon-size:1.05em;
  --icon-right:10px;                      /* 右端からの距離。お好みで */
  padding-right: calc(var(--icon-right) + var(--icon-size) + 6px);
}
.chip.btn--iconAfter::after{
  content:"";
  position:absolute;
  top:50%;
  right:var(--icon-right);
  transform:translateY(-50%);
  width:var(--icon-size);
  height:var(--icon-size);
  background: no-repeat center/contain var(--icon);
}

/* 採用カード（右） */
.card--recruit{
  background:#FFEFF9;
}
.card--recruit .card__title{
  font-size:18px;
}

.card__text{
  margin:8px 0 14px; 
  color:#4a4a57; 
  line-height:1.9;
}

.card__more{
  display:inline-flex; 
  gap:.5em; 
  align-items:center; 
  text-decoration:none;
  font-weight:700; 
  color:#222; 
  border-bottom:1.5px solid currentColor; 
  padding-bottom:2px;
}

/* 右寄せ：リンク自身をブロック化して左マージンを自動に */
.card__more.u-right{
  display:block;        /* inline-flex を上書き */
  width:fit-content;
  margin-left:auto;     /* 右端に寄る */
  padding-top: 10px;
}


.card__more span{
  transition:transform .2s ease;
}

.card__more:hover span{
  transform:translateX(3px);
}

/* ===== Footer ===== */
.siteFooter{
  background:#24272b; 
  color:#e9e9ee;
  border-top:1px solid rgba(255,255,255,.06);
  padding-bottom: 40px;
}

.siteFooter__inner{
  max-width:1250px;
  padding:60px 0 0 0;
  margin: 0 auto;
  display:flex;
  justify-content: space-between;
  row-gap:28px; 
  
  /* 追加 */
  align-items:flex-start;
  flex-wrap: wrap;           /* ← 2行構成にするカギ */
  column-gap:16px;
}

/* 上段：3カラム */
.siteFooter__top{
  display:grid;
  grid-template-columns: 1fr auto 1fr;  /* 左：ロゴ／中央：nav箱／右：CTA */
  align-items:center;
  column-gap:16px;
}

/* 左：ロゴ（フッター専用クラスに） */
.footerLogo{ 
  display:inline-flex; 
  align-items:center;
  justify-self:start;
  margin-left:0;     
 }

.footerLogo__img{ 
  display:block; 
  height:24px;
  width:auto; 
}

.footerCenter{
  display:flex;
  flex-direction:column;
  align-items:center;          
  gap:8px;
}

.footerNav{ 
  display:flex; 
  gap:26px; 
  justify-content:center; 
  flex-wrap:wrap; 
}

.footerNav a{ 
  color:#e9e9ee; 
  text-decoration:none; 
  font-size:14px; 
  opacity:.85; 
}

.footerNav a:hover{ opacity:1; }

.footerPolicy{
  color:#c7cbd2; 
  text-decoration:none; 
  font-size:13px;
  padding: 16px;
}

.footerPolicy:hover{ color:#fff; }

 /* 左寄せに合わせて右だけ余白 */
.footerCols__title{ 
  margin:0 0 10px; 
  font-size:13px; 
  letter-spacing:.08em; 
  color:#cfd3d8; 
}

.footerAddress{ 
  font-style:normal; 
  line-height:1.9; 
  color:#d9dde3; 
  opacity:.9; 
  font-size:14px;
  padding: 10px 0;
 }

.footerLegal__copy{ 
  align-self:center; 
  opacity:.8; 
  font-size:13px;
  padding: 40px 0; 
}

/* スマホ */
@media (max-width:960px){
  .siteFooter__inner{ padding:24px 16px 30px; }
  .siteFooter__top{ grid-template-columns:1fr; row-gap:14px; justify-items:center; }
  .footerCTA{ justify-self:center; }
}

.siteFooter .btn{
  font-size:13px;          
  padding:7px 14px;        
  border-radius:5px;
  text-decoration: none;     
}


.siteFooter .btn--iconAfter{ --icon-size: .85em; }

.siteFooter .u-arrow{
  font-size:.7em;
  line-height:1;
  display:inline-block;
  margin-left:.75em;
  transform:translateY(.5px); 
}

.siteFooter .footerCTA .btn + .btn{
  margin-left:10px;
}

.footerNav a[aria-current="page"]{
  opacity:1;
  font-weight:700;
  border-bottom:2px solid currentColor;
  padding-bottom:2px;
}

/* === Footer：背景は全幅のまま、中身だけ箱(中央寄せ)にする === */
/* 中身（上段） */
.siteFooter__inner{
  max-width: var(--container-wide);        /* 例: 1200px */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);             /* 両サイドにガター */
  padding-right: var(--gutter);
}

/* ===== Pages ===== */

/* 共通：ページ見出し */
.pageHeader{
  max-width:1200px;
  margin:0 auto;
  padding:64px 20px 32px;
}
.pageHeader h1{
  margin:0;
  font-weight:900;
  font-size:clamp(22px, 2.6vw, 32px);
}

/* ===== 共通 Page Hero レンダラ ===== */
.pageHero__inner{
  max-width:1100px; margin:0 auto; padding:0 20px;
  position:relative; z-index:1;
}

.pageTitle{
  font-weight:900;
  font-size:clamp(18px, 2.6vw, 28px);
  margin: 6px 0 0;
}


/* 企業情報ページ*/
.pageHero--company{ --ph-size:920px; --ph-left:50%; --ph-top:-110px; padding:80px 0 12px; }

.page-company .companyIntro{
  max-width:1100px;
  margin:0 auto;
  padding:32px 20px 80px;
}

.container{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.pageHero--company{
  position: relative;
  padding: 80px 0 10px;
}

.container .eyebrow,
.pageHero__inner .eyebrow {
  text-align: left;
  color: #FC0FC0;
  margin:0;
}

.company{ 
  padding: 80px 0 60px;
 }

.company__h2{
  margin: 6px 0 16px;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 900;
  text-align: left;
  padding-bottom:40px;
}

.dlTable{
  --term-col: 300px;   
  --pad-l: 24px;       
  --pad-r: 24px;       
  display: grid;
  grid-template-columns: 300px 1fr;
  text-align: left;
}

.dlTable dt,
.dlTable dd{
  padding:50px 0 10px;
  border-bottom: none;
}

.dlTable dt{ 
  padding-right: var(--pad-l); color:#555; font-weight:700; 
 } 

.dlTable dd{ 
  padding-left: var(--pad-r);
  position: relative;              
}   

.dlTable dd::after{
  content:"";
  position:absolute;
  left: calc(-1 * var(--term-col) - var(--pad-l) - var(--pad-r)); /* ← dt幅＋両パディング分だけ左に伸ばす */
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(0,0,0,.10);
}

/* ブレークポイントに合わせて列幅だけ差し替える */
@media (max-width: 720px){
  .dlTable{ --term-col: 120px; }    /* あなたの小さめレイアウトに合わせる */
}

/* 1カラム化する場合のフォールバック */
@media (max-width: 520px){
  .dlTable{ grid-template-columns: 1fr; }
  .dlTable dd::after{ left: 0; }     /* 1カラム時は全幅でOK */
  /* もしスマホで罫線の見せ方を変えるならここで上書き */
}

.timeline{
  list-style: none;
  margin: 0;
  padding: 0;
}

.timeline li{
  display: grid;
  grid-template-columns: 300px 1fr;
  column-gap: 52px;
  padding: 30px 0;
  border-bottom: 1px solid rgba(0,0,0,.10);
  text-align: left;
}

.timeline time{
  color:#555;
  font-weight: 700;
}

.timeline p{ 
  margin: 0;
 }

@media (max-width: 720px){
  .dlTable,
  .timeline{ grid-template-columns: 120px 1fr; }
}
@media (max-width: 520px){
  .dlTable,
  .timeline{
    grid-template-columns: 1fr;
  }
  .dlTable dt,
  .timeline time{
    border-bottom: none;
    padding-bottom: 4px;
  }
  .dlTable dd,
  .timeline p{
    padding-top: 0;
    border-top: 1px dashed rgba(0,0,0,.08);

  }
}

/* お知らせページ */
.pageHero--news   { --ph-size:920px; --ph-left:50%; --ph-top:-110px; padding:80px 0 12px; }

.page-news .news{ 
  background:#fff; 
  border-top:1px solid rgba(0,0,0,.06); 
}


.newsIndex{ background:#fff; }
.newsIndex__inner{
  max-width: 900px;   
  margin: 0 auto;
  padding: 64px 20px 90px;
}
.newsIndex__h2{
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
}

.news__list{
  list-style:none;
  margin:24px 0 0;
  padding:0;
}

.news__item{
  position:relative;
  padding:30px 0 10px;
  text-align: left;
}

.news__tag{
  display:inline-block;
  margin-right:10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  padding:4px 12px;
  border-radius:999px;
  background:var(--pink);
  color:#fff;
}

.news__link{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto auto;
  align-items:start;
  gap:4px;
  text-decoration:none;
  color:inherit;
}

.news__headline{
  font-weight:700;
  padding:20px 0 2px;
}
.news__date{
  justify-self:start;
  color:#666;
  font-size:13px;
  padding-bottom:8px;
}
.news__divider{
  height:1px;
  background:rgba(0,0,0,.15);
  margin-top:12px;
}

.news__moreWrap{
  display:flex;
  justify-content:center;
  padding:28px 0 60px;
}

.newsIndex .btn--pill{
  border-radius:100px;         
  padding:26px 100px;          
}


/* 採用情報ページ */
.pageHero--careers,
.pageHero--recruit  { --ph-size:920px; --ph-left:50%; --ph-top:-110px; padding:80px 0 12px; }

/* PC/タブレットは画像なし */
.pageHero--recruit::after { content: none; }

.pageHero--recruit .pageHero__inner .eyebrow{
  margin:0 0 3px;
  color:var(--pink);
  font-weight:700;
  font-size:13px;
  letter-spacing:.12em;
  text-align:left;
}
.pageHero--recruit .pageHero__inner .pageTitle{
  margin:0;
  color:#333;
  font-weight:900;
  font-size:clamp(22px, 2.4vw, 28px);
  text-align:left;
  padding:0 0 10px;
}

@media (max-width: 960px){
  .pageHero--recruit{
    --ph-size: clamp(420px, 90vmin, 900px);
    --ph-left: 50%;
    --ph-top: -20px;
    --blue-stop: 94%;
  }
}

.recruitIntro .container{
  max-width:1100px;
  margin:0 auto;
  padding:70px 70px 20px;
  text-align:center;
}

.jobs{
  background:#fff;
}
.jobs .container{
  max-width:900px;
  padding:28px 20px 120px;
  text-align: center;
}
.jobs__title{
  margin:0 0 24px;
  font-size:16px;
  font-weight:700;
  text-align: left;
}

.jobPanel{
  min-height:140px;
  padding:36px 24px;
  background:#D9D9D9;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  display:grid;
  place-items:center;
  color:#333;
  font-weight:700;
  letter-spacing:.06em;
}
.jobPanel.is-empty{ color:#333; }

.recruitCTA{
  display:flex;
  justify-content:center;
  padding:60px 0 0;
}
.recruitCTA .btn--pill{
  border-radius:999px;
  padding:26px 100px;
}

/* お問い合わせページ */
.pageHero--contact{ --ph-size:920px; --ph-left:50%; --ph-top:-110px; padding:80px 0 14px; }

.page-contact .contact{
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px 20px 120px;
  background: #fff;
  text-align: left;
}
.page-contact .contact .container{ text-align: left; }

.page-contact .contactForm{
  display: grid;
  gap: 14px;          
  --field-width: clamp(640px, 72vw, 740px);  
}

.page-contact .contactForm input[type="text"],
.page-contact .contactForm input[type="email"],
.page-contact .contactForm input[type="tel"],
.page-contact .contactForm textarea{
  width: min(100%, var(--field-width));
  padding: 14px 16px;
  background: #D9D9D9;
  border: 0;
  border-radius: 5px;
  font-size: 16px;
}
.page-contact .contactForm textarea{
  min-height: 180px;
  resize: vertical;
  width: min(100%, 960px);
}
.page-contact .contactForm input:focus,
.page-contact .contactForm textarea:focus{
  outline: 2px solid var(--pink);
  background: #f3f3f7;
}

.page-contact .contactForm .field label{
  display: block;
  margin: 0 0 8px;
  text-align: left;
}
.page-contact .contactForm .field label .req{
  color: #FC0FC0;
  margin-left: .25em;
  font-weight: 700;
}

.page-contact .policy{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  justify-self:start;
  width: min(100%, var(--field-width));
}

.page-contact .policy input{ margin: 0; }
.page-contact .policy a{ color: inherit; text-decoration: underline; }

.contactActions{
  display: flex;
  justify-content: center;
  padding-top: 18px;
}
.contactActions .btn--pill{
  border-radius: 999px;
  padding: 26px 100px;
}

.contactForm:not(:has(#cf-pp:checked)) .contactActions .btn--pill{
  pointer-events: none;
}

@media (max-width: 640px){
  .page-contact .contact{ 
    padding: 48px 16px 100px;
  }
}

/*サンクスページ*/
.pageHero--thanks { --ph-size:900px; --ph-left:50%; --ph-top:-110px; padding:56px 0 20px; }

.pageHero--thanks .pageTitle{
  margin: 6px 0 0;
  text-align: center;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(20px, 2.6vw, 28px);
  padding: 10px 0 40px;
}

.page-thanks .thanks{
  max-width: 800px;
  margin: 0 auto;
  padding: 96px 20px 140px;
  background: #fff;
  text-align: center;
}

.thanks__msg{
  max-width: 720px;
  margin: 18px auto 0;
  color: #4a4a57;
  line-height: 1.95;
  font-size: 15px;
}

.thanks__actions{
  display: flex;
  justify-content: center;
  padding-top: 80px;
}

.thanks__actions .btn--pill{
  display: inline-block;
  padding: 18px 64px;
  border-radius: 999px;
  background: var(--pink, #FC0FC0);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 640px){
  .pageHero--thanks{ --ph-size:760px; --ph-top:-160px; }
  .thanks{ padding: 72px 16px 120px; }
}

/* 共有の背景を一元化（ファイルの最後あたりに置く） */
:root{
  --ph-bg:
    radial-gradient(1000px 360px at 50% -140px, rgba(255,255,255,.45), transparent 60%),
    linear-gradient(180deg, var(--bg2) 0%, var(--bg2) 45%, var(--bg1) 100%);
}
.pageHero{
  position: relative;
  overflow: clip;
  background: var(--ph-bg);   /* ← 共有のグラデ＋ハイライト */
  /* デフォ値（各ページで上書き） */
  --ph-size: clamp(880px, 85vmin, 980px);
  --ph-left: 50%;
  --ph-top:  -400px;
}
.pageHero::after{
  content:"";
  position:absolute;
  left: var(--ph-left);
  top:  var(--ph-top);
  transform: translateX(-50%);
  width: min(var(--ph-size), 92vw);
  aspect-ratio: 1 / 1;
  background: url("../image/617668432_1.png") center / contain no-repeat;
  opacity:.9;
  filter:saturate(140%);
  pointer-events:none;
  z-index:0;
}


/*----------------------
---------SP-------------
-----------------------*/
/* ===== SPナビ（統一版） ===== */
.spNav[hidden]{display:none;}
#spNav{
  position:fixed; 
  inset:0; 
  z-index:2000;
}

#spNav .spNav__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.36);
  opacity:0; 
  transition:opacity .25s;
  z-index:0;
}

#spNav .spNav__panel{
  position:absolute; left:0; right:0; top:0;   /* ← bottom は付けない */
  background:#fff;
  display:flex; 
  flex-direction:column;
  max-height:100dvh;                           /* 中身が長い時だけスクロール */
  transform:translateY(-8px);
  opacity:0;
  transition:transform .25s, opacity .25s;
  z-index:1;
}

#spNav.is-open .spNav__backdrop{opacity:1;}
#spNav.is-open .spNav__panel{transform:none; 
  opacity:1;}

.spNav__head{
  display:grid;
  grid-template-columns:auto 1fr auto auto auto; /* ロゴ | 余白 | 無料 | ログイン | × */
  align-items:center; 
  gap:8px;
  padding: 12px 20px;
  border-bottom:1px solid rgba(0,0,0,.06);
}

.spNav__logo img{
  height:22px; 
  width:auto; 
  display:block;
}

.spNav__head .btn{
  padding:8px 10px; 
  font-size:13px; 
  white-space:nowrap;
}

.spNav__close{
  appearance:none; 
  background:transparent; 
  border:0; 
  padding:8px;
}

.spNav__open{
  appearance:none; 
  background:transparent; 
  border:0; 
  padding:8px; 
  align-items:center; 
  justify-content:center;
}

.spNav__open img, 
.spNav__close img{
  width:24px; 
  height:24px; 
  display:block;
}

.spNav__nav{
  flex:0 0 auto; 
  padding:8px 0; 
  overflow:auto;
}

.spNav__list{
  list-style:none; 
  margin:0; 
  padding:0;
}

.spNav__list li a{
  display:block; 
  padding:18px 16px;
  text-decoration:none; 
  color:#222; 
  font-size:16px;
  border-bottom:1px solid rgba(0,0,0,.08);
}

html.u-lock{overflow:hidden;} /* 背景スクロール固定 */

@media (max-width:960px){
  .header_logo{
    height:22px; 
    width:auto;
  }

  .header .actions{
    justify-self:end; 
    display:flex; 
    gap:8px; 
    flex-wrap:nowrap;
    min-width:0;
  }

  .header .actions .btn{
    padding:8px 10px; 
    font-size:13px; 
    white-space:nowrap;
  }

  #menu-sp.spNav__open{
    grid-column:4; 
    justify-self:end; 
    padding:8px;
  }
}

@media (max-width:960px){
  .header .actions .btn{
    width:auto;
    flex:0 0 auto;
    padding:8px 10px;
    font-size:13px;
    white-space:nowrap;
  }
}

@media (max-width: 960px){
  .hero__inner{
    display:grid;
    grid-template-areas:
      "title"
      "lead"
      "devices"
      "cta";
    row-gap:16px;
    justify-items:center;     /* 中央寄せ */
    text-align:center;
    padding:80px 20px 60px;
  }

  /* hero__copyの箱を外して中身をグリッドに参加させる */
  .hero__copy{ display:contents; }
  .hero__copy h1{ grid-area: title; }
  .hero__copy p { grid-area: lead;  }

  /* 画像（PC＋スマホ群）を中央＆ちょい拡大 */
  .devices{
    grid-area: devices;       /* ← "" なし（重要） */
    width: min(92vw, 740px);
    margin: auto 0;      /* 完全中央 */
    min-height: 0;
    justify-items: center;
  }

  /* CTAを画像の“下”で中央に */
  .hero__cta{
    grid-area: cta;           /* ← "" なし（重要） */
    justify-content: center;
    margin-top: 300px;
  }

  /* リングの位置はお好みで微調整 */
  .hero__ring > img{
    --hero-size: clamp(460px, 95vmin, 940px);
    --hero-x: 50%;
    --hero-y: 58%;
  }

  /* 右の英字：上に寄せる＆回転指定を一本化 */
  .hero__watermark{
    position: absolute;
    right: clamp(6px, 2.2vw, 18px);
    top: 50%;                                /* ← 上に寄せたいほど小さく（例: 34〜40%） */
    transform: translateY(-60%) rotate(-90deg);
    transform-origin: 100% 0;                /* 右上を基準に回転 */
    writing-mode: horizontal-tb;             /* 回転テキストにする（縦組みは使わない） */
    white-space: nowrap;
    line-height: 1;
    font-size: 70px;
  }
}

/* ==== SPで右側の英字がはみ出さないように調整 ==== */
@media (max-width: 960px){
  .hero { 
    overflow: hidden;
    position: relative;
   } /* ヒーロー範囲外へ描画させない保険 */

  .hero__watermark{
    /* PC値をリセット（重要） */
    left: auto;            /* ← これで left:50% を無効化 */
    bottom: auto;          /* ← これで bottom:-0.6em を無効化 */

    /* 縦置き・中央寄せ */
    right: max(0px, env(safe-area-inset-right, 0px) + 8px);
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: 100% 50%;

    /* 大きさ＆字間（お好みで微調整） */
    font-size: clamp(50px, 20vh, 70px);
    letter-spacing: -0.02em;

    /* 前面に出過ぎないように */
    opacity: .42;
    z-index: 1;            /* 背景リング(1)の上・本文(2)の下にしたいなら 1 に */
    pointer-events: none;
  }
}

/* フッタースマホ */
/* === Footer：SPレイアウト（〜900px）=== */
@media (max-width:960px){

  /* フッター全体をグリッド化： 
     1行目 ロゴ／2行目 住所／3行目 左=TOP&ポリシー 右=ボタン */
  .siteFooter{
    padding-bottom: 20px;
  }
  .siteFooter__inner{
    display: contents;                     /* 子要素を親グリッドに参加させる */
  }
  .siteFooter{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "logo  logo"
      "addr  addr"
      "links cta";
    row-gap: 12px;
    padding: 40px 30px 30px;
  }

  .siteFooter__inner > .logo{
    grid-area: logo;
    justify-self: center;
  }

  .footerCols__title{ margin: 0 0 6px; }
  .footerAddress{ margin: 0; line-height: 1.8; }

  .siteFooter__inner > .footerCenter{
    grid-area: links;
    justify-self: start;
    display: flex;
    align-items: left;
    gap: 18px;
  }

  .footerNav{ display: inline-block; }


  /* プライバシーポリシーはそのまま隣に */
  .footerPolicy{
    margin: 0; 
    padding: 0; 
    font-size: 13px;
    color:#c7cbd2; 
    text-decoration:none;
  }

  /* 右：ボタン群（縦積みにならない程度に詰める） */
  .siteFooter__inner > .footerCTA{
    grid-area: cta;
    justify-self: end;
    display: inline-block;
    gap: 10px;
  }
  .siteFooter .btn{
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 5px;
    width: auto;              /* 伸びすぎ防止 */
  }

  /* コピーライト非表示 */
  .footerLegal__copy{ display:none; }
  
  /* 右：ボタンを縦並び＆右寄せ */
  .siteFooter__inner > .footerCTA{
    grid-area: cta;
    display: grid;
    grid-template-columns: 1fr;  /* 1列 */
    grid-auto-rows: auto;
    gap: 10px;
    justify-items: end;          /* 右端に寄せる */
  }

  /* ボタンのサイズを少しコンパクトに */
  .siteFooter .btn{
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 5px;
    width: auto;
  }
}

.header .actions{
  justify-self:end;
  display:flex; 
  gap:8px; 
  flex-wrap:nowrap; 
  min-width:0;
}
.header .actions .btn{
  padding:8px 10px; 
  font-size:13px; 
  white-space:nowrap;
}

/* ===== ヘッダー：SPは横一列／PCはハンバーガー非表示 ===== */

/* 共通（モバイルファースト） */
.header__inner{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  flex-wrap:nowrap;            /* 折り返し防止：三本線が下に落ちない */
}
.logo, .nav, .actions, .spNav__open{ flex:0 0 auto; }
.header .actions{
  margin-left:auto;
  display:flex; gap:8px; min-width:0;
}
.header .actions .btn{ padding:8px 10px; font-size:13px; white-space:nowrap; }
.spNav__open{ background:transparent; border:0; padding:8px; margin-left:4px; display:inline-flex; }
.spNav__open img{ width:24px; height:24px; display:block; }

/* SP：ナビ非表示・三本線表示 */
@media (max-width:960px){
  .nav{ display:none; }
  .spNav__open{ display:inline-flex; }
}


/* =========================
   PC(>=900px) ヘッダーの整列
   ========================= */
@media (min-width:960px){
  /* レイアウトはフレックスで  左=ロゴ | 中央=ナビ | 右=ボタン */
  .header__inner{
    display:flex;                 /* もしSPでgrid指定が残っていても上書き */
    align-items:center;
    gap:20px;
    padding:28px 20px;
  }

  /* PCではナビを出して中央寄せ */
  .nav{
    display:flex;                 /* SPで display:none しててもここで復活 */
    gap:22px;
    flex:1 1 auto;                /* 中央にスペースを確保 */
    justify-content:center;       /* 中央寄せ */
  }

  /* 右側のボタン群は右端へ */
  .header .actions{
    margin-left:0;                /* SP時のautoを戻す */
    display:flex;
    gap:10px;
  }

  /* 三本線はPCでは隠す */
  .header .spNav__open{ display:none; }
}

/* =========================
   PC(>=960px) ヒーロー画像を拡大
   ========================= */
@media (min-width:960px){
  /* 端末画像のブロックを大きく（画面に応じて可変） */
  .devices{
    width: clamp(640px, 46vw, 820px);  /* 最小640px〜最大820pxで伸縮 */
    min-height: 420px;
    margin-left:auto;                  /* 右カラム内で右寄せのままなら残す。中央にしたいなら margin:0 auto; */
  }
}

/* =========================
   PC(>=960px) hero をリセット
   ========================= */
@media (min-width:960px){
  /* 2カラム＆中央揃えに戻す */
  .hero__inner{
    display:grid;
    grid-template-columns: 1.05fr 1fr;   /* 左=コピー / 右=画像 */
    column-gap:32px;
    align-items:center;                  /* 画像が上に寄らないよう垂直中央 */
    text-align:left;
    padding:96px 0px 160px;             /* 余白もPCサイズに */
  }

  /* SPで display:contents にしているのをPCで戻す */
  .hero__copy{ display:block; }
  .hero__copy h1,
  .hero__copy p{
    margin-left:0;
    margin-right:0;
    text-align:left;
  }

  /* CTAは左寄せ（SPの margin-top 調整は無効化） */
  .hero__cta{
    justify-content:flex-start;
    margin-top:12px;
  }

  /* 端末画像（右カラム）をしっかり大きく */
  .devices{
    width: clamp(560px, 44vw, 780px);    /* 好みで 44vw / 780px を微調整 */
    min-height:420px;
    margin: 0 0 0 auto;                  /* 右寄せ */
  }

  /* 背景リングの位置・大きさをPC向けに */
  .hero__ring > img{
    --hero-size: clamp(820px, 62vw, 1100px);
    --hero-x: 62%;                       /* 右寄りに置く（左寄りなら 55% などに） */
    --hero-y: 48%;
  }

  /* 下のウォーターマーク（薄い大文字）も整える */
  .hero__watermark{
    left:50%;
    transform:translateX(-50%);
    bottom: clamp(-0.5em, -1.2vw, -0.2em);
    font-size: clamp(120px, 16vw, 220px);
    opacity:.42;                         /* うるさければ 0.35 くらいに */
  }
}

/* PC：ナビ表示・三本線非表示 */
@media (min-width:960px){
  .nav{ display:flex; gap:22px; }
  .spNav__open{ display:none; }
}

/* === Hero: 端末PNGをコンテナ幅でスケールさせる === */
/* 1枚PNGを使っている現状では、絶対配置をやめて通常フローに戻す */
.devices > img.dev{
  position: static;     /* ← absolute を打ち消す */
  display: block;
  width: 100%;          /* 図の横幅 = .devices の幅 */
  height: auto;
}

/* PC幅では .devices 自体も大きく（好みに応じて微調整可） */
@media (min-width:960px){
  .devices{
    width: clamp(640px, 46vw, 820px);
    min-height: 0;      /* 画像サイズに合わせる。高さ固定を外す */
    margin-left: auto;  /* 右カラム内で右寄せのまま。中央にしたいなら margin:0 auto; */
  }

  /* リングの大きさ/位置も少しワイドに（必要なら） */
  .hero__ring > img{
    --hero-size: clamp(820px, 62vw, 1100px);
    --hero-x: 60%;
    --hero-y: 50%;
  }

  /* SP用の余白が残らないようCTAを通常値に */
  .hero__cta{ 
    margin-top: 12px; 
    justify-content: flex-start; 
  }
}

/* =========================
   Hero 調整（共通）
   ========================= */
.hero{ 
  overflow:hidden;
  overflow-y: visible;
 }   

/* 端末PNGを .devices の幅でスケールさせる（重ねず1枚画像ならこれでOK） */
.devices > img.dev{
  position: static;
  display: block;
  width: 100%;
  height: auto;
}

/* -------------------------
   PC(>=960px)
   ------------------------- */
@media (min-width:960px){

  /* ボタン：横並び・左寄せ・適度な余白 */
  .hero__cta{
    flex-wrap: nowrap;
    gap: 14px;
    justify-content: flex-start;
    margin-top: 16px;
  }

  /* 端末画像：少し小さめに */
  .devices{
    width: clamp(520px, 40vw, 700px);  /* ←小さく調整 */
    min-height: 380px;
    margin-left: auto;                 /* 右カラムで右寄せのまま */
  }

  /* リング：中央寄せ＆はみ出しにくいサイズ */
  .hero__ring > img{
    --hero-size: clamp(800px, 95vmin, 900px);
    --hero-x: 50%;
    --hero-y: 50%;
  }

  /* 下の英字：少し小さく・位置そのまま */
   .hero__watermark{
    bottom: clamp(-1.4em, -2.8vw, -0.6em);
    letter-spacing: -6px;  /* もっと出したい→ -2.0em など */
  }
}


/* -------------------------
   SP〜タブレット(<=960px)
   ※参考：横一列で並べたい場合の最小上書き
   ------------------------- */
@media (max-width:960px){

  /* ボタン横並び（入り切らない幅では折り返しOK） */
  .hero__cta{
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;  /* もし以前の大きな余白が残っていたら上書き */
  }

  /* 端末画像は中央でやや大きめ */
  .devices{
    width: min(90vw, 620px);
    margin: 16px auto 0;
    min-height: 0;
  }

  /* 英字も控えめに */
  .hero__watermark{
    font-size: clamp(40px, 14vw, 90px);
  }
}

/* 1) 英字はヒーローの外へ出しても表示する */
.hero{
  overflow: visible;          /* 縦方向のはみ出しを許可（横は別で隠すなら overflow-x:hidden を追加） */
  position: relative;
  z-index: 10;                /* 次のセクションより前面に */
}

/* 2) 英字の出し量とサイズ（好みで数値調整） */
.hero__watermark{
  bottom: clamp(-1.6em, -3vw, -0.6em);  /* マイナスを大きくするとさらに下へ */
  font-size: clamp(90px, 14vw, 180px);  /* もう少し小さめなら 80px, 12vw など */
  z-index: 9;               /* 念のためヒーロー内でも最前面に */
}

/* 3) 後続セクションはヒーローより背面に */
.hero ~ section{
  position: relative;
  z-index: 0;
}

/* 4) 万一、横スクロールが出るなら横だけ抑止 */
body{ overflow-x: hidden; }

/* SPは少し小さく＆出し量控えめ（必要なら調整） */
@media (max-width: 960px){
  .hero__watermark{
    font-size: clamp(72px, 18vw, 120px);
    letter-spacing: -0.04em;
    bottom: -0.3em;
  }
}

/* リングは中央に（はみ出しにくいサイズ） */
.hero__ring > img{
  --hero-size: clamp(900px, 95vmin, 1000px);
  --hero-x: 50%;
  --hero-y: 50%;
}

@media (max-width:960px){
  .hero__watermark{
    /* 右に寄せるほど値を小さく。はみ出させたいならマイナスもOK */
    right: calc(env(safe-area-inset-right, 0px) -10px);  /* 例: 右に8pxはみ出す */

    /* 上に上げるほど小さく（%は画面の高さ基準） */
    top: 38%;   /* 例: 50%→中央、42%→少し上、38%→さらに上 */

    /* 位置の微調整。-50%より数値を大きく（-55%, -60%…）すると更に“上へ” */
    transform: translateY(-100%) rotate(-90deg);

    transform-origin: 100% 50%;
  }
}

/* === 1) SPだけリングを大きく === */
@media (max-width: 960px){
  .hero__ring > img{
    /* 以前: --hero-size: clamp(360px, 70vmin, 780px); */
    --hero-size: clamp(680px, 120vmin, 1400px); /* ←数値を上げて大型化 */
    width: var(--hero-size);  /* ← 100vw上限のmin(...)を上書きして“画面幅以上”も許可 */
    --hero-x: 50%;
    --hero-y: 46%;            /* （必要なら上下位置の微調整。40〜52%で調整） */
  }
}

/* === 2) “Welloomマインド”を端末画像の後ろに === */
/* hero__inner(=コピー＋devices) は z-index:2 のままでOK */
.hero__watermark{
  z-index: 1 !important;   /* 以前の z-index:5 を上書き → devicesの後ろへ */
}

/* SP：下層ページ共通のリング位置（まず全ページに適用） */
@media (max-width: 960px){
  .pageHero{
    --ph-size: clamp(560px, 100vmin, 1100px); /* 大きさ（お好みで） */
    --ph-left: 50%;   /* 横位置：中央 */
    --ph-top:  -180px; /* 縦位置：やや上に押し上げ */
    padding: 64px 0 16px; /* 余白もまとめて調整 */
  }
}

/* ボタン系リンクは常に下線なし */
.btn,
a.btn,
.btn:link,
.btn:visited,
.btn:hover,
.btn:active,
.cta-btn,
a.cta-btn,
.chip,
a.chip {
  text-decoration: none !important;
}

/* 念のため、ボタン内の子要素にも下線が付かないように */
a.btn * ,
a.cta-btn * ,
a.chip * {
  text-decoration: none !important;
}

/* ヘッダーのナビリンクは下線なし（ボタンではない通常リンク用） */
.header .nav a { text-decoration: none; }

/* ===== Footer 下段：会社名→住所→コピーライトを縦並び・左寄せ ===== */
.footerBottom{
  max-width: var(--container-wide);
  margin: 0 auto;                          /* コンテナ中央に箱を置く */
  padding: 12px var(--gutter) 40px;
  display: grid;                           /* 縦並び */
  grid-template-columns: 1fr;
  row-gap: 6px;
  justify-items: start;                    /* 要素は左寄せ */
  text-align: left;                        /* 文字も左寄せ */
}

.footerCols__col{ display:block; }
.footerAddress{ margin: 4px 0 0; }
.footerLegal__copy{
  justify-self: start;                     /* 左寄せを明示 */
  margin-top: 8px;
  padding: 0;
  opacity: .8;
}

/* SPでも同じく左寄せ＆縦並び（位置は grid-area: addr に） */
@media (max-width:960px){
  .siteFooter{                              /* 既存のSP用グリッドはそのまま */
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "logo  logo"
      "addr  addr"
      "links cta";
    row-gap: 12px;
    padding: 40px 30px 30px;
  }
  .siteFooter__inner{ display: contents; }  /* 既存通り */

  .footerBottom{
    grid-area: addr;
    margin: 0;
    padding: 20px 0 12px;
    border-bottom: 1px solid rgba(255,255,255,.14);
    justify-items: start;                   /* 念のため再指定 */
    text-align: left;
  }
}

@media (max-width: 767px){
   .recruitIntro .container{
    position: relative;
    isolation: isolate;        
   }

  .recruitIntro .container::before{
    content:"";
    position:absolute;
    top:200px;
    left:calc(4% - 50vw);             /* コンテナ中央→画面左端へ寄せる */
    transform:none;
    width:min(90vw,560px);             /* 画像幅はお好みで */
    height:auto; 
    aspect-ratio:1/1;     /* 高さ管理したければ使用 */
    background:url("../image/31636797_1.png") no-repeat left top / contain;
    opacity:.18; 
    pointer-events:none; 
    z-index:0;
  }

  .jobs__title{
  text-align: center;
  }
}

@media (max-width: 767px){
  .recruitIntro .container{
    padding-top: clamp(80px, 46vw, 120px); /* 46vw → もう少し控えめに */
  }
  .recruitIntro__title{ margin-top: 0; }   /* 見出しの余白を打消し */
}

/* SPだけコピーライトを最下段・中央へ固定 */
@media (max-width: 960px){
  .siteFooter{ 
    position: relative;           /* 絶対配置の基準にする */
    padding-bottom: 56px;         /* コピーライトぶんの下余白を確保 */
  }
  .footerLegal__copy{
    display: block !important;    /* 既存の display:none を上書き */
    position: absolute;
    left: 50%;
    bottom: 12px;                 /* 好みで微調整 */
    transform: translateX(-50%);
    text-align: center;
    width: max(160px, 60%);       /* 長文でも折り返しやすく */
    margin: 0;
    padding: 0;
    opacity: .8;
  }
}

/* === SPでもPCと同じ2カラム（左：本文／右：画像）にする === */
@media (max-width: 960px){
  .card--promo{
    display: grid;                              /* 念のため宣言 */
    grid-template-columns: 1fr min(35vw, 200px);/* 右カラムは小さめ */
    align-items: center;
  }
  .card__media{
    justify-self: end;                          /* 画像を右寄せ */
    width: min(40vw, 220px);
  }
  .card__media img{ width: 100%; height: auto; }

  /* 見出し・眉・ボタンを左揃えに戻す */
  .card--promo .card__body .card__title{ text-align: left; }
  .card--promo .eyebrow{ text-align: left; }
  .card__cta{ justify-content: flex-start; }
}
/* SPだけ：プロモカードのCTAボタンを少し小さく */
@media (max-width: 960px){
  .card--promo .card__cta{
    gap: 6px;                        /* ボタン同士の間隔も少し詰める */
  }
  .card--promo .card__cta .chip{
    font-size: 10px;                 /* 13→12px くらいに */
    padding: 6px 10px;               /* 8px 12px → 6px 10px */
    border-radius: 4px;              /* 角も少しだけ小さく */
  }
  .card--promo .card__cta .chip.btn--iconAfter{
    --icon-size: .9em;               /* アイコンも少し小さく */
    --icon-right: 8px;               /* 右寄せ距離を詰める */
    padding-right: calc(var(--icon-right) + var(--icon-size) + 6px);
  }

/* === 背景キャンバスを少し小さく（中央寄せ）=== */
.bgCanvas{
  --boxed-gap: clamp(12px, 4vw, 28px);               /* 画面端との余白量（好みで調整） */
  width: min(
    calc(100% - 2 * var(--boxed-gap)),               
    calc(var(--container-wide) + 140px)              
  );
  margin-inline: auto;                                                     
  overflow: hidden;                                   
}

/* リング（PNG）が箱からはみ出し過ぎないように */
.bgCanvas .bgCanvas__ring > img{
  width: min(var(--ring-size), 100%);
}
}

/* SPは中央寄せ＆さらに少し細く */
@media (max-width:960px){
  .hero__copy > p{
    max-width: 40ch; /* 32〜40chで調整 */
    margin-inline: auto;
  }
}

/* === SPだけ：端末画像を少し上へ／ボタンを大きく&横に広げる === */
@media (max-width: 960px){

  /* PC画像ブロック（devices）を上に寄せる */
  .devices{
    margin: -50px auto 0;   /* 上へ持ち上げる。-10～-30pxで微調整 */
    width: min(92vw, 700px);
  }

  /* CTA行のサイズと横幅を拡張 */
  .hero__cta{
    width: min(92vw, 560px);  /* 行の横幅を少し広めに確保 */
    margin: 16px auto 0;
    gap: 14px;                /* ボタン同士の間隔も少し広げる */
    justify-content: center;
    flex-wrap: nowrap;        /* 2つを横並びキープ（折り返したい場合は削除） */
  }

  /* 各ボタンを“少し大きく・横に広げる” */
  .hero__cta .cta-btn{            /* 2つを等幅で横に伸ばす */
    padding: 14px 20px;       /* 既存より少し大きく */
    font-size: 15.5px;        /* ほんの少し拡大 */
    border-radius: 5px;
  }
}

/* SPだけ：bgCanvas のリングだけ非表示（heroは消さない） */
@media (max-width: 960px){
  .bgCanvas__ring {         /* ここだけに効かせる */
    display: none !important;
  }
  /* <picture>直下の<img>だけ隠したいなら下でもOK
  .bgCanvas__ring > img { display:none !important; }
  */
}

/* ヘッダーのグローバルナビ（ULをflexに） */
.nav { margin-left:0; flex:1; }            /* コンテナ自体はフレックスにしない */
.nav .nav__list{
  list-style:none; margin:0; padding:0;
  display:none; gap:22px; justify-content:center; align-items:center;
}
@media (min-width:960px){
  .nav .nav__list{ display:flex; }
}
/* a の見た目は今の .nav a の指定そのままでOK */
/* フッターメニューを横並びにする */
.footerNav__list,
.footerNav .menu {          /* ← 念のためWPデフォルトclassも同時に対応 */
  display: flex;
  gap: 26px;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* li の余白をリセット（念のため） */
.footerNav__list > li,
.footerNav .menu > li {
  margin: 0;
  padding: 0;
}

/* フッターメニュー（WPの<ul>）を横並びに */
.footerNav__list{
  display:flex;
  gap:26px;
  justify-content:center;
  flex-wrap:wrap;
  list-style:none;
  margin:0;
  padding:0;
}
.footerNav__list > li{ margin:0; padding:0; }
.footerNav__list a{
  color:#e9e9ee;
  text-decoration:none;
  font-size:14px;
  opacity:.85;
}
.footerNav__list a:hover{ opacity:1; }
.u-arrow { font-variant-emoji: text; }

.contactForm label.required::after{
  content:"*";
  color:#FC0FC0;      /* ピンク */
  margin-left:.25em;
  font-weight:700;
}

/* チェックボックスの見た目と整列 */
.page-contact .policy .wpcf7-acceptance { 
  display: inline-flex; 
  align-items: center; 
  gap: .5em; 
}
.page-contact .policy input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: #FC0FC0;   /* ピンクに */
  vertical-align: middle;
}

/* ラベル全体に下線が付かないように */
.page-contact .policy label { text-decoration: none; }
/* リンクだけ下線でOKなら↓ */
.page-contact .policy a { text-decoration: underline; }

/* 送信ボタンの枠線/アウトライン/影を消す */
.wpcf7 form .btn--pill{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.wpcf7 form .btn--pill:focus{
  outline: none !important;
  box-shadow: none !important;
}

/* 必須「＊」を自動で表示（任意。既に入れていれば不要） */
.contactForm label.required::after{
  content:"*";
  color:#FC0FC0;
  margin-left:.25em;
  font-weight:700;
}

/* ============ CF7: 同意チェックの見た目を整える ============ */
.page-contact .wpcf7-acceptance .wpcf7-list-item{
  display:inline-flex;              /* チェックと文言を横並び */
  align-items:center;
  gap:.55em;
  margin:0;                         /* CF7 デフォの余白を打ち消し */
}

.page-contact .wpcf7-acceptance .wpcf7-list-item label{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  cursor:pointer;
}

/* ネイティブの見た目＋色だけピンクに（対応ブラウザではこれが最短） */
.page-contact .wpcf7-acceptance input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color:#FC0FC0;             /* 対応ブラウザ：チェック色 */
  transform:translateY(1px);        /* 文字と縦位置をそろえる微調整 */
}

/* フォーカスリング（キーボード操作の見やすさ） */
.page-contact .wpcf7-acceptance input[type="checkbox"]:focus{
  outline:2px solid #FC0FC0;
  outline-offset:2px;
}

/* ラベルの下線などを念のためリセット */
.page-contact .wpcf7-acceptance .wpcf7-list-item-label{
  text-decoration:none;
  color:inherit;
}

/* 「プライバシーポリシー」へリンクを入れている場合の見た目 */
.page-contact .wpcf7-acceptance a{
  color:inherit;
  text-decoration:underline;        /* 下線いらなければ none に */
}

/* ☆fallback（accent-color 非対応ブラウザ向けの簡易見た目） */
@supports not (accent-color: #000){
  .page-contact .wpcf7-acceptance input[type="checkbox"]{
    appearance:none;
    width:18px; height:18px;
    border:1.6px solid #bbb;
    border-radius:4px;
    display:inline-grid; place-content:center;
    background:#fff;
  }
  .page-contact .wpcf7-acceptance input[type="checkbox"]::after{
    content:"";
    width:10px; height:10px;
    transform:scale(0);
    transition:transform .12s ease;
    background:#FC0FC0; border-radius:2px;
  }
  .page-contact .wpcf7-acceptance input[type="checkbox"]:checked::after{
    transform:scale(1);
  }
}

/* チェックの見た目＆並び */
.wpcf7-acceptance input[type="checkbox"]{ width:18px; height:18px; margin-right:.5em; accent-color:#FC0FC0; }
label.policy{ display:inline-flex; align-items:center; gap:.5em; }

.wpcf7-form .wpcf7-acceptance input[type="checkbox"]:checked{
  background: #FC0FC0; border-color: #FC0FC0;
  box-shadow: inset 0 0 0 3px #fff;
}

/* 送信ボタンの枠線を消す（CF7のdefault border対策） */
.wpcf7 form input[type="submit"]{
  border: none !important;
}

/* ＊だけ小さく＆上付き気味に */
.page-contact .req{
  font-size: .75em;         /* ←お好みで .7〜.85em 程度 */
  line-height: 1;
  vertical-align: text-top; /* ちょい上に */
  margin-left: .25em;
  color: #FC0FC0;           /* 既存と同じ色 */
  font-weight: 700;
}

/* === Reveal base === */
[data-reveal]{
  opacity:0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* バリエーション */
[data-reveal="fade-in"]{ transform:none; }
[data-reveal="fade-right"]{ transform:translateX(-18px); }
[data-reveal="fade-left"]{ transform:translateX(18px); }

/* ボタン等のマイクロインタラクション */
.btn, .chip{
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover, .chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.btn:active, .chip:active{
  transform: translateY(0);
  box-shadow: none;
}

/* ヘッダー縮小 */
.header{ transition: background .2s ease, box-shadow .2s ease; }
.header__inner{ transition: padding .2s ease; }
.header.is-scrolled{ background: rgba(255,255,255,.96); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.header.is-scrolled .header__inner{ padding: 18px 20px; } /* 既存の値から軽く詰める */

/* 低速環境・配慮 */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* 親 .u-stagger 配下の [data-reveal] を順番に遅らせる */
.u-stagger > [data-reveal]            { transition-delay: 0ms; }
.u-stagger > [data-reveal]:nth-child(2){ transition-delay: 90ms; }
.u-stagger > [data-reveal]:nth-child(3){ transition-delay: 180ms; }
.u-stagger > [data-reveal]:nth-child(4){ transition-delay: 270ms; }

/* Use case のカードも段階表示（3つ想定） */
.usecase__grid .usecase__item[data-reveal]                 { transition-delay: 0ms; }
.usecase__grid .usecase__item:nth-child(2)[data-reveal]    { transition-delay: 90ms; }
.usecase__grid .usecase__item:nth-child(3)[data-reveal]    { transition-delay: 180ms; }

/* --- Ring のじんわり出現（hero__ring 専用） --- */
.hero__ring > img[data-reveal="ring"]{
  opacity: 0;
  transform: translate(-50%, -50%) scale(.965); /* 既存のtranslateにscaleを足す */
  filter: blur(10px) saturate(120%);
  transition:
    opacity .9s ease,
    transform 1.1s cubic-bezier(.16,.84,.24,1),
    filter 1.1s ease;
  will-change: transform, opacity, filter;
}

.hero__ring > img.is-revealed[data-reveal="ring"]{
  opacity: .92;                               /* 既存の見え方に合わせる */
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0) saturate(140%);
}

/* モーションを減らす設定の端末向けフォールバック（任意） */
@media (prefers-reduced-motion: reduce){
  .hero__ring > img[data-reveal="ring"]{
    opacity: .92;
    transform: translate(-50%, -50%) scale(1);
    filter: none;
    transition: none;
  }
}

/* === Ring：じんわり出現をゆっくりに === */
.hero__ring > img[data-reveal="ring"]{
  opacity: 0;
  transform: translate(-50%, -50%) scale(.955);
  filter: blur(12px) saturate(120%);
  transition:
    opacity 1.9s ease .15s,
    transform 2.2s cubic-bezier(.16,.84,.24,1) .15s,
    filter 2.2s ease .15s;
  will-change: transform, opacity, filter;
}
.hero__ring > img.is-revealed[data-reveal="ring"]{
  opacity: .92;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0) saturate(140%);
}

/* === Watermark：リングと同じ“じんわり”を transform に干渉せず適用 === */
.hero__watermark[data-reveal="wm"]{
  opacity: 0;
  filter: blur(10px);
  transition:
    opacity 1.8s ease .35s,
    filter 1.8s ease .35s;
  will-change: opacity, filter;
}
.hero__watermark.is-revealed[data-reveal="wm"]{
  opacity: .42;   /* 既存の薄さに合わせる */
  filter: blur(0);
}

/* 端末設定でモーション軽減の人には静的表示 */
@media (prefers-reduced-motion: reduce){
  .hero__ring > img[data-reveal="ring"],
  .hero__watermark[data-reveal="wm"]{
    transition: none;  /* ふわっと出現を無効化 */
    opacity: 1;        /* 最初から表示 */
    filter: none;      /* ぼかし等があれば解除 */
    /* transform は触らない！ */
  }
}

/* PC 基本位置（例：中央下に大きく表示している想定） */
.hero__watermark{
  /* これが従来の位置決め用 transform（例） */
  --wm-base: translateX(-50%);      /* ←あなたの既存値に合わせる */
  transform: var(--wm-base);        /* 常にベースを使う */
}

/* スマホ時（例：縦書きっぽく右側に回転している想定） */
@media (max-width:960px){
  .hero__watermark{
    --wm-base: translateY(-60%) rotate(-90deg);  /* ←あなたの既存値に合わせる */
    transform: var(--wm-base);
  }
}

/* 出現前 */
.hero__watermark[data-reveal="wm"]{
  opacity: 0;
  filter: blur(10px);
  transform: var(--wm-base);              /* 位置は常にベース */
  transition:
    opacity 1.6s ease,                   /* ← もっとゆっくり */
    filter 1.6s ease;                    /* ← もっとゆっくり */
}

/* 出現後 */
.hero__watermark[data-reveal="wm"].is-revealed{
  opacity: 1;
  filter: none;
  transform: var(--wm-base);              /* 位置は変えない */
}

@media (prefers-reduced-motion: reduce){
  .hero__ring > img[data-reveal="ring"],
  .hero__watermark[data-reveal="wm"]{
    transition: none;
    opacity: 1;
    filter: none;
    /* transform は触らない（ベースのまま） */
  }
}

/* SPだけ：フッターメニューは「TOP」だけ出す */
@media (max-width:960px){
  .footerNav { display: inline-block; }
  .footerNav .menu { gap: 12px; }
}

/***** ---------- Footer：TOPが出ない問題を解消 ---------- *****/
/* フッターメニューをふつうに表示（SPで非表示にしていた過去のCSSを上書き） */
.footerNav__list,
.footerNav .menu{
  display:flex !important;
  gap:26px;
  justify-content:center;
  flex-wrap:wrap;
  list-style:none;
  margin:0; padding:0;
}
.footerNav__list > li,
.footerNav .menu > li{ margin:0; padding:0; }
.footerNav__list a,
.footerNav .menu a{
  color:#e9e9ee; text-decoration:none; font-size:14px; opacity:.85;
}
.footerNav__list a:hover,
.footerNav .menu a:hover{ opacity:1; }


/***** ---------- Hero：ウォーターマークの位置ズレを修正 ---------- *****/
/* ベース位置（PC）…中央下に薄く表示。ここを“唯一の transform”にする */
.hero__watermark{
  --wm-base: translateX(-50%);           /* 位置の源は常にコレだけ */
  position:absolute;
  left:50%;
  bottom:clamp(-1.2em, -2.2vw, -0.4em);
  transform:var(--wm-base);
  width:max-content;
  white-space:nowrap;
  z-index:1;                              /* 端末画像(.devices)の“後ろ”にしたいので1 */
  pointer-events:none;
  opacity:.42;
}

/* 端末PNGを前面に（重なり順の明示） */
.devices{ position:relative; z-index:2; }

/* SP：右側に縦置き（はみ出し/ズレを防ぐ） */
@media (max-width:960px){
  .hero{ overflow:hidden; position:relative; }
  .hero__watermark{
    right:clamp(6px, 2.4vw, 16px);
    top:50%;
    left:auto; bottom:auto;
    --wm-base: translateY(-55%) rotate(-90deg); /* ← 位置はココだけ */
    transform:var(--wm-base);
    font-size:clamp(56px, 18vw, 96px);
    letter-spacing:-0.03em;
    z-index:1;
  }
}

/***** ---------- Hero：リング/ウォーターマークの“じんわり出現”だけ残す ---------- *****/
/* transform はベースを壊さない（opacity/filterのみアニメ） */
.hero__ring > img[data-reveal="ring"]{
  opacity:0;
  filter:blur(12px) saturate(120%);
  transition: opacity 1.8s ease .15s, filter 1.8s ease .15s;
  will-change: opacity, filter;
}
.hero__ring > img.is-revealed[data-reveal="ring"]{
  opacity:.92; filter:blur(0) saturate(140%);
}
.hero__watermark[data-reveal="wm"]{
  opacity:0; filter:blur(10px);
  transform:var(--wm-base);               /* 位置は固定 */
  transition: opacity 1.6s ease .25s, filter 1.6s ease .25s;
}
.hero__watermark.is-revealed[data-reveal="wm"]{
  opacity:.42; filter:none; transform:var(--wm-base);
}
@media (prefers-reduced-motion: reduce){
  .hero__ring > img[data-reveal="ring"],
  .hero__watermark[data-reveal="wm"]{
    transition:none; opacity:1; filter:none;
  }
}

/***** ---------- Contact：送信ボタンのずれを中央に ---------- *****/
/* CF7の送信ボタンをブロック化して margin:auto で中央寄せ */
.page-contact .wpcf7 input[type="submit"]{
  display:block;
  margin: 0 auto;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
}
/* ボタン行の幅をフォーム幅に合わせる（左右に流れないように） */
.page-contact .wpcf7 form{
  max-width: clamp(640px, 72vw, 740px);
  margin: 0;   /* 既存の中央寄せ指定があればそれを採用 */
}
/* “同意チェック”の行は横並び＆文字と段差が出ないよう微調整（既存が崩れていなければ不要） */
.page-contact .wpcf7-acceptance .wpcf7-list-item{
  display:inline-flex; align-items:center; gap:.55em; margin:0;
}
.page-contact .wpcf7-acceptance input[type="checkbox"]{
  width:18px; height:18px; accent-color:#FC0FC0; transform:translateY(1px);
}

/* ====== Hero：ウォーターマーク位置を強制補正 ====== */
/* 背景リングは最背面、端末画像は前面、ウォーターマークはその後ろ */
.hero__ring{ z-index: 0 !important; }
.devices   { position: relative; z-index: 2 !important; }

/* PC：中央下に固定（位置の唯一の基準をここに統一） */
.hero__watermark{
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: clamp(-1.8em, -2.2vw, -0.6em) !important; /* ←上下の出し量は好みで微調整 */
  transform: translateX(-50%) !important;           /* ←“位置決め”はこれだけ */
  width: max-content !important;
  white-space: nowrap !important;
  z-index: 1 !important;    /* devices(2) より後ろ・リング(0)より前 */
  pointer-events: none !important;
  opacity: .42;             /* 見えづらければ 0.5 などに */
}

/* スマホ：右側縦置き（はみ出し/ズレ防止） */
@media (max-width: 960px){
  .hero{ overflow: hidden !important; position: relative !important; }
  .hero__watermark{
    left: auto !important;
    bottom: auto !important;
    right: clamp(6px, 2.4vw, 16px) !important;
    top: 50% !important;
    transform: translateY(-400%) translateX(-5%)rotate(-90deg) !important; /* ←上下のズレは -55% を微調整 */
    font-size: clamp(56px, 18vw, 96px) !important;
    letter-spacing: -0.03em !important;
  }
}

/* Reveal（出現アニメ）は transform を壊さずに opacity/filter のみ */
.hero__ring > img[data-reveal="ring"]{
  opacity: 0; filter: blur(12px) saturate(120%);
  transition: opacity 1.8s ease .15s, filter 1.8s ease .15s;
  will-change: opacity, filter;
}
.hero__ring > img.is-revealed[data-reveal="ring"]{ opacity:.92; filter: blur(0) saturate(140%); }

.hero__watermark[data-reveal="wm"]{
  opacity: 0; filter: blur(10px);
  transition: opacity 1.6s ease .25s, filter 1.6s ease .25s;
}
.hero__watermark.is-revealed[data-reveal="wm"]{ opacity:.42; filter:none; }
@media (prefers-reduced-motion: reduce){
  .hero__ring > img[data-reveal="ring"], .hero__watermark[data-reveal="wm"]{
    transition:none; opacity:1; filter:none;
  }
}

/* SP（〜960px）：フッターは「TOP」だけ表示 */
@media (max-width:960px){
  /* まず全部消す */
  .footerNav__list > li { display: none; }

  /* li に付いたクラス menu-top だけ表示 */
  .footerNav__list > li.menu-top { 
    display: inline-block; 
  }

  /* 並びと余白（お好みで） */
  .footerNav__list { 
    display: flex; 
    gap: 12px; 
    flex-wrap: wrap; 
  }
}

/* 1) フッターメニューの下線を完全OFF（通常/ホバー/現在ページ） */
.siteFooter .footerNav__list a{
  text-decoration: none !important;
  border-bottom: none !important;
}
.siteFooter .footerNav__list a:hover{
  text-decoration: none !important;
  border-bottom: none !important;
}
/* 念のため、aria-current で太線を付ける既存ルールを打ち消し */
.siteFooter .footerNav a[aria-current="page"]{
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* 2) PC(>=961px)では「TOP」を非表示、SPでは表示 */
@media (min-width:961px){
  .siteFooter .footerNav__list > li.menu-top{ 
    display: none !important; 
  }
}
/* SP(<=960px)では menu-top だけ表示（お使いの現行ルールがあればそのままでOK） */
@media (max-width:960px){
  .siteFooter .footerNav__list > li{ display:none; }
  .siteFooter .footerNav__list > li.menu-top{ display:inline-block; }
}

/* === Heroのピンク小見出し（eyebrow）を全ページで統一 === */
/* 採用ページのスタイルに合わせる */
.pageHero .pageHero__inner .eyebrow,
.pageHero__inner .eyebrow {
  color: var(--pink);
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", system-ui, -apple-system, Helvetica, Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-align: left;
  margin: 0 0 3px;
  line-height: 1;
}

/* 念のため、ページ別で上書きしていた指定を“同一化” */
.pageHero--company  .pageHero__inner .eyebrow,
.pageHero--news     .pageHero__inner .eyebrow,
.pageHero--careers  .pageHero__inner .eyebrow,
.pageHero--recruit  .pageHero__inner .eyebrow,
.pageHero--contact  .pageHero__inner .eyebrow,
.pageHero--thanks   .pageHero__inner .eyebrow {
  color: var(--pink);
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", system-ui, -apple-system, Helvetica, Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-align: left;
  margin: 0 0 3px;
  line-height: 1;
}

@media (max-width: 960px){
  .header_logo{
    height: auto;
    max-width: clamp(80px, 24vw, 120px);
　}
 .header_logo{ height:22px; width:auto; }
}

/* =========================
   SP のロゴ＆ハンバーガーはみ出し防止（強め）
   ========================= */
@media (max-width: 960px){

  /* ロゴ画像（<img class="header_logo"> と .logo 内の img の両方を捕まえる） */
  .header .logo img,
  img.header__logo{
    max-width: clamp(80px, 24vw, 120px) !important; /* 画面に応じた上限 */
    height: auto !important;
    display: block;
  }
  /* ロゴの入れ物が伸びて他を押し出さないように */
  .header .logo{ flex: 0 0 auto; min-width: 0; }

  /* ハンバーガーボタン */
  #menu-sp.spNav__open{
    width:  clamp(36px, 8vw, 44px) !important;
    height: clamp(36px, 8vw, 44px) !important;
    padding: 0 !important;               /* 余計なはみ出し防止 */
    background: transparent;
    border: 0;
    display: inline-grid;
    place-items: center;
  }
  /* 三本線アイコン */
  #menu-sp.spNav__open img{
    width:  clamp(20px, 6vw, 28px) !important;
    height: auto !important;
    display: block;
  }

  /* ヘッダー行の詰め＆折返し防止の保険 */
  .header__inner{ gap: 8px; flex-wrap: nowrap; }
  .header .actions{ min-width: 0; }
}

/* 念のための全体保険（横スクロール抑止） */
html, body{ overflow-x: hidden; }

/* --- SPナビの「ヘッダー行」だけ、a/btn を自動幅に戻す --- */
#spNav .spNav__head a { 
  display: inline-block !important;
  width: auto !important;
}

#spNav .spNav__head .btn {
  display: inline-flex !important;  /* ボタンの見た目を保持 */
  width: auto !important;
  white-space: nowrap;               /* 折り返し防止 */
}

/* リスト側（メニュー項目）はこれまで通り全幅タップでOK */
#spNav .spNav__nav .spNav__list a{
  display: block;
  width: 100%;
}

/* --- SPナビの「ヘッダー行」だけ、a/btn を自動幅に戻す --- */
#spNav .spNav__head a { 
  display: inline-block !important;
  width: auto !important;
}

#spNav .spNav__head .btn {
  display: inline-flex !important;  /* ボタンの見た目を保持 */
  width: auto !important;
  white-space: nowrap;               /* 折り返し防止 */
}

/* リスト側（メニュー項目）はこれまで通り全幅タップでOK */
#spNav .spNav__nav .spNav__list a{
  display: block;
  width: 100%;
}

/* SPナビのヘッダー：ロゴ | スペーサ | 無料 | ログイン | × */
#spNav .spNav__head{
  display:grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items:center;
  gap:12px 16px;
}
#spNav .spNav__head > *{ min-width:0; } /* はみ出し保険 */

/* ← これがキモ：1fr 列に載ってもボタンを“伸ばさない” */
#spNav .spNav__head .btn{
  justify-self:start;         /* stretch を上書き */
  width:auto !important;
  max-width:max-content;      /* 念のため */
  white-space:nowrap;
  padding:8px 12px;
  font-size:13px;
}

/* ×ボタンは右端に */
#spNav .spNav__close{ justify-self:end; }

/* ロゴの上限（SP時） */
#spNav .spNav__logo img,
.header .logo img{
  height:auto;
  max-width:clamp(84px, 26vw, 120px);
}

/* 横スクロール保険 */
html,body{ overflow-x:hidden; }

/* タッチ端末ではロゴ/ボタンのフォーカス枠を消す */
@media (hover: none) and (pointer: coarse){
  #spNav .spNav__logo:focus,
  #spNav .btn:focus{ outline: none !important; }
}

/* キーボード操作では見やすい枠を出す（アクセシビリティ維持） */
#spNav .spNav__logo:focus-visible,
#spNav .btn:focus-visible{
  outline: 2px solid rgba(0,0,0,.25);
  outline-offset: 4px;
  border-radius: 6px;
}

/* SPナビ：右側の3つ（無料・ログイン・×）を右寄せ＆10px間隔 */
@media (max-width: 960px){
  #spNav .spNav__head{
    display: flex !important;        /* grid を上書き */
    align-items: center;
    gap: 8px;                        /* 要素間隔 ≒10px */
    padding: 10px 12px;               /* お好みでOK */
  }
  /* ロゴは左。ここから右側へ“押し出す” */
  #spNav #spNavTitle{ flex: 0 0 auto; }

  /* この margin-left:auto が“無料〜×”の塊を右端へ寄せるカギ */
  #spNav .btn--primary{ margin-left: auto; }

  /* ボタン類と × は自分の幅だけ。はみ出し防止 */
  #spNav .btn,
  #spNav .spNav__close{
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* × アイコンのサイズ（任意） */
  #spNav .spNav__close img{
    width: clamp(22px, 6vw, 28px);
    height: auto;
    display: block;
  }
}

/* PCでは通常サイズにリセット */
@media (min-width:961px){
  .header .logo img,
  img.header_logo{
    height: 30px;          /* 好みで 28–36px 程度に */
    max-width: none;       /* モバイルの上限を打ち消す */
  }
}

/* PCのヘッダー箱をフッターと同じ位置にそろえる */
@media (min-width: 960px){
  .header__inner{
    max-width: var(--container-wide) !important;   /* 例: 1200px */
    margin-inline: auto !important;                /* 中央寄せ */
    padding-inline: var(--gutter) !important;      /* 例: 20px 左右ガター */
  }
  /* 念のためロゴの入れ物に余計なマージンが無いように */
  .header .logo{ margin-left: 0 !important; }
}

/* 沿革の本文を会社情報の本文開始位置に合わせる */
.timeline li{
  grid-template-columns: 320px 1fr; /* ← .dlTable の見出し列(=term列)と同じ幅に */
  column-gap: 48px;                 /* ← dt右24px + dd左24px に合わせる */
}

/* レスポンシブ（上の.tableに合わせて） */
@media (max-width: 720px){
  .timeline li{ grid-template-columns: 120px 1fr; column-gap: 48px; }
}
@media (max-width: 360px){
  .timeline li{ grid-template-columns: 1fr; } /* 1カラムに */
}

/* ===== 『調子が良い』追加の件はここからHero：キャッチコピーを“MVの下”へ ===== */
/* MV直下に普通に並ぶ版 */
.hero__catch{
  position: static !important;
  left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
  transform:none !important;

  display:block;
  max-width: var(--container-base);
  width: min(var(--container-base), calc(100% - 2*var(--gutter)));
  margin: 0 auto;
  padding: clamp(16px,4vw,28px) var(--gutter) 0;
  z-index: 2;
}

/* MVとの間隔はヒーローの下パディングで調整 */
.hero__inner{ padding-bottom: clamp(160px, 16vw, 240px); }

/* MVの下の“白い余白”を増やして、キャッチを下げる */
.hero__catch{
  margin-top: clamp(50px, 10vw, 180px);  /* ←ここを大きくする */
}

/* PC/タブレット基準（以前: clamp(18px, 1.8vw + 12px, 34px) など） */
.hero__catch{
  font-size: clamp(22px, 2.2vw + 12px, 40px); /* ←最小/中間/最大を少しアップ */
  line-height: 1.35;
}

/* SP（以前: clamp(16px, 5.2vw, 22px) など） */
@media (max-width:960px){
  .hero__catch{
    font-size: clamp(24px, 6vw, 28px);       /* ←最小と最大を+2〜4pxほど */
  }
}

/* 960px以下でもPCと同じ“中央下・横置き”にする */
@media (max-width:960px){
  .hero { overflow: visible !important; } /* はみ出しで消えないように */
  .hero__watermark{
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: clamp(-1.2em, -3vw, -5em) !important; /* ここで上下を微調整 */
    transform: translateX(-50%) !important;      /* 回転/translateYを解除 */
    font-size: clamp(60px, 18vw, 120px) !important;
    z-index: 1 !important;  /* devices(2)の一段後ろ、リング(0)の前 */
  }
}

/* ===== Welloomマインド：常に画面幅で可変＋はみ出し防止 ===== */
.hero__watermark{
  /* 文字数の目安（Welloomマインド ≒ 11 文字）*/
  --wm-chars: 11;

  white-space: nowrap;
  line-height: 1;
  letter-spacing: -0.03em;

  /* 1) 基本は可変（PC） */
  --wm-size: clamp(80px, 13vw, 200px);

  /* 2) はみ出し防止の上限：画面幅÷文字数（左右に少しマージンを引く） */
  --wm-max-fit: calc((100vw - 32px) / var(--wm-chars));

  /* 最終サイズ＝ 1) と 2) の小さい方 */
  font-size: min(var(--wm-size), var(--wm-max-fit)) !important;

  /* PC基準の配置（中央下・横置き） */
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: clamp(-2.0em, -2.4vw, -1.4em) !important;
  transform: translateX(-50%) !important;  /* 回転/translateY を無効化 */
  z-index: 1 !important;                   /* 端末画像(.devices)の一段後ろ */
}

@media (max-width:960px){
  .hero__watermark{
    /* SPはさらに小さめに（9〜10vwが1行に収まりやすい目安） */
    --wm-size: clamp(60px, 16vw, 130px);
    bottom: clamp(-1.6em, -3.0vw, -3.4em) !important;
  }
}

@media (max-width:960px){
  .hero__watermark{
    /* 1) SPの基準サイズを上げる */
    --wm-size: clamp(250px, 50vw, 300px);

    /* 2) “はみ出し防止”の上限をゆるめる */
    --wm-chars: 7;            /* ← 11 から少し小さく（=大きく表示できる） */
    --wm-pad: 8px;              /* ← 32px から縮める（左右余白） */
    /* svw が使える端末ではアドレスバー分も考慮して少し広めに */
    --vw-safe: 100svw;           /* 古い端末は 100svw を 100vw と同等に解釈 */
    --wm-max-fit: calc((var(--vw-safe) - 2*var(--wm-pad)) / var(--wm-chars));

    /* 最終サイズ（上限ゆるめ版） */
    font-size: min(var(--wm-size), var(--wm-max-fit)) !important;
  }
}

@media (max-width:960px){
  .hero__inner{ padding-bottom: clamp(56px, 12vw, 96px) !important; }
  .hero__cta{ margin-top: 12px !important; }
}

/* SPは少し大きめに許容（それでもはみ出しは防止） */
@media (max-width:960px){
  .hero__catch{
     --catch-chars: 14;                  /* ← お好みで微調整（この文なら 13〜15 目安） */
     white-space: nowrap;                /* 折り返し禁止 */
     font-size: min(
      clamp(40px, 7.2vw, 42px),
      calc((100vw - 32px) / var(--catch-chars))
    ) !important;
  }
}

/* ヒーロー内の重なり順：リング < ウォーターマーク < 端末画像 */
.hero__ring{        z-index: 0 !important; }
.hero__watermark{   z-index: 1 !important; }   /* 背景扱いに */
.devices{           position:relative; z-index: 2 !important; }

/* キャッチコピー（ヒーローの“外”にある要素）を最前面へ */
.hero__catch{
  position: relative;   /* ← これが無いと z-index が効かない */
  z-index: 4;           /* ウォーターマークより前に出す */
}

/* キャッチを画面の左端に寄せる */
@media (max-width:960px){
.hero__catch{
  max-width: none;
  width: 100%;
  margin: 0;                                 /* 中央寄せの auto を解除 */
  padding: clamp(16px,4vw,28px) var(--gutter) 0;
  text-align: left;                          /* 念のため */
 }
}

@media (max-width:960px){
  .hero__catch{
    /* お好みで数値だけ調整 */
    margin-top: clamp(70px, 14vw, 160px) !important;
  }
}