/*
Theme Name: Client Renewal
*/

/* =========================
   RESET / BASE
========================= */
* { box-sizing: border-box; }

:root{
  --header-h: 120px;
  --container-w: 1200px;
  --container-p: 24px;
}

body{
  margin: 0;
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  color: #111;
}
body {
  margin: 0;
}
html, body{
  overflow-x: hidden;
}

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

ul{ list-style: none; margin: 0; padding: 0; }

.container{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--container-p);
}

/* =========================
   HEADER
========================= */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  z-index: 1000;

  background: transparent;
  border-bottom: none;
  display: flex;
  align-items: center;
  color:#fff;
}

.site-header a{
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.header-inner{
  max-width: var(--container-w);
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo img{
  height: 45px;
  width: auto;
}

.global-nav ul{
  display: flex;
  gap: 32px;
}

.global-nav a{
  font-size: 14px;
  font-weight: 500;
  position: relative;
}

.global-nav a::after{
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background: #fff;              /* FV上なので白 */
  transition: width 0.3s;
}

.global-nav a:hover::after{ width: 100%; }

.menu-toggle{
  display: none;
  width: 28px;
  height: 20px;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.menu-toggle span{
  display: block;
  height: 2px;
  background: #fff;
  outline: 1px solid rgba(0,0,0,0.35);
}

.contact-btn{
  margin-right: 24px;
  padding: 12px 36px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #ffd6a5 0%, #ffb3c1 100%);
  color: #000;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transition: transform .2s ease, filter .2s ease;
}

.site-header .contact-btn{ color: #000; }

.contact-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.contact-nav-item{ display:none; }

/* =========================
   MAIN / LAYERS
========================= */
.site-main{
  position: relative;
  z-index: 1; /* FV背景より前に来る */
}

/* =========================
   HERO（背景固定 + テキストスクロール）
========================= */
.hero{
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
}

.hero.hero--slider{
  position: relative;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
}

/* 背景（固定） */
.hero-bg{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
}

/* 背景スライド土台 */
.hero-slides{
  position: absolute;
  inset: 0;
}

/* 各スライド */
.hero-slide{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;

  opacity: 0;
  transition: opacity 1400ms ease;
  will-change: opacity, transform, filter;
}

/* 表示中 */
.hero-slide.is-active{
  opacity: 1;
  z-index: 1;
  animation: heroZoomOut 12000ms ease-out both;
}

@keyframes heroZoomOut{
  from { transform: scale(1.08); }
  to   { transform: scale(1.00); }
}

/* 暗幕（通常） */
.hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.18) 55%,
    rgba(0,0,0,0.00) 100%
  );
}

/* テキスト（スクロールする） */
.hero-content{
  position: relative;
  z-index: 2;
  height: 100%;
}

.hero-inner{
  position: relative;
  z-index: 2;
  max-width: var(--container-w);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--container-p);
  display: flex;
  align-items: center;
  padding-top: var(--header-h); /* ヘッダー分 */
}

.hero-copy{
  max-width: 560px;
  color: #fff;
}

.hero-title{
  margin: 0;
  font-size:120px;
  text-shadow: 0 6px 20px rgba(0,0,0,0.35);
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.3;
}

.hero-sub{
  margin-top: 28px;
  font-size: 24px;
  letter-spacing: 0.18em;
  opacity: 0.95;
  text-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

/* FVの分だけスクロール領域を確保（NEWSが遅すぎ対策で短め） */
.hero-spacer{
  height: 50vh;
}

/* =========================
   FV再登場時：ぼかし＆グレースケール（JSでbodyにclass付与）
   body.is-hero-blur を付けたら効く
========================= */
.hero-slide{
  filter: none;
  -webkit-filter: none;
  transition: opacity 1400ms ease, filter 900ms ease;
}

body.is-hero-blur .hero-slide{
  filter: grayscale(100%) blur(12px);
  -webkit-filter: grayscale(100%) blur(12px);
}

body.is-hero-blur .hero-overlay{
  background: rgba(0,0,0,0.45);
}

/* =========================
   白い面（NEWS〜ABOUTの箱）
========================= */
.page-surface{
  position: relative;
  z-index: 5;         /* FV背景より前 */
  background: #fff;
}

.page-surface::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.06) 0%,
    rgba(0,0,0,0.02) 120px,
    rgba(255,255,255,1) 260px
  );
  pointer-events:none;
}

.page-surface > *{
  position: relative;
  z-index: 1;
}

/* =========================
   NEWS & BLOG
========================= */
.news-blog{
  padding: 150px 0 140px; /* 上に余白を足してヘッダーも回避 */
  border-bottom: 1px solid #eaeaea;
}

.news-blog-inner{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 80px;
  align-items: start;
}

.news-blog-title{
  font-size: 42px;
  letter-spacing: 0.02em;
  margin: 0 0 18px;
  line-height: 1;
}

.news-blog-sub{
  margin: 0;
  font-size: 16px;
  opacity: 0.85;
}

.news-blog-body{ padding-top: 14px; }

.nb-item{
  grid-template-columns: 120px 88px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid #eee;
  align-items: center;
}

.nb-date{
  font-weight: 600;
  letter-spacing: 0.06em;
  opacity: 0.9;
}

.nb-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.14em;
  opacity: 0.85;
}

.nb-link{
  color: #111;
  line-height: 1.6;
}

.nb-link:hover{ text-decoration: underline; }

.nb-more{
  display: inline-block;
  margin-top: 22px;
  font-size: 14px;
  opacity: 0.8;
}

.nb-empty{
  opacity: 0.7;
  border-bottom: none;
}

/* =========================
   ABOUT
========================= */
.about{
  padding: 120px 0 140px;
}
.about-en{
  margin: 0;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #222;
  font-family: "Inter", "Noto Sans JP", sans-serif;
}

.about-ja{
  margin: 18px 0 0;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #444;
  opacity: 0.85;
}

.about-content{
  display: flex;
  flex-direction: column;
}

.about-body{
  max-width: 720px;
}

.about-title{
  margin: 0 0 18px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #222;
}

.about-text{
  margin: 0;
  font-size: 16px;
  line-height: 2.2;
  letter-spacing: 0.02em;
  color: #333;
  opacity: 0.92;
}

.about-cta{
  margin-top: 48px;
  display: flex;
  justify-content: flex-end;
}

/* Moreボタン */
.more-btn{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;

  width: auto;
  min-width: 220px;
  height: 68px;
  padding: 0 32px;

  border: 1px solid #222;
  border-radius: 999px;

  color: #222;
  background: transparent;

  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.more-btn__label{
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.more-btn__icon{
  font-size: 22px;
  transform: translateX(0);
  transition: transform .2s ease;
}

.more-btn:hover{
  background: #222;
  color: #fff;
  transform: translateY(-1px);
}

.more-btn:hover .more-btn__icon{
  transform: translateX(4px);
}

/* =========================
   SERVICES（事業3つ：FVをぼかしグレーにして見せたい場合の別セクション）
   ※ ここは “services-bg” をsectionに渡した前提（--services-bg）
========================= */
/* servicesは背景を作らない（FVの固定背景を見せる） */
.services{
  position: relative;
  overflow: hidden;
  padding: 90px 10px 110px;
  background: transparent;
}
.services-inner{
  position: relative;
  z-index: 2;
}

.services-head{
  text-align: center;
  margin-bottom: 40px;
}

.services-title{
  margin: 0;
  color: #fff;
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: 0 8px 22px rgba(0,0,0,0.35);
}

.services-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  align-items: stretch;
}

.service-card{
  border-radius: 16px;
  padding: 30px 26px 22px;
  min-height: 520px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.18);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
}

.service-card__title{
  margin: 0 0 14px;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #222;
}

.service-card__text{
  margin: 0;
  font-size: 15px;
  line-height: 2.0;
  color: #333;
  opacity: 0.92;
  padding-bottom: 22px;
}

