/* === preflight-lite（Tailwind互換の最小セット）=== */
*, ::before, ::after {
  box-sizing: border-box;
  /* ← これが無いと幅+padding+borderで膨らむ */
  border-width: 0;
  /* Tailwindの想定に合わせる */
  border-style: solid;
  border-color: currentColor;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

/* 念のため */

img, video {
  display: block;
  /* 画像/動画はブロック化 */
  max-width: 100%;
  height: auto;
}

/* SVGも img と同じく“はみ出さない・縦横比維持” */
svg {
  display: block;
  /* inline-svgのベースラインズレ対策 */
  max-width: 100%;
  height: auto;
}


button, input, optgroup, select, textarea {
  font: inherit;
  color: inherit;
  /* フォームの初期化（サイズズレ予防） */
}



/* ===== global.css =====
   Tailwind出力(output.css)の後に読み込んで軽微な調整だけを行う
   ※ @apply は使っていません（ビルド不要）
*/
/* ベースの文字色/背景（Tailwindトークンに依存しない保険） */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  color: #333333;
  /* ink 相当 */
  background: #FFFFFF;
  /* surface 相当 */
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, Arial, sans-serif;
  line-height: 1.625;
  font-size: 16px;
  margin: 0;
  min-height: 100vh;
  position: relative;
}

html, body {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html, body {
    overflow-x: hidden;
  }
}

/* clip が無いブラウザは hidden */
:root {
  /* ===== Heading scale (h4=16px baseline) ===== */
  /* base = 16px */
  --fs-h1: 1.75rem;
  /* 28px */
  --fs-h2: 1.375rem;
  /* 22px */
  --fs-h3: 1.125rem;
  /* 18px */
  --fs-h4: 1rem;
  /* 16px */
  --fs-h5: 0.875rem;
  /* 14px */
  --fs-h6: 0.8125rem;
  /* 13px */
  --lh-lg: 1.3;
  /* h1–h3 */
  --lh-sm: 1.4;
  /* h4–h6 */
  /* デフォルト＝PC想定 38%：開始位置（PC）*/
  --container-max: 1280px;
  --page-pad: 16px;
  --cut: 0.38;
}

@media (min-width: 768px) {
  :root {
    --fs-h1: 2rem;
    /* 32px */
    --fs-h2: 1.5rem;
    /* 24px */
    --fs-h3: 1.25rem;
    /* 20px */
    /* h4以下は据え置きでOK（可読性優先） */
  }
}

/* リセット＆共通 */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .75em;
  font-weight: 700;
  /* ほどよく太め（必要なら700に） */
  line-height: var(--lh-sm);
}

/* 個別サイズ */
h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-lg);
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-lg);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-lg);
}

h4 {
  font-size: var(--fs-h4);
}

/* = 16px（本文と同じ） */
h5 {
  font-size: var(--fs-h5);
}

h6 {
  font-size: var(--fs-h6);
  letter-spacing: .02em;
}

/* 小サイズは若干広め */
ul, ol {
  list-style: none;
}

/* 画像はブロック化＋レスポンシブ（preflightの上書き保険） */
img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0 none;
}

/* ==== Lead text (Bootstrap .lead 相当／控えめ) ==== */
.lead {
  font-size: 1.11rem;
  /* 18px */
  line-height: 1.7;
  /* 読みやすく */
  font-weight: 400;
  /* 重すぎない */
  letter-spacing: .01em;
  margin-bottom: 1em;
}

/* バリエーション（必要なら） */
.lead--muted {
  color: rgba(0, 0, 0, .7);
}

/* ダーク背景なら適宜調整 */
.lead--tight {
  line-height: 1.6;
}

/* 行送りを少し詰める */
/* ==== Text shadow utilities (Bootstrap風) ==== */
.text-shadow-none {
  text-shadow: none !important;
}

/* 汎用：薄め／標準／強め */
.text-shadow-sm {
  text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}

