:root{
  --ink:#1a1a1a; --ink-weak:#666; --bg:#fff; --muted:#f3f4f6; --line:#e7e7ee;
  --brand:#2a4b5e; --accent:#c6a56a;
  --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.08);
  --z-header:1000; --z-cv:1100; --z-hero-overlay:500;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--ink);background:var(--bg);font-family:'Noto Sans JP',system-ui,-apple-system,Segoe UI,Roboto,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;line-height:1.75;padding-bottom:92px}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1200px,92%);margin:0 auto}
.skip-link{position:absolute;left:-999px}
.skip-link:focus{position:fixed;left:16px;top:16px;background:#000;color:#fff;padding:8px 12px;z-index:var(--z-header)}
.serif{font-family:'Noto Serif JP',serif}
.faint{opacity:.08;font-size:clamp(42px,9vw,106px);line-height:1;display:block}
.en{display:block;font-weight:700;letter-spacing:.04em}
.large{font-size:clamp(20px,3vw,36px)}

/* Header */
.site-header{position:sticky;top:0;left:0;right:0;z-index:var(--z-header);background:rgba(255,255,255,1);border-bottom:1px solid rgba(0,0,0,.04);transition:background .25s,backdrop-filter .25s,box-shadow .25s}
.site-header.is-scrolled{background:rgba(255,255,255,.82);backdrop-filter:saturate(130%) blur(10px);box-shadow:0 6px 18px rgba(0,0,0,.06)}
.header__inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo img{height:28px}
/* ベース：ドロップダウン用リスト */
.gnav__list{
  list-style:none;
  margin:0;
  padding:10px;
  position:absolute;
  right:4%;
  top:60px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
  display:none;
}
.gnav__list li{border-bottom:1px solid var(--line)}
.gnav__list li:last-child{border-bottom:none}
.gnav__list a{display:block;color:var(--ink);padding:10px 14px}

/* 旧：.gnav.gnav--open .gnav__list はモバイルでは使っていないのであってもなくてもOK */
.gnav.gnav--open .gnav__list{display:block}

/* =========================
   PCレイアウト（1025px〜）
   ========================= */
@media (min-width: 1025px){
  .gnav__list li{border:none}
  .gnav__list{
    position:static;
    display:flex;
    gap:24px;
    padding:0;
    background:transparent;
    border:none;
    box-shadow:none;
  }
  .gnav__list a{padding:6px 0}

  /* PC ではハンバーガー & ドロワーを隠す */
  .gnav__toggle { display: none !important; }
  #m-drawer     { display: none !important; }
}

/* =========================
   SP＋タブレット（〜1024px）
   ハンバーガー＋ドロワー
   ========================= */
@media (max-width: 1024px){
  .header__inner{ position: relative; }

  /* ハンバーガー：右上固定 */
  .gnav__toggle{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    background:transparent;
    border:0;
    padding:0;
    cursor:pointer;
    outline:none;
    box-shadow:none;
    -webkit-appearance:none;
    appearance:none;
    -webkit-tap-highlight-color:transparent;
    color:#555;
    font-size:22px;
    line-height:1;
    z-index:1100;
  }

  /* ヘッダー内の gnav__list は使わないので隠す */
  .gnav__list{
    display:none;
  }

  /* ドロワー本体 */
  #m-drawer{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100vh;
    background:#f2f2f2;
    transform:translateY(-100%);
    transition:transform .35s ease;
    z-index:1099;
    overflow:auto;
    padding:40px 20px 32px;
  }
  #m-drawer[hidden]{ display:none; }
    #m-drawer.is-visible{
    transform:translateX(0);
  }

  /* ドロワー内のメニュー */
  .m-drawer__list{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:16px;
  }
  .m-drawer__list a{
    display:block;
    font-size:18px;
    color:#222;
    text-decoration:none;
    text-align:center;
  }
}


/* 画像を少し縦長に（以前より高さアップ） */
.cards--news .card .card__thumb{
  aspect-ratio: 4 / 3;   /* ← 高さを増やす。以前より縦長寄り */
}

.cards--news .card .card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;     /* 余白なくきれいにトリミング */
  display: block;
}

/* 画面が大きいときはさらに少し背を高く（任意） */
@media (min-width: 1024px){
  .cards--news .card .card__thumb{
    aspect-ratio: 3 / 2; /* PCではもう少し縦を伸ばす */
  }
}



/* Hero */
.hero{
  position:relative;
  overflow:hidden}