.service-card--blue{  background: rgba(214, 240, 255, 0.92); }
.service-card--green{ background: rgba(212, 255, 230, 0.92); }
.service-card--pink{  background: rgba(255, 220, 230, 0.92); }

.service-more{
  margin-top: auto;
  height: 54px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,0,0,0.12);
  padding: 0 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  color: #222;
  font-weight: 600;
  letter-spacing: 0.06em;

  transition: transform .2s ease, background .2s ease;
}

.service-more:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.92);
}

.service-more span:last-child{
  font-size: 20px;
  transition: transform .2s ease;
}

.service-more:hover span:last-child{
  transform: translateX(4px);
}
/* =========================
   Media
========================= */
:root{
  --media-overlap: 350px; /* ←servicesへ潜り込む量 */
}

/* servicesはMedia背景より前に出す */
.services{
  position: relative;
  z-index: 2;
}

/* Media */
.media{
  position: relative;
  z-index: 1;
  background: #f3efe7;        /* ←Mediaの背景色 */
  padding: 80px 0 70px;
}

/* Media背景を上に延長（中身は延長しない） */
.media::before{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--media-overlap));
  height: var(--media-overlap);
  background: inherit;
}

/* 見出し（好みで調整） */
.media-head{
  margin-bottom: 28px;
  text-align-last:center;
}
.media-en{
  margin: 0;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}
.media-ja{
  font-size: 14px;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.media-figure{
  border-radius: 18px;
  margin: 0;
  box-shadow: 0 22px 60px rgba(0,0,0,0.12);
  width: 100%;
  overflow: hidden;
}

.media-figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform .35s ease;
}
/* =========================
   Media以降はFV背景を消す
========================= */
.hero-bg{
  transition: opacity .6s ease;
}
body.is-hero-off .hero-bg{
  opacity: 0;
  pointer-events: none;
}
/* =========================
   CONTACT（添付デザイン）
========================= */
.contact{
  background: #4b4b4b; /* 添付の濃いグレー */
  padding: 120px 0;
  position: relative;
 z-index: 9999;
}

.contact-inner{
  position: relative;
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 48px;
  align-items: center;
}

/* 左画像 */
.contact-media{
  border-radius: 0 36px 36px 0; /* 右上/右下を角丸なしにする（添付っぽい） */
  overflow: hidden;
  height: clamp(260px, 34vw, 380px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.22);
  margin-left: calc(50% - 50vw); /* ← 左端まで */
}

.contact-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 右の白カード */
/* 右の白カード：右端まで“余白を消して伸ばす” */
.contact-card{
  position: relative;
  background: #f2f2f2;
  border-radius: 32px 0 0 32px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.18);

  padding: 58px 64px 120px; /* ←下にボタン分の逃げ */
  min-height: clamp(260px, 30vw, 360px);

  /* 左に被せる量（好みで調整） */
  margin-left: -120px;

  /* ★右だけを画面端まで伸ばす（これがキモ） */
  margin-right: calc(50% - 50vw);

  /* grid内で変な縮み防止 */
  justify-self: stretch;
  margin-top: 70px;  
}
.contact-title{
  margin: 0;
  font-size: clamp(40px, 4.2vw, 64px);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  color: #222;
  line-height: 1.1;
}
.contact-sub{
  margin: 10px 0 0;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: #444;
  opacity: 0.9;
}

.contact-text{
  margin: 26px 0 0;
  font-size: 15px;
  line-height: 2.2;
  letter-spacing: 0.02em;
  color: #333;
}

/* Moreボタン（右下） */
/* Moreボタン：カード内の右下に固定 */
.contact-cta{
  position: absolute;
  right: 400px;   /* ← contact-cardの左右paddingと揃える */
  bottom: 52px;  /* ← contact-cardの下padding感と揃える */
  margin: 0;
}

.contact-more{
  height: 62px;
  min-width: 240px;
  padding: 0 22px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid #222;

  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  color: #222;
  font-weight: 600;
  letter-spacing: 0.06em;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

.contact-more span:last-child{
  font-size: 20px;
  transition: transform .2s ease;
}

.contact-more:hover{
  background: #222;
  color: #fff;
  transform: translateY(-1px);
}

.contact-more:hover span:last-child{
  transform: translateX(4px);
}

/* =========================
   GOOGLE MAP（横幅いっぱい）
========================= */
.gmap{
  padding: 0;           /* セクションの余白なし（添付っぽくベタ付け） */
  background: transparent;
   position:relative;
 z-index: 9999;
}

/* 100vwで左右いっぱいにする “はみ出し” */
.gmap-bleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* アスペクト比（高さ） */
.gmap-embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 6;     /* 添付みたいに横長：好みで 16/7 や 16/5 に */
  overflow: hidden;
}

/* iframe を全面に */
.gmap-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* =========================
   SERVICE PAGE（求人広告）
========================= */
.page-service{
  background: #fff;
  padding-top: 0 !important;
}

/* HERO */
.service-hero{
  position: relative;
  min-height: calc(100svh - var(--header-h));
  padding-top 0;           /* ←余計なpaddingを消す */
  overflow: hidden;
  height: 100svh;
}

.service-hero__bg{
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}

.service-hero__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.18) 55%,
    rgba(0,0,0,0.05) 100%
  );
}

.service-hero__inner{
  position: absolute;
  top:190px; /* ← ここを増やす（例：32→80） */
  left: 64px;                        /* 左余白 */
  z-index: 2;
  color: #fff;
  max-width: 640px;                  /* 横に伸びすぎ防止 */
}

.service-hero__breadcrumb{
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  opacity: 0.95;
  text-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
.service-hero__breadcrumb a{ color:#fff; }
.service-hero__breadcrumb .sep{ opacity:0.7; }

.service-hero__title{
  margin: 0px 0 0;
  font-size: clamp(34px, 4.2vw, 56px);
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-shadow: 0 10px 26px rgba(0,0,0,0.35);
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-weight: 700;
}

.service-hero__sub{
  margin: 14px 0 0;
  font-size: 16px;
  letter-spacing: 0.16em;
  opacity: 0.92;
  text-shadow: 0 10px 26px rgba(0,0,0,0.35);
}

/* ===== BODY（HEROに重ねる） ===== */
.service-body{
  padding: 0 0 110px;
}

.service-body--overlap{
  margin-top: -240px; /* ←食い込ませ量（好みで-140〜-220） */
  position: relative;
  z-index: 5;         /* HEROより前に出す */
}

/* ===== 右端まで伸びる水色パネル（右寄せ） ===== */
.service-panel{
  background: #dff1ff;
  border-radius: 28px 0 0 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.08);
}

/* 右端へベタ付け + 左側に余白を残す */
.service-panel--right{
  /* 右端を画面に合わせる（full-bleed右） */
  margin-right: calc(50% - 50vw);

  /* 左側の余白（＝白い空き）を作る：ここを調整する */
  margin-left: clamp(240px, 22vw, 520px);

  /* 見た目の高さ確保（必要なら） */
  padding: 0;
}

/* 中身は左寄せ（読みやすい幅） */
.service-panel__inner{
  padding: 56px 64px;
  max-width: 980px;     /* テキスト行が長くなりすぎない制限 */
}

/* 見出し・本文（そのままでOKなら不要） */
.service-panel__lead{
  margin: 0;
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: #222;
  font-weight: 800;
}

.service-panel__text{
  margin-top: 24px;
  color: #333;
  font-size: 15px;
  line-height: 2.2;
  letter-spacing: 0.02em;
}
.service-panel__text p{ margin: 0 0 14px; }
.service-panel__text p:last-child{ margin-bottom: 0; }
/* Media-ad */
.media-ad{
  position: relative;
  z-index: 1;
  background: #fff;        /* ←Mediaの背景色 */
  padding: 80px 0 70px;
}

/* Media背景を上に延長（中身は延長しない） */
.media-ad::before{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--media-overlap));
  height: var(--media-overlap);
  background: inherit;
}
/* =========================
   FLOW（添付デザイン）
========================= */
.flow{
  padding: 110px 0 120px;
  background: #fff;
  --flow-scale: .90;
}

