@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/



/* ================================
   共通レイアウト（会社概要ページ）
================================ */

/* 左2 / 右3 グリッド */
.co-block {
  --gap: clamp(20px, 3vw, 48px);
  --left: 2fr;
  --right: 3fr;
  --line: #e6e6e6;
  --title-size: clamp(28px, 3.6vw, 52px);
  --kicker-size: clamp(12px, 1.2vw, 14px);
  color: #2d281f;
}
.co-block .co-wrap {
  display: grid;
  grid-template-columns: minmax(0, var(--left)) minmax(0, var(--right));
  gap: var(--gap);
  align-items: start;
  position: relative;
  isolation: isolate;
}

/* 見出し */
.co-title .co-kicker {
  font-size: var(--kicker-size);
  letter-spacing: .08em;
  color: #7a7268;
  margin: 0 0 .25em;
}
.co-title .co-h1 {
  font-size: var(--title-size);
  line-height: 1.25;
  margin: 0;
  font-weight: 700;
  letter-spacing: .02em;
}

/* 企業情報リスト */
.co-overview .co-def {
  --dt-w: 7.5em;
  display: grid;
  grid-template-columns: minmax(var(--dt-w), auto) 1fr;
  column-gap: clamp(16px, 2.8vw, 28px);
  row-gap: 22px;
  margin: 0;
}
.co-overview .co-def dt,
.co-overview .co-def dd {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.co-overview .co-def dt {
  font-weight: 700;
  white-space: nowrap;
}
.co-overview .co-def dd {
  line-height: 1.9;
}
.co-overview .co-def a[href^="tel:"] {
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

/* 社長メッセージ */
.co-message .co-body { max-width: 70ch; }
.msg-lead {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  margin: 0 0 1.2rem;
  color: #2d281f;
  line-height: 1.5;
}
.msg-text p {
  margin: 0 0 1.2rem;
  line-height: 1.9;
  font-size: clamp(15px, 1.4vw, 17px);
}
.msg-sign {
  text-align: right;
  font-weight: 600;
  margin-top: 2rem;
}

/* 理念・方針 */
.co-phi .co-body { max-width: 70ch; }
.phi-group { margin: 0 0 1.6rem; }
.phi-h3 {
  font-size: clamp(18px, 1.6vw, 20px);
  font-weight: 700;
  letter-spacing: .02em;
  margin: 0 0 .35rem;
  color: #2d281f;
}
.phi-lead {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.9;
  margin: 0;
}
.phi-list {
  margin: .2rem 0 0;
  padding-left: 1.2em;
  line-height: 1.9;
}
.phi-list li { margin: .3rem 0; }
.co-phi .phi-group + .phi-group {
  padding-top: .9rem;
  border-top: 1px dashed var(--line, #e6e6e6);
}

/* 許可証・資格 */
.co-license .co-body { max-width: 70ch; }
.license-group { margin: 0 0 2rem; }
.lic-h3 {
  font-size: clamp(18px, 1.6vw, 20px);
  font-weight: 700;
  margin: 0 0 .6rem;
  color: #2d281f;
}
.lic-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1rem;
}
.lic-table td {
  padding: .4rem .6rem;
  border-bottom: 1px solid #ddd;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
}
.lic-table td.num { text-align: right; white-space: nowrap; }
.lic-note {
  font-size: 0.85em;
  color: #666;
  margin: 0;
  text-align: right;
}

/* アクセス（地図） */
.co-access .map-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;            /* ← 正方形に変更 */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  background: #f5f5f5;
}
/* aspect-ratio 非対応ブラウザの保険 */
.co-access .map-wrap::before{
  content:"";
  display:block;
  padding-top: 100%;              /* ← 正方形に変更 */
}
.co-access .map-wrap iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}



/* レスポンシブ */
@media (max-width: 960px) {
  .co-block .co-wrap { grid-template-columns: 1fr; }
  .co-overview .co-def dt,
  .co-overview .co-def dd { padding: 12px 0; }
  .co-title { margin-bottom: .5rem; }
}

/* PC のとき見出しを少し小さくする */
@media (min-width: 1025px) {
  .co-title .co-h1 {
    font-size: clamp(26px, 2.2vw, 38px); /* 上限を38pxに抑える */
  }
}
/* SP のとき見出しを気持ち小さく＆少し濃くする */
@media (max-width: 640px) {
  .co-title .co-h1 {
    font-size: clamp(22px, 6vw, 28px); /* 上限を28pxに抑える */
    color: #1a1a1a;                    /* ← 少し濃いグレーに */
    font-weight: 800;                  /* ← 太さを強める */
  }
}