.hero__media{
  position:relative
}
.hero__copy{position:absolute;inset:auto 0 10% 0;color:#fff;text-shadow:0 8px 22px rgba(0,0,0,.35)}
.hero__title{font-size:clamp(28px,4.2vw,56px);margin:0 0 8px}
.hero__lead{margin:0}
.hero__cta{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}

.dots-canvas{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

/* コンテンツは確実に前面へ */
header, main, footer, .cv-bar{
  position: relative;
  z-index: 2;
}

/* スタッキングコンテキストを固定化（z-indexの“抜け”防止） */
html, body{ position: relative; }
body{ isolation: isolate; }

/* ==== TOP ニュースのカラーライン ==== */
.cards--news .card .card__thumb{
  position: relative;
  display: block;
  margin: 0 0 6px;   /* 画像とメタの隙間を少しだけ */
  overflow: hidden;
}

/* 画像下に細いバー */
.cards--news .card .card__thumb::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 8px;              /* バーの太さ（必要なら調整） */
  background: var(--newsBar, #F0C792);
}

/* 1〜5件目の色を割り当て、以降はループ */
.cards--news .card:nth-child(5n+1){ --newsBar: #F0C792; } /* 1,6,11... */
.cards--news .card:nth-child(5n+2){ --newsBar: #93A397; } /* 2,7,12... */
.cards--news .card:nth-child(5n+3){ --newsBar: #9DADB4; } /* 3,8,13... */
.cards--news .card:nth-child(5n+4){ --newsBar: #C99594; } /* 4,9,14... */
.cards--news .card:nth-child(5n){    --newsBar: #BAC4BF; } /* 5,10,15... */



/* when piled & fixed to bottom-left after animation */
.dots-canvas.is-fixed{position:fixed;width:auto;height:auto;left:0;bottom:0;top:auto;right:auto;transform:none}

/* Sections */
.section{
  padding:100px 0
}
.section__title{margin:0 0 18px}
.section__hd{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}
.section__ft{display:flex;justify-content:center;margin-top:20px}
.tabs{list-style:none;margin:0;padding:0;display:flex;gap:10px}
.tabs button{padding:8px 14px;border:1px solid var(--line);background:#fff;cursor:pointer}

/* News */
.cards{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:
  1fr;gap:16px
}
.card{

  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow)
}
.card__thumb{aspect-ratio:13/8;overflow:hidden}
.card__thumb img{width:100%;height:100%;object-fit:cover}
.card__meta{
  display:flex;
  align-items:center;
  padding-top:10px;
  padding-bottom:10px;
  color:var(--ink-weak);
  font-size:13px
}
.card__title{font-size:18px;margin:0 14px 8px}
.card__excerpt{

  color:var(--ink-weak)}
@media(min-width:768px){.cards--news{grid-template-columns:repeat(4,1fr);gap:20px}}

/* Photo band */
.band--photo{background:#000;color:#fff}
.band__inner{position:relative;padding:72px 0}
.band__copy{max-width:720px}

/* Projects */
.carousel{position:relative}
.carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:80%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px}
.carousel__track > *{scroll-snap-align:center}
@media(min-width:768px){.carousel__track{grid-auto-columns:33.33%}}

.work__thumb{aspect-ratio:1/1;overflow:hidden;border-bottom:1px solid var(--line)}
.work__thumb img{width:100%;height:100%;object-fit:cover}
h3.work__title{
  margin: 0px;
}
.work__title{
  font-size: 14px;
}
.carousel__nav{position:absolute;top:50%;transform:translateY(-50%);background:#fff;border:1px solid var(--line);border-radius:999px;width:42px;height:42px;display:grid;place-items:center;box-shadow:var(--shadow)}
.carousel__nav--prev{left:-10px}.carousel__nav--next{right:-10px}

/* === Projects：SPは1枚表示にする === */
@media (max-width: 767px){
  /* 横スクロール前提（既にflexならOK） */
  .section--projects .carousel__track{
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px;           /* 端の余白（任意） */
  }

  /* 各アイテムは1画面分の幅に固定 */
  .section--projects .work{
    flex: 0 0 100%;
    max-width: 100%;
    scroll-snap-align: center;
  }

  /* 画像のはみ出し防止 */
  .section--projects .work__thumb,
  .section--projects .work__thumb img{
    width: 100%;
    height: auto;
    display: block;
  }

  /* モバイルは左右ナビを非表示（必要なら） */
  .section--projects .carousel__nav{
    display: none;
  }
}


/* About */
.about{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.about__copy p{color:var(--ink-weak)}
@media(min-width:768px){.about{grid-template-columns:1.1fr .9fr;gap:36px}}

/* Service */
.section--service{background:#c9ccd6}
.section--service .on-gray .en{color:#333}
.service-circles{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:18px}
.service-circle{text-align:center}
.circle{width:220px;height:220px;margin:0 auto 14px;border-radius:999px;background:#fff;border:6px double #ddd;display:grid;place-items:center;box-shadow:var(--shadow)}
.circle span{font-weight:700}
.service-circle p{max-width:420px;margin:0 auto;color:#333}
@media(min-width:768px){.service-circles{grid-template-columns:repeat(3,1fr);gap:24px}}

/* Flow */
.flow__list{counter-reset:step;list-style:none;margin:0;padding:0;max-width:560px}
.flow__list li{position:relative;padding:16px 16px 16px 54px;border-left:2px solid var(--line)}
.flow__list li::before{counter-increment:step;content:counters(step, '.') ;position:absolute;left:-18px;top:16px;width:36px;height:36px;border-radius:999px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-weight:700;box-shadow:var(--shadow)}

/* Instagram grid */
.insta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.insta-grid .ph{aspect-ratio:1/1;background:linear-gradient(180deg,#eee,#ddd);border:1px solid var(--line);border-radius:8px}
@media(min-width:768px){.insta-grid{grid-template-columns:repeat(6,1fr)}}

/* Footer */
.site-footer{
  background:#eef0f4;
  border-top:1px solid var(--line);
 
}
.footer{display:grid;grid-template-columns:1fr;gap:24px;padding:28px 0}
.footer__links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer__addr{color:var(--ink-weak)}
.footer__copy{border-top:1px solid var(--line);text-align:center;padding:12px 0;color:var(--ink-weak)}
@media(min-width:768px){.footer{grid-template-columns:1fr 1fr}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid transparent;font-weight:700;white-space:nowrap}
.btn--primary{background:var(--brand);color:#fff}
.btn--primary:hover{filter:brightness(.95);text-decoration:none}
.btn--ghost{background:#fff;color:#000;border-color:var(--line)}
.btn--ghost:hover{background:#f9f9fb;text-decoration:none}

/* CV Bar */
.cv-bar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-cv);background:rgba(20,20,20,.9);color:#fff}
.cv-bar__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.cv-bar__actions{display:flex;gap:8px}
@media(max-width:767.98px){body{padding-bottom:66px}.cv-bar__inner{flex-direction:column;align-items:stretch}.cv-bar__actions{justify-content:space-between}}

/* Utilities */
[id]{scroll-margin-top:84px}
@media(min-width:768px){[id]{scroll-margin-top:96px}}
@media(min-width:1201px){.header__inner{padding:18px 0}}

/* Motion respect */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
  .dots-canvas{display:none}
}

.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  background: rgba(255,255,255,1);
  border-bottom: 1px solid rgba(0,0,0,.04);
  transition: background .25s, backdrop-filter .25s, box-shadow .25s;
}
.site-header.is-scrolled{
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(130%) blur(10px);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  z-index: 9999;
}


:root{
  --ink:#1a1a1a; --ink-weak:#666; --bg:#fff; --muted:#f3f4f6; --line:#e7e7ee;
  --brand:#2a4b5e; --accent:#c6a56a;
  --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.08);
  --z-header:1000; --z-cv:1100; --z-hero-overlay:500;
  --header-h: 64px;
}
@media (min-width:768px){
  :root{ --header-h: 72px; }
}

body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:'Noto Sans JP',system-ui,-apple-system,Segoe UI,Roboto,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
  line-height:1.75;
  padding-bottom: 92px;           /* 既存のCVバー分はそのまま */
}

/* ===== Hero slider ===== */
.hero{position:relative;overflow:hidden}
.hero__media{position:relative}
.hero__track{position:relative;height:clamp(420px,56vw,720px);overflow:hidden}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.hero__slide.is-active{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover;display:block}


/* 中央ロゴ（幅197px固定） */
.hero__logo{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:197px;
  height:auto;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.35));
  pointer-events:none;
  z-index:3;
}


/* インジケーター：中央・正方形 */
.hero__dots{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; gap:10px; z-index:3;
}
.hero__dots button{
  width:12px; height:12px;
  border-radius:2px; border:0;
  background:rgba(255,255,255,.55);
  cursor:pointer; outline:none;
}
.hero__dots button[aria-selected="true"]{
  background:#fff;
}

/* 右下のナビ（矢印＆停止）。背景なし・シンプル */
.hero__navwrap{
  position:absolute; right:18px; bottom:14px; z-index:3;
  display:flex; gap:12px; align-items:center;
}
.hero__nav{
  background:transparent; border:none; color:#fff;
  font-size:22px; line-height:1; cursor:pointer;
  padding:8px 10px; border-radius:6px;
}
.hero__nav:hover{ text-shadow:0 0 8px rgba(0,0,0,.35); }
.hero__nav:focus-visible{ outline:2px solid rgba(255,255,255,.8); outline-offset:2px; }

/* コンテナ（5枚1段を確保） */
.container--news{
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 24px;
}

/* 見出し */
.section__title--news{
  position: relative;
  margin: 0 0 30px;  /* ←指定通り */
}
.section__title--news .ja{
  display:inline-block; font-family:"Noto Serif JP",serif; font-weight:600;
  font-size:72px; line-height:1.1; color:#111; margin-right:22px;
}
.section__title--news .sub{
  display:inline-block; font-size:20px; line-height:1.2; color:#111;
  position:relative; letter-spacing:.06em;
}

/* 見出しヘッダ行：縦積み・左基準（指定通り） */
.section--news .section__hd{
  /* padding-right: calc(var(--news-illust-w) + 24px); */ /* ←無効化 */
  display:flex;
  flex-direction: column;       /* ←指定通り */
  align-items: baseline;        /* ←指定通り */
  position:relative;
}

/* 支給SVG線の位置 */
.news-underline-obj{
  position:absolute;
  left:8px;
  top: calc(100% - 10px);
  width:300px;
  height:auto;
  pointer-events:none;
  user-select:none;
  display:block;
}

/* タブ（線の直下） */
.tabs--news{
  display:flex; gap:10px;
  margin: 28px 0 24px;
  padding:0; list-style:none;
}
.tabs--news button{
  appearance:none; border:0; background:transparent; cursor:pointer;
  padding:8px 14px; font-size:16px; color:#111;
}
.tabs--news [aria-selected="true"]{ background:#969696; color:#fff; }

/* 右イラスト（縦積み配置でも同様に出す） */
.section--news{ --news-illust-w: 340px; }
.news-illust{
  position:absolute; right:0; top:-6px; width:var(--news-illust-w); height:auto;
  pointer-events:none; z-index:0;
}

/* カード5枚 */
.cards--news{
  position:relative; z-index:1;
  display:grid; gap:32px; grid-template-columns:repeat(5,1fr);
}
@media (max-width:1200px){ .cards--news{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px){  .cards--news{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){  .cards--news{ grid-template-columns:1fr; } }

/* figure の余白は全て 0（指定内容をCSS化） */
.cards--news .card__thumb{ margin:0; }
.cards--news .card__thumb img{
  width:100%; height:190px; object-fit:cover; display:block; border-radius:4px;
}

/* メタ・本文 */
.cards--news .card__meta{
  display:flex; 
  justify-content:space-between; 
  gap:10px;
  font-size:13px; 
  color:#656565; 
  margin-top:8px;
}
.cards--news .card__title{ font-size:16px; margin:.45rem 0; line-height:1.6; }
.cards--news .card__excerpt{ font-size:14px; color:#333; }

/* 一覧ボタン */
.btn--more{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:220px; height:44px; padding:0 18px;
  background:#656565; color:#fff; border-radius:24px; border:0;
  text-decoration:none; font-size:15px;
}
.section__ft{ display:flex; justify-content:center; margin-top:36px; }

/* ===== News 見出しの線（調整用のCSS変数） ===== */
:root{
  --news-line-width: 210px;   /* ← 線の「長さ」。数値を変えると横幅が変わります */
  --news-stroke: 1.2;         /* ← 線の「太さ」。px 単位 */
}

/* 線の位置・サイズ（デザイン合わせ） */
.news-underline{
  position:absolute;
  left: 8px;
  top: calc(100% - 0px);
  width: var(--news-line-width);
  height: auto;
  overflow: visible;
}
.news-underline__path{
  stroke: #6f6f6f;
  stroke-width: var(--news-stroke);
  stroke-linecap: round;

  /* 初期は未描画（後述JSで dashoffset を 0 に） */
  stroke-dasharray: var(--news-dash, 600);
  stroke-dashoffset: var(--news-dash, 600);
  transition: stroke-dashoffset 1.1s cubic-bezier(.22,.61,.36,1);
}
.section--news.is-inview .news-underline__path{
  stroke-dashoffset: 0;
}

/* ===== カードの見た目（角丸なし・シャドウなし・テキスト折返し禁止） ===== */
.cards--news .card{
  background: transparent;   /* 下地は親に任せるなら透明、白にしたいなら #fff */
  border-radius: 0;          /* 角丸なし */
  box-shadow: none;          /* シャドウなし */
}

.cards--news .card__thumb{ margin: 0; }
.cards--news .card__thumb img{
  width:100%;
  height:190px;
  object-fit:cover;
  display:block;
  border-radius: 0;          /* 角丸なし */
  box-shadow: none;          /* シャドウなし */
}

/* メタ・タイトル・抜粋を1行に揃え、はみ出しは…に */
.cards--news .card__meta,
.cards--news .card__title,
.cards--news .card__excerpt{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 必要ならフォントサイズも微調整（長文で折り返させたくない時） */
.cards--news .card__meta{ font-size: 13px; color:#656565; margin-top:8px; }
.cards--news .card__title{ font-size: 16px; line-height: 1; margin: .6rem 0 .5rem; }
.cards--news .card__excerpt{ font-size: 14px; line-height: 1; color:#333; }

/* News 見出し：Inter 40px に固定 */
.section__title--news .ja{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 40px;
  font-weight: 600;   /* お好みで 500/700 に調整可 */
  line-height: 1.2;
}

/* ===== Feature Message (topsection3) ===== */
.kv-message{
  position: relative;
  height: 640px;
  overflow: hidden;

  /* ← 親セクションにだけ左パディングを持たせる */
  padding-left: clamp(16px, 8vw, 140px);
}

.kv-message__bg{
  position: absolute;
  inset: 0;
  background: url("./img/topsection3.png") center center / cover no-repeat;
}

/* containerの左右パディングは打ち消す（ズレ防止） */
.kv-message .container{
  padding-left: 0;
  padding-right: 0;
  padding-top: 300px;
}

/* タイトル */
.kv-message__inner{ position: relative; height: 100%; }
.kv-message__title{
  left: 0;                 /* ← 親のpadding-left基準で0に */
  bottom: 180px;           /* 必要なら微調整 */
  margin: 0;
  color: #fff;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.7;
  letter-spacing: .02em;
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
  z-index: 1;
}

/* 背景なしの下段テキスト */
.kv-message__bar{
  left: 0; right: 0; bottom: 0;
  min-height: 88px;
  z-index: 1;
  padding-bottom:50px;
}
.kv-message__text{
  margin: 0;
  /* ← 親のpadding-leftが効くので左右0でOK */
  padding: 14px 0 22px 0;
  color: #fff;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.8;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
  max-width: 980px;        /* 不要なら削除 */
}

/* レスポンシブ微調整（必要なら） */
@media (max-width: 767px){
  .kv-message__title{ bottom: 190px; }
  .kv-message__text{ line-height: 1.7; }
}
@media (max-width: 600px){
  .kv-message{ height: 520px; }
  .kv-message__title{ font-size: 28px; bottom: 200px; }
  .kv-message__text{ font-size: 15px; }
  .kv-message .container{
  padding-top: 80px;
}

@media (max-width: 767px){
  .kv-message{
  height: auto;
}


}

}

/* コンテナ */
.container--projects{ max-width:1200px; margin:0 auto; padding-inline:24px; }

/* 背景の大きな Projects */
.projects__hd{ position:relative; }
.projects__ghost{
  position:absolute; left:0; top:-34px; z-index:0;
  font-family:"Playfair Display", serif; font-weight:400;
  font-size:128px; color:#F6F6F6; line-height:1; pointer-events:none;
}

/* 見出し行 */
.projects__row{ 
  position:relative; 
  z-index:1; 
  margin-bottom:100px; 
}
.projects__labelwrap{ 
  position:relative; 
  display:inline-block;
  margin-top:60px;

}

/* 見出しの英字/和文 */
.projects__label-en{
  font-family:"Inter", system-ui, sans-serif; font-weight:600;
  font-size:40px; color:#111; margin-right:12px;
}
.projects__label-ja{ font-size:20px; color:#111; position:relative; top:4px; }

/* 手書き線（Newsと同様に描画） */
:root{ --proj-line-width:300px; --proj-stroke:1.5; }
.proj-underline{
  position:absolute; left:6px; top:calc(100% - 8px);
  width:var(--proj-line-width); height:auto; overflow:visible;
}
.proj-underline__path{
  stroke:#6f6f6f; stroke-width:var(--proj-stroke); stroke-linecap:round;
  stroke-dasharray:var(--proj-dash,600); stroke-dashoffset:var(--proj-dash,600);
  transition:stroke-dashoffset 1.1s cubic-bezier(.22,.61,.36,1);
}
.section--projects.is-inview .proj-underline__path{ stroke-dashoffset:0; }

/* イラストをタイトル近くに寄せる（位置は微調整しやすいよう変数化） */
.projects__labelwrap{ 
  --illus-left: 280px; 
  --illus-top: -8px; 
}
.projects__illus{
  position:absolute; left:var(--illus-left); top:var(--illus-top);
  width:min(200px,24vw); height:auto; pointer-events:none;
}

/* カルーセルの3枚レイアウト（中央を大きく） */
.projects__carousel{ position:relative; margin-top:24px; }
.projects__track{
  display:flex; align-items:flex-start; justify-content:center; gap:64px;
}

/* 内部パディングを0に（カード内） */
.work a{ display:block; position:relative; color:#fff; text-decoration:none; padding:0; }

/* 左右：280×330 ／ 中央：335×385 */
.work--sm{ width:280px; }
.work--lg{ width:335px; }

.work__thumb{
  width:100%;
  height: auto;
  aspect-ratio: auto;                /* 手動で高さを指定するための上書き */
  overflow:hidden;
}

/* 高さ固定（画像は cover） */
.work--sm .work__thumb{ height:330px; }
.work--lg .work__thumb{ height:385px; }
.work__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* タイトル帯（半透明カラー指定） 
.work__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:5px 16px; backdrop-filter:saturate(120%);
}
.tone-pink  .work__cap{ background:rgba(220,196,207,.5); } 
.tone-green .work__cap{ background:rgba(147,163,151,.5); } 
.tone-gold  .work__cap{ background:rgba(240,199,146,.5); }  */

.work__cat{
  font-size: 12px;
}

.work__loc{ 
  display:block; 
  font-size:12px; 
  opacity:.9;}
.work__title{ font-size:14px; font-weight:500; line-height:1.5; }

/* ナビを“外側”に出し、色を合わせる */
.projects__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:#F0F0F0; border:1px solid #D6D6D6; color:#7A7A7A;
  display:grid; place-items:center; cursor:pointer;
}
.projects__nav--prev{ left:-64px; }   /* ← 外側へ */
.projects__nav--next{ right:-64px; }  /* ← 外側へ */
.projects__nav:hover{ background:#EAEAEA; color:#555; }

/* work__thumb の左右マージンを 0 */
.work__thumb{
  margin-left: 0;
  margin-right: 0;
}
/* もし figure に共通の余白がある場合は完全に 0 に */
.work__thumb{ margin: 0; }  /* 両方必要ならこちらだけでもOK */

work__cat

/* ===== About section ===== */
.about-sec{
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 8vw, 80px) 0;
  background:#fff;
}
.about-sec__inner{
  position: relative;
  display: grid;
  grid-template-columns: minmax(380px, 560px) 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}

/* 右上スケッチ背景（セクション背景として配置） */
.about-sec__bg{
  position: absolute;
  inset: 0;
  background: url("./img/aboutback.png") top right / min(56vw,780px) auto no-repeat;
  opacity: .25;              /* 背景なので薄め */
  pointer-events: none;
  z-index: 0;
  top:-160px;
}

/* 左：画像カード（角丸＋影板） */
.about-card{ position: relative; z-index: 1; }
.about-card__shadow{
  position: absolute;
  left: -22px; top: 22px;
  width: 86%; height: 86%;
  border-radius: 24px;
  background: #5a5a5a;
  filter: blur(0.2px);
}
.about-card__img{
  position: relative;
  display:block;
  width: 100%; height: auto;
  border-radius: 24px;
}

/* 右：テキスト群 */


.about-copy__title{
  margin: 0 0 10px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  color: #111;
  margin-top: 100px;
}
.about-copy__underline{
  display:block;
  width: 140px; height: 4px;
  background:#111;
  border-radius: 2px;
  margin-bottom: clamp(16px, 3vw, 24px);
}
.about-copy__body p{
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color:#111;
}
.about-copy__more{
  display:inline-flex; align-items:center; gap:10px;
  margin-top: 18px;
  color:#111; text-decoration:none; 
  font-size:20px;
}
.about-copy__more .arrow{ transform: translateY(1px); }

/* 左下カーブ（手書き風） */
/* カーブ本体（既存のままでOK） */
.about-curve{
  position: absolute;
  left: clamp(24px, 6vw, 72px);
  bottom: clamp(18px, 6vw, 36px);
  width: clamp(300px, 40vw, 560px);
  height: auto;
  overflow: visible;
  z-index: 0;
}
:root{
  --about-stroke: 2.2;   /* 太さはここで調整 */
}
.about-curve__path{
  stroke: #1a1a1a;
  stroke-width: var(--about-stroke);
  stroke-linecap: round;
  stroke-dasharray: var(--about-dash, 900);
  stroke-dashoffset: var(--about-dash, 900);
  transition: stroke-dashoffset 1.2s cubic-bezier(.22,.61,.36,1);
}




/* レスポンシブ微調整 */
@media (max-width: 960px){
  .about-sec__inner{ grid-template-columns: 1fr; }
  .about-copy__ghost{ position:absolute; right:-6px; top:-8px; font-size: 96px; }
}

/* ===== About: 背景の右上寄せを数値で微調整できるように ===== */
.about-sec{
  /* 既存の pad はそのまま。背景のオフセットだけ可変に */
  --about-bg-x: -80px;   /* → 右へ寄せる: 負の値を大きくするとさらに右へ（例: -120px） */
  --about-bg-y: -40px;   /* ↑ 上へ寄せる: 負の値を大きくするとさらに上へ（例: -80px） */
}

/* 背景画像：右上／サイズは大きめ、opacityは無し */
.about-sec__bg{
  position: absolute;
  inset: 0;
  background-image: url("./img/aboutback.png");
  background-repeat: no-repeat;
  background-size: min(52vw, 760px) auto;        /* 必要に応じて 50–60vw で微調整 */
  background-position: right var(--about-bg-x) top var(--about-bg-y);
  pointer-events: none;
  z-index: 0;                                     /* ← 最背面（背景画像） */
}

/* ===== 見出しの重なり順を固定 ===== */
.about-copy{ position: relative; z-index: 1; }     /* テキストブロック自体は背景より前 */

.about-copy__ghost{
  position: absolute;
  right: clamp(-6px, -2vw, -12px);
  top: -100px;
  font-family: "Playfair Display", serif;
  font-size: clamp(64px, 12vw, 156px);
  line-height: 1;
  color: #EFEFEF;
  white-space: nowrap;         /* ← 改行しない */
  user-select: none;
  pointer-events: none;
  z-index: 1;                  /* ← 背景の上、黒文字の下 */
}

/* 黒文字の “About us” を一番手前に */
.about-copy__title{
  position: relative;          /* ← z-index を有効に */
  z-index: 2;                  /* ← 最前面（黒文字） */
  margin: 0 0 10px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  color: #111;
  margin-top: 100px;
}

/* 参考：左の画像カードはそのまま（上に被ってOKなら） */
.about-card{ position: relative; z-index: 2; }     /* 画像を黒文字と同等/上にしたい場合は 2 のまま */

./about.html{
  padding-top: 170px;
  
}

/* 置きたい位置に合わせて調整してください（例: 左下） */
.about-sec { position: relative; }
.about-curve{
  position: absolute;
  left: clamp(24px, 6vw, 72px);
  bottom: clamp(18px, 6vw, 36px);
  width: clamp(320px, 46vw, 640px);
  height: auto;
  overflow: visible;
  z-index: 0;
}

/* 線の見た目（太さは --about-stroke で調整） */
:root{ --about-stroke: 2.2; }
./about.htmlCurve{
  stroke: #4a4a4a;
  stroke-width: var(--about-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  /* dash 値は JS で設定します */
}


/* 例：従来より +24px 分ほど右へ寄せる */
.about-sec .about-curve{
  left: calc(clamp(24px, 6vw, 72px) + 24px);
  /* もしくは固定で left: 80px; などでもOK */
}



/* ===== Service section ===== */
.service-sec{
  position: relative;                      /* 指定高さ */
  background: #ddd;                   /* グレー */
  overflow: hidden;
  padding-bottom: 30px;
}

/* 背景イラスト */
.service-sec__bg{
  position: absolute;
  inset: 0;
  background-image: url("./img/topserviceback.png");
  background-repeat: no-repeat;
  background-size: 885px auto;   /* ← 幅を固定（高さは自動） */
  background-position: right top; /* ← 右上に寄せる */
  pointer-events: none;
  z-index: 0;
}


.service-sec__inner{
  position: relative;
  height: 100%;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  padding-top: 36px;                     /* 見出しの余白 */
  
}

/* 飾りの大きい文字 */
.service-sec__dec{
  position: absolute;

  top: -20px;
  font-family: "Playfair Display", serif;
  font-weight: 400;
  font-size: clamp(72px, 18vw, 180px);
  line-height: 1;
  color: #81848E;
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}

/* 見出し */
.service-sec__hd{
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-inline: clamp(16px, 6vw, 96px);
  margin-top: 30px;
}
.service-sec__title{
  margin: 0;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  color: #fff;
  letter-spacing: .02em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.service-sec__subtitle{
  margin: 0;
  color: #fff;
  opacity: .9;
}

/* 3カラム */
.service-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  padding: 20px clamp(16px, 6vw, 96px) 0;
  list-style: none;
}
.service-item{ display: grid; gap: 8px; }

/* 円パーツ */
.svc-figure{ 
  margin: 0; 
  display: grid; 
  place-items: center; 
  
}

/* カラーの円背景（支給画像） */
.svc-ring{
  width: clamp(240px, 24vw, 340px);
  aspect-ratio: 1 / 1;
  background-image: url("./img/ellipseback.png");
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.25)); /* 外側の影 */
}

/* 白い内側の円 */
.svc-circle{
  width: 88%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.05),
    0 4px 10px rgba(0,0,0,.15);
  display: grid;
  place-items: center;
}

/* ダミー画像 */
.svc-dummy{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color: #111;
  opacity: .8;
  font-weight: 700;
}

/* 説明文 */
.svc-txt{
  color: #fff;
  line-height: 1.9;
  margin: 0;
  text-align: center;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* 縮小時の2列/1列フォールバック */
@media (max-width: 1100px){
  .service-list{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .service-list{ grid-template-columns: 1fr; }
  .service-sec{ height: auto; padding-bottom: 48px; }
}

/* セクション内のレイアウト幅を中央に固定 */
:root{
  --gutter: clamp(16px, 6vw, 96px);
  --service-max: 1180px;           /* お好みで 1120〜1240px くらい */
}

.service-sec__inner{
  max-width: var(--service-max);
  margin-inline: auto;              /* ← 中央寄せ */
  
  
}

/* 見出しの左右パディングは親に任せる（左右差を無くす） */
.service-sec__hd{ padding-inline: 0; }

/* 3カラム自体を中央に揃える */
.service-list{
  padding: 40px 0 0;                /* 左右パディングを0に */
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  justify-content: center;          /* グリッド全体を中央寄せ */
  justify-items: center;            /* 各セルの中身も中央 */
  column-gap: clamp(48px, 6vw, 120px);   /* ← 横の余白を拡大 */
  row-gap: clamp(24px, 4vw, 40px);       /* 予備：縦の余白 */
}

:root{
  --gutter: clamp(16px, 6vw, 96px);
  --flow-max: 980px;          /* セクションの実効幅（中央揃え） */
  --frame-pad-x: 36px;        /* 枠と中身の“余白”をコントロール */
  --frame-pad-y: 28px;
}



/* セクション外側 */
.flow-sec{
  position: relative;
  background: #fff;
  padding: clamp(40px,5vw,64px) 0;
  overflow: hidden;
}

/* 中央のレイアウト幅を固定して中央寄せ */
.flow-inner{
  max-width: var(--flow-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 枠＋中身をまとめる箱（ここを基準に全部そろえる） */
.flow-box{
  position: relative;
  margin: 0 auto;

}

/* 手書きフレームを“箱”の内側ピッタリにフィット */
.flow-frame{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 0;
}

/* 左下の手スケッチは箱の内側・左下に固定 */
.flow-hand{
  position: absolute;
  left: max(8px, calc(var(--frame-pad-x) - 12px));
  bottom: max(6px, calc(var(--frame-pad-y) - 8px));
  width: clamp(220px, 28vw, 360px);
  height: auto;
  pointer-events: none;
  z-index: 0;
  right: calc(var(--frame-pad-x) + 6px);
  bottom: calc(var(--frame-pad-y) + 8px);
  width: clamp(240px, 28vw, 380px);
}

/* 見出し＋虹の重なり用の箱 */
.flow-head{
  position: relative;
  display: grid;
  place-items: center;
}

/* 内部2カラムレイアウト（左右の基準） */
.flow-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 44% 1fr;      /* 左右比率をお手本準拠に近づけ */
  column-gap: clamp(40px, 6vw, 72px);
  align-items: start;
  min-height: clamp(520px, 62vw, 720px);
}

/* 左カラム（タイトル） */
.flow-left{ 
  display: grid;
  place-items: center;
  min-height: clamp(360px, 44vh, 480px);  
}

.flow-ttl{
  position: relative;
  z-index: 2;
  text-align: center;
  margin: 0;
  gap: 10px;
}
.flow-ttl .en{
  font-family: "Playfair Display", serif;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
}
.flow-ttl .jp{
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  border-bottom: 2px solid #111;
  width: 160px;
  padding-bottom: 6px;
}

/* 虹色マークはタイトルの少し右下に */
.flow-mark{ width: clamp(120px, 14vw, 200px); margin-top: 16px; }
.flow-mark img{ display: block; width: 100%; height: auto; }

/* 右カラム（これを矢印の基準にする） */
.flow-right{ position: relative; padding-left: 24px; }

/* 縦矢印は右カラム内で“リストの左脇”に固定 */
.flow-arrow{
  position: absolute;
  left: -12px;               /* リスト左端から外に少し出す */
  top: 6px;                  /* タイトルと高さをそろえる */
  bottom: 12px;              /* 下端は少し余白を残す */
  width: clamp(18px, 2vw, 24px);
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

/* 手順リスト */
.flow-steps{
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
  display: grid;
  row-gap: clamp(10px, 2.2vw, 16px);
}
.flow-step{
  display: grid;
  grid-template-columns: auto 1fr;     /* アイコン + 文言 */
  align-items: center;
  column-gap: clamp(10px, 1.6vw, 16px);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.9;
}
.flow-step .dot{
  width: clamp(22px, 2.2vw, 28px);
  height: auto;
  display: block;
}
.flow-step .label{ white-space: nowrap; }

/* レスポンシブ（幅が狭い時は1カラム化） */
@media (max-width: 960px){
  .flow-grid{ grid-template-columns: 1fr; }
  .flow-arrow{ left: 4px; }
}

/* Flow の実効幅だけ拡大（既存の --flow-max を上書き） */
:root{
  --flow-max: 1100px;      /* 旧: 980px → 1100px に */
  /* 余白が窮屈に見える時は下2つも少しだけ広げてOK */
  /* --frame-pad-x: 40px;   旧: 36px */
  /* --frame-pad-y: 32px;   旧: 28px */
}

/* 念のため、このセクションだけは上の値を強制適用 */
.flow-sec .flow-inner{
  max-width: var(--flow-max);
}

/* バランス調整（任意） */
.flow-grid{
  grid-template-columns: 46% 1fr;               /* 左右比率をわずかに調整 */
  column-gap: clamp(48px, 6vw, 80px);           /* 余白を気持ち広めに */
}
/* 矢印位置は基準を維持（必要なら微調整） */
.flow-right{ padding-left: 28px; }              /* 旧: 24px */
.flow-arrow{ left: -12px; }                     /* 変更なし（ずれたら -10〜-14px で調整） */

/* ====== タイトル（Flow＋下線＋カラーマーク）を“セクション中央”へ ====== */
/* 左カラムの中で中央寄せ（左右・上下とも） */
.flow-left{
  display: grid;
  place-items: center;             /* ← 中央揃え */
  min-height: clamp(340px, 42vh, 460px);  /* お手本の位置感を出すため高さ確保 */
}

/* タイトル書式を中央寄せに */
.flow-ttl{ text-align: center; margin: 0; gap: 10px; }
.flow-ttl .en{ 
  font-size: clamp(30px, 3.6vw, 44px); 
  line-height: 1.1;
}

.flow-ttl .jp{
  width: 180px;                    /* 下線長さ */
  margin-inline: auto;             /* 中央に */
  padding-bottom: 8px;
}

/* カラーマーク（虹色）をタイトル直下に中央配置 */
.flow-mark{
  margin: 16px auto 0;             /* 中央配置 */
  width: clamp(130px, 15vw, 210px);
}

/* ====== 手のイラストを“右下”へ（枠に被らない） ====== */
.flow-hand{                                        /* 左寄せを解除 */
  right: calc(var(--frame-pad-x) + 6px);                /* 右下に寄せる（枠内側） */
  bottom: -80px;
  width: clamp(240px, 28vw, 380px);                     /* ほんの少し大きめでもOK */
  z-index: 0;
}

/* ====== 右側リストの見た目・間隔をお手本寄せ ====== */
.flow-right{
  position: relative;
  padding-left: 28px;                                   /* 縦矢印との距離 */
  max-width: 560px;                                     /* 行長をほどよく制限 */
}
.flow-arrow{
  left: -16px;                                          /* ドットの少し外側に */
  top: 4px;                                             /* 1行目の少し上から */
  bottom: 10px;                                         /* 最後の少し下まで */
  width: clamp(18px, 1.9vw, 22px);
}

/* 行間・行頭アイコンのサイズ感 */
.flow-steps{
  row-gap: clamp(14px, 2.2vw, 22px);                    /* 行間 */
  padding: 0;                                           /* 余白は arrow と right で調整 */
}
.flow-step{
  grid-template-columns: auto 1fr;                      /* dot + label */
  column-gap: clamp(12px, 1.8vw, 16px);
  align-items: center;
  line-height: 1.9;
  font-size: clamp(16px, 1.7vw, 18px);
}
.flow-step .dot{
  width: clamp(24px, 2.4vw, 28px);                      /* 水彩番号の見た目サイズ */
  height: auto;
  display: block;
}
.flow-step .label{ white-space: nowrap; }               /* 1行保持（長い場合は外す） */

/* ====== レイアウト拡大（1100px指定を維持） ====== */
.flow-inner{ max-width: var(--flow-max); }              /* 既に --flow-max:1100px を設定済み */
.flow-grid{
  grid-template-columns: 46% 1fr;                       /* 左右バランスを微調整 */
  column-gap: clamp(48px, 6vw, 80px);
}

/* 親グリッドのトラックをストレッチさせる（右カラムの100%が効くように） */
.flow-grid{
  align-items: stretch;                 /* ← 重要：rowの高さを伸ばす */
  min-height: clamp(560px, 62vw, 740px);/* 高さの基準はここで管理 */
}

/* 右カラム：高さ100%＋フレックス縦並びの箱に */
.flow-right{
  position: relative;
  padding-left: 28px;
  height: 100%;                         /* ← 右カラムを親の高さに揃える */
  display: flex;
  flex-direction: column;
}

/* 手順リスト：右カラム内で高さ100%を占有し、縦に均等配置 */
.flow-steps{
  flex: 1 1 auto;                       /* ← 余った高さをすべて使う */
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;       /* ← 1〜9を上下に均等配置 */
}

/* 行デザインはそのまま維持 */
.flow-step{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: clamp(12px, 1.8vw, 16px);
  line-height: 1.9;
  font-size: clamp(16px, 1.7vw, 18px);
}
.flow-step .dot{
  width: clamp(24px, 2.4vw, 28px);
  height: auto;
  display: block;
}


.flow-nizi{
  position: absolute;
  left: 90%;
  transform: translateX(-50%);
  width: clamp(140px, 15vw, 220px);
  /* 見出しの下端に少し食い込ませる（重なり具合は数字で微調整） */
  top: calc(100% - 36px);
  z-index: 1;               /* 見出しの下、枠や手より前 */
  pointer-events: none;
  margin-top: -80px;
  
}

/* ============ Instagram ============ */
:root{
  --gutter: clamp(16px, 6vw, 96px);
}

.insta-sec{
  position: relative;
  overflow: hidden;
  /* 右下に背景を配置（必要に応じてサイズ調整） */
  background-image: url("./img/instaback.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: clamp(420px, 42vw, 680px) auto;
  /* 下に大きめ余白（背景が見えるように） */
  padding: clamp(36px, 6vw, 60px) 0 clamp(120px, 20vw, 280px);
}

.insta-inner{
  position: relative;
  z-index: 2;
}

/* 見出し（中央＋下線） */
.insta-ttl{
  text-align: center;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 700;
  margin: 0 0 clamp(20px, 3vw, 28px);
  position: relative;
}
.insta-underline{
  display: block;
  width: 96px;
  height: 2px;
  background: #111;
  margin: 8px auto 0;
}

/* 4×3 グリッド */
.insta-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.2vw, 24px);
  max-width: 980px;
  margin: 0 auto;
}
.insta-grid .ph{
  aspect-ratio: 1 / 1;
  background: #ddd;
  border-radius: 4px;
}

/* フッターの more ボタン（デザイン寄せ） */
.insta-ft{
  display: flex;
  justify-content: center;
  margin-top: clamp(22px, 3vw, 30px);
}
.insta-more{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 32px;
  padding: 0 18px;
  background: #565656;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  letter-spacing: .02em;
  text-decoration: none;
  transition: opacity .2s ease;
}
.insta-more:hover{ opacity: .9; }

/* 左下カーブ（ダミー） */
.insta-curve{
  position: absolute;
  left: clamp(12px, 5vw, 60px);
  bottom: clamp(12px, 5vw, 40px);
  width: clamp(360px, 50vw, 680px);
  height: auto;
  overflow: visible;
  z-index: 1;
}
#instaCurvePath{
  stroke: #5a5a5a;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* レスポンシブ（3列→2列） */
@media (max-width: 1024px){
  .insta-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .insta-sec{
    background-size: clamp(300px, 68vw, 520px) auto;
    padding-bottom: clamp(120px, 26vw, 220px);
  }
  .insta-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* === Footer base === */
.site-footer{
  --footer-bg: #ccc9c9;
  --footer-text: #fff;
  --footer-sub:  #fff;

  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 40px 0 170px; /* 指示通り bottom 170px */
  font-size: 14px;
}
.site-footer a{ 
  color: var(--footer-text); 
  text-decoration: none; 
  width: 50%;

}
.site-footer a:hover{ opacity: .9; }

/* 上段 */
.footer-inner{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  column-gap: 32px;   /* 固定値に（clamp 削除） */
  row-gap: 24px;
}

/* 左：4カラム（間隔をタイトに） */
.footer-nav{
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  column-gap: 20px;   /* clamp 削除、タイトに */
  row-gap: 12px;
}
.footer-nav h3{
  font-size: 16px;
  margin: 0 0 8px;    /* タイト */
  font-weight: 700;
}
.footer-nav ul{ margin: 0; padding: 0; list-style: none; }
.footer-nav li{ margin: 4px 0; }      /* タイト */
.footer-nav a{ color: var(--footer-sub); }

/* 右：グループボックス（画像どおり固定値で整える） */
.footer-side{
  display: grid;
  gap: 14px;
  justify-items: start;
}

/* 上：Panoma group */
.group-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 24px;
  min-width: 250px;                     /* 画像の比率に近づける */
  border: 2px solid var(--footer-text);
  border-radius: 4px;
  font-weight: 800;
  font-size: 20px;                      /* 指定：25px */
  letter-spacing: .02em;
  line-height: 1;
}

/* 2段目：2バッジ横並び */
.group-row{
  display: flex;
  gap: 18px;          
  width: 250px;                   /* 画像に準拠 */
}
.badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 18px;
  border: 2px solid var(--footer-text);
  border-radius: 4px;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  line-height: 1;
}
.badge.-img{
  padding: 6px 18px;
  background: rgba(255,255,255,.08);
}
.badge.-img img{
  display: block;
  height: 24px;                         /* 見た目合わせ */
  width: auto;
}

/* 電話ブロック */
.footer-contact{ margin-top: 8px; }
.footer-contact .label{
  margin: 0 0 8px;
  color: var(--footer-sub);
  font-size: 14px;
}
.tel-row{
  display: flex;
  align-items: center;
  gap: 10px;
}
.tel-ic{ display:inline-flex; }

.footer-contact .tel{
  margin: 0;
  font-weight: 800;
  font-size: 28px;                      /* 画像の見た目に寄せる */
  letter-spacing: .02em;
}
.footer-contact .tel a{ color: var(--footer-text); }

.hours-wrap{ margin-top: 6px; }
.hours-ttl{
  margin: 0 0 2px;
  color: var(--footer-sub);
  font-size: 14px;
}
.hours-sub{
  margin: 0;
  color: var(--footer-sub);
  font-size: 14px;
}

/* 下段 */
.footer-bottom{
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 22px;
  padding-bottom: 30px;
}

.footer-bottom .sns{ 
  text-align: center;

}

.footer-bottom .copy{
  margin: 0;
  color: var(--footer-sub);
  font-size: 12px;
  font-weight: 700;
}

/* アクセシビリティ */
.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* レスポンシブ */
@media (max-width: 980px){
  .footer-inner{
    grid-template-columns: 1fr;
  }
  .group-badge{ min-width: 0; width: 100%; }
  
}

/* ===========================
   Service（モバイル専用）差し替え
   =========================== */
@media (max-width: 767px){

  /* セクションの左右パディングを揃え、中央寄せの土台を作る */
  ./service.html,
  .section--service {
    padding: 48px 16px 88px !important;  /* 下余白は好みで微調整 */
    background-position: right top;
  }

  /* もし .container に左右paddingがあれば打ち消す（中央配置がズレないように） */
  ./service.html .container,
  .section--service .container {
    padding-inline: 0 !important;
    margin: 0 auto !important;
    max-width: 100% !important;
  }

  /* 3つのカードを縦1列＆中央に */
  .section--service .svc-grid,
  .section--service .services,
  .section--service .service-list,
  .section--service .cards,
  ./service.html .svc-grid,
  ./service.html .services,
  ./service.html .service-list,
  ./service.html .cards {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;       /* ← 中央寄せのキモ */
    justify-content: flex-start;
    gap: 48px !important;                 /* アイテム間の余白 */
    width: 100%;
  }

  /* 各アイテム（円＋テキスト）を中央寄せ＆幅も中央に */
  .section--service .service,
  .section--service .service-card,
  .section--service .card,
  .section--service .svc-item,
  ./service.html .service,
  ./service.html .service-card,
  ./service.html .card,
  ./service.html .svc-item {
    width: min(92vw, 520px) !important;   /* 画面幅に収める */
    margin: 0 auto !important;
    text-align: center !important;
    padding: 0 !important;                /* PCの左右paddingを打ち消し */
  }

  /* 円（背景画像 or figure）を正円で中央に */
  .section--service .service__circle,
  .section--service .circle,
  .section--service .svc-figure,
  ./service.html .service__circle,
  ./service.html .circle,
  ./service.html .svc-figure {
    
    aspect-ratio: 1 / 1;
    display: block;
    margin: 0 auto !important;           /* ← 中央寄せのキモ */
    padding: 0 !important;               /* 左右paddingの影響を排除 */
  }

  /* 円の中のimgがある場合は100%フィット */
  .section--service .service__circle img,
  .section--service .circle img,
  .section--service .svc-figure img,
  ./service.html .service__circle img,
  ./service.html .circle img,
  ./service.html .svc-figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  /* 説明文の行揃えと幅を中央に */
  .section--service .service__text,
  .section--service .desc,
  .section--service .service-text,
  ./service.html .service__text,
  ./service.html .desc,
  ./service.html .service-text,
  .section--service p {
    max-width: min(92vw, 560px) !important;
    margin: 16px auto 0 !important;
    text-align: center !important;
  }
}

/* ================================
   Sticky CTA (SP) – 80px / 2カラム
   ================================ */
@media (max-width: 767px){
  .cta-sticky{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 80px;                  /* 指定：高さ80px */
    background: #6F7178;           /* デザインのグレー帯 */
    z-index: 999;
  }
  .cta-sticky__inner{
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;  /* 上：テキスト / 下：ボタン */
    align-content: center;
    gap: 6px;
    padding: 8px 12px;
    max-width: 1100px;
    margin: 0 auto;
  }
  .cta-sticky__lead{
    margin: 0;
    color: #fff;
    font-weight: 600;
    font-size: 12px;               /* 画像の見え方に合わせて小さめに */
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cta-sticky__row{
    display: grid;
    grid-template-columns: 1fr 1fr; /* 指定：2カラム */
    gap: 12px;
  }
  .cta-btn{
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    height: 32px;                   /* ボタン高さ */
    padding: 0 16px;
    background: #000; color: #fff; text-decoration: none;
    border-radius: 24px;
    font-size: 14px;                /* 指定：ボタン文言 14px */
    line-height: 1;
    box-shadow: 0 3px 0 rgba(0,0,0,.28);
  }
  .cta-btn i{
    position: relative; width: 28px; height: 1px; background: #fff;
    display: inline-block;
  }
  .cta-btn i::after{
    content: ""; position: absolute; right: 0; top: -3px;
    width: 7px; height: 7px; border-top: 1px solid #fff; border-right: 1px solid #fff;
    transform: rotate(45deg);
  }

  /* コンテンツが CTA に隠れないように下余白を付与 */
  body{ padding-bottom: 66px; }     /* 80px + 余白少し */
}

/* =========================================================
   Footer (SP) — レイアウト/サイズをモック通りに
   ※ PC には影響させない
   ========================================================= */
@media (max-width: 767px){

  /* 追従CTAが80pxなので+余白ぶん下パディングを広めに */
  .site-footer{
    padding-bottom: 0px; /* ← 収まり優先で広めに確保 */
    padding: 0px;
  }

  .footer-inner{
    display: block;
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 20px 0;
  }

  /* 上段：4カラム → 2カラムグリッド */
  .footer-nav{
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2カラム */
    margin-bottom: 24px;
  }
  .footer-nav .fcol h3{
    margin: 0 0 6px;
    font-size: 12px;                /* 指定：12px */
    font-weight: 600;
    color: #fff;                    /* デザインどおり白系 */
  }
  .footer-nav .fcol ul{ margin: 0; padding: 0; list-style: none; }
  .footer-nav .fcol li + li{ margin-top: 4px; }
  .footer-nav .fcol a{
    font-size: 12px;                /* 指定：12px */
    color: #eaeaea;
    text-decoration: none;
  }

  /* 右ブロック：センタリング＆バッジ（角丸ボタン風） */
  .footer-side{
    text-align: center;
  }

  /* 「Panoma group」バッジ */
  .footer-side .group-badge{
    display: block;
    width: 100%;
    max-width: 520px;
    margin: 0 auto 16px;
    height: 48px;
    line-height: 48px;
    font-size: 20px;                /* 指定：20px */
    color: #fff;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 6px;
    text-decoration: none;
    background: transparent;
  }

  /* 会社ロゴバッジ行（左右2つ） */
  .footer-side .group-row{
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 0 0 20px;
  }
  .footer-side .badge{
    min-height: 44px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 6px;
    background: transparent;
    text-decoration: none;
    font-size: 16px;
  }
  .footer-side .badge.-img img{
    height: 32px;                   /* Palettaロゴの見た目調整 */
    width: auto;
    display: block;
  }

  /* 連絡先ブロック */
  .footer-contact{
    max-width: 340px;
    margin: 0 auto;
    color: #eaeaea;
    text-align: left;
  }
  .footer-contact .label{
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
  }
  .footer-contact .tel-row{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
  }
  .footer-contact .tel-row .tel{
    margin: 0;
    line-height: 1;
  }
  .footer-contact .tel-row .tel a{
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    letter-spacing: .02em;
  }
  .footer-contact .hours-wrap{
    font-size: 12px;
    line-height: 1.6;
    opacity: .95;
  }
  .footer-contact .hours-ttl{ margin: 0 0 2px; }
  .footer-contact .hours-sub{ margin: 0; }

  /* 下段：SNS＆コピーライト */
  .footer-bottom{
    padding: 18px 20px 22px;
    display: grid;
    justify-items: center;
    gap: 10px;
  }
  .footer-bottom .sns{
    display: inline-grid;
    place-items: center;
  }
  .footer-bottom .sns svg{
    width: 22px; height: 22px;      /* 少し小さめ */
  }
  .footer-bottom .copy{
    margin: 0;
    font-size: 10px;
    color: #eaeaea;
    text-align: center;
    line-height: 1.4;
  }

  .group-row{
    width:100%;
  }
}

/* =========================================================
   Sticky CTA — タブレット・PC用レイアウト（SP 既存は変更しない）
   ========================================================= */
@media (min-width: 768px){

  /* フッターに隠れないよう 追従エリアぶん下パディングを確保 */
  .site-footer{
    padding-bottom: 20px; /* 追従CTAぶん + 余裕 (必要なら調整) */
  }

  .cta-sticky{
    position: fixed;
    inset: auto 0 0 0;           /* left:0; right:0; bottom:0; */
    height: 100px;               /* PC / タブレット共通の高さ */
    z-index: 9999;
    background: #6b6e75;         /* 落ち着いた濃グレー */
    box-shadow: 0 -6px 20px rgba(0,0,0,.18);
  }

  .cta-sticky__inner{
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    padding: 18px 24px 22px;
    display: grid;
    align-content: center;
    justify-items: center;
    row-gap: 16px;
  }

  /* 見出し */
  .cta-sticky__lead{
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    letter-spacing: .02em;
    margin-bottom: -10px;
  }

  /* ボタン2カラム */
  .cta-sticky__row{
    display: grid;
    grid-auto-flow: column;
    gap: 32px;
  }

  /* ピル型ボタン */
  .cta-btn{
    display: inline-grid;
    grid-auto-flow: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    height: 35px;
    padding: 0 32px;
    width: 250px;
    border-radius: 9999px;
    background: #000;
    color: #fff;
    text-decoration: none;
    border: 0;
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
    transition:
      transform .15s ease,
      box-shadow .15s ease,
      background-color .15s ease;
  }

  .header-cta .cta-btn{
    border-radius: 0px;
  }

  .cta-btn span{
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
  }

  .cta-btn i{
    position: relative;
    width: 36px;
    height: 1px;
    background: currentColor;
    display: inline-block;
  }
  .cta-btn i::after{
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
  }

  .cta-btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0,0,0,.28);
    background: #0a0a0a;
  }
  .cta-btn:active{
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(0,0,0,.22);
  }
}











/* 基本（サイト既存に合わせて必要最小限） */
:root{
  --container: min(1120px, calc(100% - 64px));
  --ink:#2f2f2f; --line:#cccccc;
}
.container{ width:var(--container); margin-inline:auto }

/* Header（既存を流用。以下は最小） */
.site-header{position:sticky; top:0; background:#fff; z-index:800; border-bottom:1px solid rgba(0,0,0,.06)}
.header__inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo img{height:28px}
.gnav__list{list-style:none; display:flex; gap:28px; margin:0; padding:0}
.gnav__list a{text-decoration:none; color:var(--ink)}



/* ======================== 会社概要ページ ======================== */
/* About hero にオーバーレイを載せる */
.about-hero{
  position: relative; /* ← 擬似要素を載せるために必要 */
}

/* 透明PNGなどをそのまま全面に被せる */
.about-hero::after{
  content: "";
  position: absolute;
  inset: 0;                               /* 上下左右0 = 全面 */
  background: url("/img/overlay_pc.png") center / contain no-repeat;
  z-index: 2;                              /* ← コンテンツより前面 */
  pointer-events: none;                    /* ← クリック妨げない */
  opacity: 1;                              /* 必要なら 0.9 など微調整可 */
}

/* ヒーロー本体は下層に */
.about-hero__grid{ position: relative; z-index: 1; }

.about-hero{
  background:#EFEFEF;   /* 指定色 */
  
}
.about-hero__grid{
  display:grid;
  grid-template-columns: 1fr 1.1fr;  /* 左右2カラム */
  align-items:center;
  gap:40px;
}
.about-hero__title{margin:0 0 10px}
.about-hero__title .en{
  display:block;
  font-family:"Playfair Display", serif;
  font-size: clamp(36px, 5.2vw, 64px);
  line-height:1.1;
}
.about-hero__title .jp{
  margin-left:12px;
  font-size:16px;
  color:#333;
}
.about-hero__title p {
  margin: 0;
}

/* 手書きっぽいライン（News見出し下と同仕様） */
.title-underline{
  display:block; width:min(400px, 70%); height:auto;
}
.title-underline path{
  stroke:#000; stroke-opacity:.35; stroke-linecap:round;
  stroke-width:2.2; fill:none;
}

/* 右側イラスト */
.about-hero__art{
  margin:0; line-height:0; display:block;
}
.about-hero__art img{
  width:100%; height:auto; object-fit:contain;
  filter:grayscale(0); opacity:.9;
}

/* SP レイアウト */
@media (max-width: 959px){
  
  .about-hero__grid{ grid-template-columns: 1fr; gap:20px }
  .title-underline{ width:min(360px, 82%) }
}

/* ============ Breadcrumbs ============ */
.breadcrumbs{
  border-top:1px solid #CCCCCC;   /* 指定：上下線 #CCC 1px */
  border-bottom:1px solid #CCCCCC;
  background:#fff;
}
.breadcrumbs__list{
  display:flex; align-items:center; gap:10px;
  list-style:none; margin:0; 
  padding:5px 0;
  color:#555;
}
.breadcrumbs__item{font-size:14px}
.breadcrumbs__link{
  display:inline-flex; 
  align-items:center; 
  color:#666; 
  text-decoration:none;
  padding-top: 7px;

}
.breadcrumbs__sep{color:#999}



/* ========== SP（767px以下） ========== */
@media (max-width: 767px){
  /* SPでは通常メニューを隠し、ハンバーガーのみ表示 */
  .gnav__list { 
    display: none !important; 
  }
  .gnav__toggle {
    display: inline-flex !important;      /* ハンバーガーを表示 */
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: transparent; border: 0;
    color: #555; font-size: 22px; line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }

  /* ドロワーはJSで .is-visible を付与して開閉（例） */
  #m-drawer {
    position: fixed; inset: 0;
    background: #f2f2f2; 
    transform: translateY(-100%);
    transition: transform .35s ease;
    overflow: auto; padding: 88px 20px 32px;
    z-index: 1099;
  }
  #m-drawer[hidden] { display: none; }
  #m-drawer.is-visible { transform: translateY(0); }
}

/* 共通（PC/SP） */
.site-header{
  z-index: 2000;               /* 充分に大きく */
}

/* 既存：PC の sticky はそのまま使う */
@media (min-width: 768px){
  .site-header{
    position: sticky;
    top: 0;
  }
}

/* 追加：SP は常に固定表示にする */
@media (max-width: 767px){
  .site-header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
  }
  /* 固定分の余白を本文に与える（JS で高さ反映するので初期は適当な値） */
  body.has-fixed-header{
    padding-top: 60px;   /* 初期値。JSで実高さに置換されます */
  }
}

/* もしどこかに “非表示” 用のクラスがあれば無効化しておく */
.site-header.is-hidden{
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ===== About ヒーロー：270px 高さ・左右2カラム ===== */
.about-hero{
    position: relative;
  background:#EFEFEF;
  display:flex;
  align-items:center;
}
.about-hero__grid{
position:relative;
  z-index:1;                     /* オーバーレイの上に出す */
  max-width:1160px;              /* ← ここで幅固定 */
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,24px);
  width:100%;
  display:grid;
  grid-template-columns:1fr auto; /* 左テキスト / 右イラスト */
  align-items:center;
  gap:clamp(16px,3vw,40px);
}

/* 左側：見出し行 */
.about-hero__left{ position:relative; }
.about-hero__head{
  display:flex;
  align-items:flex-end;        /* ベースライン揃え */
  gap:16px;
}

/* 見出し：Playfair・Medium(500) */
.about-hero__title{
  margin:0;
  font-family:"Playfair Display", serif;
  font-weight:500;             /* Medium */
  font-size:clamp(38px, 4vw, 56px);
  line-height:1.1;
  color:#222;
}

/* サブ：Noto Sans */
.about-hero__sub{
  font-family:"Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight:500;
  font-size:clamp(14px, 1.6vw, 18px);
  line-height:1.2;
  color:#333;
}

/* 見出し下の手描きライン（News と同テイスト） */
.title-underline{
  width:clamp(170px, 26vw, 320px);
  height:auto;
  margin-top:14px;
}
.title-underline path{
  stroke:#333;                 /* News のライン色に合わせる */
  stroke-width:2;              /* 太さ */
  stroke-linecap:round;
}



/* レスポンシブ：SP は縦並びで中央寄せ */
@media (max-width: 767px){
  .about-hero__grid{
    grid-template-columns:1fr;
    gap:20px;
    min-height:auto;           /* 必要なら自動高に */
    text-align:left;
  }
  .about-hero__art{
    max-width:620px;
    margin-inline:auto;
    width:92%;
  }
  .about-hero{
  margin-top: 57px;
}

}

/* --- overlay: cover に変更 & SPでも表示 --- */

.about-hero::after{
content:"";
  position:absolute;
  top:0;
  left:50%;
  width:100vw;           /* 画面幅いっぱい */
  
  transform:translateX(-50%); /* ヒーロー中央基準で全幅に */
  background:url("/img/overlay_pc.png") center / cover no-repeat;
  z-index:0;             /* 中身より下に配置 */
  pointer-events:none;
}

/* ヒーロー中身はオーバーレイの下層 */
.about-hero__grid{ position:relative; z-index:1; }

/* 270px 高さ（PC/SP共通） */
.about-hero{
  background:#EFEFEF;
  min-height:270px;
  display:flex;
  align-items:center;
}

/* PC/SPとも「左テキスト・右イラスト」の2カラム */
.about-hero__grid{
  width:100%;
  display:grid;
  grid-template-columns: 1fr auto;   /* ← 2カラム維持 */
  align-items:center;
  gap: clamp(16px, 3vw, 40px);
}

/* タイトル行（About と 会社紹介を横並び） */
.about-hero__title{
  display:flex;
  align-items:baseline;
  gap: 16px;
  margin:0 0 12px;
}

/* 見出しフォント */
.about-hero__title .en{
  font-family:"Playfair Display", serif;
  font-weight:500;            /* medium 相当 */
  font-size:40px;             /* PC */
  color:#333;
  line-height:1.2;
}
.about-hero__title .jp{
  font-family:"Noto Sans JP", system-ui, -apple-system;
  font-weight:500;
  font-size:14px;             /* PC */
  color:#444;
}

/* タイトル下の手書きライン（色は既存に合わせて） */
.title-underline path{
  stroke:#8c8c8c;
  stroke-width:1.5;
}

/* イラストの収まり */
.about-hero__art picture,
.about-hero__art img{
  display:block;
  width:auto; height:270px;   /* 目安。必要なら微調整可 */
}

/* --- SP調整（レイアウトはPCと同じ。文字サイズのみ指定値に） --- */
@media (max-width:767px){
  .about-hero__title .en{ font-size:32px; } /* 指定 */
  .about-hero__title .jp{ font-size:13px; } /* 指定 */
  .about-hero__art img{
    height:280px!important;
    
  }
  
}

/* ===== About ヒーロー：配置の微調整 ===== */

/* セクションそのものに上下余白が入らないように */
.about-hero{
  height:150px;               /* 指示値 */
  
  padding:0;                  /* ← 余白を完全にゼロに */
}

/* コンテナだけ上下余白0（他ページに影響しないようにスコープ） */
.about-hero > .container{
  padding-block:0;
}

/* グリッドはセクション高に合わせ、要素をキッチリ中央に */
.about-hero__grid{
  height:100%;
  display:grid;
  grid-template-columns: 1fr auto;  /* 左：見出し／右：イラスト */
  align-items:center;                /* 縦中央 */
}

/* 見出し行：ベースラインでそろえる（Aboutと会社紹介を横一列で同じ高さに） */
.about-hero__title{
  margin:0;
  display:flex;
  align-items:baseline;              /* ← 高さ揃えの要 */
  gap: clamp(12px, 2vw, 28px);
  line-height:1;
}

/* 見出しテキストの余計な上下余白を消す */
.about-hero__title .en,
.about-hero__title .jp{
  display:inline-block;
  margin:0;
  padding:0;
  line-height:1;
}

/* 下の手書きライン（SVG）は見出し直下に固定。余白を発生させない */
.title-underline{
  display:block;
  height:auto;
  margin: 10px 0 0;                 /* 見出しとの隙間だけ最小限 */
}
.title-underline path{
  stroke:#333; stroke-width:.8; fill:none;
}

/* 右のイラストは上下ピッタリに。画像が持つ余白対策に display:block */
.about-hero__art{
  height:100%;
}
.about-hero__art img{
  display:block;            /* 画像の下の隙間(行ボックス)を消す */
  height:100%;              /* セクション高にフィット */
  width:auto;
  object-fit:contain;       /* 150px内で縦に余白が出ないように */
}

/* もしオーバーレイを載せている場合も、150pxいっぱいで覆う */
.about-hero::before{
  content:"";
  position:absolute;
  inset:0;
  height:100%;
  width:100%;
  pointer-events:none;
  /* 背景画像等の指定がある前提（既に設定済みならこのままでOK） */
}

/* ====== SP専用（767px以下）: Aboutヒーロー調整 ====== */
@media (max-width: 767px){


  /* 2) グリッド自体をセクション高にフィットさせる */
  .about-hero__grid{
    height: 100% !important;        /* セクション 150px をそのまま受ける */
    min-height: 0 !important;       /* 内部要素の最小高さ制約を解除 */
    grid-template-columns: 1fr auto;/* PCと同じ2カラムに固定 */
    align-items: center;
    gap: 16px;                       /* 任意：少し詰める */
  }

  /* 3) 画像ボックスが高さを“作らない”ように、横幅指定を解除 */
  .about-hero__art{
    margin: 0 !important;
    max-width: none !important;
    width: auto !important;
    height: 100% !important;        /* セクション高=150pxに追従 */
    line-height: 0;
    display: block;
  }

  /* 4) picture/img を 150px 内にフィット。これで figure が高さを引っ張りません */
  .about-hero__art picture,
  .about-hero__art img{
    display: block;
    height: 95% !important;        /* 高さ優先 */
    width: auto !important;         /* アスペクト比保持で横は自動 */
    object-fit: contain;            /* はみ出し防止 */
  }
}

/* ====== SP専用（767px以下）: Aboutヒーローの高さを150pxに固定 ====== */
@media (max-width: 767px){

  /* PCの min-height:270px を打ち消す → 150px が効くようにする */
  .about-hero{
    margin-top: 57px;
    height: 150px !important;
    min-height: 0 !important;          /* ← これが必須 */
  }

  .about-hero__grid{
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .about-hero__art{
    height: 80% !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    line-height: 0;
    display: block;
  }

  .about-hero__art picture,
  .about-hero__art img{
    display: block;
    width: auto !important;
    object-fit: contain;
  }
}

/* ========== Message section ========== */
.section--message{ background:#fff; }

.message .message__grid{
  max-width:1160px;
  margin-inline:auto;
  padding: clamp(24px,4vw,48px) clamp(16px,4vw,24px);
  display:grid;
  grid-template-columns: 360px 1fr; /* 左ナロー、右ワイド */
  grid-template-rows: auto auto;    /* 上：リード／下：代表ブロック */
  gap: clamp(24px,3vw,48px) clamp(28px,4vw,56px);
  align-items:start;
}

/* 配置（PC） */
.message .message__head   { grid-column:1; grid-row:1; }
.message .message__lede   { grid-column:2; grid-row:1; }
.message .message__figure { grid-column:1; grid-row:2; }
.message .message__body   { grid-column:2; grid-row:2; }

/* 見出し */
.message .message__title{ margin:0 0 10px; }
.message .message__title .en{
  font-family:"Playfair Display", serif;
  font-size: clamp(36px, 4.2vw, 56px);
  font-weight:500;
  line-height:1.1;
  color:#222;
  display:inline-block;
  margin-right:12px;
}
.message .message__title .jp{
  font-family:"Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color:#666;
}

/* News と同じ下線（色味は既存と合わせる） */
.message .title-underline{
  display:block; width:min(340px, 78%); height:auto; margin-top:8px;
}
.message .title-underline path{
  stroke:#000; stroke-opacity:.35; stroke-linecap:round;
  stroke-width:2.2; fill:none;
  stroke-dasharray:400; stroke-dashoffset:400; /* 初期は未描画 */
  transition: stroke-dashoffset 1.1s cubic-bezier(.22,.61,.36,1);
}

/* 右側タイポ */
.message .message__catch{
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight:600;
  margin:0 0 14px;
}
.message .message__lede p,
.message .message__body p{
  margin:0 0 14px;
  line-height:1.9;
  color:#333;
  font-size: clamp(14px, 1.1vw, 16px);
}

/* 代表写真 */
.message .message__figure{ margin:0; }
.message .message__figure img{
  width:100%; height:auto; display:block; border-radius:6px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
}

/* ラベル/氏名 */
.message .message__label{
  color:#666; font-size:14px; margin:0 0 6px;
}
.message .message__name{
  font-weight:600; margin:0 0 14px;
}

/* SP：1カラムに積む */
@media (max-width: 767px){
  .message .message__grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }
  .message .message__head   { grid-column:1; grid-row:1; }
  .message .message__lede   { grid-column:1; grid-row:2; }
  .message .message__figure { grid-column:1; grid-row:3; max-width:420px; }
  .message .message__body   { grid-column:1; grid-row:4; }
}

/* 交差時に描画開始（JSで .in を付与） */
.message.in .title-underline path{ stroke-dashoffset:0; }

/* ========== Paletta = pallet + α Section ========== */
.paletalpha{
  margin: clamp(28px,4vw,56px) auto;
  border-radius: 10px;
  background: #AAADB7;
  color: #fff;
  overflow: hidden;           /* 角丸を活かす */
}
.paletalpha__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(20px,4vw,36px);
}

/* ミニ見出し */
.paletalpha__mini{
  margin: 0 0 10px;
  color: rgba(255,255,255,.9);
  font: 500 14px/1.4 "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .02em;
  text-align: center;
}

/* メインタイトル（指定タイポ） */
.paletalpha__title{
  margin: 0;
  text-align: center;
  font: 400 40px/1 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #FFF;               /* 指定 */
}

/* タイトル下のカーブ（ご指定SVG） */
.paletalpha__underline{
  display: grid;
  place-items: center;
  margin: 6px 0 10px;
}
.u-curve{
  width: min(640px, 88%);
  height: auto;
}
.u-curve .cls-1{
  stroke: rgba(255,255,255,.9); /* デザインに合う白系線 */
  stroke-width: .8px;
  fill: none;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: draw-curve 1.4s ease .1s forwards;
}
@keyframes draw-curve{
  to{ stroke-dashoffset: 0; }
}

/* 2カラムレイアウト */
.paletalpha__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px,3vw,28px);
}

/* カード */
.paletalpha__card{
  border-radius: 8px;
  padding: clamp(16px,2.8vw,22px);
}

/* カード見出し（指定タイポ） */
.paletalpha__cardTtl{
  color: #D5DEFF;
  font: 400 32px/1 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #AAADB7;               /* タイトル帯の背景色 */
  padding: 6px 20px;
  margin:0 auto -14px;               /* ← 負の margin で下へ */
  position: relative;
  z-index: 1; 
  display: block;                 /* ブロック化 */
  width: fit-content;    
  
}
.paletalpha__cardTtl::before,
.paletalpha__cardTtl::after{
display: none;
}

.paletalpha__cardTtl::before{ left: -66px; }
.paletalpha__cardTtl::after{ right: -66px; }
/* 右カードのガイド（文言の左右線を少し外寄せ） */
.paletalpha__cardTtl.-right::before{ left: -70px; }
.paletalpha__cardTtl.-right::after{ right: -70px; }

/* 本文 */
.paletalpha__cardBody p{
  margin: 0;
  font: 400 14px/1.9 "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: rgba(255,255,255,.92);
  border: 2px solid #D5DEFF;         /* 薄いブルーの囲み線 */
  border-radius: 6px;
  padding: 16px 18px;
  background: rgba(255,255,255,.04);
}

/* SP：1カラム */
@media (max-width: 767px){
  .paletalpha__title{ font-size: 24px; }
  .paletalpha__grid{ grid-template-columns: 1fr; }
  .paletalpha__cardTtl{
    font-size: 20px;
  }
  .paletalpha__cardTtl::before,
  .paletalpha__cardTtl::after{
    width: 38px;
    left: auto; right: auto;
  }
}

/* 右カードのタイトルも同様に */
.paletalpha__cardTtl.-right{ margin:0 auto -14px; }

/* --- ③ レスポンシブ調整（任意・文字サイズだけ落とす例） ------- */
@media (max-width: 767px){
  .paletalpha__cardTtl{ font-size: 24px; }
}

/* 太さだけ少し増やす例 */
.paletalpha__underline .u-curve .cls-1{
  stroke-width: 1px;           /* ← 0.5px → 1.2px などに */
  vector-effect: non-scaling-stroke; /* 横幅を伸縮しても太さ一定 */
}

/* これでロード時には描かない（以前の animation 指定を打ち消す） */
.paletalpha__underline .u-curve .cls-1{
  animation: none !important;
  vector-effect: non-scaling-stroke; /* 伸縮時も太さ一定 */
}

/* 想いを空間に */
.section--vision{ padding:clamp(48px,7vw,96px) 0; }
.section--vision .section__title{
  text-align:center;
  font: 600 clamp(22px,3.2vw,32px)/1.3 "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing:.02em;
  margin:0 0 10px;
}

/* タイトル下のカーブ */
.vision-underline{ 
  display:grid; 
  place-items:center; 
  margin:0 0 clamp(28px,4vw,40px); 
}
.vision-underline .u-curve{ width:clamp(180px,26vw,360px); height:auto; }
.vision-underline .u-curve .cls-1{
  stroke:#231815; 
  stroke-opacity:.55; 
  stroke-width:1.2; fill:none;
  /* JSで dash 値を与えるので初期は何もしない */
}

/* 説明文 */
.vision-lead{
  max-width:980px; margin:0 auto clamp(32px,5vw,56px);
  color:#222; font: 400 clamp(14px,1.4vw,16px)/2 "Noto Sans JP", sans-serif;
}

/* 3枚ギャラリー */
.vision-gallery{
  max-width:1160px; margin:0 auto;
  display:grid; gap:clamp(16px,2vw,24px);
  grid-template-columns:repeat(3,1fr);
}
.vision-gallery figure{ margin:0; }
.vision-gallery img{
  display:block; width:100%; height:100%;
  object-fit:cover; aspect-ratio: 4 / 3; /* 近い比率に */
  border-radius:4px;
}

/* レスポンシブ */
@media (max-width: 959px){
  .vision-gallery{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 599px){
  .vision-gallery{ grid-template-columns:1fr; }
}

/* ===== Member ===== */
.members{ padding: clamp(48px,6vw,96px) 0; }
.members__title{
  text-align:center;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: clamp(28px,3.2vw,44px);
  letter-spacing:.02em;
  margin: 0 0 10px;
}

/* タイトル下の曲線（見栄え） */
.members-underline{ display:grid; place-items:center; margin-bottom: clamp(28px,4vw,56px); }
.members-underline .u-curve{ width:min(420px,60%); height:auto; }
.members-underline .cls-1{
  stroke:#231815; stroke-opacity:.55; stroke-width:1.2; fill:none;
  vector-effect:non-scaling-stroke;
}

/* slider */
.members__wrap{ position:relative; }
.members__viewport{
  display:flex; gap: clamp(20px,3.2vw,48px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 6px;     /* フォーカスリング逃がし */
}
.member-card{

  flex: 0 0 auto;
  scroll-snap-align: center;
}
.member-card__fig{
  aspect-ratio: 3 / 4;
  background: #f5f5f5;
  border-radius: 4px;
  overflow: hidden;
  margin: 0 0 16px;
}
.member-card__fig img{ width:100%; height:100%; object-fit:cover; display:block; }
.member-card__role{ color:#666; font-size:14px; margin:0 0 6px; }
.member-card__name{ font-size:20px; font-weight:600; margin:0; }

/* arrows */
.members__nav{
  position:absolute; top:50%; translate:0 -50%;
  width:44px; height:44px; border-radius:50%;
  border:0; background:#e9eaee; color:#444; font-size:28px; line-height:1;
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.members__nav--prev{ left:-6px; }  /* 親 .container の内側に置くなら微調整可 */
.members__nav--next{ right:-6px; }
.members__nav:disabled{ opacity:.35; cursor:default; }

/* レスポンシブ：SP は 1 カード幅に */
@media (max-width: 767px){
  .member-card{ width: 82vw; }
  .members__nav{ width:40px;height:40px;font-size:24px; }
}

/* 2カラムのビュー（任意） */
@media (min-width:768px) and (max-width:1199px){
  .member-card{ width: 46vw; }
}

/* 3カラム見え（PC） */
@media (min-width:1200px){
  .member-card{ width: 30vw; max-width: 420px; }
}

/* =========================================================
   Member セクション（固定3カラム版 ＋ スライダー版）
   ─ 2つの書き方を共存させた「完全版」
   - .member     …… 固定 3 カラム（2枚目が中央に来る）
   - .members    …… 横スクロール型（スライダー風）
   どちらを使うかはセクションのルートクラスで切替
   ========================================================= */

/* ───────── 共通：見出し下の曲線（SVG） ───────── */
.member-underline,
.members-underline { 
  margin: -100px auto 48px; 
  width: clamp(220px, 28vw, 420px); 
  display:grid; 
  place-items:center; }

.member-underline .u-curve,
.members-underline .u-curve { display:block; width:100%; height:auto; overflow:visible; }

.member-underline .u-curve .cls-1,
.members-underline .u-curve .cls-1 {
  stroke:#231815; stroke-opacity:.55; stroke-width:1.2; fill:none;
  vector-effect:non-scaling-stroke;
}

/* =========================================================
   ① .member（固定 3 カラム）— 中央のカードを真ん中に
   ========================================================= */
.member__wrap{ position:relative; }

/* リスト全体を中央寄せ。固定幅 242×312 の 3 カラム */
.member__list{
  display:grid;
  grid-template-columns: repeat(3, 242px);
  justify-content:center;                     /* セクション中央に配置 */
  column-gap: clamp(24px, 4vw, 64px);
  row-gap: 32px;
  list-style:none; margin:0; padding:0;
}

/* カード（固定サイズ） */

.member .member-card__fig{margin:0 0 16px; }
.member .member-card__fig img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  display:block; }
.member .member-card__role{ color:#666; font-size:14px; margin:0 0 6px; }
.member .member-card__name{ font-size:18px; font-weight:700; margin:0; }

/* ナビボタンは絶対配置（レイアウトに影響させない） */
.member__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%;
  border:0; background:#f2f2f4; color:#444;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  display:grid; place-items:center; cursor:pointer;
}
.member__nav--prev{ left: min(24px, 2vw); }
.member__nav--next{ right: min(24px, 2vw); }

/* SP：1カラム中央寄せ */
@media (max-width: 767px){
  .member__list{
    grid-template-columns: 1fr;
    justify-content:center;
  }
  .member .member-card{ width:min(84vw, 320px); }
  /* 242×312 ≒ 1 : 1.289 に近い比率で高さを可変に */
  .member .member-card__fig{ width:100%; height:calc(min(84vw, 320px) * 1.29); }
  .member__nav{ display:none; } /* デザインのみなら非表示 */
}

/* PC（広め）の時も 242×312 を厳守（念押し） */
@media (min-width: 1200px){
  
  .member .member-card__fig img{ width:100%; height:100%; object-fit:cover; display:block; }
}

/* =========================================================
   ② .members（横スクロール型／スライダー風）
   ========================================================= */
.members{ padding: clamp(48px,6vw,96px) 0; }

.members__title{
  text-align:center;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: clamp(28px,3.2vw,44px);
  letter-spacing:.02em;
  margin: 0 0 10px;
}

.members__wrap{ position:relative; }

/* 横スクロールのビューポート */
.members__viewport{
  display:flex; gap: clamp(20px,3.2vw,48px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 6px;    /* フォーカスリング逃がし */
}

/* スライドカード（幅は可変） */
.members .member-card{
  width: min(520px, 32vw);
  flex: 0 0 auto;
  scroll-snap-align: center;
}
.members .member-card__fig{
  aspect-ratio: 3 / 4;               /* 画像比率 */
  background: #f5f5f5;
  border-radius: 4px;
  overflow: hidden;
  margin: 0 0 16px;
}
.members .member-card__fig img{ width:100%; height:100%; object-fit:cover; display:block; }
.members .member-card__role{ color:#666; font-size:14px; margin:0 0 6px; }
.members .member-card__name{ font-size:20px; font-weight:600; margin:0; }

/* 矢印 */
.members__nav{
  position:absolute; top:50%; translate:0 -50%;
  width:44px; height:44px; border-radius:50%;
  border:0; background:#e9eaee; color:#444; font-size:28px; line-height:1;
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.members__nav--prev{ left:-6px; }
.members__nav--next{ right:-6px; }
.members__nav:disabled{ opacity:.35; cursor:default; }

/* レスポンシブ調整（スライダー版） */
@media (max-width: 767px){
  .members .member-card{ width: 82vw; }
  .members__nav{ width:40px; height:40px; font-size:24px; }
}
@media (min-width:768px) and (max-width:1199px){
  .members .member-card{ width: 46vw; }
}
@media (min-width:1200px){
  .members .member-card{ width: 30vw; max-width: 420px; }
}

/* まず dash を設定（長さは JS で注入） */
.member-underline .u-curve .cls-1,
.members-underline .u-curve .cls-1{
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset 1.8s ease;
}

/* ビューに入ったら描画（線が伸びる） */
.member-underline.is-inview .u-curve .cls-1,
.members-underline.is-inview .u-curve .cls-1{
  stroke-dashoffset: 0;
}

/* SP はゆっくり（必要なら数値調整） */
@media (max-width: 767px){
  .member-underline .u-curve .cls-1,
  .members-underline .u-curve .cls-1{
    transition-duration: 2.8s;
  }
}

/* ユーザーがアニメーションを減らす設定なら無効化 */
@media (prefers-reduced-motion: reduce){
  .member-underline .u-curve .cls-1,
  .members-underline .u-curve .cls-1{
    transition: none;
    stroke-dashoffset: 0;
  }
}

/* 初期：線を隠す（長さは JS で set） */
.member-underline .u-curve .cls-1{
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset 1.8s ease;
}

/* 表示領域に入ったら描画開始 */
.member-underline.is-inview .u-curve .cls-1{
  stroke-dashoffset: 0;
}

/* SP はゆっくり */
@media (max-width: 767px){
  .member-underline .u-curve .cls-1{ transition-duration: 2.8s; }
}

/* ========== アニメーション配慮 ========== */
@media (prefers-reduced-motion: reduce){
  /* 既存：Member 用 */
  .member-underline .u-curve .cls-1{
    transition:none; stroke-dasharray:none; stroke-dashoffset:0;
  }
  /* 追加：News/Company の下線も静止表示に */
  .news-underline__path,
  .company-underline .cls-1{
    transition:none; stroke-dasharray:none; stroke-dashoffset:0;
  }
}

/* ========== News 下線 ========== */
.section__titleabout{ text-align:center; }

.news-underline-wrap{ width: clamp(200px, 40vw, 360px); }
.news-underline{ display:block; width:100%; height:auto; overflow:visible; }

.news-underline__path{
  stroke:#8a8a8a;
  stroke-width:1.1;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  vector-effect:non-scaling-stroke;

  /* スクロール描画用（JSで --len を設定） */
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset 1.6s ease;
}

/* 可視化で描画開始（JS が .is-inview を付与） */
.news-underline-wrap.is-inview .news-underline__path{ stroke-dashoffset: 0; }

/* SP はゆっくり */
@media (max-width:767px){
  .news-underline__path{ transition-duration: 2.3s; }
}

/* ========== Company（既存） ========== */


.company__title{
  display:flex; align-items:baseline; gap:14px;
  margin:0 0 4px; color:#222;
}
.company__title .en{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight:600; font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing:.02em;
}
.company__title .jp{ font-size: clamp(12px, 1.2vw, 14px); color:#666; }

/* 見出し下の曲線（News と同仕様） */
.company-underline{ width: clamp(200px, 36vw, 440px); margin: 0 0 26px; }
.company-underline .u-curve{ width:100%; height:auto; display:block; overflow:visible; }
.company-underline .cls-1{
  stroke:#231815; stroke-opacity:.5; stroke-width:1.2; fill:none;
  vector-effect: non-scaling-stroke;
  stroke-linecap:round; stroke-linejoin:round;

  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset 1.6s ease;
}
.company-underline.is-inview .cls-1{ stroke-dashoffset: 0; }

@media (max-width: 767px){
  .company-underline .cls-1{ transition-duration: 2.6s; }
}

/* 表（定義リスト） */
.company-table{ margin:0; border-top:1px solid #e5e6ea; }
.company-table .row{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap:24px;
  padding:18px 0;
  border-bottom:1px solid #e5e6ea;
}
.company-table dt{ color:#333; font-weight:600; line-height:1.6; }
.company-table dd{ margin:0; color:#222; line-height:1.9; }
.company-table dd p{ margin:.2em 0; }

@media (max-width:767px){
  .company-table .row{ grid-template-columns:1fr; gap:8px; padding:14px 0; }
  .company-table dt, .company-table dd{ font-size:14px; }
}




/* ===== Service ===== */
.service{ 
  padding: clamp(40px,5vw,72px) 0; 
}

/* 見出し */
.service__head{ position: relative; }
.service__headInner{
  position: relative;
  padding-top: clamp(8px, 2vw, 12px);
  padding-bottom: clamp(24px, 3vw, 36px);
  text-align: center;
}

/* クリオネ線（Memberと同じクラスを流用） */
.service__underline{ margin: 8px auto 18px; width: clamp(220px, 32vw, 420px); }
.service__underline .u-curve{ width:100%; height:auto; }

/* 右上の青い模様 */
.service__moyou{
  position: absolute;
  right: clamp(0px, 2vw, 16px);
  top: clamp(-24px, -2.4vw, -40px);
  width: clamp(140px, 22vw, 240px);
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* KV（全幅） */
.service__kv{ margin: 0 0 clamp(36px,5vw,56px); }
.service__kv img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* イントロ 2カラム（PC）→ 1カラム（SP） */
.service__intro{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(16px, 4vw, 40px);
  align-items: start;
  margin-bottom: clamp(40px,6vw,72px);
}
.service__side{ margin:0; }
.service__side img{ width:100%; height:auto; display:block; border-radius: 4px; }

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

/* 3枚サムネイル */
.service__thumbs{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2.6vw, 24px);
}
.service__thumb img{
  width:100%; height:auto; display:block; border-radius: 4px;
  object-fit: cover;
}
@media (max-width: 767px){
  .service__thumbs{ grid-template-columns: 1fr; }
}

/* ===== Service（幅1140px・中央寄せに変更）===== */
.service{ 
  padding: clamp(40px,5vw,72px) 0;
}

/* セクション内の横幅を1140pxに統一＆中央寄せ */
.service .container,
.service__headInner,
.service__kv{
  width: min(1140px, 100%);
  margin-inline: auto;
}

/* 見出し */
.service__head{ position: relative; }
.service__headInner{
  position: relative;
  padding-top: clamp(8px, 2vw, 12px);
  padding-bottom: clamp(24px, 3vw, 36px);
  text-align: center;
}
.service__title{
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: .02em;
  margin-bottom: -120px;
}

/* クリオネ線（Member流用） */
.service__underline{ margin: 8px auto 18px; width: clamp(220px, 32vw, 420px); }
.service__underline .u-curve{ width:100%; height:auto; }

/* 右上の青い模様（1140px内での絶対配置） */
.service__moyou{
  position: absolute;
  right: clamp(0px, 2vw, 16px);
  top: clamp(-24px, -2.4vw, -12px);
  width: clamp(140px, 22vw, 240px);
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* KV を 1140px 幅内で中央寄せ */
.service__kv{ 
  margin: 0 auto clamp(36px,5vw,56px); 
}
.service__kv img{
  display:block;
  width:100%;
  height:auto;
  object-fit: cover;
}

/* イントロ 2カラム（PC）→ 1カラム（SP） */
.service__intro{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(16px, 4vw, 40px);
  align-items:start;
  margin-bottom: clamp(40px,6vw,72px);
}
.service__text p{
  line-height:1.9; 
  color:#222;
 }
.service__side{ margin:0; }
.service__side img{ width:100%; height:auto; display:block; border-radius:4px; }

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

/* 3枚サムネイル：1140px 幅内で3等分 */
.service__thumbs{
  list-style:none; margin:0; padding:0;
  width: min(1140px, 100%);
  margin-inline: auto;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2.6vw, 24px);
}
.service__thumb img{
  width:100%;
  aspect-ratio: 4 / 3;   /* きれいに揃うよう任意の比率を付与 */
  height:auto;
  object-fit: cover;
  border-radius:4px;
}

@media (max-width: 767px){
  .service__thumbs{ grid-template-columns: 1fr; }
  .service__thumb img{ aspect-ratio: auto; } /* SPは自然比率でOK */
  .service__title{
  margin-bottom: -78px;
}
}

/* Tablet only: 左右に 3% 余白（=3vw）を付与 */
@media (min-width: 768px) and (max-width: 1199px){
  /* このプロジェクトでは 1140px 幅にしている主要ブロックが
     それぞれ独立しているため、各ブロックに内側余白を付与 */
  .service .container,
  .service__headInner,
  .service__kv,
  .service__thumbs{
    box-sizing: border-box;
    width: min(1140px, 100%);   /* セクション幅のルールは維持 */
    padding-inline: 3vw;        /* 画面幅の 3% を左右に */
    margin-inline: auto;        /* 中央寄せはそのまま */
  }

    .service__title{
  margin-bottom: -85px;
}
}

/* サービス：文章上の見出し＋区切り線 */
.service__intro-title{
  margin: 0 0 10px;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;             /* semibold 指定 */
  font-size: 22px;
  line-height: 1.4;
  color: #222;
}

.service__intro-sep{
  display: block;
  width: 300px;                 /* 区切り線の長さ */
  height: 1px;                  /* 線の太さ */
  background: #000000;          /* 区切り線の色 */
  margin: 0 0 20px;             /* タイトルとの間隔 / 下の本文との間隔 */
  
}

@media (max-width: 767px){
  .service__intro-title{ font-size: 18px; }
  .service__intro-sep{ width: 230px; margin-bottom: 16px; }
}

/* サービス：英字キッカー */
.service__intro-kicker{
  margin: 0 0 6px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 15px;      /* ご指定 */
  line-height: 1.2;
  color: #222;
}

@media (max-width: 767px){
  .service__intro-kicker{ font-size: 15px; }
  .service__headInner > p{
    font-size: 12px;
  }

  .service__text p{
     font-size: 14px;
  }
}

/* クリオネ見出しの上下余白リセット */
.service__headInner > p{
  margin: 0;             /* ← pのデフォルト余白を消す */
  line-height: 1.1;
}


/* もし見出し下の曲線との隙間を少しだけ作りたい場合はここで調整 */
.service__underline{ margin-top: 8px; }  /* 要らなければ 0 に */

/* service2 用：セクション先頭に大きめ余白 + 左上に背景 */
.service--v2{
  position: relative;
  padding-top: clamp(180px, 22vw, 360px); /* ← service1 より大きめの上余白 */
}
.service--v2::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;               /* 左上起点 */
  width:min(920px, 70vw);            /* デザインに合わせた見た目サイズ */
  height:min(560px, 42vw);
  background: url("/img/service2back.svg") left top / contain no-repeat;
  opacity: .9;                        /* 必要なら薄く */
  pointer-events:none;
  z-index: 0;
}
/* 中身は背景の上に */
.service--v2 > *{ position: relative; z-index: 1; }

/* ========== service3 の差分 ========== */
.service--v3 .service__headInner{
  position: relative;
}

/* 差分：模様をタイトル左に。右配置は無効化 */
.service--v3 .service__moyou{
  position: absolute;
  left: -40px;              /* 余白はデザインに合わせて微調整 */
  right: auto;
  top: -6px;
  width: clamp(120px, 18vw, 220px);
  height: auto;
  pointer-events: none;
  user-select: none;
  transform: none;          /* 右側用の transform を使っていた場合の打ち消し */
}

/* もし既存で右側固定のスタイルがある場合は無効化しておく */
.service--v3 .service__headInner > .service__moyou.service__moyou--left{
  right: auto !important;
  
}

/* コンテナ幅とレスポンシブ余白（既存ルールに合わせる） */
.flow .container{
  max-width:1140px;
  margin-inline:auto;
  padding-top: 150px;

}
@media (min-width:768px) and (max-width:1199px){
  .flow .container{padding-inline:3%;}
}

/* セクションベース */
.flow{position:relative;padding: clamp(56px,8vw,96px) 0;}
.flow__inner{position:relative;}



/* 見出し */
.flow__title{
  position:relative; z-index:1;
  display:flex; gap:14px; align-items:baseline; justify-content:center;
  margin: clamp(96px,12vw,140px) 0 10px; color:#222; text-align:center;
}
.flow__title .en{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-weight:700; letter-spacing:.02em;
  font-size: clamp(28px,3.2vw,44px);
}
.flow__title .jp{ font-size: clamp(12px,1.4vw,16px); color:#555; }

/* 見出し下の直線（スクショ通りのフラットライン） */
.flow__titleLine{
  display:block; width: clamp(140px, 18vw, 240px); height:2px;
  margin: 6px auto clamp(18px,3vw,28px);
  background:#222; opacity:.9; border-radius:1px;
}

/* リード文 */
.flow__lead{
  max-width: 860px; margin: 0 auto;
  text-align:center; color:#222; line-height:1.9;
  font-size: clamp(14px,1.6vw,16px);
}

/* カーブ（上右・下左） */
.flow__curve{ position:absolute; pointer-events:none; }
.flow__curve--bottom{ left: 0; bottom:14px; width:min(72vw, 1100px); }
.flow__curveSvg{ width:100%; height:auto; overflow:visible; }

/* 1本だけの path を dash 描画 */
.flow__curvePath{
  stroke:#8a8a8a; stroke-opacity:.65; stroke-width:1.5; fill:none;
  vector-effect:non-scaling-stroke;
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset 1.8s cubic-bezier(.22,.61,.36,1);
}
.flow__curve.is-inview .flow__curvePath{ stroke-dashoffset:0; }

@media (max-width:959px){
  .flow__curve--top{ 
    width:min(78vw, 980px); 
  }
  .flow__curve--bottom{ width:min(88vw, 980px); }
}
@media (prefers-reduced-motion: reduce){
  .flow__curvePath{ transition:none; stroke-dasharray:none; stroke-dashoffset:0; }
}

/* ===================== Flow section (CSS only / complete) ===================== */

/* コンテナ幅と左右余白（既存ポリシーに合わせて 1140px + タブレット 3%） */
.flow .container{
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 24px);
}
@media (min-width:768px) and (max-width:1199px){
  .flow .container{ padding-inline: 3%; }
}

/* セクション */
.flow{
  position: relative;
  padding: clamp(56px, 8vw, 96px) 0;
}
.flow__inner{ position: relative; }

/* 背景の飾り “Flow” —— 見出しより左上へ */
.flow__bg{
  position: absolute;
  left: 25%;
  top: -50%;
  transform: translate(-68%, -18%);  /* ←必要に応じて微調整（左/上へ） */
  font-family: "Playfair Display", serif;
  font-size: clamp(92px, 14vw, 200px);
  line-height: 1;
  color: #000;
  opacity: .06;
  pointer-events: none;
  user-select: none;
}

/* 見出し */
.flow__title{
  position: relative;
  z-index: 1;
  display: flex;
  gap: 14px;
  align-items: baseline;
  justify-content: center;
  margin: clamp(96px, 12vw, 140px) 0 10px; /* 背景文字と干渉しないよう大きめ上余白 */
  color: #222;
  text-align: center;
}
.flow__title .en{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
  font-size: clamp(28px, 3.2vw, 44px);
}
.flow__title .jp{
  font-size: clamp(12px, 1.4vw, 16px);
  color: #555;
}

/* 見出し下のアンダーライン（フラットな直線） */
.flow__titleLine{
  display: block;
  width: clamp(140px, 18vw, 240px);
  height: 2px;
  margin: 6px auto clamp(18px, 3vw, 28px);
  background: #222;
  opacity: .9;
  border-radius: 1px;
}

/* リード文 */
.flow__lead{
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  color: #222;
  line-height: 1.9;
  font-size: clamp(14px, 1.6vw, 16px);
}

/* 右上 / 左下のカーブ（スクロール描画用） */
.flow__curve{ position: absolute; pointer-events: none; }
.flow__curve--top{
  width: min(60vw, 1100px);
}
.flow__curve--bottom{
  left: 0;
  bottom: 14px;
  width: min(72vw, 1100px);
}
.flow__curveSvg{ width: 100%; height: auto; overflow: visible; }

/* 1本だけの path を dash で描画（JS が --len をセット） */
.flow__curvePath{
  stroke: #000000;
  stroke-opacity: .65;
  stroke-width: 1.5;
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset 1.8s cubic-bezier(.22,.61,.36,1);
}
/* ビューイン時（JSで .is-inview を付与） */
.flow__curve.is-inview .flow__curvePath{ stroke-dashoffset: 0; }

/* レスポンシブ調整 */
@media (max-width: 959px){
  .flow__curve--bottom{ width: min(88vw, 980px); }
}

/* 動画削減設定の尊重 */
@media (prefers-reduced-motion: reduce){
  .flow__curvePath{
    transition: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}
/* 位置指定（必要に応じて微調整） */
.flow__curve{ position:absolute; pointer-events:none; }


/* SVG のはみ出し防止と拡縮の安定化 */
.flow__curve svg{ display:block; overflow:visible; }

/* Flow 専用の線（id=aboutCurve）だけに適用 */
.flow__curve ./about.htmlCurve{
  stroke:#000000;
  stroke-width:1;
  stroke-opacity:1;
  fill:none;
  vector-effect:non-scaling-stroke;

  /* 初期は見えない（JSで長さを入れる） */
  opacity:0;
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset 1.8s cubic-bezier(.22,.61,.36,1), opacity .01s linear;
}

/* ビューに入ったら描画（Flow だけ） */
.flow__curve.is-inview ./about.htmlCurve{
  opacity:1;
  stroke-dashoffset:0;
}

/* 動画削減を尊重 */
@media (prefers-reduced-motion: reduce){
  .flow__curve ./about.htmlCurve{
    transition:none;
    opacity:1;
    stroke-dasharray:none;
    stroke-dashoffset:0;
  }
}

/* ====== FAQ base ====== */
.faq { --pill:#AAADB7; --text:#222; --bg:#fff; }
.faq .container{ max-width:1160px; margin-inline:auto; } /* 既存の .container があるなら不要 */

.faq__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:5px;
}

/* 質問のピル */
.faq__toggle{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  border:0;
  border-radius:9999px;
  background:var(--pill);   /* #AAADB7 */
  color:#fff;
  text-align:left;
  padding:16px 56px 16px 44px;
  font-size:16px;
  line-height:1.4;
  position:relative;
  cursor:pointer;
}

/* 左の “Q” 丸 */
.faq__qmark{
  width:28px; height:28px; flex:0 0 28px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  font-weight:700; letter-spacing:.02em;
}

/* 右端の + / − 記号（擬似要素） */
.faq__sign{
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.18);
}
.faq__sign::before,
.faq__sign::after{
  content:"";
  position:absolute; inset:0; margin:auto;
  width:12px; height:2px; border-radius:1px; background:#fff;
  transition:transform .25s ease, opacity .25s ease;
}
/* 縦棒（+） */
.faq__sign::after{ transform:rotate(90deg); }
/* 展開時は − 表示に（縦棒を消す） */
.faq__toggle[aria-expanded="true"] .faq__sign::after{
  opacity:0; transform:rotate(90deg) scaleX(0);
}

/* 回答パネル（アニメのため高さをトグル） */
.faq__a{
  background:#F9F9F9;
  color:var(--text);
  padding:0 45px;
  overflow:hidden;
  height:auto;              /* JS で制御 */
  opacity:1;                /* JS で制御 */
}

/* 回答の本文 */
.faq__a p{ margin:16px 0; }

/* 回答先頭の “A” 丸 */
.faq__amark{
  display:inline-grid; place-items:center;
  width:28px; height:28px; margin-right:10px;
  border-radius:50%; background:#000; color:#fff; font-weight:700;
}

/* アクセシビリティ設定 */
.faq__item{ display:grid; gap:8px; }

.faq__toggle:hover{ filter:brightness(0.98); }

@media (max-width: 767px){
  .faq__toggle{ font-size:15px; padding:14px 52px 14px 40px; }
}

/* ▼ 差分：Q と A の頭をそろえる（A が左に寄らないように調整） */
.faq__a p{
  position: relative;
  padding-left: 44px; /* ← .faq__toggle の左パディングに合わせる */
}

/* ▼ 差分：A の表示を黒文字に & 指定画像を背景に、位置を絶対配置で揃える */
.faq__amark{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0;                 /* 既存の余白をリセット */
  width: 28px;
  height: 28px;
  color: #000;                     /* A の文字色を黒に */
  background: url("/img/a_back.svg") center/cover no-repeat; /* 指定画像を背景に */
}

:root{
  --gray:#AAADB7;      /* 指定グレー */
  --ink:#222;
  --bg:#fff;
  --line:#DCDDE3;
  --accent:#2F2A3C;    /* タブの濃色 */
}
*{box-sizing:border-box}


/* Tabs */
.contact-tabs{
  display:flex;
  gap:8px;
  justify-content:center;
  margin:50px auto 28px
}

.contact-tabs__btn{
  appearance:none;border:0;cursor:pointer;padding:10px 18px;border-radius:999px;
  background:#E9EAF0;color:#333;font-weight:600;letter-spacing:.02em;
  transition:transform .12s ease, background .2s ease, color .2s ease;
}
.contact-tabs__btn[aria-selected="true"]{
  background:#535472;
  color:#fff;
}
.contact-tabs__btn:active{
  transform:translateY(1px)
}

/* Panel base */
.contact{
  background:#fff;
  border-radius:14px;
  padding:28px 20px;margin:0 auto 48px
}
@media(min-width:960px){ 
  .contact{
    padding:32px 40px
  } 
}

/* Rows */
.form{width:100%}
.form-row{
  display:grid;grid-template-columns:180px 1fr;gap:14px 18px;align-items:start;
  padding:14px 0;border-bottom:1px solid var(--line)
}
.form-row:first-child{border-top:1px solid var(--line)}
.form-label{color:#444;font-weight:600;padding-top:10px}
.form-ctrl{width:100%}

/* Inputs */
input[type="text"],input[type="email"],input[type="tel"],textarea{
  width:100%;background:#fff;border:1px solid var(--gray);border-radius:8px;
  padding:14px 16px;font-size:16px;line-height:1.5;outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
textarea{min-height:220px;resize:vertical}
input::placeholder,textarea::placeholder{color:#8E9098}
input:focus,textarea:focus{border-color:#7f82a3;box-shadow:0 0 0 3px rgba(127,130,163,.15)}

/* Aラベル行（Aは黒文字・背景画像） */
.answer-head{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.a-badge{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:url("/img/a_back.svg") center/cover no-repeat;
  display:grid;place-items:center;color:#000;font-weight:700;
}

/* Policy */
.policy{margin:28px auto 26px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px 18px;max-width:980px}
.policy h4{margin:0 0 10px;font-weight:700}
.policy p{margin:.4em 0}


/* Submit */
.form-actions{display:flex;justify-content:center;margin:20px 0 40px}
.btn-submit{
  appearance:none;border:0;border-radius:999px;padding:14px 32px;
  background:var(--accent);color:#fff;font-weight:700;letter-spacing:.08em;
  box-shadow:0 8px 20px rgba(0,0,0,.12);cursor:pointer;transition:transform .15s ease,opacity .2s ease;
}
.btn-submit:hover{opacity:.9}
.btn-submit:active{transform:translateY(1px)}

/* Panel toggle */
.tabpanel{display:none}
.tabpanel.is-active{display:block}

/* Responsive */
@media(max-width:767px){
  .form-row{grid-template-columns:1fr;gap:8px;padding:12px 0}
  .form-label{padding:0}
}
/* ---- Policy ---- */
.policy{margin:28px auto 18px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 18px;max-width:980px}
.policy h4{margin:0 0 12px;font-weight:700}
.policy-lead{
  margin:0 0 10px;
  padding:10px 12px;
  background:#f6f7fb;
  border:1px solid #e7e8ee;
  border-radius:8px;
  font-size:14px;
  color:#333;
}
.policy-body p{margin:.6em 0}

/* ---- Consent checkbox ---- */
.policy-consent{display:flex;justify-content:center;margin:10px 0 22px}
.policy-consent label{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:#222}
.policy-consent input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:20px;height:20px;border:2px solid #9aa0b2;border-radius:4px;display:grid;place-items:center;cursor:pointer;
  background:#fff;transition:border-color .2s ease, background .2s ease
}
.policy-consent input[type="checkbox"]:checked{
  background:#4c4f5d;border-color:#4c4f5d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center
}

/* ---- Submit button (pill) ---- */
.form-actions{display:flex;justify-content:center;margin:10px 0 40px}
.btn-submit{
  appearance:none;border:0;cursor:not-allowed;
  min-width:260px;height:48px;padding:0 28px;border-radius:999px;
  background:linear-gradient(180deg,#6a6f7d 0%, #494d59 100%);
  color:#fff;font-weight:700;letter-spacing:.1em;
  box-shadow:0 10px 24px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.15);
  transition:opacity .2s ease, transform .15s ease, filter .2s ease
}
.btn-submit:not([disabled]){cursor:pointer;filter:saturate(1.05)}
.btn-submit:not([disabled]):hover{opacity:.92}
.btn-submit:not([disabled]):active{transform:translateY(1px)}
.btn-submit[disabled]{opacity:.55}

/* ---- Aバッジ（既出）黒字 + 背景画像 ---- */
.a-badge{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:url("/img/a_back.svg") center/cover no-repeat;
  display:grid;place-items:center;color:#000;font-weight:700;
}

/* チェックボックス（なければ追加） */
.policy-consent{display:flex;justify-content:center;margin:10px 0 22px}
.check{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:#222}
.check input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:20px;height:20px;border:2px solid #9aa0b2;border-radius:4px;
  display:grid;place-items:center;cursor:pointer;background:#fff;
  transition:border-color .2s ease, background .2s ease
}
.check input[type="checkbox"]:checked{
  background:#4c4f5d;border-color:#4c4f5d;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center
}

/* 送信ボタン（影 追加） */
.btn-submit{
  /* 既存の見た目はそのまま + 影を追加 */
  filter: drop-shadow(3.889px 5.185px 2.593px rgba(0,0,0,.25));
}

.formmessage{
  margin-top: 30px;
  text-align: center;
  font-weight: 600;
}

/* 共通 */
:root{
  --container: 1140px;
  --ink: #000;
  --muted:#666;
  --pill:#AAADB7;
}
.section{ padding: clamp(48px,6vw,96px) 0; }
.container{ width:min(var(--container), 92vw); margin-inline:auto; }

/* 見出し + 曲線（Aboutの線と同仕様） */
.recruit__title{
  text-align:center;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight:600;
  font-size: clamp(28px,3.2vw,44px);
  letter-spacing:.02em;
  margin:0 0 12px;
}
.vision-underline{ display:grid; place-items:center; margin-bottom: clamp(28px,4vw,56px); }
.vision-underline .u-curve{ width:min(420px,60%); height:auto; }
.vision-underline .cls-1{
  stroke:#231815; stroke-opacity:.55; stroke-width:1.2; fill:none;
  vector-effect:non-scaling-stroke;
}

/* 募集要項（タイポ指定） */
.recruit__spec .row{
  display:grid; grid-template-columns: 220px 1fr;
  gap: 24px; padding: 16px 0;
  border-bottom:1px solid #eee;
}
.recruit__spec dt{
  color:#000;
  font-family: "Noto Sans JP", system-ui, -apple-system;
  font-size: 24px; font-weight:500; line-height:20px;
}
.recruit__spec dd{
  margin:0;
  color:#000;
  font-family: "Noto Sans JP", system-ui, -apple-system;
  font-size:16px; font-weight:350; line-height:30px;
}
@media (max-width: 767px){
  .recruit__spec .row{ grid-template-columns: 1fr; gap:8px; }
}

/* フォーム見出し */
.recruit__formTitle{
  margin: clamp(80px,5vw,72px) 0 50px;
  font-family: "Mplus 1"; 
  font-weight:600; 
  font-size:22px;
  text-align: center;
}

/* フォーム（外観のみ） */
.r-form{ display:grid; gap:18px; }
.f-row{ display:grid; gap:8px; }
.f-row--inline{ align-items:center; grid-template-columns: 160px 1fr; }
.f-label{
  color:#111; font-family:"Noto Sans JP"; font-size:15px; font-weight:500;
}
.tag{
  display:inline-block; 
  margin-left:.6em; 
  padding:.15em .6em;
  background:#535472; 
  color:#fff;
  border-radius:12px; 
  font-size:12px;
}
.f-input, .f-select{
  width:100%; height:48px; padding:0 14px; border-radius:10px;
  border:1px solid #e0e2e8; background:#fff; font-size:16px; color:#111;
}
.f-select{ width:auto; min-width:112px; }
.f-inline{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.f-suffix{ font-size:14px; color:#666; }
.f-radio{ display:flex; gap:18px; align-items:center; }
.f-radio input{ margin-right:.35em; }

.dropzone{
  border:2px dashed #c8ccd6; border-radius:12px; min-height:120px;
  display:grid; place-items:center; color:#8a8fa0; font-size:18px;
  background:#fafbff;
}

/* 送信ボタン（見た目のみ） */
.f-row--submit{ display:grid; place-items:center; margin-top:12px; }
.btn-send{
  appearance:none; border:0; cursor:pointer;
  padding:14px 42px; border-radius:26px; color:#fff; background:#373845;
  font-weight:600; letter-spacing:.1em;
  filter: drop-shadow(3.889px 5.185px 2.593px rgba(0,0,0,.25));
  transition: transform .12s ease;
}
.btn-send:active{ transform: translateY(1px); }

/* 細かな調整 */
.recruit__body{ margin-top: 8px; }

/* 見出しレイアウト */
.recruit__headInner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.recruit__title{ margin:0; display:flex; align-items:baseline; gap:20px; }
.recruit__title .en{
  font-family: "Inter", system-ui, -apple-system;
  font-weight:600;
  font-size: clamp(28px,3.2vw,44px);
  letter-spacing:.02em;
  color:#000;
}
.recruit__title .jp{
  font-family:"Noto Sans JP", system-ui, -apple-system;
  font-weight:500;
  font-size:14px;
  line-height:1;
  color:#333;
}

/* 下線（表示されない問題を確実に解消） */
.recruit__underline .u-curve{ width:min(260px, 50vw); height:auto; display:block; }
.recruit__underline .cls-1{
  stroke:#231815;            /* 明示的に線色を指定 */
  stroke-opacity:.55;
  stroke-width:1.6;          /* 少し太めにして視認性UP */
  fill:none;
  vector-effect:non-scaling-stroke;
}

/* ========================= Recruit (採用情報) ========================= */

/* セクション余白（任意で調整） */
.recruit{ padding: clamp(40px,6vw,80px) 0; }

/* 見出し（Designer 内装設計・空間デザイナー求人） */
.recruit-head{
  display:flex; align-items:flex-end; gap:18px;
  margin: 0 0 clamp(18px,3vw,28px);
}
.recruit-head .en{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: clamp(26px,3.4vw,40px);
  letter-spacing:.01em;
  color:#000;
  line-height:1.2;
  margin:0;
}
.recruit-head .jp{
  margin: 0 0 4px;
  color:#000;
  font-family: "Noto Sans JP", system-ui, -apple-system;
  font-weight: 500;
  font-size: clamp(12px,1.4vw,16px);
  line-height:1.2;
}

/* タイトル下の曲線（About: 想いを空間に と同仕様） */
.recruit-underline{ margin: 6px 0 clamp(18px,3vw,32px); width: min(420px, 58%); }
.recruit-underline .u-curve{ display:block; width:100%; height:auto; overflow:visible; }
.recruit-underline .u-curve .cls-1{
  stroke:#231815; stroke-opacity:.55; stroke-width:1.2; fill:none;
  vector-effect: non-scaling-stroke;
}

/* ===================== 募集要項（表） ===================== */
.recruit-table{
  margin: auto;
  border-top: 1px solid #e5e6ea;
  max-width: 1140px;
}
.recruit-table .row{
  display:grid;
  grid-template-columns: 220px 1fr;   /* 左ラベル / 右本文 */
  gap: 28px;
  padding: 20px 0;
  border-bottom: 1px solid #e5e6ea;
}

/* 左側ラベル（採用情報／業務内容…）— 指定タイポ */
.recruit-table dt{
  margin:0;
  color:#000;
  font-family:"Noto Sans JP", system-ui, -apple-system;
  font-size: 24px;
  font-weight: 500;                  /* 指定：500 */
  line-height: 20px;                 /* 指定：20px */
  letter-spacing: .01em;
}

/* 右側本文 — 指定タイポ */
.recruit-table dd{
  margin:0;
  color:#000;
  font-family:"Noto Sans JP", system-ui, -apple-system;
  font-size: 16px;
  font-weight: 350;                  /* 指定：350 */
  line-height: 30px;                 /* 指定：30px */
}

/* 本文内の小見出し（［必須］など） */
.recruit-table .subhead{
  font-weight: 500;
  margin: .3em 0 .2em;
}

/* 箇条書きの体裁 */
.recruit-list{
  margin: .2em 0 0;
  padding-left: 1.2em;
}
.recruit-list li{
  margin: 0;
  list-style: disc;
}

/* レスポンシブ（SP は1カラムに） */
@media (max-width: 767px){
  .recruit-table .row{
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 0;
  }
  .recruit-table dt{
    font-size: 18px;
    line-height: 1.3;
  }
  .recruit-table dd{
    font-size: 15px;
    line-height: 28px;
  }
  .recruit-underline{ width: 72%; }
}

/* ===== フォーム共通（SP: 縦並び） ===== */
.cform{ max-width: 980px; margin-inline:auto; }
.cform__row{
  display: flex;
  flex-direction: column;           /* SP は縦並び */
  gap: 8px;
  margin: 16px 0;
}
.cform__label{
  font-weight: 600;
  color: #222;
}
.cform__field{ width: 100%; }
.cform__field input[type="text"],
.cform__field input[type="email"],
.cform__field input[type="tel"],
.cform__field select,
.cform__field textarea{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #D7D8DE;
  border-radius: 8px;
  font-size: 16px;
  background: #fff;
}
.cform__field textarea{ min-height: 160px; resize: vertical; }

/* 複数要素を横並びにしたい小ブロック（生年月日など） */
.cform__inline{ display:flex; flex-wrap:wrap; gap: 10px 12px; }
.cform__radioGroup{ display:flex; flex-wrap:wrap; gap: 18px; align-items:center; }
.cform__radioGroup label{ display:inline-flex; align-items:center; gap:6px; }

/* ===== PC（横並び） ===== */
@media (min-width: 960px){
  .cform__row{
    display: grid;
    grid-template-columns: 220px 1fr;  /* 左：項目 / 右：入力欄 */
    align-items: center;                /* 高さを中央でそろえる */
    column-gap: 24px;
  }
  .cform__label{
    text-align: right;
    padding-right: 4px;
  }
  /* テキストエリアなど上揃えにしたい場合 */
  .cform__row--top .cform__label{ align-self: start; padding-top: 8px; }
  .cform__row--top .cform__field{ align-self: start; }
}

/* ===== ベース ===== */
.cform{ max-width: 980px; margin-inline:auto; }
.cform__list{ margin:0; padding:0; }
.cform__row{
  display:flex;
  flex-direction:column;   /* SP: 縦 */
  gap:8px;
  padding:12px 0;
}
.cform__label{ font-weight:600; color:#222; display:flex; align-items:center; gap:8px; }
.cform__labelText{ white-space:nowrap; }
.cform__badge{
  display:inline-block; padding:2px 8px; border-radius:12px;
  font-size:12px; line-height:1; background:#eef0f7; color:#555;
}
.cform__badge--req{ background:#433B6A; color:#fff; }
.cform__field{ width:100%; }

.cform__field input[type="text"],
.cform__field input[type="email"],
.cform__field input[type="tel"],
.cform__field select,
.cform__field textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid #D7D8DE;
  border-radius:10px;
  background:#fff; font-size:16px;
}
.cform__field textarea{ min-height:160px; resize:vertical; }

.cform__inline{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; }
.cform__unit{ color:#555; }

.cform__radioGroup{ display:flex; gap:24px; }
.cform__radioGroup input{ width:16px; height:16px; }

.cform__drop{
  border:2px dashed #D7D8DE; border-radius:10px;
  padding:32px; text-align:center; color:#6B6F7A; background:#F7F8FC;
}

/* 送信ボタン */
.cform__actions{ display:flex; justify-content:center; padding:20px 0 8px; }
.cform__submit{
  appearance:none; border:0; border-radius:24px;
  padding:12px 28px; background:#353247; color:#fff; font-weight:600;
  box-shadow:0 5px 12px rgba(0,0,0,.15);
  cursor:pointer;
}

/* ===== PC: 横並び（タイトル / 入力欄） ===== */
@media (min-width: 960px){
  .cform__row{
    display:grid;
    grid-template-columns: 240px 1fr;   /* 左：項目 / 右：入力欄 */
    align-items:center;                 /* 行内の縦位置を中央に */
    column-gap:28px;
  }
  .cform__label{
    justify-content:flex-end;           /* ラベル文字を右寄せ */
  }
  .cform__row--top .cform__label{
    align-self:start; padding-top:8px;  /* テキストエリアなどの上揃え */
  }
  .cform__row--top .cform__field{ align-self:start; }
}

/* 生年月日：年・月・日を横一列で並べる */
.cform__inline{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: nowrap;          /* ← 折り返さない */
}

.cform__inline select{
  min-width: 140px;           /* 同程度の幅で安定 */
}

.cform__unit{                 /* 「年」「月」「日」の余白 */
  margin: 0 8px 0 2px;
  white-space: nowrap;        /* 折り返し防止 */
}

/* 画面が狭いときだけ折り返し可（必要なら） */
@media (max-width: 480px){
  .cform__inline{
    flex-wrap: wrap;          /* SPは状況に応じて折り返し */
    gap: 10px 12px;
  }
}


/* =========================================================
   アーカイブページCSS
   ========================================================= */

     /* 基本レイアウト */
  .container{max-width:1140px;margin-inline:auto;padding-inline:20px;}

.works-archive__cats{
  display:grid;
  place-items:center;
  margin: 8px auto 80px;
}

.cat-tabs{
  display:flex;
  padding-bottom:48px;
  align-items:center;
}

@media (max-width: 767px) {
.cat-tabs{
  padding-bottom:10px;
}

.breadcrumbs__item{
  font-size: 12px;
}

}

.cat-tabs a{
  color:#111;
  text-decoration:none;
  font-size:14px;
  letter-spacing:.02em;
  padding:.35em .9em;
  border-radius:4px;
  transition:opacity .2s ease;
}

.cat-tabs a:hover{ opacity:.8; }

/* 有効(選択)状態はグレーの小さなピル背景 */
.cat-tabs a.is-active{
  background:#9a9a9a;      /* 画像のトーンに合わせたグレー */
  color:#fff;
}


  .works-grid{
    list-style:none; margin: 0; padding: 8px 0 24px;
    display:grid; grid-template-columns: repeat(4, 1fr);
    gap: 28px;
  }
  @media (max-width: 1024px){ .works-grid{ grid-template-columns: repeat(3, 1fr);} }
  @media (max-width: 767px){ .works-grid{ grid-template-columns: repeat(2, 1fr);} }

  .work-card{ background:#fff; }
  .work-card a{ color:inherit; text-decoration:none; display:block; }
  .work-card__thumb{ aspect-ratio: 1/1; overflow:hidden; border-radius:4px; margin:0 0 8px; background:#f4f5f7; }
  .work-card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .work-card__meta{ display:flex; justify-content:space-between; color:#9aa; font-size:11px; margin-bottom:6px; }
  .work-card__title{ font-size:13px; line-height:1.5; margin:0 0 4px; font-weight:600; color:#222; }
  .work-card__excerpt{ font-size:12px; line-height:1.6; color:#666; margin:0; }

  /* Pagination (指定どおりのサイズ) */
  .pagination{ 
    display:grid; 
    place-items:center; 
    margin: 80px 0 36px; 
  }
  .nav-links{ list-style:none; display:flex; gap:10px; padding:0; margin:0; }
  .page-numbers{
    width:45px; height:45px; display:grid; place-items:center;
    border-radius:45px; background:#ABAEB7; color:#fff; text-decoration:none;
    font-size:13px; line-height:1; font-weight:600;
  }
  .page-numbers.current{ background:#3A3A3A; pointer-events:none; }


  /* ===== シングルページ (breadcrumb 下) ===== */
.post-header{
  max-width:1070px;
  margin:auto;
  
}

.post-header__dates{
  display: flex;
  align-items: center;
  gap: 10px;
  color: #666;
  font-size: 14px;
  line-height: 1;
}

.post-date{ color:#666; letter-spacing:.02em; }

.post-header__bar{
  width: 1px;
  height: 14px;
  background: #cfcfcf;
  display: inline-block;
}

.post-updated{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color:#666;
}
.post-updated__icon{
  width: 16px;
  height: 16px;
  opacity: .9;
}

/* カテゴリー PILLS */
.post-cats{
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 10px 0 0;
  margin: 0 0 8px;
}
.post-cats a{
  display: inline-block;
  padding: 6px 10px;
  font-size: 12px;
  color:#333;
  text-decoration: none;
  border: 1px solid #D0D3DB;
  border-radius: 9999px;
  background: #fff;
}

/* タイトル */
.post-title{
  margin: 6px 0 0;
  font-weight: 700;
  color:#222;
  line-height: 1.35;
  font-size: clamp(22px, 3.4vw, 36px);
  letter-spacing: .02em;
}

/* 小さめ画面の詰め調整 */
@media (max-width: 480px){
  .post-header__dates{ gap:8px; font-size:13px; }
  .post-cats{ gap:6px; }
  .post-cats a{ padding:5px 9px; font-size:11.5px; }
}

/* PC時のコンテンツ幅を 750px にして中央寄せ */
@media (min-width: 1440px){
  .post-header{
   margin: auto;
   max-width: 1080px;

  }
}

/* PC時のコンテンツ幅を 750px にして中央寄せ 
@media (max-width: 1441px){
  .post-header{
    padding-left: 50px;
    
  }
}*/

/* single-news 本文 */
.news-body{max-width:1080px;margin:32px auto 0;padding:0 2px}
.news-body__lead{margin:0 0 16px}
.news-body__lead img{display:block;width:100%;height:auto}

.news-body__para{margin:0 0 28px;line-height:1.9;color:#333;font-size:16px}

.news-body__row{display:grid;grid-template-columns:1fr;gap:16px;align-items:start;margin:0 0 28px}
.news-body__media{margin:0}
.news-body__media img{display:block;width:100%;height:auto;border-radius:2px}
.news-body__text p{margin:0;line-height:1.9;color:#333;font-size:16px}

/* PC：2カラム／左右交互 */
@media (min-width: 768px){
  .news-body__row{grid-template-columns: 1fr 1fr;gap:24px}
  .news-body__row--reverse{direction:rtl}
  .news-body__row--reverse > *{direction:ltr}
}

/* お客様の声ベース */
.container{
  width:min(1120px, 92vw);
  margin-inline:auto;
  
}

/* アクセシビリティ：視覚的に非表示 */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* 一覧グリッド */
.voices{
  display:grid;
  gap:22px 26px;
  grid-template-columns: repeat(2, minmax(0,1fr));
  padding: 8px 0 32px;
}
@media (max-width: 768px){
  .voices{ grid-template-columns: 1fr; }
}

/* カード */
.voice-card{
  background:#fff;
  border:1px solid #e5e7ea;
  border-radius:6px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  padding:14px 16px 10px;
}

/* ヘッダー行（総合評価 + 星 + 数値） */
.voice-card__head{
  display:flex; align-items:center; gap:8px;
  color:#666; font-size:12px; line-height:1;
  margin-bottom:8px;
}
.voice-card__label{ color:#999; }
.voice-card__stars{
  color:#F2B01E; letter-spacing:.1em; font-size:13px;
}
.voice-card__score{ color:#333; font-weight:600; }

/* タイトル */
.voice-card__title{
  font-size:16px; font-weight:600; color:#222;
  margin: 4px 0 10px;
}

/* 本文（アイコン + 抜粋） */
.voice-card__body{
  display:grid; grid-template-columns: 56px 1fr; gap:12px;
}
.voice-card__avatar{
  width:56px; height:56px; border-radius:50%;
  background:
    radial-gradient(circle at 50% 35%, #e1e3e8 28px, transparent 29px),
    radial-gradient(circle at 50% 110%, #e1e3e8 52px, #cfd3da 53px);
  /* シンプルな人アイコン風のダミー */
}
.voice-card__excerpt{
  font-size:12px; line-height:1.8; color:#5a5f66;
  margin:0;
}

/* フッター（会社名 + more） */
.voice-card__foot{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:8px; padding-top:8px; border-top:1px solid #eef0f3;
}
.voice-card__company{
  font-size:12px; color:#4b73c2; text-decoration:none;
}
.voice-card__company:hover{ text-decoration:underline; }

.voice-card__more{
  font-size:11px; color:#8c8f94; text-decoration:none;
}
.voice-card__more:hover{ color:#666; }



/* レイアウト共通 */
.section { padding: clamp(24px, 4vw, 48px) 0; }
.container { width: min(1140px, 92%); margin: 0 auto; font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:#222; }

/* 総合評価 */
.voice-rating{
  display:flex; align-items:center; gap:10px;
  margin: 0 0 14px;
  font-size:14px; color:#555;
}
.voice-rating__label{ margin-right:6px; }
.voice-rating__score{ font-weight:700; color:#333; }

/* 星（☆→★） */
.stars{
  --v: 0;           /* 0〜5 の実数で設定（inline style） */
  --size: 16px;
  position:relative; display:inline-block; line-height:1; font-size:var(--size);color:#F5B301;
}
.stars::before{ content:""; color:#CCD0D6; letter-spacing:2px; }
.stars::after{
  content:""; color:#F5B301; letter-spacing:2px;
  position:absolute; inset:0 auto 0 0; width: calc(var(--v) / 5 * 100%);
  overflow:hidden; white-space:nowrap;
}
/* 大サイズ（総合評価用） */
.stars--lg{ --size:18px; }

/* 各項目レーティング行 */
.voice-subratings{
  background:#EEF1F6; border-radius:8px; padding:12px 16px;
  display:grid; gap:8px; margin-bottom:22px;
}
.voice-subratings__row{
  display:grid; grid-template-columns: 180px auto 24px; align-items:center; gap:10px;
  font-size:14px; color:#333;
}
.voice-subratings .name{ color:#666; }
.voice-subratings .score{ text-align:right; font-weight:700; }

/* タイトル */
.voice-title{
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight:700; margin: 10px 0 16px; color:#222;
}

/* 本文（アバター + 吹き出し） */
.voice-body{
  display:grid; grid-template-columns: 140px 1fr; gap:18px; align-items:start;
}
.voice-body__side{ margin:0; text-align:center; }
.avatar{
  width:96px; height:96px; border-radius:50%;
  background: radial-gradient(circle at 50% 38%, #dfe3ea 0 38px, transparent 39px) 50% 22% / 100% 100% no-repeat,
              #E9EDF3;
  border:1px solid #dfe3ea;
  margin: 0 auto 12px;
}
.company a{ color:#3171d5; text-decoration:none; font-size:14px; }
.company a:hover{ text-decoration:underline; }

/* 吹き出し */
.bubble{
  position:relative; background:#fff; border:1px solid #D9DCE3; border-radius:6px;
  padding:18px 20px;
  box-shadow: 0 2px 0 rgba(0,0,0,.03);
}
.bubble::before{
  content:""; position:absolute; left:-10px; top:26px;
  width:0; height:0; border-style:solid;
  border-width:10px 10px 10px 0;
  border-color:transparent #D9DCE3 transparent transparent;
}
.bubble::after{
  content:""; position:absolute; left:-8px; top:26px;
  width:0; height:0; border-style:solid;
  border-width:10px 10px 10px 0;
  border-color:transparent #fff transparent transparent;
}
.bubble p{ margin:0; line-height:1.9; color:#333; }

/* SP（1カラム） */
@media (max-width: 640px){
  .voice-subratings__row{ grid-template-columns: 1fr auto 22px; }
  .voice-body{ grid-template-columns: 1fr; }
  .voice-body__side{ order:2; }
  .bubble{ order:1; }
}

/* 追加：パンくずと間隔を空ける */
.voices{
  margin-top: 80px;
}

/* 既存の置き換え：背景色をデザイン寄りに、横並び前提のグリッドへ */
.voice-subratings{
  background:#E8ECF7;           /* ←色味を調整 */
  border-radius:8px;
  padding:12px 16px;
  display:grid;
  gap:10px;
  margin-bottom:22px;
  grid-template-columns: 1fr;   /* SP：1列 */
}

/* 各行は横並びで中央寄せ */
.voice-subratings__row{
  display:flex; align-items:center; gap:10px;
  font-size:14px; color:#333;
}
.voice-subratings .name{ color:#666; }
.voice-subratings .score{
  font-weight:700;
}

/* PCは3カラム×2段に */
@media (min-width: 768px){
  .voice-subratings{
    grid-template-columns: repeat(3, minmax(0,1fr));
    align-items:center;
  }
  /* 2段目の並び：4つ目=左、5つ目=中央（右は空き） */
  .voice-subratings__row:nth-child(4){ grid-column: 1 / 2; }
  .voice-subratings__row:nth-child(5){ grid-column: 2 / 3; }
}

/* Footer text color fix */
.site-footer { color: #fff; }

.site-footer .footer-nav .fcol,
.site-footer .footer-nav .fcol h3,
.site-footer .footer-nav .fcol li,
.site-footer .footer-nav .fcol a,
.site-footer .footer-nav .fcol a:visited {
  color: #fff;               /* 見出し・リスト・リンクすべて白 */
}

.site-footer .footer-nav .fcol a:hover,
.site-footer .footer-nav .fcol a:focus {
  color: #fff;
  opacity: .85;              /* ほんの少しだけ反応 */
}

/* 既存の横並びは触らない前提。念のための初期化 */
.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* モバイルで縦並び */
@media (max-width: 767px) {
  /* もしPCでflex横並びにしている場合に列方向へ */
  .service-list {
    display: flex;           /* 既にflexならそのままでもOK */
    flex-direction: column;  /* 縦並びへ */
    gap: 16px;               /* 各要素の間隔 */
  }

  .service-item {
    width: 100%;
  }

  /* サークルを中央寄せにしたい場合（お好みで） */
  .svc-figure {
    display: flex;
    justify-content: center;
    margin: 0 0 8px;
  }


  .svc-txt {
    text-align: center; /* 任意：テキスト中央寄せ */
  }

  section#company{
    margin-top: 0px;
  }
}

@media (max-width: 767px) {
  .flow-frame {
    height: 150px; /* 好きな高さに調整可能 */
    object-fit: cover;
  }
}

/* ===== SP専用（PC既存スタイルに影響しない）===== */
@media (max-width: 767px) {

  .flow-sec{
    padding-top: 60px;
    padding-bottom: 60px;
  }


  /* 1カラム縦並び化（既存スタイルを上書きしないため flow-grid だけを最小限で変更） */
  .flow-grid {
    display: grid;               /* 既存がflexでもgridでも問題なし */
    grid-template-columns: 1fr;  /* 1カラム */
  }
  .flow-left,
  .flow-right {
    grid-column: 1 / -1;
    min-height:0px;
  }

  /* 枠画像の差し替え（HTMLはそのまま、CSSでSP用に切替） */
  .flow-frame {
    width: 100%;
    display: block;

  }

  .flow-left{
    margin-bottom:30px;
  }

  /* 右カラム（縦矢印やステップ表示の調整） */
  .flow-right {
    position: relative;     /* 矢印の基準を右カラムに固定 */
    margin: auto;
    padding-left: 0px;
  }

  /* 縦矢印を右カラム内に固定（PCの指定を壊さないようSPだけで指定） */
  .flow-right .flow-arrow {
    position: absolute;
    top: 0;
    width: auto;
    pointer-events: none;
    left: -70px;
  }

  /* ステップの縦並び（見やすさ強化） */
  .flow-steps {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .flow-step {
    display: grid;
    grid-template-columns: 28px 1fr; /* アイコン + テキスト */
    align-items: center;
    column-gap: 12px;
    min-height: 40px;
  }

  .flow-step .dot {
    display: block;
  }

  .flow-step .label {
    font-size: 14px;        /* 読みやすいSPサイズに微調整（任意） */
    line-height: 1.6;
    display: inline-block;
  }

  /* 見出し周りの余白微調整（任意） */
  .flow-head { margin-bottom: 8px; }
  .flow-ttl { margin: 0; }
  .flow-nizi { max-width: 100%; height: auto; }

  .flow-hand{
    display: none;
  }

  .flow-frame {
    width: 100%;
    height: auto;
    aspect-ratio: 750 / 1600;  /* 下限の枠を確保 */
    object-fit: contain;        /* 全体表示 */

  }

  .flow-box{

  }

  .tabs--news button{
    font-size: 11px;
  }
  
  .tabs--news{
    gap:0px;
    
  }

  .news-illust{
    height: 150px;
    width: 150px;

  }

  .section__title--news .ja, .projects__label-en{
    font-size: 30px;
    margin-right:0px;
  }

  .section__title--news .sub, .projects__label-ja{
    font-size: 15px;
    top:0px;
    font-weight: 400;
  }

  .tabs--news{
    margin: 20px 0px 15px
  }

  .card__excerpt{
    margin-left: 0px;
  }

  .about-sec__bg{
    opacity: 100;
    background-position:right top;
  }

  .about-card{
    margin-top: 200px;
  }

  .about-copy__title{
    margin-top: 0px;
  }

  .about-copy__ghost{
    top:-40px;
  }

  .insta-sec{
    padding-bottom: 400px;
  }

  .site-footer{
    margin-top: 0px;

  }

  .section{
    padding: 0px;
  }

  .section#projects,section#news{
    padding-top: 40px;
  }

   .section#news{
    padding-bottom: 40px;
  }

  .proj-underline{
    width: 100%;
  }

  .projects__ghost{
    font-size: 64px;
    left: 40%;
    top:-20px;
  }

  .projects__illus{
    width: 150px;
    height: 150px;
  }

  .kv-message__title{
    margin-bottom: 80px;
    font-size: 22px;
  }

  .kv-message{
    padding-left: 0px;
  }

  /*Newsページ*/
  .cat-tabs a{
    font-size: 11px;
  }

  .cat-tabs{
    gap:0px;
    margin-bottom: 10px;
  }

  .section#works-archive{
    margin-top: 20px;
    
  }


}



/* モバイル：幅は画面に合わせつつ、成長は最大値で止める */
@media (max-width: 767px) {
  .flow-frame {
        /* width: min(100%, 400px);   */
    height: auto;
    aspect-ratio: 750 / 1600;     /* 比率を維持して高さ自動算出 */
    object-fit: contain;          /* 画像の欠け防止 */
    display: block;
    margin-inline: auto;          /* 中央寄せ */
    max-width:360px;
    min-width:320px;
  }

  .flow-steps{
    gap: 0px;
  }

  .flow-left{
    margin-bottom: 0px;
  }


  .flow-left{
    padding-left: 0px !important;
  }

  .about-hero__title{
    font-size: 32px;
  }

  .pagination{
    margin-top: 30px;
    margin-bottom: 80px;
  }

  .paletalpha{
    margin-left: 5%;
    margin-right: 5%;
  }

  .member-underline, .members-underline{
    margin-top: -70px;
  }
  
  section#member{
    margin-top: 80px;
  }

  section#company{
    margin-top: 100px;
  }

  .service__head{
    margin-top: 40px;
  }

  .service--v3 .service__moyou{
    left: 0px;
  }

  section.recruit.section{
    margin-left: 5%;
    margin-right: 5%;
  }

  div.container.recruit__headInner{
    margin: 0px;
    padding: 0px;
    margin-top: 20px;
  }

  .recruit__title{
    flex-direction:column;
    gap:5px;
  }

  .vision-underline .u-curve{
    width: 200px;
  }

  .cform__field{
    margin-left: 0px;
  }
  div.cform.cform--recruit{
    margin-bottom: 100px;
  }

  .about-hero__head{
    align-items:flex-start;
    flex-direction:column;
  }
}

.cform__field{
  margin-left: 0px;
}

/* 土台 
.member__wrap {
  position: relative;
  overflow: hidden;
}*/

/* 帯：幅100%のまま、左基準でOK（中央寄せはJSで行う） */
.member__list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important; /* 中央寄せはJS */
  align-items: stretch;
  gap: 16px;
  will-change: transform;
  transform: translateX(0);
  transition: transform 320ms ease;
  padding: 0;
  margin: 0;                  /* margin:0 auto; は不要 */
  list-style: none;
}

.member-card {
  flex: 0 0 auto;
  inline-size: 100%;
  box-sizing: border-box;
}
.member-card__fig { margin: 0; }
.member-card__fig img { display: block; width: 100%; height: auto; }

/* SP：1枚ビュー */
@media (max-width: 767px) {
  .member__list > .member-card {
    min-inline-size: 100% !important;
    max-inline-size: 100% !important;
  }

    .voices{
    margin-top:30px;
  }

  section#company.company.section{
    margin-top: 0px;
    margin-bottom: 50px;
  }

  .insta-curve{
    position:relative;
    bottom:-80px;
  }

}

/* PC：3枚ビュー（gap:16px → 32px差し引き） */
@media (min-width: 768px) {
  .member__list > .member-card {
    inline-size: calc((100% - 32px) / 3) !important;
    min-inline-size: calc((100% - 32px) / 3) !important;
    max-inline-size: calc((100% - 32px) / 3) !important;
  }
}

/* ナビ */
.member__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inline-size: 40px;
  block-size: 40px;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #fff;
  font-size: 24px;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.member__nav--prev { left: 8px; }
.member__nav--next { right: 8px; }

@media (prefers-reduced-motion: reduce) {
  .member__list { transition: none; }
}

:root{
  --gap-pc: 16px;
}

/* 土台 
.member__wrap{
  position: relative;
  overflow: hidden;
}*/


/* カード共通 */
.member-card{
  flex: 0 0 auto;                        /* 折り返し・自動縮みを禁止 */
  box-sizing: border-box;
}

/* 画像比率：3:4 に統一（はみ出しはトリミング） */
.member-card__fig{
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.member-card__fig img{
  width: 100%;
  height: 100%;
  object-fit: cover;                      /* 3:4枠に収まるようトリミング */
  display: block;
}

/* スマホ：1枚だけ見えるよう幅=ラッパー幅、隙間0で“中途半端に見えない” */
@media (max-width: 767px){
  .member__list{ gap: 0; }               /* ← これ重要：半端に見える原因を排除 */
  .member-card{
    width: 100vw;                         /* ビューポート幅にジャスト（親がoverflow:hidden） */
    max-width: 100%;                      /* 念のため */
  }
}

/* PC：3枚横並び。カード幅は自動計算（gapはCSS変数で調整可） 
@media (min-width: 768px){
  .member__wrap{

  }
  .member-card{
    width: calc((100% - (var(--gap-pc) * 2)) / 3);
    max-width: calc((100% - (var(--gap-pc) * 2)) / 3);
  }
}*/

/* ナビ（既存のbuttonを継続使用） */
.member__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inline-size: 40px;
  block-size: 40px;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #fff;
  font-size: 24px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.member__nav--prev{ left: 8px; }
.member__nav--next{ right: 8px; }

/* アニメーション配慮 */
@media (prefers-reduced-motion: reduce){
  .member__list{ transition: none; }
}

.service .container, .service__headInner, .service__kv{
  margin-top: 15px;
}

/* スコープ */
.projects-swiper { position: relative; }

/* ナビの見た目を“強制”で復活させる */
.projects-swiper .psw-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: none;
  
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 5;                 /* スライドより前に */
  opacity: 1;
  pointer-events: auto;
}

/* Projects スライダーのサムネを角丸に */
.projects-swiper .swiper-slide .work_thumb {
  border-radius: 32px;
  overflow: hidden;
}

/* 左右位置 */
.projects-swiper .psw-prev { left: 8px; }
.projects-swiper .psw-next { right: 8px; }

/* 中身が空でも矢印を出す（HTML修正不要） */
.projects-swiper .psw-prev::before,
.projects-swiper .psw-next::before{
  content: '';
  font-size: 22px;
  line-height: 1;
  display: block;
}
.projects-swiper .psw-prev::before{ content: '‹'; }
.projects-swiper .psw-next::before{ content: '›'; }

/* Swiper が付ける“無効”状態も拾う */
.projects-swiper .psw-nav.swiper-button-disabled,
.projects-swiper .psw-nav[aria-disabled="true"]{
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

/* 何かのCSSで透明化／サイズ0にされていても上書き */
.projects-swiper .psw-nav * { pointer-events: none; } /* アイコン等にイベント奪われないよう保険 */

/* 可変じゃなく “実寸”で中央を固定したい場合 */
:root { --card-px: 320px; --gap-pc: 16px; }
/* 
@media (min-width: 768px) {
  .member__wrap {
    width: calc(var(--card-px) * 3 + var(--gap-pc) * 2);
    margin-inline: auto;             
    overflow: hidden;
  }
  .member__list {
    gap: var(--gap-pc);
    justify-content: flex-start;   
  }
  .member__list > .member-card {
    flex: 0 0 var(--card-px);
    max-width: var(--card-px);
  }
}
*/
/* 可変じゃなく “実寸”で中央を固定したい場合 */
:root { --card-px: 320px; --gap-pc: 16px; }
/* 
@media (min-width: 768px) {
  .member__wrap {
    width: calc(var(--card-px) * 3 + var(--gap-pc) * 2);
    margin-inline: auto;          
    overflow: hidden;
  }
  .member__list {
    gap: var(--gap-pc);
    justify-content: flex-start;    
  }
  .member__list > .member-card {
    flex: 0 0 var(--card-px);
    max-width: var(--card-px);
  }
}*/

/* スコープをプロジェクトのスワイパー内に限定
#projectsSwiper .swiper-slide[data-swiper-slide-index="0"] .work__cap,
#projectsSwiper .swiper-slide[data-swiper-slide-index="3"] .work__cap{
  background: rgba(220,196,207,.5) !important; 
}

#projectsSwiper .swiper-slide[data-swiper-slide-index="1"] .work__cap,
#projectsSwiper .swiper-slide[data-swiper-slide-index="4"] .work__cap{
  background: rgba(147,163,151,.5) !important; 
}

#projectsSwiper .swiper-slide[data-swiper-slide-index="2"] .work__cap,
#projectsSwiper .swiper-slide[data-swiper-slide-index="5"] .work__cap{
  background: rgba(240,199,146,.5) !important;
}*/

/* もし他CSSで透過化・重ね消しされている場合の保険（任意） */
#projectsSwiper .work__cap{
  /* 背景が見えるように余白・角丸を付けたい場合はコメント解除
  padding: .5rem .75rem;
  border-radius: .5rem;
  */
}

/* 手書きカーブ（id=aboutCurve）を必ず見える線に */
#aboutCurve{
  stroke: #222 !important;           /* お好みの色に */
  stroke-width: 2px !important;      /* 太さ */
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
}

/* Tablet only (例: 768px〜1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .post-header{
    margin-left: 3%;
    margin-right: 3%;
  }

    .flow-left{
  margin-left: 0px !important;
}
}

@media (max-width: 768px) {
    .post-header{
    margin-left: 5%;
    margin-right: 5%;
  }

  .flow-left{
  margin-left: 0px;
}
}

/* ========== デスクトップ（PC） ========== */
@media (min-width: 1024px){
  .gnav__toggle{ display: none; }        /* ハンバーガー非表示 */
  .gnav__list{
    display: flex;                        /* 通常の横並びメニュー */
    gap: 24px;                            /* 任意：お好みで調整 */
  }
  /* PCではモバイル用ドロワーは使わない */
  .m-drawer{ display: none !important; }
}

/* ========== スマホ & タブレット（〜1023px）：ハンバーガー運用 ========== */
@media (max-width: 1023px){
  /* ヘッダー内の右側メニューは隠して、トグルだけ表示 */
  .gnav__list{ display: none !important; }
  .gnav__toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    block-size: 40px;
    background: #fff;
    font-size: 20px;          /* “☰”の大きさ */
    cursor: pointer;
  }

  /* モバイルドロワー（共通で使用） */
  .m-drawer{
    position: fixed;
    inset: 0 0 0 auto;        /* 右から出す */
    width: min(84vw, 360px);  /* ドロワー幅 */
    background: #fff;
    box-shadow: -12px 0 32px rgba(0,0,0,.12);
    z-index: 1000;
    transform: translateX(100%);     /* 初期はオフ画面 */
    transition: transform .28s ease;
  }
  /* hidden が付いている時は非表示（アクセシビリティ担保） */
  .m-drawer[hidden]{ display: none; }

  /* 開いた状態（既存JSで hidden を外す、または .is-open を付与している想定） */
  /* どちらでも対応できるように両方用意 */
  .m-drawer.is-open{ transform: translateX(0); }
  .m-drawer[hidden=false]{ transform: translateX(0); } /* 万一 boolean 属性を文字で扱っている場合 */

  /* ドロワー内のリスト体裁 */
  .m-drawer__list{
    list-style: none;
    padding: 16px 20px;
    display: grid;
    gap: 12px;
  }
  .m-drawer__list a{
    display: block;
    padding: 8px 8px;
    text-decoration: none;
    color: inherit;
  }

  /* オーバーレイ（あれば） */
  .m-drawer-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.32);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
  }
  .m-drawer-overlay.is-open{
    opacity: 1;
    pointer-events: auto;
  }

  /* アニメーション配慮 */
  @media (prefers-reduced-motion: reduce){
    .m-drawer, .m-drawer-overlay{ transition: none; }
  }
}

div.flow__curve.flow__curve--top{
  margin-top: -100px;
}

.flow-left{
  margin-left: 100px;
}

.svc-ring {
  width: clamp(240px, 24vw, 340px);
  aspect-ratio: 1 / 1;
  background-image: url(/img/ellipseback.png);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .25));
  position: relative;
}

/* 画像を丸く見せる枠（中に入れる） */
.svc-circle {
  width: 90%;            /* 好みで 60–80% で調整可 */
  aspect-ratio: 1 / 1;
  border-radius: 32px;
  overflow: hidden;      /* はみ出しをカット */
}

/* 中の画像をフィットさせる */
.svc-circle > img,
.svc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* 中央でトリミング */
  display: block;
}

.service-list .service-item .svc-title {
  margin-bottom: 0; /* 下マージンを削除 */
  color: #fff;   /* 文字色を白 */
  text-align: center;
}

/* ===== footer nav 6カラムレイアウト ===== */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-nav .fcol {
  flex: 0 0 calc(100% / 6);
  max-width: calc(100% / 6);
}

/* 親見出し（h3）は現状のスタイルをベースに、リンクでも見た目を変えない */
.footer-nav h3 {
  /* 既存の指定があればそれを優先、以下は保険程度 */
  margin: 0 0 0.75em;
  font-weight: 700;
}

.footer-nav h3 a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}

.footer-nav h3 a:hover,
.footer-nav h3 a:focus {
  text-decoration: underline;
}

/* 子メニュー */
.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav ul li + li {
  margin-top: 0.3em;
}

.footer-nav ul a {
  text-decoration: none;
  /* 必要ならフォントサイズを少し小さく
  font-size: 0.9em;
  */
}

.footer-nav ul a:hover,
.footer-nav ul a:focus {
  text-decoration: underline;
}

/* SPなど幅が狭いときは2〜3カラムに落とす例 */
@media (max-width: 768px) {
  .footer-nav .fcol {
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 1.5em;
  }
}

/* PC向け：フッター左6カラム＋右サイド1カラムを1列におさめる */
@media (min-width: 1024px) {

  .footer-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 70px; /* お好みで調整 */
  }

  /* 左：ナビの横幅を広めに */
  .footer-nav {
    display: flex;
    flex-wrap: nowrap;     /* 折り返さない */
    flex: 0 1 72%;         /* 左エリアを広く（%はお好みで調整） */
  }

  /* 6カラムを均等に */
  .footer-nav .fcol {
    flex: 1 1 0;
    max-width: none;
  }

  /* 右：サイドエリアを少し細めに */
  .footer-side {
    flex: 0 0 28%;
    max-width: 28%;
    margin-left: auto;
  }
}

/* 見出しを改行させない（会社紹介など） */
.footer-nav h3,
.footer-nav h3 a {
  white-space: nowrap;
}

/* 見出しとメニューリンクは改行させない */
.footer-nav h3,
.footer-nav h3 a,
.footer-nav ul a {
  white-space: nowrap;
}

/* 1220px以上：横並び（左：6カラムナビ／右：サイド） */
@media (min-width: 1220px) {
  .footer-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
  }

  .footer-nav {
    display: flex;
    flex-wrap: nowrap;      /* 6カラムを1行で並べる */
    flex: 0 1 72%;          /* 左エリアの幅（お好みで 70〜75% くらいに調整可） */
  }

  .footer-nav .fcol {
    flex: 1 1 0;
    max-width: none;
  }

  .footer-side {
    flex: 0 0 28%;
    max-width: 28%;
    margin-left: auto;
  }
}

/* 1300px以上：横並び（左：6カラムナビ／右：サイド） */
@media (min-width: 1300px) {
  .footer-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;              /* ここも少しだけ狭めておきます */
  }

  .footer-nav {
    display: flex;
    flex-wrap: nowrap;      /* 6カラムを1行で並べる */
    flex: 0 1 70%;          /* 左エリアの幅（少しだけ縮めて余裕を作る） */
  }

  .footer-nav .fcol {
    flex: 1 1 0;
    max-width: none;
  }

  .footer-side {
    flex: 0 0 30%;
    max-width: 30%;
    margin-left: auto;
    min-width: 0;           /* 中身のせいで横にはみ出さないよう保険 */
  }
}

/* 1024〜1299px：上にナビ、下にサイド（はみ出し防止） */
@media (min-width: 1024px) && (max-width: 1299.98px) {
  .footer-inner {
    display: block;   /* 縦並び */
  }

  /* ナビは6カラムを1行で並べる */
  .footer-nav {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 32px;
  }

  .footer-nav .fcol {
    flex: 1 1 0;
    max-width: none;
  }

  /* サイドブロックは全幅でその下に */
  .footer-side {
    max-width: 100%;
  }
}


/* スマホ：縦並び時の余白を少し詰める */
@media (max-width: 767.98px) {
  .footer-nav .fcol {
    margin-bottom: 1em;   /* 以前が 1.5em くらいなら、ややタイトに */
  }

  .footer-nav ul li + li {
    margin-top: 0.15em;   /* 子メニュー同士の間隔も少し狭める */
  }
}


/* --- TOPニュース タブ --- */
.news-tabs-wrap {
  margin-bottom: 1.5rem;
}

.news-tabs {
  display: flex;
  gap: 1rem;
}

.news-tab {
  border: 1px solid #ccc;
  background: transparent;
  padding: .4rem 1rem;
  cursor: pointer;
  font-size: 0.95rem;
  border-radius: 999px;
  transition: background-color .2s, color .2s, border-color .2s;
}

.news-tab.is-active {
  background-color: #333;
  color: #fff;
  border-color: #333;
}

/* パネルの表示切り替え */
.news-panel {
  display: none;
}

.news-panel.is-active {
  display: grid; /* cards--news の元レイアウトが block なら block に変更してください */
}

/* まずは一度リセットする */
.cat-tabs a {
  background: none;
  color: inherit;
}

/* -------------------------
   News カテゴリータブのリセット
   ------------------------- */

/* まず、過去の指定を全部殺す（特に :first-child 系） */
.section--news .cat-tabs a,
.section--news .cat-tabs .cat-tabs__link {
  background: none !important;
  color: inherit !important;
}

/* 1個目だから光る、みたいな指定がもし残っていても無効化 */
.section--news .cat-tabs a:first-child,
.section--news .cat-tabs .cat-tabs__link:first-child {
  background: none !important;
  color: inherit !important;
}

/* アクティブタブだけ色をつける */
.section--news .cat-tabs .cat-tabs__link.is-active {
  background-color: #333 !important;  /* ここの色は実際のデザインに合わせて */
  color: #fff !important;
}

/* SP だけ右にはみ出さないように調整 */
@media (max-width: 767px) {
  .projects__illus {
    /* 左基準をやめて、右端基準にする */
    left: 100%;
    right: 0;

    /* 画像が大き過ぎてはみ出さないよう少しだけ小さめに */
    width: min(160px, 40vw); /* お好みで 160 / 40vw は調整OK */

    /* 念のため横方向の変形をリセットしておきたい場合 */
    transform: none;
  }

  .hero__navwrap{
    display: none;
  }

  .flow-ttl .jp{
    font-size: 13px;
  }

  .flow-left{
    margin-left: 0px;
  }

  div.footer-inner.container{
    padding-inline: 10px;
  }
  .breadcrumbs{
    padding-left: 0px;
  }
}

/* パンくず全体 */
.breadcrumbs {
  font-size: 0.85rem;
  margin: 0 0 24px;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  padding: 3px 0;    
  
}

/* リストの数字を消す */
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  list-style: none;        /* ← 数字を消す */
  padding: 0;
  margin: 0;
}

/* 各アイテムの矢印（>） */
.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
}

/* 「>」は最後以外にだけ表示 */
.breadcrumbs__item::after {
  content: ">";
  margin-left: 0.5em;
  color: #777;
}

.breadcrumbs__item:last-child::after {
  content: "";
  margin: 0;
}

/* 現在ページ */
.breadcrumbs__item.is-current {
  font-weight: 600;
}

/* HOMEアイコン */
.breadcrumbs__item--home i.fa-solid.fa-house {
  font-size: 0.9rem;
  color: #999;
}

/* スクリーンリーダー用に HOME テキストを隠す */
.breadcrumbs__label--sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* パンくず全体（上下の線） */
.breadcrumbs {
  font-size: 0.85rem;
  margin: 0 0 24px;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
}

/* 中身をコンテンツ幅 1170px に制限 */
.breadcrumbs__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 6px 16px;  /* 余白はお好みで */
}

/* リストの数字を消す */
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各アイテムと「>」 */
.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
}

.breadcrumbs__item::after {
  content: ">";
  margin-left: 0.5em;
  color: #777;
}

.breadcrumbs__item:last-child::after {
  content: "";
  margin: 0;
}

/* 現在ページ */
.breadcrumbs__item.is-current {
  font-weight: 600;
}

/* HOMEアイコン（SVG） */
.breadcrumbs__home-icon {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  color: #999;
}

/* スクリーンリーダー用の HOME テキストを視覚的に隠す */
.breadcrumbs__label--sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 1024px〜1440pxの間だけ、幅とマージンを調整 */
@media (min-width: 1024px) and (max-width: 1440px) {

  .breadcrumbs__inner,
  .post-header,
  .news-body {
    max-width: 1040px;
    margin-left: 3%;
    margin-right: 3%;
    padding-left: 0;
    padding-right: 0;
  }

  .news-body {
    margin-top: 32px; /* もともとの上マージンは維持 */
  }
}

@media (max-width: 768px) {
    .news-body {
        margin-left: 5%;
        margin-right: 5%;
      }
    }

    @media (min-width: 768px) and (max-width: 1023px) {
    .news-body {
        margin-left: 3%;
        margin-right: 3%;
    }
}

html,
body {
  overflow-x: hidden;
}

/* 2カラムで並ぶブレイクポイントから高さ揃え */
@media (min-width: 768px) {

  /* カードを横並び＋同じ高さに伸ばす */
  .paletalpha__grid {
    display: flex;
    gap: 40px;              /* カード間の余白。お好みで */
    align-items: stretch;   /* 高さそろえる */
  }

  .paletalpha__card {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
  }

  /* 枠（図形）を伸ばす */
  .paletalpha__cardBody {
    flex: 1;                /* ここがポイント：中身を同じ高さまで伸ばす */
    display: flex;
  }

  .paletalpha__cardBody p {
    margin: 0;
    line-height: 1.9;
  }
}

/* 背景画像：中央を見せつつ、暗め＋ブラー */
.kv-message__bg {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 と同じ */
  background-position: center center;  /* 中央を表示 */
  background-size: cover;              /* 画面いっぱいにトリミング */
  background-repeat: no-repeat;

  /* 少し暗く＋少しボカす */
  filter: blur(4px) brightness(0.75);

  /* ブラーの端が見えないように、少しだけ拡大 */
  transform: scale(1.05);

  z-index: -1; /* テキストより後ろに */
  pointer-events: none;
}

.svc-title__sub {
  font-size: 0.7em;
  margin-left: 0.25em;
}

/* ===== お客様の声：レイアウト＆囲い ===== */

/* デフォルト（モバイル）は縦並び */
.voice-body {
  display: block;
  margin-top: 24px;
}

/* アバター側 */
.voice-body__side {
  margin: 0 0 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 本文ボックス（ただの囲い） */
.voice-body .bubble {
  position: static;
  margin: 0;
  padding: 24px 20px;
  border-radius: 12px;
  border: 1px solid #E0E3EB;
  background: #ffffff;
  box-shadow: none;
}

/* 吹き出しの「しっぽ」を無効化 */
.voice-body .bubble::before,
.voice-body .bubble::after {
  content: none !important;
  display: none !important;
}

/* 768px以上：横並びにする */
@media (min-width: 768px){
  .voice-body {
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }

  .voice-body__side {
    margin-bottom: 0;
  }
}

@media (max-width: 767px){
  .voice-body__side .company {
    text-align: center;
    width: 100%;        /* 横幅いっぱいにしてど真ん中にしやすく */
  }

  .voice-body__side {
    align-items: center; /* キャプションごと中央寄せにしたい場合は追加 */
  }

  section.voice-single.section{
    padding-bottom: 80px;
  }
}

section.voice-single.section{
  padding-top: 20px;
}

/* ===== パンくずのトーンを落とす ===== */

/* 全体の文字色・サイズ */
.breadcrumbs-wrap {
  color: #666666;
  font-size: 13px;
}

.breadcrumbs li,
.breadcrumbs a {
  color: #666666;
  font-weight: 400;        /* 太字→通常 */
}

/* ホームアイコンも少し控えめに */
.breadcrumbs .bc-home-icon {
  color: #666666;
}

/* 現在ページ（最後の要素）は少しだけ強めに */
.breadcrumbs li:last-child {
  color: #333333;
  font-weight: 500;
}

/* ホバー時だけ、ほんの少し濃くする例 */
.breadcrumbs a:hover {
  color: #444444;
}

/* Members カルーセル：SP 時はカードを少し細くして余白を作る */
@media (max-width: 767.98px) {
  /* 横スクロールさせているトラック部分 */
  #member[data-carousel] [data-track] {
    padding: 0 16px;          /* 左右に安全マージンをつける */
    box-sizing: border-box;
  }

  /* 各メンバーカード */
  #member[data-carousel] .member-card {
    min-width: calc(100% - 32px);  /* 画面幅よりちょっと細くする（16px×2 分） */
    max-width: calc(100% - 32px);
  }

  /* 念のため名前も右側に少し余白 */
  #member[data-carousel] .member-card__name {
    padding-right: 4px;
  }
}


@media (max-width: 767px){
  .members__viewport{
    padding: 0 16px;       /* 左右に余白を少し増やす */
    box-sizing: border-box;
  }
  .members .member-card{
    width: calc(100vw - 64px); /* 画面幅 - 左右16px - さらに左右余白 16px */
    max-width: 420px;
  }
}

@media (max-width: 767px){
  .members__viewport{
    padding: 0 30px;
    box-sizing: border-box;
  }
  .members .member-card{
    width: 100%;
    max-width: 420px;
  }
}

/* ==========================
   Members：スマホは縦並びにする
   ========================== */
@media (max-width: 767px){

  /* 横スクロールをやめて普通のブロックに */
  .members__viewport{
    display: block;
    overflow-x: visible;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: auto;
    padding: 0 20px;          /* 画面左右に余白を作る */
    box-sizing: border-box;
  }

  /* カードは 1 カラムで中央寄せ */
  .members .member-card{
    width: 100%;
    max-width: 420px;
    margin: 0 auto 32px;      /* 下に余白 */
    flex: none;
    scroll-snap-align: none;
  }

  /* 画像の比率はそのまま維持 */
  .members .member-card__fig{
    aspect-ratio: 3 / 4;
  }

  /* スマホのとき矢印は非表示（押せないように） */
  .members__nav{
    display: none;
  }
}

/* ==========================
   Members：SP の左右が切れて見える対策
   ========================== */
@media (max-width: 767px){

  /* ビューポートに左右の余白をつける */
  .members__viewport{
    padding: 0 20px;          /* 左右20pxの余白 */
    box-sizing: border-box;
  }

  /* カードはビューポート幅いっぱい（余白ぶんを除く） */
  .members .member-card{
    width: 100%;
    max-width: 420px;
    margin: 0 auto 32px;      /* 中央寄せ＋下マージン */
    flex: 0 0 auto;
  }

  .members .member-card__fig{
    aspect-ratio: 3 / 4;
  }
}



section#member.members{
    padding-top: 0px;
    margin-top: 0px;

}


/* =========================================
   ヘッダー全幅 ＋ PCナビ & CTA ボタン
   ========================================= */

/* ヘッダー本体は全幅 */
.site-header {
  width: 100%;
  background: #fff;
  z-index: 1000;
}

/* 中身は左右24pxだけ余白を取って、画面いっぱいに配置 */
.header__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;  /* ロゴ左／メニュー＋CTA右 */
  column-gap: 24px;   
}

/* テーマ側で .container.header__inner が付く場合にも対応 */
.container.header__inner{
  width: 100%;
  max-width: 100%;
  min-height: 65px;
}

/* ロゴ */
.logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
.logo img {
  display: block;
  height: 32px;
  width: auto;
}

/* CTAはデフォルト非表示（SP / タブレット） */
.header-cta {
  display: none;
}

/* =========================================
   PC レイアウト（1024px 以上）
   ========================================= */
@media (min-width: 1024px) {

  .gnav {
    flex: 1 1 auto;
  }

  /* ハンバーガーはPCで非表示 */
  .gnav__toggle {
    display: none;
  }

  /* メニュー横並び */
  .gnav__list {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .gnav__item {
    position: relative;
    flex: 0 0 auto;
  }

  .gnav__link {
    position: relative;
    display: inline-block;
    padding: 4px 4px;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-decoration: none;
    color: #000;
    white-space: nowrap; /* 1メニューを改行させない */
  }

  /* 下線の初期状態：非表示 */
  .gnav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1px;
    background: #000;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.18s ease-out;
  }

  /* ホバー / フォーカス時だけ線を出す */
  .gnav__item:hover > .gnav__link::after,
  .gnav__link:focus-visible::after {
    transform: scaleX(1);
  }

  /* is-current でも常時は線を出さない */
  .gnav__item.is-current > .gnav__link::after {
    transform: scaleX(0);
  }
  .gnav__item.is-current:hover > .gnav__link::after,
  .gnav__item.is-current .gnav__link:focus-visible::after {
    transform: scaleX(1);
  }

  /* ----- ヘッダー右の CTA ボタン（PCだけ表示） ----- */
  .header-cta {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    column-gap: 10px;
    margin-left: 0px;
  }

  .header-cta .cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    width: 132px;          /* 125〜140pxくらい */
    padding: 4px 8px;     /* 上下パディング細くしてスリムに */
    background: #656565;   /* ご指定色 */
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
    box-shadow: 0 3px 8px rgba(0,0,0,.12);
    transition: background 0.18s ease-out, transform 0.12s ease-out;
  }

  /* ヘッダー内の矢印は非表示 */
  .header-cta .cta-btn i {
    display: none;
  }

  /* hover時の色変化 */
  .header-cta .cta-btn:hover,
  .header-cta .cta-btn:focus-visible {
    background: #444444;   /* 少し濃く */
    transform: translateY(-1px);
  }

  /* ----- 施工事例ドロップダウン ----- */

  .gnav__item--has-children {
    position: relative;
  }

  .gnav__mega {
    position: absolute;
    top: 100%;                 /* 親 li の真下から開始（すき間なし） */
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1200;
    transition: opacity 0.18s ease-out, visibility 0.18s ease-out;
  }

  .gnav__mega-list {
    list-style: none;
    margin: 0;
    padding: 6px 18px 8px 18px;  /* 左に余白を入れて、文字が張り付かないように */
  }

  .gnav__mega-list li + li {
    margin-top: 4px;
  }

  .gnav__mega-list a {
    display: block;
    font-size: 13px;
    letter-spacing: 0.12em;
    white-space: nowrap;
    color: #000;
    text-decoration: none;
  }

  .gnav__mega-list a:hover,
  .gnav__mega-list a:focus-visible {
    text-decoration: underline;
  }

  /* 親 li またはその中身にマウスがある間は開いたまま */
  .gnav__item--has-children:hover > .gnav__mega,
  .gnav__item--has-children:focus-within > .gnav__mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* ドロップダウンが切れないように */
  .site-header,
  .gnav {
    overflow: visible;
  }
}

/* =========================================
   SP / タブレット：CTA非表示（既存ナビはそのまま）
   ========================================= */
@media (max-width: 1023px) {
  .header-cta {
    display: none;
  }
}

.gnav__link{
  position: relative;
  padding-bottom: 6px;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 700;   /* ← 追加 */
}

/* ヘッダー内 CTAボタン（PCのみ表示） */
.header-cta .cta-btn{
  width: 132px;              /* 1200未満と1200以上の中間くらいのサイズ */
  padding: 4px 8px;         /* 上下のパディングも中間くらいに */
  font-size: 13px;
  line-height: 1.4;
  background: #656565;       /* すでに指定していた色 */
  color: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.12);
}

/* hover時の色変化 */
.header-cta .cta-btn:hover,
.header-cta .cta-btn:focus-visible{
  background: #444444;
}

/* ヘッダー内の矢印アイコンは非表示 */
.header-cta .cta-btn i{
  display: none;
}

/* ベース：とりあえずPC風 */
.gnav__toggle{ display: none; }
.gnav__list{ display: flex; }

/* SP〜タブレット：ハンバーガー */
@media (max-width: 1023px){
  .gnav__toggle{
    display: block;
  }
  .gnav__list{
    display: none;
  }
  .gnav.gnav--open .gnav__list{
    display: flex;
    flex-direction: column;
  }
}

/* PC：通常メニュー（必要なら上書き） */
@media (min-width: 1024px){
  .gnav__toggle{
    display: none;
  }
  .gnav__list{
    display: flex;
    flex-direction: row;
  }
}

/* =========================================
   SP/タブレット：ドロワーを開いても
   ロゴ＋閉じるボタンのヘッダーを残す
   ========================================= */
@media (max-width: 1023px){

  /* 1) ヘッダーを最前面・固定表示 */
  html.m-nav-open body .site-header,
  .site-header{
    position: fixed;          /* 画面上部に固定 */
    top: 0;
    left: 0;
    right: 0;
             /* ドロワーより手前に */
    background: #fff;
  }

 

  /* 3) 念のため、m-nav-open 時でもヘッダーが非表示にならないように */
  html.m-nav-open body .site-header{
    display: flex;
  }
}


/* =========================
   ヘッダーメニューのフォント指定
   ========================= */
.site-header .gnav__link{
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
}


/* ============================
   TOP News リスト表示
   ============================ */

.news-list{
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}

.news-list__item + .news-list__item{
  margin-top: 12px;          /* アイテム間の余白（線は無し） */
}

.news-list__item a{
  display: flex;
  align-items: baseline;
  gap: 48px;                 /* 日付とタイトルの間隔 */
  text-decoration: none;
  color: inherit;
}

.news-list__date{
  flex: 0 0 auto;
  min-width: 110px;
  font-size: 16px;
  letter-spacing: .08em;
}

.news-list__title{
  flex: 1 1 auto;
  font-size: 16px;
}

/* 「記事がありません。」用 */
.news-list__item--empty{
  color: #888;
}

/* SPでは縦並びにして詰める */
@media (max-width: 767px){
  .news-list__item a{
    flex-direction: column;
    gap: 4px;
  }
  .news-list__date{
    font-size: 14px;
  }
  .news-list__title{
    font-size: 15px;
  }
}

.svc-more {
  display: inline-block;       /* ボタンっぽくするため（任意） */
  text-align: center;
  color: #fff;
  width: 100px;
  border: solid 1px #fff;
  margin: auto;
  padding: 6px 0;              /* お好みで調整 */
  text-decoration: none;       /* 下線を消す */
}

/* ホバー時の反転＆下線なし */
.svc-more:hover {
  background-color: #fff;      /* 背景を白に */
  color: #000;                 /* 文字を黒に */
  text-decoration: none;       /* ホバー時も下線を出さない */
}


/* ▼ここを追記 or 既存を上書き（CSSの一番下あたりに書く） */

/* デフォルトはPC用：ボタン非表示・メニュー横並び */
.gnav__toggle{
  display:none;
}

/* 〜1024px：SP & タブレットはハンバーガー表示 */
@media (max-width: 1024px){
  .gnav__toggle{
    display:block;
  }
  .gnav__list{
    display:none;              /* ボタンを押すまで非表示 */
  }
  .gnav.is-open .gnav__list{
    display:flex;
    flex-direction:column;
  }
}

/* 1025px〜：PCは従来どおりメニューを表示 */
@media (min-width: 1025px){
  .gnav__toggle{
    display:none;
  }
  .gnav__list{
    display:flex;
  }
}

/* ========================
   TOPニュース リスト表示（調整版）
   ======================== */

/* 行全体 */
.section--news .news-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.section--news .news-list__item + .news-list__item {
  margin-top: 10px;
}

/* 1行：日付／カテゴリ／タイトル */
.section--news .news-list__item a {
  display: flex;
  align-items: center;
  gap: 20px;                    /* ちょっと詰める */
  text-decoration: none;
  color: inherit;
}

/* 日付（左） */
.section--news .news-list__date {
  min-width: 110px;
  font-size: 16px;
  color: #666;
  order: 1;
}

/* カテゴリ（真ん中のボタン風） */
.section--news .news-list__cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;            /* 小さめに */
  padding: 6px 8px;           /* 上下・左右ともに縮小 */
  background: #f5f5f5;
  border: 1px solid #999;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-align: center;
  order: 2;
}

/* タイトル（右） */
.section--news .news-list__title {
  flex: 1;
  font-size: 15px;
  line-height: 1.6;
  color: #444;
  order: 3;
}

/* ホバー時：タイトルのみ軽く強調 */
.section--news .news-list__item a:hover .news-list__title {
  text-decoration: underline;
}

/* ========================
   SPレイアウト
   日付＋カテゴリを1行、その下にタイトル
   ======================== */
@media (max-width: 767px) {
  .section--news .news-list__item a {
    flex-wrap: wrap;           /* 折り返しを許可 */
    align-items: flex-start;
    gap: 4px 8px;              /* 行間・列間 */
  }

  .section--news .news-list__date {
    min-width: auto;
    font-size: 13px;
  }

  .section--news .news-list__cat {
    min-width: auto;
    padding: 4px 10px;
    font-size: 10px;
  }

  /* タイトルは2行目で全幅 */
  .section--news .news-list__title {
    width: 100%;
    font-size: 14px;
    margin-top: 2px;
  }
}
/* カテゴリ別の色分け */
.section--news .news-list__cat--release{
  background: #666666;      /* ニュースリリース：濃いめグレー */
  border-color: #666666;
  color: #ffffff;
}

.section--news .news-list__cat--column{
  background: #b3b3b3;      /* コラム：薄めグレー */
  border-color: #b3b3b3;
  color: #ffffff;
}

/* SP 用：ハンバーガーメニューのドロワー */
@media (max-width: 767px){
  .header__inner{
    position: relative;
  }

  /* ハンバーガー：右上のボタン（今までどおり） */
  .gnav__toggle{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    background:transparent;
    border:0;
    padding:0;
    cursor:pointer;
    outline:none;
    box-shadow:none;
    -webkit-appearance:none;
    appearance:none;
    -webkit-tap-highlight-color:transparent;
    color:#555;
    font-size:22px;
    line-height:1;
    z-index:1100;
  }

  /* ドロワー本体：画面右側だけに表示（幅40%） */
  #m-drawer{
    position:fixed;
    top:0;
    right:0;       /* ← 右寄せ */
    left:auto;     /* ← 左側の指定は解除 */
    width:40%;     /* ← 画面幅の約40%だけ表示 */
    height:100vh;
    background:#f2f2f2;
    transform:translateY(-100%);   /* 上からスライドイン */
    transition:transform .35s ease;
    z-index:1099;
    overflow:auto;
    padding:88px 20px 32px;        /* 上はヘッダー分の余白 */
    box-shadow:-4px 0 16px rgba(0,0,0,.15); /* 右サイドパネルっぽく影を付ける */
  }

  #m-drawer[hidden]{
    display:none;
  }
  #m-drawer.is-visible{
    transform:translateY(0);
  }

  /* メニューの体裁（中身）はそのまま */
  .m-drawer__list{
    list-style:none;
    margin:0 auto;
    padding:0;
    display:grid;
    gap:16px;
  }
  .m-drawer__list a{
    display:block;
    font-size:14px;
    color:#222;
    text-decoration:none;
    text-align:center;
  }
}


/* SP 用右サイドドロワー */
@media (max-width: 767px){
  .header__inner{ position: relative; }



  /* 右サイドからスライドインするドロワー */
  #m-drawer{
    position:fixed;
    top:0;
    right:0;
    width:40vw;              /* 画面の40%幅 */
    max-width:320px;
    height:100vh;
    background:#f2f2f2;
    transform:translateX(100%);  /* 右の外側から */
    transition:transform .35s ease;
    z-index:1100;
    overflow:auto;
    padding:88px 20px 32px;      /* 上はヘッダー分ゆとり */
  }
  #m-drawer[hidden]{ display:none; }
  #m-drawer.is-visible{
    transform:translateX(0);
  }

  /* メニューの体裁 */
  .m-drawer__list{
    list-style:none;
    margin:0 auto;
    padding:0;
    max-width:260px;
    display:grid;
    gap:16px;
  }
  .m-drawer__list a{
    display:block;
    font-size:14px;
    color:#222;
    text-decoration:none;
    text-align:center;
  }

  /* 画面左側のオーバーレイ */
  .m-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.35);
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease;
    z-index:1090;              /* ドロワーより下だがコンテンツより上 */
  }
  .m-overlay.is-visible{
    opacity:1;
    visibility:visible;
    margin-top: 65px;
  }

  nav#m-drawer{
    margin-top: 64px;
  }
}

.footer-nav h3, .footer-nav h3 a, .footer-nav ul a{
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  
}

.hours-ttl{
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.hours-sub{
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);

}

.footer-contact .tel a{
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.footer-contact .label{
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.footer-bottom .copy{
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.service-list .service-item .svc-title{
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}



/* ========== SPハンバーガー（ボタン） ========== */
@media (max-width: 767px){
  .header__inner{
    position: relative;
  }

 

  /* 中の3本線コンテナ */
  .gnav__bars{
    position:relative;
    width:22px;
    height:18px;
    display:inline-block;
  }

  .gnav__bars span{
    position:absolute;
    left:0;
    right:0;
    height:2px;
    background:#555;
    border-radius:2px;
    transition:
      transform .25s ease,
      top .25s ease,
      opacity .2s ease,
      background-color .25s ease;
  }

  .gnav__bars span:nth-child(1){ top:0; }
  .gnav__bars span:nth-child(2){ top:8px; }
  .gnav__bars span:nth-child(3){ top:16px; }

}

/* =======================================
   PC：ハンバーガー / ドロワーは非表示
   ======================================= */
@media (min-width: 768px) {
  .gnav__toggle {
    display: none !important;
  }
  #m-drawer,
  .m-overlay {
    display: none !important;
  }
}

/* =======================================
   SP：ハンバーガー ＋ 右からスライドイン
   ======================================= */
@media (max-width: 767px) {
  .header__inner {
    position: relative;
  }

  /* ハンバーガーボタン本体 */
  .gnav__toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 1200;

    /* テキストやテーマ側アイコンを消す */
    font-size: 0;
    line-height: 0;
  }
  .gnav__toggle::before,
  .gnav__toggle::after {
    content: none !important;
  }

  /* 3本線（☰部分） */
  .gnav__bars {
    position: relative;
    width: 22px;
    height: 16px;
    display: block;
    margin: 0 auto;
  }
  .gnav__bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #333;
    border-radius: 999px;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .gnav__bars span:nth-child(1) { top: 0; }
  .gnav__bars span:nth-child(2) { top: 7px; }
  .gnav__bars span:nth-child(3) { top: 14px; }

  /* is-open の時に ✕ になるアニメーション */
  .gnav__toggle.is-open .gnav__bars span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .gnav__toggle.is-open .gnav__bars span:nth-child(2) {
    opacity: 0;
  }
  .gnav__toggle.is-open .gnav__bars span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* 右側から出てくるドロワー */
  #m-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 40vw;             /* ★ ここが「右側40%」 */
    max-width: 320px;
    height: 100vh;
    background: #f6f6f6;
    box-shadow: -4px 0 12px rgba(0,0,0,0.12);
    transform: translateX(100%);      /* 右の外に隠す */
    transition: transform 0.3s ease;
    z-index: 1100;
    padding: 40px 20px 32px;
    overflow-y: auto;
  }
  #m-drawer[hidden] {
    display: block;          /* hidden でもレイアウト用に block にしておく */
  }
  #m-drawer.is-visible {
    transform: translateX(0);       /* 右からスライドイン */
  }

  .m-drawer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
  }
  .m-drawer__list a {
    display: block;
    text-align: left;
    text-decoration: none;
    color: #222;
    font-size: 16px;
  }

  /* 画面の残り部分のオーバーレイ（左側） */
  .m-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 1090;
  }
  .m-overlay[hidden] {
    display: block;  /* hidden 中もレイアウト上はblockでOK */
  }
  .m-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

.s-message{
  text-align: center;
  color: #666;  
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* 施工事例カード：画像＋下にテキスト */
.work {
  display: flex;
  flex-direction: column;
}

.work a {
  display: block;
  text-decoration: none;
  color: inherit;
}

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

/* 以前の「カラー帯」前提の absolute などをリセット */
.work__cap {
  position: static;
  padding: 16px 0 0;
  margin: 0;
  background: none;
  color: #333;
}

/* カテゴリ・場所・タイトルの体裁（お好みで微調整OK） */
.work__cat {
  display: block;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.work__loc {
  display: block;
  font-size: 0.85rem;
}

.work__title {
  font-size: 1.1rem;
  line-height: 1.5;
}

/* ナビボタンを半透明に */
.projects-swiper {
  position: relative;
}

.psw-nav {
  opacity: 0.7;                 /* 半透明 */
  background-color: rgba(0, 0, 0, 0.4);  /* うっすら黒 */
  color: #fff;
  transition: opacity 0.2s ease;
}

.psw-nav:hover,
.psw-nav:focus-visible {
  opacity: 1;
}

.flow-inner.container{
  padding-inline: 0px;
}

.service-sec{
  padding-top: 20px;
}

.s-message{
  padding:0 20px;
}

/* ===== 表示切り替え ===== */

/* SP では PC・タブレット用フッターを非表示 */
@media (max-width: 767px) {
  .cta-sticky {
    display: none;
  }

}

/* PC・タブレットでは SP 用フッターを非表示 */
@media (min-width: 768px) {
  .cta-sticky-sp {
    display: none;
  }
}

/* ===== SP用追従フッターのベース ===== */

.cta-sticky-sp {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 9999;
  /* 背景：画像に近い落ち着いたグレー */
  background-color: #5f6168;
}

.cta-sticky-sp__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 16px 10px;
}

/* 「簡単1分！」テキストの背景：白 30%＆ぼかし＆浮かせる表現 */
.cta-sticky-sp__lead {
  display: inline-block;
  margin: 0 auto 10px;
  padding: 4px 12px;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
  background: rgba(255, 255, 255, 0.3); /* 白 30% */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* Safari 用 */
  border-radius: 999px;
  /* ほんの少し浮いているようなエフェクト */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transform: translateY(-4px);
}

/* ボタン横並びエリア */
.cta-sticky-sp__row {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* 共通ボタンスタイル（画像のような黒い pill ボタン） */
.cta-sp-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background-color: #000000;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

/* ホバー時は少しだけ明るく＆持ち上がる感じ */
.cta-sp-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* テキスト */
.cta-sp-btn span {
  white-space: nowrap;
}

/* → アイコン（既存PC版と同じように i で矢印を作る想定） */
.cta-sp-btn i::before {
  content: "→";
  display: inline-block;
}

/* 画面幅がかなり狭いときは縦並びに */
@media (max-width: 360px) {
  .cta-sticky-sp__row {
    flex-direction: column;
  }
}

/* フッターナビのカラムを等間隔にする */
.footer-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)); /* 6カラムを等幅で */
  column-gap: 24px;  /* カラム間の余白はお好みで調整 */
}

/* 1〜6カラム共通：テキスト量に左右されないようにする */
.footer-nav .fcol {
  min-width: 0;
}

.ul.container.service__thumbs{
  padding: 0px;
}


.ul.container.service__thumbs{
  padding: 0px;
}

.projects__illus{
  margin-left: 20px;
}

.svc-more{
  margin-top: 5px;
}


/******************************************
 * ① フッター 6カラム等間隔 + SP縦並び
 ******************************************/

/* PC・タブレット：左右2カラム（左ナビ6カラム + 右情報） */
@media (min-width: 768px) {
  .site-footer .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    column-gap: 40px;
  }

  .site-footer .footer-nav {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)); /* 6カラム等幅 */
    column-gap: 20px; /* ご指定の20px間隔 */
  }

  .site-footer .footer-nav .fcol {
    min-width: 0;
  }

  .site-footer .footer-side {
    flex: 0 0 auto;
  }
}

/* SP：フッターナビを縦並びに戻す */
@media (max-width: 767px) {
  .site-footer .footer-inner {
    display: block;
  }

  .site-footer .footer-nav {
    display: block;
  }

  .site-footer .footer-nav .fcol {
    margin-bottom: 16px;
  }

  .site-footer .footer-side {
    margin-top: 24px;
  }
}

/******************************************
 * ② SP用 追従CTA（吹き出しをグレーの外へ）
 ******************************************/

/* PC・タブレットでは SP用CTAを非表示 */
@media (min-width: 768px) {
  .cta-sticky-sp {
    display: none;
  }
}

/* SPでは PC用CTAを非表示・SP用を表示 */
@media (max-width: 767px) {
  .cta-sticky {
    display: none;
  }

  .cta-sticky-sp {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 9999;
  }

  .cta-sticky-sp__inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px 16px 0; /* 上に余白を作り、吹き出し用スペースを確保 */
  }

  /* 吹き出し本体：グレー背景の「外」に出す */
  .cta-sticky-sp__lead {
    position: absolute;
    left: 50%;
    top: -10px;
    transform: translate(-50%, -60%); /* 上方向に出してグレーの外へ */
    margin: 0;
    padding: 6px 18px;
    font-size: 12px;
    color: #000;
    background: rgba(255, 255, 255, 0.3); /* #FFFFFF 30% */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    white-space: nowrap;
  }

  /* 吹き出しの▼（お好みで） */
  .cta-sticky-sp__lead::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    border-width: 6px 7px 0 7px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.3) transparent transparent transparent;
  }

  /* 下のグレー帯（ボタンエリア） */
  .cta-sticky-sp__row {
    background: #5f6168; /* 画面下の濃いグレー */
    padding: 14px 16px 18px;
    display: flex;
    justify-content: center;
    gap: 14px;
  }

  /* ボタン共通デザイン（左右2つ） */
  .cta-sp-btn {
    flex: 1 1 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 999px;
    background: #000;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  }

  .cta-sp-btn span {
    white-space: nowrap;
  }

  .cta-sp-btn i::before {
    content: "→";
  }

  /* 画面幅がかなり狭い場合は縦並び */
  @media (max-width: 360px) {
    .cta-sticky-sp__row {
      flex-direction: column;
    }
  }
}

/* PCフッター：カラム幅は中身のサイズに合わせる */
@media (min-width: 768px) {
  .site-footer .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
  }

  .site-footer .footer-nav {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(6, auto);
    justify-content: space-between; /* 👈 中身に応じて均等配置 */
    column-gap: 20px; /* gap以外の余白は持たせない */
  }

  .site-footer .footer-nav .fcol {
    min-width: auto; /* fr計算を抑止 */
    width: auto;
  }
}

.s-message{
  margin-top: 50px;
}

@media (min-width: 1201px) {
  .container.service__intro {
    padding: 0;
  }
}

/* PC幅（1201px〜）だけ padding を 0 にする */
@media (min-width: 1201px) {
  .container.service__thumbs {
    padding-inline: 0;   /* 左右のpaddingだけ0にする場合 */
    /* もし上下も含めて全部0にしたい場合は ↓ に変更
    padding: 0;
    */
  }
}

/* Instagram画像：丸 → 丸四角 */
#sb_instagram .sbi_item {
  border-radius: 28px;   /* ← 丸四角の角丸 */
  overflow: hidden;      /* ← これ超重要 */
}

/* WORKS スライダー：丸 → 丸四角 */
.work_thumb {
  border-radius: 28px;
  overflow: hidden; /* これ必須 */
}