.flow__head{
  text-align: center;
  margin-bottom: 64px;
}

.flow__title{
  margin: 0;
  font-size: clamp(44px, 4.6vw, 72px);
  letter-spacing: 0.06em;
  font-weight: 800;
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  color: #222;
  line-height: 1.1;
}

.flow__sub{
  margin: 14px 0 0;
  font-size: 14px;
  letter-spacing: 0.16em;
  color: #444;
  opacity: .9;
}

/* list */
.flow__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 64px;
}

/* item layout（左：丸＋線 / 右：テキスト） */
.flow__item{
  display: grid;
   grid-template-columns: 90px 1fr; /* ← 左を少し細く */
  column-gap: 24px;               /* ← ここがデカいと縦に間延び */
  grid-template-columns: 180px 1fr;
  column-gap: 48px;
  align-items: start;
  padding-bottom: calc(10px * var(--flow-scale));
  max-width: 820px;   /* ← 700〜900で好み調整 */
}

/* 左側（丸＋点線） */
.flow__rail{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 6px;
}

.flow__badge{
  width: 122px;
  height: 122px;
  border-radius: 999px;
  background: #5f80c6; /* 添付の青っぽい */
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 18px 45px rgba(0,0,0,0.10);
  transform: scale(var(--flow-scale));
  transform-origin: top left;
}
.flow__badge-employment{
  width: 122px;
  height: 122px;
  border-radius: 999px;
  background: #0b9a45; /* 添付の青っぽい */
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 18px 45px rgba(0,0,0,0.10);
  transform: scale(var(--flow-scale));
  transform-origin: top left;
}
.flow__badge-staffing{
  width: 122px;
  height: 122px;
  border-radius: 999px;
  background: #ff7575; /* 添付の青っぽい */
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 18px 45px rgba(0,0,0,0.10);
  transform: scale(var(--flow-scale));
  transform-origin: top left;
}
.flow__badge-step{
  font-size: 14px;
  letter-spacing: 0.18em;
  opacity: .95;
  margin-top: 6px;
}

.flow__badge-num{
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  margin-bottom: 6px;
}

/* 点線（次のSTEPへ） */
.flow__line{
  display: block;
  width: 0;
  margin-top: 10px;
  border-left: 2px dotted rgba(0,0,0,0.35);
  height: calc(70px * var(--flow-scale));
}

/* 右側テキスト */
.flow__content{
  padding-top: 14px;
}

.flow__item-title{
  margin: 0;
  font-size: calc(32px * var(--flow-scale)); /* 元サイズに合わせて調整 */
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #222;
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
}

.flow__item-text{
  margin: 14px 0 0;
  letter-spacing: 0.02em;
  color: #333;
  max-width: 760px;
  font-size: calc(18px * var(--flow-scale));
  line-height: 2.1;
}
/* =========================
   職業紹介：色だけ差分
========================= */
.page-service--employment .service-panel{
  background: #dff9ee; /* ← 添付っぽい薄いグリーン */
}

/* もう少し“ミント”寄りにしたいならこっちでもOK*/
.page-service--employment .service-panel{
  background: #d9f6ea;
}
/* =========================
   人材派遣：色だけ差分
========================= */
.page-service--staffing .service-panel{
  background: #FCE9EE;
}

/* もう少し“ミント”寄りにしたいならこっちでもOK*/
.page-service--employment .service-panel{
  background: #d9f6ea;
}
/* =========================
   MERIT（チェック3行）
========================= */

.merit{
  padding: 90px 0 100px;
  background: #fff;
  text-align: center; /* ← 全体中央揃え */
}

.merit__title{
  margin: 0 0 46px;
  font-size: clamp(23px, 3.6vw, 30px);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #222;
  line-height: 1.25;
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
}
.merit__title_staffing{
  margin: 0 0 46px;
  font-size: clamp(23px, 3.6vw, 30px);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #c7181e;
  line-height: 1.25;
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
}
.merit__list{
 margin: 0 auto;          /* ← これがないと中央にならない */
  padding: 0;
  list-style: none;
  display: grid;
  gap: 26px;
 max-width: 680px; /* ← 横に広がりすぎ防止 */
}
	
.merit__item{
  display: grid;
  grid-template-columns: 52px auto; /* ← 1fr をやめる */
  gap: 22px;
  align-items: center;
  width: fit-content;               /* ← 中身幅にする */
  justify-content: start;           /* ← 中は左揃え */
}

.merit__icon{
  width: 30px;
  height: 30px;
  border-radius: 3px;
  background: #a7f0c9;               /* チェック背景 */
  position: relative;
  transform: translateY(2px);
}
.merit__icon_staffing{
  width: 30px;
  height: 30px;
  border-radius: 3px;
  background: #FCE9EE;               /* チェック背景 */
  position: relative;
  transform: translateY(2px);
}
/* チェック（CSS描画） */
.merit__icon::before{
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 12px;
  height: 8px;
  border-left: 4px solid #fff;
  border-bottom: 4px solid #fff;
  transform: rotate(-45deg);
}
.merit__icon_staffing::before{
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 12px;
  height: 8px;
  border-left: 4px solid #fff;
  border-bottom: 4px solid #fff;
  transform: rotate(-45deg);
}
.merit__text{
  margin: 0;
  font-size: clamp(12px, 1.5vw, 15px);
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: #222;
  font-weight: 300;
  text-align: left; /* ← 文章は読みやすく左揃え */
}
/* =========================
   職業紹介の仕組み（画像）
========================= */

.employment-structure{
  padding: 50px 0 110px;
  background: #fff;
}
.employment-structure__image{
  margin: 0 auto;
  max-width: 1000px;     /* ← 大きすぎ防止（好みで） */
}

.employment-structure__image img{
  width: 60%;
  height: auto;
  display: block;
  margin:0 auto;
  margin-top:-40px;
}
/* =========================
   BENEFIT
========================= */
.benefit{
  background: #dff9ee;      /* 添付のミント背景 */
  padding: 110px 0 120px;
}
.benefit-staffing{
  background: #FCE9EE;
  padding: 110px 0 120px;
}
.benefit__head{
  text-align: center;
  margin-bottom: 64px;
}

.benefit__title{
  margin: 0;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: #222;
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
}

.benefit__grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr; /* 左広め・右画像 */
  gap: 56px;
  align-items: start;
}

/* 左カラム */
.benefit__kicker{
  margin: 0 0 34px;
  font-size: clamp(18px, 2.0vw, 26px);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #222;
}

.benefit__items{
  display: grid;
  gap: 34px;
}

.benefit__item-title{
  margin: 0;
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #222;
}

.benefit__item-text{
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: 0.02em;
  color: #333;
  max-width: 42em; /* 添付っぽい“行の長さ” */
}

/* 右カラム：画像 */
.benefit__figure{
  margin: 0;
  background: #fff;
  padding: 14px;              /* 白いフレーム感 */
  box-shadow: 0 18px 50px rgba(0,0,0,0.10);
  width: min(400px, 100%);
  margin-left: auto;          /* 右寄せ気味 */
}

.benefit__figure img{
  width: 100%;
  height: auto;
  display: block;
}
/* 上部のグレーライン（full-bleed） */
.benefit__divider{
  position: relative;
  margin: 40px 0 90px;
}

.benefit__divider::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1000px;;                 /* 画面いっぱい */
  height: 1px;
  background: rgba(0,0,0,0.18); /* 添付の薄グレー */
  transform: translateX(-50%);
}
.benefit__divider_company{
  position: relative;
  margin: 40px 0 90px;
}

.benefit__divider_company::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 800px;;                 /* 画面いっぱい */
  height: 1px;
  background: rgba(0,0,0,0.18); /* 添付の薄グレー */
  transform: translateX(-50%);
}
/* 企業側：左右反転 */
.benefit__grid--reverse{
  grid-template-columns: 0.9fr 1.1fr;
}

.benefit__grid--reverse .benefit__left{
  order: 1;
}