/* Reveal (必須3点セット) */
.reveal { opacity: 1; transform: none; }

.js-ready .reveal {
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: opacity .8s ease, transform .8s ease !important;
  transition-delay: var(--d, 0ms) !important; /* ←遅延もここで */
}

.js-ready .reveal.is-visible {
  opacity: 1 !important;
  transform: none !important;
}






/* ================================
   Recruit Story（求人ストーリー）
   左：英語＋見出し／右：本文
   ※ 画像ブロックを各セクション間に挟んでもOK
================================ */
.recruit-block{
  --gap: clamp(20px, 3vw, 48px);
  --left: 2fr;                 /* 左カラム（見出し側） */
  --right: 3fr;                /* 右カラム（本文側）   */
  --title-size: clamp(22px, 2.6vw, 32px);  /* 見出し(p)のPCサイズを控えめに */
  --kicker-size: clamp(12px, 1.1vw, 14px); /* 英語の小見出し */
  color:#2d281f;
  margin: clamp(28px, 5vw, 64px) 0;       /* セクション間の余白 */
}

.recruit-block .recruit-wrap{
  display:grid;
  grid-template-columns: minmax(0,var(--left)) minmax(0,var(--right));
  gap: var(--gap);
  align-items:start;
  position:relative;
  isolation:isolate; /* z-index干渉防止 */
}

/* 左：英語＋日本語見出し */
.recruit-title .recruit-kicker{
  font-size: var(--kicker-size);
  letter-spacing:.08em;
  color:#7a7268;
  margin:0 0 .35em;
}
.recruit-title .recruit-h2{
  /* h2ではなくpを見出し相当に */
  font-size: var(--title-size);
  line-height:1.35;
  font-weight:700;
  letter-spacing:.02em;
  margin:0;
}

/* 右：本文 */
.recruit-body{
  max-width: 70ch;    /* 読みやすい行幅 */
}
.recruit-body p{
  margin:0 0 1.15rem;
  line-height:1.9;
  font-size: clamp(15px, 1.35vw, 17px);
}

/* スマホ：縦積み */
@media (max-width: 960px){
  .recruit-block .recruit-wrap{ grid-template-columns: 1fr; }
  .recruit-title{ margin-bottom:.5rem; }
  .recruit-body{ max-width: 100%; }
}

/* （任意）ふわっと表示：既存の .reveal を使う場合の例
   使いたい要素に .reveal を付け、段階表示は style="--d:160ms" 等で */
.js-ready .recruit-title.reveal,
.js-ready .recruit-body.reveal { transition-delay: var(--d, 0ms); }

/* 任意：色＋太さも少しだけ控えめにしたい場合 */
.recruit-title .recruit-h2 {
  color: #222;
  font-weight: 600;
}


/* 見出しの“変な改行”対策：行バランス＋行長の上限を軽く設定 */
.recruit-title .recruit-h2{
  text-wrap: balance;                 /* まずはブラウザに行のバランス取りを任せる */
  max-width: clamp(20ch, 32vw, 28ch); /* 長すぎる行を抑えて不自然な改行を回避 */
}

/* 超ワイド画面のときだけ、さらに破綻しにくく（任意） */
@media (min-width: 1440px){
  .recruit-title .recruit-h2{
    max-width: 26ch;
  }
}



/* ================================
   Recruit: 募集要項（ストーリー見出しと統一）
================================ */
.recruit-specs{
  margin: clamp(40px, 8vw, 80px) 0;
}
.recruit-specs .specs-wrap{
  max-width: min(1000px, 88vw);
  margin: 0 auto;
}

/* タイトル（ストーリー見出しと同じ書式） */
.recruit-specs .recruit-title{
  text-align: center;
  margin: 0 0 clamp(22px, 4vw, 32px);
}
.recruit-specs .recruit-h2{
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .02em;
  color: #222;
  margin: 0;
}

/* 定義リスト：2カラム（左ラベル / 右本文） */
.specs-list{
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
}
.specs-list .row{
  display: grid;
  grid-template-columns: minmax(8em, 12em) 1fr;
  align-items: start;
  column-gap: clamp(16px, 3vw, 28px);
  padding: clamp(14px, 2.6vw, 18px) 0;
  border-top: 2px solid #2f6fa6;
}
.specs-list .row:last-child{
  border-bottom: 2px solid #2f6fa6;
}
.specs-list dt,
.specs-list dd{ margin: 0; }
.specs-list dt{
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  color: #2d281f;
}
.specs-list dd{
  color: #2d281f;
  line-height: 1.9;
}

