:root{
  --sec-subtitle-size: clamp(14px, 1.2vw, 16px);
}

/* =========================================================
   ユーティリティ / レスポンシブ上書き
   ========================================================= */

/* ---------- 視覚的に非表示 ---------- */
.u-visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* ---------- アンカー位置の補正（固定ヘッダー） ---------- */
html{ scroll-padding-top: var(--anchor-offset, 90px); }

/* ===========================
   スマホレイアウト
   =========================== */

@media (max-width: 1024px) {
  .fv {
    padding: 60px 16px 48px;
  }

  .fv__inner {
    flex-direction: column-reverse;
    gap: 28px;
    align-items: center;           /* ★ 中身を中央寄せ */
  }

  .fv__content {
    max-width: 380px;              /* ★ 幅を少し絞る */
    margin: 0 auto;                /* ★ ど真ん中に配置 */
  }

  .fv__title {
    font-size: 24px;
  }

  .fv__lead {
    font-size: 14px;
  }

    /* 箇条書きの左の余白を詰める */
  .fv__points {
    list-style: none;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .fv__points li {
    padding-left: 1.1em;
  }

  .fv__points li::before {
    left: 0;
  }

  .fv__buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
  }

  .fv__image-wrap {
    max-width: 380px;
    aspect-ratio: 4 / 3;
  }

  .fv-scroll {
    bottom: 8px;
  }

  .fv__visual::before {
    width: 140%;
    height: 140%;
    max-width: none;
  }

  .fv__image-wrap {
    max-width: 320px;
    transform: rotate(0deg); /* スマホではナナメをやめてスッキリ */
  }

  .fv__image-wrap::after {
    display: none; /* 重ねカードはSPでは非表示でもOK */
  }

  .fv__badge {
    left: 12px;
    bottom: 12px;
    font-size: 9px;
  }

  /* フロントセクション */
  .front-about__inner {
    grid-template-columns: 1fr;
  }

  .front-about__title {
    text-align: center;
  }

  .front-about__text {
    
  }

  .front-about__photo {
    margin: 0 auto;
    max-width: 320px;
  }

  .front-about__link {
    display: inline-block;
    margin-top: 4px;
  }

  /* サービスセクション-スマホ時は1列 */
    .service-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    padding: 20px 18px 60px;
    border: 1px solid var(--color-accent-border);
  }

  .service-card__title {
    font-size: 16px;
  }

  .service-card__text {
    font-size: 13px;
  }

  /* CTAセクション */
      .home-cta {
        padding: 40px 0;
    }

    .home-cta__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-cta__actions {
        margin-top: 16px;
        width: 100%;
    }

    .home-cta__button {
        width: 100%;
        justify-content: center;
    }

  /* 右上に固定した三本線/×ボタン */
  .nav-toggle {
    position: fixed;
    top: 64px;         /* ← 管理バーの下あたりに落とす */
    right: 16px;
    display: inline-flex;
    z-index: 100000;   /* ← 管理バーより上にする */
  }

  /* ログイン時（adminバーが出ているとき）の微調整 */
  body.admin-bar .nav-toggle {
    top: 64px;         /* お好みで 48〜60px くらいで調整 */
  }

  /* 画面全体オーバーレイのメニュー */
  .global-nav {
    display: none;
    position: fixed;
    inset: 0;
    background: #ffffff;
    z-index: 1100;
    padding: 80px 24px 24px;
    overflow-y: auto;
  }

  .global-nav.is-open {
    display: block;
  }

  .global-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .global-nav__list li {
    margin: 0;
    width: 100%;
    display: block;
  }

  .global-nav__list a {
    display: block;
    width: 100%;
    padding: 12px 0;          /* 行の高さ（上下余白） */
    font-size: 15px;          /* 文字サイズ */
    line-height: 1.6;         /* 行間 */
    text-align: left;         /* 左揃え（中央にしたければ center） */
    text-decoration: none;
    color: var(--color-text-base);
  }
 
  /* CTA メニューだけボタンっぽくする（スマホメニュー用） */
  .global-nav__list > li.menu-item--cta > a {
    margin-top: 12px;
    padding: 10px 18px;       /* 上下 / 左右の余白 */
    border-radius: 999px;
    background-color: #ffffff;
    color: #fff;
    text-align: center;       /* テキストを真ん中に */
    font-size: 14px;
  }

  .header-contact {
    display: none;
  }
  
  .header-tel {
    display: none;
  }
  /* ==========================
   フッター
   ========================== */
  .footer-columns {
    grid-template-columns: 1fr;
  }

  .site-footer {
    padding: var(--footer-pad-y, 28px) 16px;
  }

  .site-footer__inner {
    flex-direction: column;
    gap: 16px;
  }

  .site-footer__info {
    max-width: 100%;
  }

  .site-footer__name {
    text-align: left;
  }

  .footer-nav__list {
    justify-content: flex-start;
  }