.benefit__grid--reverse .benefit__right{
  order: 2;
}
/* =========================
   INFO CARDS（緑背景 + 白枠カード）
========================= */
.info-cards{
  background: #0b9a45;           /* 添付の緑 */
  padding: 90px 0 110px;
}

.info-cards__stack{
  display: grid;
  gap: 56px;                    /* 2枚の間隔 */
}

/* カード本体 */
.info-card{
  border: 1.6px solid rgba(255,255,255,0.85);
  border-radius: 34px;
  padding: 52px 70px 56px;
  color: #fff;
  text-align: center;
}

/* 本のアイコン */
.info-card__icon{
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-card__icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.info-card__title{
  margin: 0 0 18px;
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: 0.08em;
  font-weight: 800;
  line-height: 1.25;
}

.info-card__text{
  margin: 0;
  max-width: 980px;
  margin-inline: auto;
  text-align: left;             /* 本文は読みやすく左寄せ（添付もこの感じ） */
  font-size: 15px;
  line-height: 2.25;
  letter-spacing: 0.04em;
  opacity: 0.98;
}
/* =========================
   DISPATCH MECHANISM（図：画像）
========================= */
.dispatch-mech{
  padding: 110px 0 120px;
  background: #fff;
}

.dispatch-mech__head{
  text-align: center;
  margin-bottom: 56px;
}

.dispatch-mech__title{
  margin: 0;
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 900;
  letter-spacing: .06em;
  color: #c7181e; /* 添付っぽい赤 */
}

.dispatch-mech__lead{
  margin: 16px auto 0;
  max-width: 1040px;      /* 長文の読みやすさ */
  font-size: 15px;
  line-height: 2.1;
  color: #333;
  letter-spacing: .02em;
  text-align: left;       /* 本文は左の方が読みやすい */
}

/* 図（画像） */
.dispatch-mech__figure{
  margin: 64px auto 64px;
  max-width: 980px;       /* 図の横幅上限（好みで） */
}

.dispatch-mech__figure img{
  width: 60%;
  height: auto;
  display: block;
  margin: 0 auto;
}
/* =========================
   INFO（赤背景 + 白二重枠）
========================= */

.info-frame-staffing{
  padding: 90px 0;
  background: #d81313; /* 周囲は白のまま */
}

.info-frame{
  position: relative;
  border-radius: 28px;
  padding: 58px 72px 64px;
  color: #fff;
  overflow: hidden;
}

/* 外側の白枠 */
.info-frame::before{
  content: "";
  position: absolute;
  inset: 18px;                     /* 内側に余白を作る */
  border: 2px solid rgba(255,255,255,0.95);
  border-radius: 20px;
  pointer-events: none;
}

.info-frame__icon{
  display: grid;
  place-items: center;
  margin: 4px 0 18px;
  position: relative;
  z-index: 1;
}

.info-frame__icon img{
  width: 44px;
  height: auto;
}

.info-frame__title{
  margin: 0 0 18px;
  text-align: center;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 800;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}

.info-frame__subhead{
  margin: 46px 0 12px;
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 800;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}

.info-frame__text{
  margin: 0;
  font-size: 16px;
  line-height: 2.1;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}
/* =========================
  COMPANY FV
========================= */
.page-company{
  margin: 0;
}

.company-fv{
  position: relative;
  height: 100%;
  overflow: hidden;
}

/* 背景レイヤー */
.company-fv__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* 背景画像：ここで “確実に” 拡大＆トリミング */
.company-fv__bg img{
  width: 100%;
  height: 300%;
  display: block;
  object-fit: cover;          /* 縦横を埋める */
  object-position: center 45%;/* 人物位置調整 */

  transform: scale(1.25);     /* ← ここが拡大倍率（1.1〜1.6） */
  transform-origin: center 45%;
}
/* 中身 */
.company-fv__inner{
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 190px 0 0 80px;
  color: #fff;
}

/* パンくず */
.company-fv__breadcrumb{
  font-size: 14px;
  letter-spacing: .06em;
  opacity: .9;
}

.company-fv__breadcrumb a{
  color: inherit;
  text-decoration: none;
}

.company-fv__breadcrumb .sep{
  margin: 0 12px;
}

/* タイトル */
.company-fv__title{
  margin: 0 0 10px;
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: .08em;
}

/* 英字サブ */
.company-fv__sub{
  margin: 0;
  font-size: 16px;
  letter-spacing: .18em;
  opacity: .9;
}
/* =========================
  COMPANY OVERLAP PANEL
========================= */

.service-panel--company{
  background: #f4efe7; /* 添付の薄ベージュ */
  border-radius: 36px;
}

/* 中身余白 */
.service-panel--company .service-panel__inner_company{
  padding: 72px 72px 64px;
}

/* キャッチコピー */
.service-panel__catch{
  margin: 0 0 40px;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 700;
  letter-spacing: .06em;
  color: #4b4b4b;
}

/* 見出しブロック */
.service-panel__head{
  margin-bottom: 18px;
}

.service-panel__title{
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: .08em;
  color: #3f3f3f;
}

.service-panel__label{
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: .2em;
  color: #6a6a6a;
}

/* ステートメント */
.service-panel__statement{
  margin: 36px 0 18px;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.6;
  color: #3f3f3f;
}

/* 本文 */
.service-panel--employment .service-panel__text p{
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 2.0;
  letter-spacing: .04em;
  color: #4b4b4b;
}

.service-panel--employment .service-panel__text p:last-child{
  margin-bottom: 0;
}
/* =========================
  SERVICE INTRO
========================= */

.service-intro{
  padding: 120px 20px;
  background: #fff;
}

.service-intro__inner{
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

/* アイコン */
.service-intro__icon{
  margin-bottom: 15px;
}

.service-intro__icon img{
  width: 80px;
  height: auto;
}
.service-intro__icon_live{
  margin-bottom: 15px;
}

.service-intro__icon_live img{
  width: 100px;
  height: auto;
}
/* タイトル */
.service-intro__title{
  margin: 0 0 20px;
  font-size: clamp(28px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: .12em;
  color: #4b4b4b;
}

/* 説明文 */
.service-intro__text{
  margin: 0 0 60px;
  font-size: 16px;
  line-height: 2.2;
  letter-spacing: .06em;
  color: #4b4b4b;
}

/* ボタン群 */
.service-intro__actions{
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

/* ボタン */
.service-intro__btn{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  width: 230px;
  padding: 20px 32px;

  border: 2px solid #3f3f3f;
  border-radius: 999px;

  text-decoration: none;
  color: #3f3f3f;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;

  transition: all .3s ease;
}

.service-intro__btn .arrow{
  font-size: 20px;
  transition: transform .3s ease;
}

/* hover */
.service-intro__btn:hover{
  background: #3f3f3f;
  color: #fff;
}

.service-intro__btn:hover .arrow{
  transform: translateX(6px);
}
/* =========================
  MESSAGE SECTION
========================= */

.message{
  position: relative;
  padding: 140px 0 120px;
  background: #f4efe7;
  overflow: hidden;
}

.message__inner{
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 背面英字 */
.message__bg{
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(30px, 16vw, 70px);
  font-weight: 800;
  letter-spacing: .12em;
  color: rgba(0,0,0,0.04);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* 見出し */
.message__head{
  text-align: center;
  margin-bottom: 72px;
   z-index: 2;                  /* ← 英字より前 */
}

.message__title{
  margin: 0;
  font-size: 24px;
  letter-spacing: .18em;
  font-weight: 700;
  color: #4b4b4b;
}

/* キャッチ */
.message__catch{
  margin: 0 0 64px;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .06em;
  color: #3f3f3f;
  padding:10px;
}

/* 画像 */
.message__figure{
  padding:10px;
}

.message__figure img{
  width: 100%;
  display: block;
  height: 500px;       /* ← 上と揃える */
  object-fit: cover;  /* ← 自動トリミング */
}
/* =========================
  MESSAGE BODY（長文）
========================= */

.message__body{
  margin-top: 56px;
  max-width: 860px;         /* ← 横幅を絞って読みやすく */
  letter-spacing: .06em;
  color: #4b4b4b;
}

.message__body p{
  margin: 0 0 34px;         /* ← 段落間を広めに（添付っぽく） */
  font-size: 16px;
  line-height: 2.3;         /* ← 行間広め */
}

.message__body p:last-child{
  margin-bottom: 0;
}

/* 終わりの一文だけ、少し強調 */
.message__closing{
  margin-top: 44px;
  font-weight: 700;
  color: #3f3f3f;
}
/* =========================
  MESSAGE VALUES & SIGN
========================= */

/* 価値観 */
.message__values{
  margin: 56px 0 56px;
}

.message__values p{
  margin: 0 0 22px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #3f3f3f;
}

.message__values p:last-child{
  margin-bottom: 0;
}

/* 締めの一文 */
.message__final{
  margin: 0 0 64px;
  font-size: 16px;
  line-height: 2.2;
  letter-spacing: .06em;
  color: #4b4b4b;
}

/* 署名 */
.message__sign{
  text-align: right;
  font-size: 16px;
  letter-spacing: .12em;
  color: #3f3f3f;
}
/* =========================
  COMPANY INFO
========================= */

.company-info{
  padding: 110px 0 120px;
  background: #fff;
}

.company-info__inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

/* タイトル */
.company-info__title{
  margin: 0 0 34px;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 800;
  letter-spacing: .06em;
  color: #3f3f3f;
}

/* 一覧 */
.company-info__dl{
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(0,0,0,0.08); /* 上の横線 */
}

.company-info__row{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 28px;
  padding: 34px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08); /* 各行の横線 */
}

/* 左（項目） */
.company-info__row dt{
  margin: 0;
  font-weight: 700;
  letter-spacing: .08em;
  color: #3f3f3f;
}

/* 右（内容） */
.company-info__row dd{
  margin: 0;
  color: #4b4b4b;
  letter-spacing: .06em;
  line-height: 2.0;
}

/* TELリンク */
.company-info__tel{
  color: inherit;
  text-decoration: none;
}

.company-info__tel:hover{
  text-decoration: underline;
}
/* =========================
  COMPANY INFO LIST
========================= */

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

.company-info__list li{
  position: relative;
  padding-left: 18px;
  margin-bottom: 16px;
  line-height: 1.9;
  letter-spacing: .06em;
}

/* ◆マーク */
.company-info__list li::before{
  content: "◆";
  position: absolute;
  left: 0;
  top: 0;
  color: #3f3f3f;
  font-size: 12px;
}

/* 最後の余白調整 */
.company-info__list li:last-child{
  margin-bottom: 0;
}

/* ===== COMPANY FV：高さを画面いっぱいに ===== */
.page-company .company-fv{
  position: relative;
  height: 90svh;          /* ←縦を伸ばす（好みで 80〜120） */
  min-height: 640px;      /* ←PCで小さくならない保険 */
  overflow: hidden;
  isolation: isolate;
}
.page-company .company-fv__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* 背景は全体にフィット */
.page-company .company-fv__bg,
.page-company .company-fv__bg img{
  width: 95%;
  height: 95%;
  display: block;
  object-fit: cover;
  object-position: center 35%;

  transform: scale(1.35);      /* ←等倍ズーム（歪まない） */
  transform-origin: center 35%;
}
/* =========================
  CONTACT PAGE
========================= */
.page-contact{
	  background-image: url(/wp-content/themes/pcg-renewal/assets/images/contact-fv.jpg);
  background-size: cover;
  background-position: center;
}
.page-privacy{
background-image: url(/wp-content/themes/pcg-renewal/assets/images/contact-fv.jpg);
}
.page-contact .contact-fv{
  position: relative;
  height: 520px;
  overflow: hidden;
  isolation: isolate;
}

/* 背景：画像はCSSで指定（比率崩れない） */
.page-contact .contact-fv__bg{
  position: absolute;
  inset: 0;
  transform: scale(1.08);
  z-index: 0;
}

.page-contact .contact-fv__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1;
}

.page-contact .contact-fv__inner{
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 160px 0 0 80px;
  color: #fff;
}

.page-contact .contact-fv__breadcrumb{
  font-size: 14px;
  letter-spacing: .06em;
  opacity: .9;
  margin-bottom: 24px;
}
.page-contact .contact-fv__breadcrumb a{ color: inherit; }
.page-contact .contact-fv__breadcrumb .sep{ margin: 0 12px; }

.page-contact .contact-fv__title{
  margin: 0 0 10px;
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: .08em;
}

.page-contact .contact-fv__sub{
  margin: 0;
  font-size: 16px;
  letter-spacing: .18em;
  opacity: .9;
}

/* 白パネルをFVに被せる */
.page-contact .contact-body--overlap{
  margin-top: -180px;
  position: relative;
  z-index: 5;
  padding: 0 0 120px;
}

.page-contact .contact-panel{
  background: #fff;
  border-radius: 36px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.12);
  overflow: hidden;
}

.page-contact .contact-panel__inner{
  padding: 70px 72px 80px;
}

/* =========================
  CF7 FORM STYLE
========================= */
.page-contact .wpcf7 form{
  margin: 0;
}

.page-contact .cf7__row{
  margin-bottom: 26px;
}

.page-contact .cf7__label{
  display: block;
  font-weight: 700;
  letter-spacing: .06em;
  color: #333;
  margin-bottom: 10px;
}

.page-contact .cf7__req{
  color: #d81313;
  margin-left: 6px;
}

.page-contact .cf7__input,
.page-contact .cf7__textarea{
  width: 100%;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding: 16px 14px;
  font-size: 16px;
  outline: none;
  background: #fff;
}

.page-contact .cf7__textarea{
  min-height: 220px;
  resize: vertical;
}

/* 送信ボタン */
.page-contact .cf7__actions{
  margin-top: 30px;
}

.page-contact .cf7__submit{
  width: 100%;
  height: 64px;
  border-radius: 8px;
  border: none;
  background: #7a7a7a;
  color: #fff;
  font-weight: 700;
  letter-spacing: .3em;
  cursor: pointer;
}

.page-contact .cf7__submit:hover{
  filter: brightness(0.95);
}

/* 同意 */
.page-contact .cf7__agree{
  margin-top: 6px;
  font-size: 14px;
  color: #333;
}

/* エラー表示の見た目（CF7標準） */
.page-contact .wpcf7-not-valid-tip{
  margin-top: 8px;
  font-size: 13px;
}
.page-contact .wpcf7-response-output{
  margin: 22px 0 0;
}
/* ===== CONTACT：白パネルを右寄せ（添付どおり） ===== */
.page-contact .contact-body{
  background: transparent;
}

/* overlapはそのまま使う（上に食い込ませ） */
.page-contact .contact-body--overlap{
  margin-top: -220px;  /* 好みで調整 */
  position: relative;
  z-index: 5;
}

/* 重要：container内で「右寄せ」+「左に余白」 */
.page-contact .contact-panel{
  width: min(920px, 100%);         /* パネル幅 */
  margin-left: auto;               /* 右寄せの核 */
  margin-right: 0;
  background:#fff;
  border-radius: 48px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.18);
}

/* 中身の余白 */
.page-contact .contact-panel__inner{
  padding: 80px 72px;
}
/* contactの白パネルを「右端にベタ付け」 */
.page-contact .contact-body .container{
  max-width: none;         /* container制限を解除 */
  padding-right: 0;        /* 右余白を消す */
}

.page-contact .contact-panel{
  width: min(980px, 100%);
  margin-left: auto;       /* 右寄せ */
  margin-right: 0 !important; /* ★右端にピタ付け */
  border-radius: 36px 0 0 36px; /* 右上/右下を角丸なしにする（添付っぽい） */
}
/* =========================
   SINGLE BLOG
========================= */

.single-blog {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 20px;
}

.single-blog-title {
  font-size: 1.8rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.single-blog-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
}
.single-blog-thumb {
  max-width: 500px;   /* ← 好みで600〜720px */
  margin: 0 auto 40px;
}
.single-blog-thumb img {
  width: 100%;
  height: auto;
  margin-bottom: 40px;
}

.single-blog-content {
  font-size: 1rem;
  line-height: 2;
}

.single-blog-content h2 {
  margin-top: 60px;
  margin-bottom: 20px;
  font-size: 1.4rem;
}

.single-blog-content p {
  margin-bottom: 24px;
}
.single-blog-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid #ddd;
}

.single-blog-nav a {
  font-size: 0.9rem;
  color: #333;
  text-decoration: none;
}

.single-blog-nav a:hover {
  text-decoration: underline;
}
/* =========================
   ブログ一覧に戻るボタン
========================= */

.single-blog-back {
  text-align: center;
  margin: 80px 0;
}

.back-btn {
  position: relative;
  display: inline-block;
  padding: 12px 48px;      /* ← 横を縮める */
  font-size: 0.8rem;     /* ← 文字を少し小さく */
  letter-spacing: 0.12em; /* ← 詰めすぎない */
  color: #3d2f28 !important;
  background: #fff;
  border: 1px solid #3d2f28;
  text-decoration: none !important; /* ← 最重要 */
    transition:
    background-color 0.35s ease,
    color 0.35s ease,
    transform 0.35s ease;
}
.back-btn:hover {
  background: #3d2f28;
  color: #fff !important;
  text-decoration: none !important;
}

.back-btn:hover::before {
  border-color: #fff;
}
/* 内側の二重枠 */
.back-btn::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 1px solid #3d2f28;
  pointer-events: none;
}
/* =========================
  Privacy Policy
========================= */