/* 小さめ注記 */
.specs-list .note{
  display: inline-block;
  font-size: .9em;
  color: #666;
  margin-top: .25em;
}

/* スマホ：縦積み＋住所改行 */
@media (max-width: 768px){
  .specs-list .row{
    grid-template-columns: 1fr;
    row-gap: .35em;
    padding: 14px 0;
  }
  .specs-list dt{ opacity: .85; }

  /* 株式会社 常栄技巧 の半角スペースを保証 */
  .sp-nbsp{ display:inline-block; width:.35em; }

  /* 住所の強制改行 */
  .sp-br::before{
    content:"\A";
    white-space:pre;
  }
}

/* ふわっと表示 */
.js-ready .recruit-specs .reveal{
  transition-delay: var(--d, 0ms);
}
/* 募集要項の見出しは幅制限を解除して中央配置 */
.recruit-specs .recruit-title { text-align:center; }
.recruit-specs .recruit-h2 { max-width:none !important; display:inline-block; }



/* ================================
   Recruit: 応募案内（締めくくりテキスト＋矢印）
================================ */
.recruit-contact {
  margin: clamp(40px, 10vw, 80px) 0;
  text-align: center;
}

.recruit-contact .contact-text {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.8;
  color: #222;
  margin-bottom: clamp(20px, 4vw, 32px);
}

.recruit-contact .contact-arrow svg {
  width: clamp(36px, 4vw, 48px);
  height: auto;
  stroke: #2f6fa6;  /* 青系で統一 */
  transition: transform 0.3s ease;
}

.recruit-contact .contact-arrow svg:hover {
  transform: translateY(4px);
}




/* ================================
   Contact blocks（整頓版）
================================ */

/* ラッパー */
.contact-wrap{
  max-width: min(980px, 90vw);
  margin: 0 auto;
  text-align: center;
}

/* セクション共通 */
.contact-block{
  /* ── 調整つまみ ───────────────────────── */
  --gap-section:     clamp(48px, 8vw, 120px);   /* Phone と Form の“間” */
  --gap-title:       clamp(6px, 2vw, 12px);     /* 英語と見出しの“間” */
  --gap-title2tel:   clamp(16px, 3.5vw, 32px);  /* 見出し → 電話番号 */
  --gap-title2lead:  clamp(16px, 3.5vw, 32px);  /* 見出し → 導入文 */

  --fs-kicker: clamp(12px, 1.2vw, 14px);
  --fs-title:  clamp(22px, 3.4vw, 40px);
  --fs-tel:    clamp(28px, 6vw, 56px);
  --fs-note:   clamp(14px, 1.6vw, 16px);
  --fs-lead:   clamp(15px, 1.8vw, 18px);
  /* ─────────────────────────────────────── */

  color:#222;
  margin:0;
}

/* Phone と Form の“間” */
.contact-block + .contact-block{ margin-top: var(--gap-section) !important; }

/* 見出し（英語＋日本語） */
.contact-title{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: var(--gap-title);
  margin:0 !important;
}
.contact-kicker{ font-size: var(--fs-kicker); letter-spacing:.08em; color:#2f6fa6; }
.contact-h2{ font-size: var(--fs-title); line-height:1.3; font-weight:700; margin:0 !important; }

/* 見出し → 電話番号 / 導入文 の距離（ここだけ触れば余白が変わる） */
.contact-title + .contact-tel{  margin-top: var(--gap-title2tel)  !important; }
.contact-title + .contact-lead{ margin-top: var(--gap-title2lead) !important; }

/* 電話ブロック */
.contact-tel{
  font-size: var(--fs-tel);
  font-weight:700;
  letter-spacing:.02em;
  margin:.05em 0 .2em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.contact-tel a{ color:inherit; text-decoration:none; border:0; }
.contact-tel a:hover{ opacity:.85; }
.contact-note{ font-size: var(--fs-note); opacity:.9; margin:.3em 0 0; }

/* フォーム導入文 */
.contact-lead{
  font-size: var(--fs-lead);
  line-height:1.9;
  margin: var(--gap-title2lead) 0 clamp(16px, 3.2vw, 22px);
}
.contact-lead .req{ color:#d23a3a; font-weight:700; }
.nowrap{ white-space: nowrap; }

/* reCAPTCHA 注意書き */
.recaptcha-note{
  font-size: clamp(12px,1.6vw,14px);
  color:#666;
  margin: clamp(14px,3vw,22px) 0 0;
}

/* スマホ/タブレット微調整 */
@media (max-width: 768px){
  .contact-h2{ line-height:1.45; }
  .contact-lead{ line-height:2; }
  .contact-note{ line-height:1.6; }
  .recaptcha-note{ line-height:1.5; }
}

/* テーマ由来の勝手なgap対策（保険） */
.contact-block .wp-block-group__inner-container,
.contact-wrap{ gap:0 !important; }



/* =========================================
  ピン留めズーム・ヒーロー v3.7｜CSS（#heroPin に固定）
  ※ウィジェット側のHTMLが何であってもサイズが変わらないようロック
========================================= */

/* 変数（JSでも上書きされるが初期値を置く） */
#heroPin{
  --pin-height: 240vh;
  --pin-vh: 100dvh;
  --pin-top: 0px;
  --start-scale: 1.60;
  --end-scale: 1.00;
}

/* フルブリード化・ピン領域 */
#heroPin{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  max-width:none;
  position:relative;
  isolation:isolate;
  height: var(--pin-height);
  background:#fff;
}

/* ステージ（固定・後段切替） */
#heroPin .pin-zoom__stage{
  position:relative;
  width:100%;
  height:var(--pin-vh);
  overflow:hidden;
  z-index:0;
}
#heroPin .pin-zoom__stage.is-fixed{
  position:fixed;
  top:var(--pin-top);
  left:0; right:0;
  width:100vw;
  height:var(--pin-vh);
}
#heroPin .pin-zoom__stage.is-after{
  position:absolute;
  left:0; right:0;
  top: calc(100% - var(--pin-vh));
}