.text-shadow {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.text-shadow-lg {
  text-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}

/* 輪郭っぽく強調（写真の上の白文字などに） */
.text-shadow-outline {
  text-shadow:
    -1px 0 0 rgba(0, 0, 0, .6), 1px 0 0 rgba(0, 0, 0, .6), 0 -1px 0 rgba(0, 0, 0, .6), 0 1px 0 rgba(0, 0, 0, .6);
}

/* 明るい発光（アクセント色を生かす場合に） */
.text-shadow-glow {
  text-shadow:
    0 0 6px rgba(152, 203, 0, .7), 0 0 12px rgba(152, 203, 0, .45);
}

/* ダーク背景で白文字を少しだけ浮かせる微影 */
.text-shadow-light {
  text-shadow: 0 1px 2px rgba(255, 255, 255, .25);
}

/* 代替：WebKit系のストローク（対応ブラウザ限定） */
.text-stroke {
  -webkit-text-stroke: 1px rgba(0, 0, 0, .55);
  text-shadow: none;
}

.text-shin {
  font-weight: 400 !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  margin: 0 auto !important;
  padding: 0.5em !important;
}

.entry-content {
  min-height: 400px;
}
/* コンテナの右端ピタ（xl以上）を強制したい場合の保険 */
@media (min-width: 1280px) {
  .container.container--right-tight {
    padding-right: 0 !important;
  }
}

/* 細かなユーティリティ（必要に応じて追加） */
.text-ink {
  color: #333333;
}

.bg-surface {
  background-color: #FFFFFF;
}

.bg-dyn {
  background-image: var(--bg-url);
}



/* 基点コンテナ：全ページ共通 */
.content-wrapper {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
  margin: 0 auto;
  padding: 0;
}

/* Google map (トップページ埋め込み) */
.map {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  /* ← 少し高く（16:9→3:2） */
}

@media (min-width: 1024px) {
  .map {
    aspect-ratio: 4 / 3;
  }

  /* ← PCではさらに高くしたい場合 */
}

.map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* フォールバック（aspect-ratio未対応ブラウザ向け） */
@supports not (aspect-ratio: 1 / 1) {
  .map {
    height: 0;
    padding-top: 66.6667%;
  }

  /* 3:2 */
  @media (min-width: 1024px) {
    .map {
      padding-top: 75%;
    }

    /* 4:3 */
  }
}

:root {
  --trap-slope: 40%;
}

/* 角度 */

.bg-trapezoid {
  position: absolute;
  top: 0;
  /* ▼ デフォルト0に統一（相殺が正しく働く） */
  left: calc(0px - var(--trap-offset, 0px));

  height: 100%;
  min-height: 100vh;

  /* 右端据え置き：幅に同量を“必ず”足す（デフォも0で一致） */
  width: calc(max((100vw - var(--container-max))/2, var(--page-pad)) + (min(100vw, var(--container-max)) * var(--cut)) + var(--trap-offset, 0px));

  background: #98CB00;
  clip-path: polygon(0 0, 100% 0, var(--trap-slope) 100%, 0 100%);
  z-index: 0;
}

/* スマホ（vw基準） */
@media (max-width: 767px) {
  .bg-trapezoid {
    /* デフォルト0に統一：相殺OK */
    left: calc(0px - var(--trap-offset-sp, 0px));
    width: calc(44vw + var(--trap-offset-sp, 0px));
    clip-path: polygon(0 0, 100% 0, 10% 100%, 0 100%);
    /* 固定でOK */
  }
}

/* 中身が背景より前に来るように */
.page-content {
  position: relative;
  z-index: 1;
}

.section-bg {
  background-color: #fff;
}

.section-bg-muted {
  background-color: #f5f5f5;
  /* Tailwindのgray-100相当 */
}

/* === Reusable icon button === */
.btn-ico {
  --btn-ico-size: 50px;
  /* ボタンの直径 */
  --btn-ico-bg: transparent;
  /* 背景色（透過） */
  --btn-ico-fg: #fff;
  /* アイコン色 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-ico-size);
  height: var(--btn-ico-size);
  border-radius: 9999px;
  background: var(--btn-ico-bg);
  color: var(--btn-ico-fg);
  transition: opacity .2s ease;
}

.btn-ico:hover {
  opacity: .9;
}

/* アイコン本体（currentColorで着色） */
.ico {
  --ico-size: calc(var(--btn-ico-size) * .5);
  width: var(--ico-size);
  height: var(--ico-size);
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: var(--ico-url) center/contain no-repeat;
  mask: var(--ico-url) center/contain no-repeat;
}

/* 右矢印のみ */
.ico--arrow {
  --ico-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8 12h8m0 0l-4-4m4 4l-4 4" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

/* 右矢印の“サークル”アイコン（円＋矢印） */
.ico--arrow-circle {
  --ico-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="white" stroke-width="2"/><path d="M10 8l4 4-4 4" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

/* 角丸の四角ボタン版にしたい時（任意） */
.btn-ico--pill {
  --btn-ico-size: 36px;
  padding-inline: 10px;
  border-radius: 9999px;
  width: auto;
}

/* circle-arrow-right 風（アウトライン円＋矢印） */
.ico--carrow {
  --ico-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="white" stroke-width="2"/><path d="M8 12h4.5" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"/><path d="M12 9l4 3-4 3z" fill="white"/></svg>');
}

/* 透明背景の丸アイコン（枠つき） */
.btn-ico--ghost {
  --btn-ico-bg: transparent;
  /* 背景を透過 */
  box-shadow: inset 0 0 0 1px currentColor;
  /* 枠線 */
}

.btn-ico--ghost:hover {
  opacity: 1;
  box-shadow: inset 0 0 0 2px currentColor;
  /* hoverでわずかに太く */
}

/* フォーカス可視化（推奨） */
.btn-ico:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .btn-ico {
    --btn-ico-size: 44px;
  }

  /* タップしやすく */
}

/* 文字矢印アイコン（→） */
.ico-txt {
  --ico-size: calc(var(--btn-ico-size) * .5);
  width: var(--ico-size);
  height: var(--ico-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #FFFFFF;
  /* 親の色を継承（= .btn-ico の --btn-ico-fg） */
}

.ico-txt--arrow::before {
  content: "\2192";
  /* → */
  font-size: calc(var(--btn-ico-size) * .5);
  font-weight: 600;
  /* ちょい太めで視認性UP */
}

/* 文字だけのリンクに “→” を付けたい時（任意） */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4em;
}

.link-arrow::after {
  content: "\2192";
  font-weight: 600;
  line-height: 1;
}

.ico-product::before {
  display: inline-block;
  width: 92px;
  height: 104px;
  margin-right: 10px;
  position: relative;
  top: 16px;
}

/* SPだけ縮小 */
@media (max-width: 767px) {
  h2.ico-product {
    font-size: 1rem;
    margin-left: -10px
  }

  .ico-product::before {
    margin-right: 3px;
    top: -16px;
    transform: scale(.72);
    transform-origin: left top;
  }
}

.ico-bizphone::before {
  content: url('../images/office_phone_ico.png');
}

.ico-nas::before {
  content: url('../images/nas_ico.png');
}

.ico-tap::before {
  content: url('../images/tap_ico.png');
}

.ico-plug::before {
  content: url('../images/plug_ico.png');
}

/* テキストカラムの中に帯を敷く（右寄せ用） */
.svc-pane {
  position: relative;
}

.svc-pane>* {
  position: relative;
  z-index: 1;
}

/* 中身は前面 */

.svc-ribbon {
  /* 調整用の変数（必要に応じてブロックごとに上書きできる） */
  --svc-bg: #e9e9e9;
  /* 帯の色 */
  --svc-spacer: 16.666%;
  /* 2/12カラム分＝左のホワイトスペース量 */
  --ribbon-h: 56px;
  /* 帯の高さ */
  --ribbon-top: 18px;
  /* テキストカラム上端からのオフセット */
  --ribbon-right-extend: 0%;
  /* 右方向のはみ出し（必要なら +% や +px） */

  position: absolute;
  top: var(--ribbon-top);
  left: calc(-1 * var(--svc-spacer));
  /* ← 左のホワイトスペースに食い込ませる */
  right: var(--ribbon-right-extend);
  height: var(--ribbon-h);
  background: var(--svc-bg);
  z-index: 0;
  pointer-events: none;

  /* 左端を斜めカット（右寄せ用） */
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%);
}

/* SPは全幅・控えめ高さ */
@media (max-width: 767px) {
  .svc-ribbon {
    left: 0;
    right: 0;
    --ribbon-h: 44px;
    --ribbon-top: 10px;
    clip-path: none;
  }
}

/* 左寄せ：帯は右方向へ伸ばし、右に2カラム分の余白を残す */
.svc-ribbon--left {
  /* 必要に応じて上書きできる可変値 */
  --ribbon-left-extend: 0;
  /* 左へはみ出す量（左に伸ばすなら負の値に） */
  --ribbon-cut: 24px;
  /* 右端の斜めカット量 */

  /* 右側にスペーサー（例：2/12=16.666%）を確保 */
  left: var(--ribbon-left-extend);
  right: calc(-1 * var(--svc-spacer));

  /* 右端を斜めカット（ミラー形状） */
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--ribbon-cut)) 100%, 0 100%);
}