.page-privacy{
  padding-bottom: 80px;
  background-size: cover;
  background-position: center;
}
.page-privacy .privacy-fv__bg{
  background-size: cover;
  background-position: center;
}
/* FV */
.privacy-fv{
  position: relative;
  min-height: 520px;
  padding: 120px 24px 140px;
  overflow: hidden;
}

.privacy-fv__bg{
  position: absolute;
  inset: 0;

  transform: scale(1.08);
  filter: blur(6px);
}

.privacy-fv__overlay{
  background-size: cover;
  background-position: center;
}

.privacy-fv__inner{
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
}

.privacy-fv__breadcrumb{
  color: rgba(255,255,255,0.82);
  font-size: 14px;
  line-height: 1.6;
}

.privacy-fv__breadcrumb a{
  color: inherit;
  text-decoration: none;
}

.privacy-fv__breadcrumb .sep{
  margin: 0 10px;
  opacity: 0.7;
}

.privacy-fv__title{
  margin-top: 28px;
  color: #fff;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.privacy-fv__sub{
  margin-top: 12px;
  color: rgba(255,255,255,0.78);
  font-size: 16px;
  letter-spacing: 0.12em;
}

/* Body overlap panel */
.privacy-body{
  padding: 0 24px;
}

.privacy-body--overlap{
  margin-top: -110px; /* FVに被せる */
}