/* 画像（初期から最大拡大にしてフリッカー防止） */
#heroPin .pin-zoom__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 55%;
  transform: translateZ(0) scale(var(--start-scale));
  transform-origin:center center;
  opacity:1;
  transition: opacity .5s linear;
  will-change: transform, opacity;
  backface-visibility:hidden;
}
html:not(.is-ready) #heroPin .pin-zoom__img{ transition:none !important; }

/* コピー（中央寄せ） */
#heroPin .pin-zoom__copy{
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding:clamp(16px, 4cqw, 40px);
  color:#fff; transition:color .6s ease;
  text-align:center;
}
#heroPin .pin-zoom__copy.is-dark{ color:#111; }

/* テキスト：ここを“最優先固定”（!important） */
#heroPin .pin-zoom__body{ width:min(92vw, 760px); margin-inline:auto; }
#heroPin .pin-zoom__body h2{
  font-size: clamp(28px, 6vw, 56px) !important;
  line-height: 1.18 !important;
  margin: 0 0 1em !important;
}
#heroPin .pin-zoom__body p{
  font-size: clamp(15px, 2.2vw, 20px) !important;
  line-height: 1.9 !important;
  margin: 0;
  opacity: .92;
}

/* SPのみ改行 */
#heroPin .br--sp{ display:none; }
@media (max-width: 767px){
  #heroPin .br--sp{ display:inline; }
  #heroPin .br--sp::before{ content:"\A"; white-space:pre; }
}

/* ロゴ */
#heroPin .pin-zoom__logo{
  margin:3em auto 0;
  width:min(200px, 32vw);
  opacity:0; transform:translateY(16px);
  transition:opacity .8s ease, transform .8s ease;
  display:block; text-align:center;
}
#heroPin .pin-zoom__logo img{ display:block; margin:0 auto; }
#heroPin .pin-zoom__logo.is-show{ opacity:1; transform:translateY(0); }

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce){
  #heroPin{ height:auto; }
  #heroPin .pin-zoom__stage{ position:relative !important; height:auto !important; }
  #heroPin .pin-zoom__img{ position:relative; transform:none !important; height:70vh; }
  #heroPin .pin-zoom__copy{ color:#111 !important; }
  #heroPin .pin-zoom__logo{ opacity:1 !important; transform:none !important; }
}

/* SWELL想定：ヘッダー重なり対策 */
.l-header{ position:relative; z-index:1000; }

/* 初期だけtransition無効、transform上書き防止 */
img.pin-zoom__img{ transition-property: opacity !important; }

/* 追加の“絶対ロック”（SWELLのSPメニュー状態が付いても勝つ） */
html[data-spmenu] #heroPin .pin-zoom__body h2{ 
  font-size: clamp(28px, 6vw, 56px) !important;
  line-height: 1.18 !important;
}
html[data-spmenu] #heroPin .pin-zoom__body p{
  font-size: clamp(15px, 2.2vw, 20px) !important;
  line-height: 1.9 !important;
}

/* メニュー内の見出しをリセット（外への波及を防ぐ保険） */
.p-spMenu :is(h1,h2,h3,h4,h5,h6){ font: inherit; margin: 0; }