/* SPは全幅・フラット（右寄せ版と同様に） */
@media (max-width: 767px) {
  .svc-ribbon--left {
    left: 0;
    right: 0;
    clip-path: none;
  }
}

/* 画像カラムの横にだけ出す短い帯（右側へ） */
.svc-tail {
  position: relative;
  overflow: visible;
}

.svc-tail::after {
  content: "";
  position: absolute;

  /* テキスト側の帯と同じ高さ・位置を共有 */
  top: var(--ribbon-top, 18px);
  height: var(--ribbon-h, 56px);
  background: var(--svc-bg, #e9e9e9);

  /* ←ココがポイント：画像の“右外”に固定 */
  left: 100%;
  /* 画像の右端から開始 */
  margin-left: var(--tail-gap, 0px);
  /* 右へどれだけ離すか */
  width: var(--tail-w, 96px);
  /* 帯の長さ */

  pointer-events: none;
  z-index: 0;
  /* 画像より背面 */
}

/* 左寄せパターン用（画像の左外へ） */
.svc-tail--left::after {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: var(--tail-gap, 0px);
}

@media (max-width: 767px) {
  .svc-tail::after {
    content: none !important;
  }

  /* 画像横の短い帯 */
  .svc-tail--left::after {
    content: none !important;
  }

  /* 左寄せ版も非表示 */
}

/* ===== HERO (canonical) ===== */
/* キャンバス：基準ガターをCSS変数に */
.hero-canvas {
  --stage-w: 1280;
  --stage-h: 520;
  --stage-gap-left: 120px;

  /* ガター左端（:root の --container-max / --page-pad を利用） */
  --gutter-left: calc(max((100vw - var(--container-max)) / 2, var(--page-pad)));

  /* 画面に収めるための縮小係数（拡大はしない） */
  --scale: min(1, calc(100vw / (var(--stage-w) * 1px)));

  position: relative;
  width: 100%;
  height: calc((var(--stage-h) * 1px) * var(--scale));
  /* 高さ0対策のフォールバック */
  height: clamp(280px,
      calc(100vw * (var(--stage-h) / var(--stage-w))),
      calc(var(--stage-h) * 1px));
  overflow: hidden;
}

/* 1) フルブリードの横幅を dvw 優先に（fallback 付き） */
.hero-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ステージ：ガター左＋ギャップから開始し、右端ピタにフィット（縮小のみ） */
.hero-stage {
  position: absolute;
  top: 0;
  left: calc(var(--gutter-left) + var(--stage-gap-left));
  width: calc(var(--stage-w) * 1px);
  height: calc(var(--stage-h) * 1px);
  transform-origin: top left;

  /* 右端フィット用の縮小率 */
  --fit-left: calc((100vw - (var(--gutter-left) + var(--stage-gap-left))) / (var(--stage-w) * 1px));
  transform: scale(min(1, var(--fit-left))) translateX(var(--stage-nudge, 0px));
}

.hero-stage.no-fit-right {
  transform: translateX(var(--stage-nudge, 0px)) scale(1);
  /* 縮小せず常に原寸 */
}

/* dvw 対応（任意） */
@supports (width:100dvw) {
  .hero-canvas {
    --gutter-left: calc(max((100dvw - var(--container-max)) / 2, var(--page-pad)));
  }

  .hero-stage {
    --fit-left: calc((100dvw - (var(--gutter-left) + var(--stage-gap-left))) / (var(--stage-w) * 1px));
  }

  .hero-bleed {
    width: 100dvw;
    margin-left: calc(50% - 50dvw);
    margin-right: calc(50% - 50dvw);
  }
}

/* メディア層（画像→動画に置換OK） */
.hero-media, .hero-media>* {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* PCはカバーでOK */
  object-position: center;
}

/* ← テキストはキャンバス直下で“ガター左”基準に固定（ステージから独立） */
.hero-left {
  position: absolute;
  left: calc(var(--gutter-left) + 32px);
  top: 50%;
  transform: translateY(-50%);
  max-width: 520px;
  color: #fff;
  font-weight: 700;
  z-index: 2;

  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  margin: 0 auto;
  padding: 0;
}

/* 右下CTA（必要に応じてステージ内に追随） */
.hero-right {
  position: absolute;
  right: 32px;
  bottom: 32px;
  z-index: 2;
}

/* ---------- Smartphone (<=767px) ---------- */
/* ギャップ無効＋比率固定＋全幅（トリミング無し＝アニメ全体表示） */
@media (max-width: 767px) {
  .hero-canvas {
    --stage-gap-left: 0 !important;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    /* 比率固定。対応ブラウザでは aspect-ratio を利用 */
    aspect-ratio: var(--stage-w) / var(--stage-h);
    height: auto;
    /* Fallback（古い環境） */
    height: calc(100vw * (var(--stage-h) / var(--stage-w)));
  }

  @supports (width: 100dvw) {
    .hero-canvas {
      width: 100dvw;
      margin-left: calc(50% - 50dvw);
      margin-right: calc(50% - 50dvw);
    }
  }

  .hero-stage {
    position: relative;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    /* scale / nudge をリセット */
  }

  .hero-media, .hero-media>* {
    /*  object-fit: contain;            全体表示：トリミング無し */
    object-position: center;
  }

  /* テキストとCTAは左右の安全余白を確保 */
  .hero-left {
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
    max-width: none;
    top: 50%;
    transform: translateY(-50%);
  }

  .hero-right {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
  }

  .text-shin {
    font-weight: 400 !important;
    font-size: 0.9rem !important;
    line-height: 1.15 !important;
    margin: 0 auto !important;
    padding: 0.3em !important;
  }
}