/* ===== Privacy：白パネルを右端にベタ付け ===== */

/* 余白枠（中央寄せ）を解除して、右端まで行けるようにする */
.page-privacy .privacy-panel-wrap{
  max-width: none;                /* ←中央の幅制限を解除 */
  margin: 0;                      /* ←autoを消す */
}

/* 白パネル本体を右寄せ + 右端ベタ付け */
.page-privacy .privacy-panel{
 background: #fff; 
  width: min(980px, 100%);        /* ←パネル幅（好みで調整） */
  margin-left: auto;              /* ←右寄せの核 */
  margin-right: calc(50% - 50vw); /* ←右端にベタ付け（重要） */
  border-radius: 28px 0 0 28px;   /* ←右側を角丸なし（添付っぽく） */
}

/* 中身は読みやすい幅を維持 */
.page-privacy .privacy-panel__inner{
  max-width: 920px;
  margin: 0;                      /* ←中央寄せ解除（必要なら） */
  padding: 56px 64px;
}


.privacy-panel__inner{
  padding: 56px 64px;
  max-width: 920px;   /* 文字幅を締める */
  margin: 0 auto;
}


.page-privacy .privacy-fv{
  position: relative;
  min-height: 520px;
  padding: 120px 24px 140px;
  overflow: hidden;
  isolation: isolate;
}

.page-privacy .privacy-fv__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:background-image: url(/wp-content/themes/pcg-renewal/assets/images/your-privacy-bg.png);
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  filter: blur(6px);
}

.page-privacy .privacy-fv__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
}

.page-privacy .privacy-fv__inner{
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  color: #fff;
}
/* =========================
  ARCHIVE GRID（ブログ/お知らせ一覧）
========================= */
.archive-hero{
  padding: 140px 0 70px;
  text-align: center;
  background: #fff;
}
.archive-hero__jp{
  margin: 0;
  font-size: 42px;
  letter-spacing: .08em;
  font-weight: 700;
}
.archive-hero__en{
  margin: 10px 0 0;
  font-size: 16px;
  letter-spacing: .2em;
  opacity: .8;
  position: relative;
  display: inline-block;
  padding: 0 18px;
}
.archive-hero__en::before,
.archive-hero__en::after{
  content:"";
  position:absolute;
  top:50%;
  width: 260px;
  height: 2px;
  background: rgba(0,0,0,0.35);
}
.archive-hero__en::before{ right: 100%; margin-right: 18px; }
.archive-hero__en::after{ left: 100%;  margin-left: 18px; }

.archive-grid{
  padding: 70px 0 120px;
  background: #f5f5f5;
}

/* 3カラム */
.post-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}

.post-card{
  background: #fff;
  overflow: hidden;
}

.post-card__link{
  display: block;
}

.post-card__thumb{
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.post-card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.post-card__body{
  padding: 18px 22px 26px;
}

.post-card__meta{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.post-card__badge{
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-size: 12px;
  letter-spacing: .12em;
}

.post-card__date{
  font-size: 14px;
  opacity: .75;
  letter-spacing: .04em;
}

.post-card__title{
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.6;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* ← 2行で止める */
  overflow: hidden;
}

.post-card__excerpt{
  margin-top: 12px;
  font-size: 14px;
  line-height: 2.0;
  opacity: .85;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* ← 3行 */
  overflow: hidden;
}

/* ページネーション */
.post-pagination{
  margin-top: 60px;
  text-align: center;
}
.post-pagination .page-numbers{
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid #ddd;
  margin: 0 4px;
  border-radius: 6px;
  background: #fff;
}
.post-pagination .page-numbers.current{
  background: #111827;
  color: #fff;
  border-color: #111827;
}
/* 共通 */
.post-card__badge{
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .12em;
  color: #fff;
}

/* お知らせ */
.post-card__badge--news{
  background: #111827; /* 濃紺 */
}

/* ブログ */
.post-card__badge--blog{
  background: #6b7280; /* グレー */
}
/* TOPページだけに限定 */
body.admin-bar.home .hero-bg{
  top: 32px;
  height: calc(100vh - 32px);
}







/* =========================
   FOOTER
========================= */
.site-footer{
  background: #3a3a3a;
  color: #fff;
  padding: 80px 0 40px;
  position:relative;
 z-index: 9999;
}

.footer-inner{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--container-p);
}

.footer-top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

.footer-brand img{
  width: 120px;
  height: auto;
}

.footer-company{
  margin-top: 12px;
  font-size: 16px;
  letter-spacing: 0.08em;
}

.footer-nav ul{
  display: flex;
  gap: 32px;
}

.footer-nav a{
  font-size: 14px;
  color: #fff;
  opacity: 0.9;
  transition: opacity 0.3s;
}

.footer-nav a:hover{ opacity: 1; }

.footer-divider{
  margin: 48px 0 32px;
  border: none;
  height: 1px;
  background: #777;
}

.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  opacity: 0.85;
}