/* ==========================
   TOP ヒーローセクション
   ========================== */
    .top-hero {
        padding: var(--hero-pad-y, 56px) 0;
    }

    .top-hero__inner{
      grid-template-columns: 1fr;
    }
    .top-hero__media{
      max-width: 100%;
      aspect-ratio: var(--hero-media-ratio-sp, 16 / 10); /* ★SP用 */
    }

    .top-hero__content {
        max-width: 100%;
    }

    .top-hero__title {
        font-size: 24px;
    }

    .top-hero__subtitle {
        font-size: 14px;
    }

    .top-hero__visual img {
        max-width: 80%;
    }
/* ==========================
   フロント：投稿一覧
   ========================== */
    .front-posts {
        padding: 48px 0;
    }

    .front-posts__link {
        padding: 14px 16px;
    }

    .front-posts__item-title {
        font-size: 15px;
    }

    .front-posts__excerpt {
        font-size: 12px;
    }
/* ==========================
   404 ページ
   ========================== */
    .error-404 {
        padding: 56px 0 72px;
    }

    .error-404__inner {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: left;
    }

    .error-404__code {
        text-align: left;
    }

    .error-404__code-main {
        font-size: 52px;
    }

    .error-404__search {
        max-width: 100%;
    }

  .c-relatedPosts__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-frontNews {
    padding: 28px 0;
  }
  .p-frontNews__inner {
    padding: 0 16px;
  }
  .p-frontNews__date {
    min-width: 90px;
    font-size: 11px;
  }

  .front-reasons__cards {
      grid-template-columns: 1fr;
  }

  /* 親の幅が 0px になってるのを強制修正 */
  header.site-header .site-header__inner{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ロゴ側が横幅を余計に取らないようにする */
  header.site-header .site-branding{
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: auto !important;
    text-align: left !important;
  }

  header.site-header .site-branding a{
    white-space: nowrap !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* 右側は右へ */
  header.site-header .site-header__right{
    margin-left: auto !important;
    flex: 0 0 auto;
  }

  /* 選ばれる理由：スマホは必ず1列（3段） */
  .front-reasons__cards{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1205px){

  .nav-toggle{
    width:44px !important;
    height:44px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    gap:6px !important;
    padding:0 !important;
    border-radius:10px !important;
    border:1px solid rgba(0,0,0,.15) !important;
    background:#fff !important;
    overflow:hidden !important;     /* ← はみ出し防止 */
    line-height:1 !important;
    position:relative !important;
    z-index:1001 !important;
  }

  .nav-toggle__bar{
    width:22px !important;
    height:2px !important;
    background:#333 !important;
    display:block !important;

    /* ★ここが重要：変な指定を全部殺す */
    position:static !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    margin:0 !important;
    transform:none !important;
  }

  /* 開いたら× */
  .nav-toggle.is-open .nav-toggle__bar:nth-child(1){
    transform:translateY(8px) rotate(45deg) !important;
  }
  .nav-toggle.is-open .nav-toggle__bar:nth-child(2){
    opacity:0 !important;
  }
  .nav-toggle.is-open .nav-toggle__bar:nth-child(3){
    transform:translateY(-8px) rotate(-45deg) !important;
  }
}

/* 角丸箱/枠/背景を強制解除 */


/* TOP取扱業務：2列固定（2→横2 / 4→2x2 / 6→3x2） */

/* 取扱業務（top-service）だけは常に2列 */

/* 取扱業務：カードが細くなりすぎないようにする */

/* Hero：center時は画像を必ず中央へ（右寄せ指定を潰す） */
@media (min-width: 768px){
  .top-hero--img-center .top-hero__media{
    justify-self: center;        /* grid内で中央 */
    margin-left: 0 !important;   /* auto等を潰す */
    margin-right: 0 !important;
    text-align: center !important;
    display: flex;               /* 中身を中央へ */
    justify-content: center !important;
    align-items: center;
    width: 100%;
  }

  .top-hero--img-center .top-hero__image{
    display: block;
    margin: 0 auto !important;   /* 右寄せを潰す */
    max-width: min(720px, 100%);
    height: auto;
  }
}

/* ===== 取扱業務カード ===== */
.service-card{
  background: var(--service-card-bg, #fff) !important;
  border: 1px solid var(--service-card-border, #e5e5e5) !important;
  color: var(--service-card-text, #555) !important;
}

/* ===== Reasons cards（front-reasons__cards配下の各カード） ===== */
.front-reasons__cards > *{
  background: var(--reasons-card-bg, #fff) !important;
  border: 1px solid var(--reasons-card-border, #e5e5e5) !important;
  color: var(--reasons-card-text, #555) !important;
}

/* 安心のポイント：カード本体候補にまとめて適用 */
:where(.feature-card, .features-card, .top-features__card){
  background: var(--card-bg, #fff) !important;
  border: 1px solid var(--card-border, #e5e5e5) !important;
  color: var(--card-text, #555) !important;
}

/* About（代表挨拶）画像サイズ：デバイス別（Customizer）
   NOTE: 画像要素(img)自体に width/height を当てると、
   .profile-card__media の aspect-ratio と衝突して「崩れ」に見えるため、
   変数(--profile-image-size)の切替だけを行う。
*/
@media (max-width: 1205px){

  /* SP：サブメニューはデフォルトで完全非表示 */
  #global-nav .sub-menu{
    display: none !important;
    position: static !important;  /* absoluteで浮かないように */
    opacity: 1 !important;        /* opacity制御を無効化 */
    visibility: visible !important;
    transform: none !important;
    box-shadow: none;             /* 任意：浮遊感がいらないなら */
  }

  /* SP：開いたときだけ表示 */
  #global-nav li.is-open > .sub-menu{
    display: block !important;
  }

  /* SP：トグルボタンの見た目（任意） */
  #global-nav .submenu-toggle{
    cursor: pointer;
  }
}


/* =========================================================
   Hamburger: <=1205px は SP と同じ挙動に統一（常時表示）
   - 1205px以下では header のTEL/問合せを常時非表示
   - nav-toggle は常に右上 fixed（閉じるトグルが nav の下に潜らない）
   ========================================================= */
@media (max-width: 1205px){
  /* 右側まとめの箱を解体して、ナビ/トグルが崩れないように */
  .site-header__right{ display: contents; }

  /* 1205px以下：電話・問合せは常時非表示 */
  .header-tel,
  .header-contact{
    display: none !important;
  }

  /* トグルを右上に固定（×/三本線が消えないように） */
  .nav-toggle{
    display: flex !important;
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 1201 !important; /* .global-nav(1100)より上 */
  }
  body.admin-bar .nav-toggle{
    top: calc(16px + 32px) !important; /* 管理バー分 */
  }

  /* 画面全体オーバーレイのメニュー */
  .global-nav{
    display: none;
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 1100;
    padding: 80px 24px 24px;
    overflow-y: auto;
  }
  .global-nav.is-open{ display: block; }

  /* リンクのタップ領域を分かりやすく */
  .global-nav__list > li > a{
    display: block;
    width: 100%;
    padding: 14px 0;
  }
}


/* 重複削除済み */

/* =========================================================
   構造設定：セクション余白（S/M/L + Custom）
   各<section class="c-section ..."> のインライン変数 --sec-pad-y を反映
   既存CSSの固定paddingを確実に上書きするため !important を付与
========================================================= */
.c-section{
  padding: var(--sec-pad-y, 72px) 0 !important;
}

.c-secSubtitle,
.front-about__subtitle,
.front-service__subtitle,
.front-reasons__subtitle,
.front-voice__subtitle,
.front-cta__subtitle {
  font-size: var(--sec-subtitle-size);
  line-height: 1.6;
}

.front-about__role,
.front-about__shoulder {
}

/* 代表挨拶：プロフィール画像（サイズ/比率のブレ対策）
   - PHP側で --profile-image-size-pc/tablet/mobile と --profile-image-ratio を出している
   - 端末幅で「サイズ」だけ切替し、比率(--profile-image-ratio)は共通のまま使う
   - これにより、PC/SP/タブレットで同じ値を入れた時に見た目が一致する
*/
@media (min-width: 768px) and (max-width: 1024px){
  .c-section.top-about{
    --profile-image-size: var(--profile-image-size-tablet, var(--profile-image-size-pc, 120px)) !important;
  }
}

@media (max-width: 767px){
  .c-section.top-about{
    --profile-image-size: var(--profile-image-size-mobile, var(--profile-image-size-tablet, var(--profile-image-size-pc, 120px))) !important;
  }
}



/* ==========================
   TOP：取扱業務（列数制御）
   - Customizer「表示列数（PC）」(anchor_service_cols_pc) → --as-cols
   - front.css 側の grid 定義を邪魔しないよう、utilities では上書きしない
========================== */