.footer-privacy{ color: #fff; }

/* =========================
   RESPONSIVE
========================= */
/* RESPONSIVE */
@media (max-width: 980px){
  .service-hero{
    padding: 120px 0 70px;
    min-height: 460px;
  }
  .service-panel{
    padding: 34px 26px;
    border-radius: 22px;
  }
	.service-body{
  padding: 0 0 0px;
}

}

/* SPは少し縦を増やす */
@media (max-width: 768px){
  .gmap-embed{ aspect-ratio: 16 / 10; }
 .post-card__title{
  font-size: 14px;
}
	.post-card__excerpt{
  margin-top: 12px;
  font-size: 8px;
  line-height: 1.6;
  overflow: hidden;
}
}
@media (max-width: 980px){
  .global-nav{ display:none; }
  .menu-toggle{ display:flex; }

  .news-blog-inner,
  .about-inner{
    grid-template-columns: 1fr;
    gap: 36px;
  }
@media (max-width: 768px) {
  .global-nav.is-open {
    display: flex;       /* ← display:none を上書きして開く */
    z-index: 2000;       /* ヘッダーや他要素に負けないように */
  }
	
	  .global-nav a {
    color: #3a3a3a;
    text-shadow: none;
  }
	.contact-nav-item {
		display: block;
	}
  .menu-toggle.is-open span:nth-child(1){
    transform: translateY(9px) rotate(45deg);
  }
  .menu-toggle.is-open span:nth-child(2){
    opacity: 0;
  }
  .menu-toggle.is-open span:nth-child(3){
    transform: translateY(-9px) rotate(-45deg);
  }
  .menu-toggle span{
    transition: transform .2s ease, opacity .2s ease;
  }
}

.media-figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.00);
  transition: transform .35s ease;
}
	.media-figure{
  border-radius: 18px;
  margin: 0;
  box-shadow: 0 22px 60px rgba(0,0,0,0.12);
  width: 100%;
  overflow: hidden;
}
  .news-blog{ padding: 110px 10px 110px; }
  .about{ padding: 90px 0 110px; }

  .nb-item{
    grid-template-columns: 110px 1fr;
    grid-template-areas:
      "date badge"
      "title title";
    align-items: start;
  }
  .nb-date{ grid-area: date; }
  .nb-badge{ grid-area: badge; justify-self: start; }
  .nb-link{ grid-area: title; }

  .services-cards{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .service-card{ min-height: auto; }
}

@media (max-width: 768px) {

  .global-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    display: none;
    align-items: center;
    justify-content: center;
  }

  .global-nav ul {
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }

  .menu-toggle {
    display: flex;
  }

  .contact-btn {
    display: none;
  }

  .contact-nav-item {
    margin-top: 24px;
  }

  .contact-nav-item a {
    display: inline-block;
    padding: 12px 24px;
  }
	  .footer-top {
    flex-direction: column;
    gap: 32px;
  }

  .footer-nav ul {
    flex-wrap: wrap;
    gap: 16px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
}
/* SP調整 */
@media (max-width: 768px){
  .hero{ min-height: 520px; }
  .hero-overlay{
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.20) 65%,
      rgba(0,0,0,0.05) 100%
    );
  }
  .hero-sub{ font-size: 14px; }
}
/* SP */
@media (max-width: 900px){
  .news-blog-inner{
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .news-blog-title{
    font-size: 44px;
  }
  .news-blog-lists{
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
@media (max-width: 768px){
  .nb-archive-title{ font-size: 44px; }
  .nb-filter{ flex-wrap: wrap; }
}
/* SP */
@media (max-width: 900px){
  .news-blog-inner{
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .news-blog-title{
    font-size: 48px;
  }
  .nb-item{
    grid-template-columns: 110px 1fr; /* 日付 / タイトル */
    grid-template-areas:
      "date badge"
      "title title";
    align-items: start;
  }
  .nb-date{ grid-area: date; }
  .nb-badge{ grid-area: badge; justify-self: start; }
  .nb-link{ grid-area: title; }
}
/* SP */
@media (max-width: 900px){
  .about{
    padding: 96px 10px;
  }

  .about-inner{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 32px;
    min-height: auto;
  }

  .about-body,
  .about-cta{
    grid-column: 1 / -1;
  }

  .about-cta{
    justify-content: flex-start;
  }

  .more-btn{
    width: 220px;
    height: 62px;
  }

  .about-en{
    font-size: 48px;
  }
}
/* レスポンシブ */
@media (max-width: 980px){
  .services-cards{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .service-card{
    min-height: auto;
  }
}
/* SP */
@media (max-width: 980px){
  :root{ --media-overlap: 220px; } /* SPは少し浅めが安全 */
  .media{ padding: 40px 10px 80px; }
  .media-more{ min-width: 180px; }
}
/* =========================
   RESPONSIVE
========================= */
@media (max-width: 980px){
  .contact-inner{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .contact-media{
    height: 180px;
  }
	.contact-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
}
@media (max-width: 980px){
  .contact-inner{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .contact-card{
    margin-left: 0;
    margin-right: calc(50% - 50vw); /* 右端までは維持 */
    padding: 34px 28px 110px;
	margin-top: -60px; 
  }

  .contact-cta{
    right: 28px;
    bottom: 28px;
  }
}
/* SP */
@media (max-width: 900px){
  .service-hero{ padding: 0px 0 0px; }
  .service-body--overlap{ margin-top: 0px; }  /* SPは浅めが安全 */
  .service-panel{ padding: 34px 22px; border-radius: 22px; }
}
/* SP調整 */
@media (max-width: 768px){
  .merit{
    padding: 64px 10px 72px;
  }
	.nb-item{
  grid-template-columns: 180px 88px 1fr;
}
	.container{
  padding: 0px;
}

  .merit__title{
    margin-bottom: 28px;
    letter-spacing: 0.04em;
  }
  .merit__list{
    gap: 18px;
  }
  .merit__item{
    grid-template-columns: 44px 1fr;
    gap: 14px;
  }
  .merit__icon{
    width: 38px;
    height: 38px;
  }
  .merit__icon::before{
    left: 10px;
    top: 12px;
    width: 16px;
    height: 9px;
    border-left-width: 3px;
    border-bottom-width: 3px;
  }
}
/* =========================
   Responsive
========================= */
@media (max-width: 900px){
  .benefit{
    padding: 80px 10px 90px;
  }
  .benefit__grid{
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .benefit__figure{
    margin-left: 0;
  }
	.benefit__left{
		padding:10px;
	}
	.benefit-staffing{
  padding: 0px 0 120px;
}
	.flow__inner{
		padding:10px;
	}
}
@media (max-width: 900px){
  .benefit__divider{
    margin-bottom: 60px;
  }
}
/* レスポンシブ */
@media (max-width: 768px){
	.info-cards{          /* 添付の緑 */
  padding: 90px 10px 110px;
}
  .info-card{
    padding: 40px 22px 44px;
    border-radius: 26px;
  }
  .info-card__text{
    font-size: 14px;
    line-height: 2.1;
  }
	.employment-structure__image img{
  width: 80%;
  margin-top:-40px;
}
}

/* スマホ */
@media (max-width: 640px){
  .dispatch-mech{
    padding: 90px 0px 10px;
  }
  .dispatch-mech__head{
    margin-bottom: 40px;
  }
	.dispatch-mech__lead{
padding:10px;
}
  .dispatch-mech__figure{
    margin-top: 40px;
    max-width: 100%;
  }
	  .dispatch-mech__figure img{
width:80%;
  }
}
/* =========================
  RESPONSIVE
========================= */

@media (max-width: 768px){
  .service-panel--employment{
    border-radius: 22px;
  }
	.hero-title{
		font-size:70px;
	}
.service-panel--right{
  margin-left:0px;
}
.service-panel__inner{
  padding: 20px 0px;
  max-width: 980px;     /* テキスト行が長くなりすぎない制限 */
}
	.service-panel{
		border-radius:0px;
	}
/* 見出し・本文（そのままでOKなら不要） */
.service-panel__lead{
  margin: 0;
  font-size:20px;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: #222;
  font-weight: 800;
}
  .service-panel--employment .service-panel__inner{
    padding: 44px 20px 42px;
  }

  .service-panel__statement{
    margin-top: 28px;
  }
}

/* =========================
  RESPONSIVE
========================= */

@media (max-width: 768px){
  .service-intro{
    padding: 90px 20px;
  }

  .service-intro__btn{
    width: 100%;
    max-width: 320px;
  }
	.flow__item{
		gap:0px;
		grid-template-columns:70px 1fr;
	}
	.flow__badge{
  width: 70px;
  height: 70px;
}
.flow__badge-employment{
  width: 60px;
  height: 60px;
}
.flow__badge-staffing{
  width: 70px;
  height: 70px;
}
.flow__badge-step{
  font-size: 12px;
  margin-top: 6px;
}
.flow__item-title{
  font-size:18px;
}

.flow__item-text{
  font-size:12px;
  line-height: 2.1;
}
.flow__badge-num{
  font-size: 30px;
  margin-bottom: 6px;
}
}
/* =========================
  RESPONSIVE
========================= */

@media (max-width: 768px){
  .message{
    padding: 100px 0 90px;
  }

  .message__head{
    margin-bottom: 48px;
  }

  .message__catch{
    margin-bottom: 40px;
  }
}
/* レスポンシブ */
@media (max-width: 768px){
  .message__body{
    margin-top: 42px;
    max-width: 100%;
  }

  .message__body p{
    margin-bottom: 26px;
    line-height: 2.1;
  }
}
/* レスポンシブ */
@media (max-width: 768px){
  .message__values{
    margin: 44px 0 44px;
  }

  .message__values p{
    font-size: 17px;
  }

  .message__sign{
    text-align: left; /* ← スマホは左寄せの方が自然 */
    margin-top: 32px;
  }
}

/* =========================
  RESPONSIVE
========================= */

@media (max-width: 768px){
  .company-info{
    padding: 80px 10px 0px;
  }
/* 中身余白 */
.service-panel--company .service-panel__inner_company{
  padding: 0px 0px 0px;
}

/* キャッチコピー */
.service-panel__catch{
  margin: 0 0 40px;
  font-size: clamp(22px, 2.4vw, 34px);
}

/* 見出しブロック */
.service-panel__head{
  margin-bottom: 18px;
}

.service-panel__title{
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
}

.service-panel__label{
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
}
  .company-info__row{
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 0;
  }
.message__figure img{
  width: 100%;
  display: block;
  height: 250px;       /* ← 上と揃える */
  object-fit: cover;  /* ← 自動トリミング */
}
/* =========================
  MESSAGE BODY（長文）
========================= */

.message__body{
  margin-top: 56px;
  max-width: 860px;         /* ← 横幅を絞って読みやすく */
  letter-spacing: .06em;
  color: #4b4b4b;
  padding:10px;
}

.message__body p{
  margin: 0 0 34px;         /* ← 段落間を広めに（添付っぽく） */
  font-size: 14px;
  line-height: 2.1;         /* ← 行間広め */
}
}
/* SP */
@media (max-width: 768px){
  .page-contact .contact-fv__inner{
    padding: 140px 20px 0;
  }
  .page-contact .contact-body--overlap{
    margin-top: -90px;
  }
  .page-contact .contact-panel__inner{
    padding: 10px 50px;
  }
	.contact{
  padding: 50px 0;
}
	.contact-panel-wrap{
		padding:10px;
	}
}
/* 右寄せを強調：左側に“見せる余白”を強制的に作る（添付の見た目） */
@media (min-width: 980px){
  .page-contact .contact-body .container{
    max-width: none;                  /* これで右寄せが効きやすくなる */
    padding-left: clamp(40px, 6vw, 120px);
  }
  .page-contact .contact-panel{
    /* 左に余白が残る＝背景が見える */
    margin-left: auto;
  }
}

/* SPは中央に戻す（右寄せだと窮屈になる） */
@media (max-width: 979px){
  .page-contact .contact-panel{
    width: 100%;
    margin: 0 auto;
    border-radius: 28px;
  }
  .page-contact .contact-panel__inner{
    padding: 10px 20px;
  }
}
/* SP */
@media (max-width: 767px){
	/* 3カラム */
.post-grid{
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  padding-left:10px;
  padding-right:10px;
}
	.post-card__badge{
  font-size: 10px;
}

.post-card__date{
  font-size: 14px;
  opacity: .75;
  letter-spacing: .04em;
}
  .privacy-fv{
    min-height: 420px;
    padding: 96px 16px 130px;
  }

  .privacy-body{
    padding: 0 16px;
  }

  .privacy-body--overlap{
    margin-top: -90px;
  }

  .privacy-panel{
    border-radius: 22px;
  }

  .privacy-panel__inner{
    padding: 28px 18px;
    max-width: 100%;
  }
}
/* レスポンシブ */
@media (max-width: 980px){
  .archive-hero__en::before, .archive-hero__en::after{ width: 140px; }
}
@media (max-width: 640px){
  .archive-hero{ padding: 120px 0 56px; }
}
/* =========================
   MOBILE DRAWER (Menu Overlay)
   ※ style.css一番下に追記推奨（競合回避）
========================= */
@media (max-width: 980px){

  /* ヘッダー上の右上に×を固定（添付っぽく） */
  .menu-toggle{
    display: flex;
    position: fixed;
    top: 26px;
    right: 22px;
    z-index: 4000;
    width: 34px;
    height: 26px;
  }

  .menu-toggle span{
    height: 2px;
    background: #fff;
    border-radius: 2px;
  }

  /* 開いたら× */
  .menu-toggle.is-open span:nth-child(1){
    transform: translateY(12px) rotate(45deg);
  }
  .menu-toggle.is-open span:nth-child(2){
    opacity: 0;
  }
  .menu-toggle.is-open span:nth-child(3){
    transform: translateY(-12px) rotate(-45deg);
  }
  .menu-toggle span{
    transition: transform .2s ease, opacity .2s ease;
  }

  /* メニュー全画面オーバーレイ */
  .global-nav{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100svh;               /* SPで安定 */
    background: #3f3f3f;          /* 添付の濃いグレー */
    display: none;
    z-index: 3500;

    /* 上から詰めて配置（添付っぽい） */
    align-items: flex-start;
    justify-content: flex-start;

    padding: 92px 22px 40px;      /* Menu/×の分だけ上を空ける */
  }

  /* 開いたとき */
  .global-nav.is-open{
    display: flex;
  }

  /* 「Menu」文字を左上に出す（HTMLに見出しが無くてもOK） */
  .global-nav::before{
    content: "Menu";
    position: absolute;
    top: 62px;
    left: 22px;

    color: #fff;
    font-size: 38px;
    font-weight: 500;
    letter-spacing: 0.06em;
    font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  }

  /* リスト全幅で、区切り線 */
  .global-nav ul{
    width: 100%;
    display: block;
    margin-top: 70px;             /* Menu文字の下を空ける */
    padding: 0;
  }

  .global-nav li{
    border-top: 1px solid rgba(255,255,255,0.22); /* 薄い白線 */
  }
  .global-nav li:last-child{
    border-bottom: 1px solid rgba(255,255,255,0.22);
  }

  .global-nav a{
    display: block;
    width: 100%;

    padding: 22px 4px;
    color: #fff;
    text-shadow: none;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
	text-align:left;
  }

  /* PC用の下線ホバーはSPでは消す */
  .global-nav a::after{
    display: none;
  }

  /* 連絡ボタンはSPヘッダーでは隠す（必要なら） */
  .contact-btn{
    display: none;
  }

  /* SPで「開いてる間、背景スクロールさせない」 */
  body:has(.global-nav.is-open){
    overflow: hidden;
    touch-action: none;
  }
.post-grid{ 3カラム }
@media (max-width: 980px){ 2カラム }
@media (max-width: 640px){ 1カラム }