@charset "UTF-8";
/* =============================================================================
 * usersupport.css — ユーザーサポート（固定ページ・スラッグ usersupport）
 *
 * HTML   page-usersupport.php ／ template-parts/under/usersupport/*.php
 * 読込   functions.php の $kennet_under に 'usersupport' => 'usersupport' を足すと読む
 *        （追記は司令の担当。2026-08-24 時点では未追記）
 *
 * 【このページにカンプは無い】2026-08-24 のケンネット様ご連絡（Novio）で新設が決まった
 *   ページで、デザインカンプが出ていない。そのため見た目を新しく起こさず、
 *   既存の下層ページの作り・数値をそのまま流用している。流用元は次のとおり。
 *     内容幅 .us-inner        … assets/css/faq.css 41行 .faq-inner（同じ式）
 *     アンカーの逃げ           … assets/css/case-study.css 271行／product.css 457行
 *     セクションの上下余白      … assets/css/faq.css 646行 .faq-support（上80／下100）
 *     区分の黒帯              … common.css 951行 .heading3--2（そのまま使う・再定義しない）
 *     資料の箱                … assets/css/product.css 489行 .plt-accessories__pdf の体裁
 *     区分と区分の間 50px      … assets/css/product.css 543行 .plt-accessories__group + …
 *     動画の枠                … assets/css/company.css 91行 .cmp-map iframe（aspect-ratio で持つ）
 *     CONTACT 帯              … assets/css/legal.css 209〜460行（数値は1つも変えずに転記）
 *   カンプが出てきたら、この5節と各パーツを照合し直す。
 *
 * 【約束ごと】（faq.css の同じ枠と同一）
 *   1rem = 10px（common.css の html{font-size:62.5%}）。
 *   固定 px / 固定 rem は次の3つだけで、その場に理由を1行書く。
 *     (1) コンテナの max-width  (2) 1px・2px・4px の罫線と 5px 以下の角丸
 *     (3) 固定でないと整わないもの（共通クラスの矢印など）
 *   ブレイクポイントは max-width の単独指定。基本 1199 →（崩れる所だけ）1023 → SP 768。
 *   色・書体は common.css の CSS 変数だけを使う。本ページで足した変数は無い。
 *
 * 【流用している既存クラス（再定義しない）】
 *   .page-title / .breadcrumb-wrap / .bread / .heading-01 / .sub-head / .heading3--2 /
 *   .ar / .ar--white
 *
 * 【並び】1 共通枠 → 2 取扱説明書・資料ダウンロード → 3 操作動画一覧 →
 *        4 CONTACT 帯 → 5 1199px 以下 → 6 1023px 以下 → 7 768px 以下
 * ========================================================================== */


/* =============================================================================
 * 1. 共通枠
 * ========================================================================== */

/* common.css の .section__inner は max-width 1200 の内側に左右 padding を持つため、
   1440px 表示のとき内容幅が 1121px になり、他の下層ページの内容幅 1200px と合わない。
   .bread / .footer__inner と同じ「1200 の内容＋外側に左右余白」方式にする
   （faq.css 41行 .faq-inner と同じ式・クラス名だけ本ページの接頭辞にした）。 */
.us-inner {
  max-width: calc(var(--sectionWidth) + 8rem); /* 1200 + 80 = 1280。コンテナ幅なので固定 */
  margin-inline: auto;
  padding-inline: clamp(2rem, 2.75vw, 4rem); /* 1440px で 39.6px ≒ 他ページの左右余白 40px */
}

/* ページ内リンクの飛び先（#download / #movie）。ヘッダーが position:fixed
   （common.css 156行・高さ var(--header_height)）のため、見出しがヘッダーへ潜らないよう
   逃げを持たせる。値は導入事例 case-study.css 271行・製品一覧 product.css 457行と同じ。
   トップページ・サポート・FAQ の各ボタンがこの2つの id を直接指している。 */
.us-download,
.us-movie {
  scroll-margin-top: calc(var(--header_height) + 2rem);
}

/* 上下の余白は faq.css 646行 .faq-support と同じ（Figma pad 上80 / 下100）。 */
.us-download,
.us-movie {
  padding-top: clamp(5rem, 5.56vw, 8rem);
  padding-bottom: clamp(6rem, 6.94vw, 10rem);
}


/* =============================================================================
 * 2. 取扱説明書・資料ダウンロード（#download）
 * 白地。中は「黒帯の区分見出し ＋ 資料の箱の一覧」を4区分ぶん繰り返す。
 * ========================================================================== */
.us-download {
  background: #fff;
}

/* 区分（製品マニュアル / レンタル全般 / 海外版レンタル / 国内版レンタル）の間。
   製品一覧の充電器・周辺製品と同じ 50px（product.css 543行）。 */
.us-download__group + .us-download__group {
  margin-top: clamp(3.6rem, 3.47vw, 5rem);
}

/* 3列。列数の指定の仕方は warranty.css 115行・web_earphone_guide.css 791行と同じ流儀
   （repeat(N, minmax(0, 1fr)) ＋ ブレイクポイントで N を減らす）。 */
.us-download__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 1.39vw, 2rem); /* 製品一覧の PDF ボタン間 10px より広め（3列で詰まらない幅） */
}

/* 箱の中身が1行でも2行でも高さがそろうよう、li は伸ばして a を中で広げる */
.us-download__item {
  display: flex;
}

/* 体裁は製品一覧の PDF ボタン（product.css 489行 .plt-accessories__pdf）と同じ。
   白い面＋影、右端に別タブアイコンの逃げ。数値もそのまま合わせている。 */
.us-download__link {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  /* 上下15px。右30px は別タブアイコンの逃げ（product.css 496行と同じ理由） */
  padding: clamp(1.2rem, 1.04vw, 1.5rem) clamp(2.6rem, 2.08vw, 3rem) clamp(1.2rem, 1.04vw, 1.5rem) clamp(1.4rem, 1.39vw, 2rem);
  background: #fff;
  box-shadow: 0 5px 20px rgba(89, 30, 27, .1); /* Figma DROP_SHADOW(0,5 r=20 #591E1B@0.1) */
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 16px */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
  text-decoration: none;
  transition: var(--transition);
}

/* 白い面の既定ホバー＝内側 2px の赤枠（product.css 512行と同じ語彙）。
   出現アニメの opacity と競合しないよう box-shadow で表現する。 */
.us-download__link:hover {
  box-shadow: 0 5px 20px rgba(89, 30, 27, .1), inset 0 0 0 2px var(--color_main);
}

/* 別タブアイコン 18×18。幅が狭いときに文字とぶつからないよう大きさも位置も一緒に縮める
   （product.css 518行と同じ）。 */
.us-download__blank {
  position: absolute;
  top: 50%;
  right: clamp(.6rem, .83vw, 1.2rem);
  width: clamp(1.4rem, 1.25vw, 1.8rem);
  height: clamp(1.4rem, 1.25vw, 1.8rem);
  transform: translateY(-50%);
}


/* =============================================================================
 * 3. 操作動画一覧（#movie）
 * 資料ダウンロードとの境目が分かるよう、下層ページで既に使っている薄い地
 * （--color_light #F6F6F6・product.css 71行／faq.css 367行と同じ色）を敷く。
 * ========================================================================== */
.us-movie {
  background: var(--color_light);
}

.us-movie__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.6rem, 1.67vw, 2.4rem);
  row-gap: clamp(2.4rem, 2.78vw, 4rem);
}

.us-movie__title {
  margin-bottom: clamp(.8rem, .83vw, 1.2rem);
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 本文と同じ 16px */
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .05em;
}

/* 動画の枠。高さを固定 px で書かず 16:9 の比で持つ（company.css 91行の地図と同じ作り）。
   遅延読み込み（iframe の loading="lazy"）で読み込み前は中身が空になるため、
   その間も枠の大きさが変わらないよう比で場所を確保し、地を濃い色にしておく。 */
.us-movie__frame {
  aspect-ratio: 16 / 9;
  background: var(--color_dark);
}

.us-movie__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}


/* =============================================================================
 * 4. CONTACT 帯
 * assets/css/legal.css 209〜460行から、クラスの接頭辞だけ .us-contact に置き換えて転記
 * （同じコンポーネント・数値は1つも変えていない）。legal.css 側の数値はさらに
 * assets/css/top.css 1935〜2100行（.top-contact 系）が出所で、各宣言に書いてある
 * top.css の行番号もそのまま残してある。
 * top.css / legal.css はそれぞれのページ限定で読み込まれ本ページでは効かないため、
 * クラスを別（us-contact__*）にして必要な分だけここに持つ。
 * ========================================================================== */
.us-contact {
  /* 上下は top.css 1936行と同値（Figma pad(80,276,80,276) の上下）。
     左右は .section__inner を使わない取り決めのためここで持つ。 */
  padding-block: 8rem;
  padding-inline: clamp(2rem, 2.75vw, 4rem);
  background: var(--gradient); /* Figma cta_gr。top.css 1937行は同じ値を直書き */
  color: #fff;
}

.us-contact__inner {
  display: flex;
  align-items: center;
  gap: clamp(4rem, 6.94vw, 10rem); /* top.css 1944行 10rem。1024px 付近で右カラムを潰さないよう縮む側にした */
  max-width: 100rem; /* top.css 1945行。Figma 実配置 220〜1220px。コンテナ幅なので固定 */
  min-height: 26.6rem; /* top.css 1946行。Figma title-wrap 266px（426 − 上下 padding 160） */
  margin-inline: auto;
}

/* --- 左カラム（legal.css 226〜300行 ／ 出所は top.css 1950〜2025行） ----------- */
.us-contact__intro {
  flex: 0 0 30rem; /* top.css 1951行 */
  align-self: stretch; /* top.css 1952行。カンプは左カラムだけ上寄せ */
}

.us-contact__label {
  display: flex; /* top.css 1956行 */
  align-items: center;
  gap: .4rem; /* Figma 丸マーク右端234 → 文字左端238 */
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}

.us-contact__label-mark {
  flex: 0 0 1.4rem; /* top.css 1966行。Figma Ellipse 14×14・stroke 3px INSIDE */
  width: 1.4rem;
  height: 1.4rem;
  border: 3px solid #fff; /* 3px は罫線 */
  border-radius: 50%;
}

.us-contact__title {
  font-family: var(--font_eng); /* top.css 1975行 */
  font-size: clamp(4.4rem, 4.17vw, 6rem); /* 上限 top.css 1976行 6rem ／ 下限 同 2337行 4.4rem */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 84 */
  letter-spacing: 0; /* top.css 1979行。CONTACT だけ字間を空けない */
}

.us-contact__point {
  display: block; /* top.css 1983行。Figma point 68×4 */
  width: 6.8rem;
  height: .4rem;
  margin: 2rem 0;
  background: #fff;
}

.us-contact__tel-label {
  font-size: 1.5rem; /* top.css 1991行 */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}

.us-contact__tel {
  display: flex; /* top.css 1998行 */
  align-items: center;
  gap: .4rem;
}

.us-contact__tel-icon {
  flex: 0 0 3.2rem; /* top.css 2003行。Figma icon 32×32 */
  width: 3.2rem;
  height: 3.2rem;
}

.us-contact__tel a {
  font-family: var(--font_eng); /* top.css 2009行 */
  font-size: clamp(2.8rem, 2.36vw, 3.4rem); /* 上限 top.css 2010行 3.4rem ／ 下限 同 2341行 2.8rem */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 47.6 */
  text-decoration: none;
  letter-spacing: .05em;
}

.us-contact__hours {
  margin-top: .8rem; /* top.css 2018行。Figma gap 8 */
  padding: .7rem; /* top.css 2019行。Figma 34px = border 1px + 7px + 本文 18.2px + 7px + border 1px */
  border: 1px solid var(--color_line); /* 1px は罫線。top.css 2020行は #EAEAEA 直書き */
  font-size: clamp(1.2rem, .9vw, 1.3rem); /* 上限 top.css 2021行 1.3rem ／ 下限 同 2345行 1.2rem */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
}

/* --- 右カラム（ボタン2本・legal.css 306〜385行 ／ 出所は top.css 2031〜2100行） --- */
.us-contact__btns {
  display: flex; /* top.css 2032行 */
  flex: 0 1 60rem; /* Figma ボタン 600px。1024px 付近では縮む側にする */
  flex-direction: column;
  gap: 2rem; /* top.css 2036行。Figma wrap gap 20 */
  min-width: 0;
}

.us-contact__btn {
  position: relative; /* top.css 2039行 */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12rem; /* top.css 2044行。Figma 120px */
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3); /* Figma DROP_SHADOW(0,10 r=30 #860D08@0.3) */
  text-decoration: none;
  transition: var(--transition, all .3s ease);
}

.us-contact__btn--rental {
  background: var(--color_main_dark); /* Figma main_color_dark #7C0002・top.css 2050行 */
  color: #fff;
}

.us-contact__btn--inquiry {
  background: #fff; /* top.css 2055行 */
  color: var(--color_main);
}

/* hover はフローティング CTA（common.css 1716行）と同じ語彙。白地は内側 2px の赤枠、
   濃い赤地はその白枠版。box-shadow は1プロパティなので既存の外影を併記して維持する。 */
.us-contact__btn--rental:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px #fff;
}

.us-contact__btn--inquiry:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px var(--color_main);
}

.us-contact__btn-icon {
  position: absolute; /* top.css 2064行。Figma 64×64・ボタン左端から40px */
  top: 50%;
  left: 4rem;
  width: 6.4rem;
  height: 6.4rem;
  transform: translateY(-50%);
}

.us-contact__btn-txt {
  display: flex; /* top.css 2072行 */
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
}

.us-contact__btn-main {
  font-size: 2.4rem; /* top.css 2080行。Figma 24px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
}

.us-contact__btn-sub {
  font-size: 1.5rem; /* top.css 2087行。Figma 15px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
}

.us-contact__btn .ar {
  position: absolute; /* top.css 2093行。Figma 24×24・ボタン右端から20px */
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
}


/* =============================================================================
 * 5. 1199px 以下
 * 3列のままだと1枠あたりが 300px を切り、資料の箱で最長の
 * 「TC-12　12スロット　充電バック（PDF）」が2行になり、動画も小さくなりすぎるため2列にする。
 * ========================================================================== */
@media (max-width: 1199px) {
  .us-download__list,
  .us-movie__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =============================================================================
 * 6. 1023px 以下（legal.css 396〜413行から転記・CONTACT 帯の分だけ）
 * 2カラムのままだと右カラムが 600px を切り、ボタンの中の文字
 * （最長「レンタル・購入・デモ機などのご相談はこちら」＝約330px）と
 * 左右のアイコン・矢印（合わせて148px）が競って折り返しが増えるため縦積みにする。
 * ========================================================================== */
@media (max-width: 1023px) {
  .us-contact__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 4rem;
    min-height: 0;
  }

  /* 縦積みでは左右いっぱいに広げず、カンプのボタン幅 600px にそろえて置く
     （営業時間の枠だけが 850px まで伸びて間延びするのを防ぐ） */
  .us-contact__intro,
  .us-contact__btns {
    flex: 0 0 auto;
    width: 100%;
    max-width: 60rem; /* コンテナ幅なので固定 */
    margin-inline: auto;
  }
}


/* =============================================================================
 * 7. 768px 以下
 * 一覧は1列。CONTACT 帯は legal.css 421〜450行から転記（出所は top.css 2320〜2375行）。
 * ========================================================================== */
@media (max-width: 768px) {
  .us-download__list,
  .us-movie__list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 1列にしたうえで、列の幅は 600px にとどめる（製品一覧 product.css 747行の .plt-cards と同じ扱い）。
     幅いっぱいに伸ばすと 768px 表示で資料の箱が 726px の横長になり、動画も 726×408 まで
     大きくなって、文字とのつり合いが崩れるため。375px 表示では画面幅いっぱいのまま。
     資料ダウンロードは区分の黒帯ごと絞る（黒帯だけ幅が残ると段違いに見えるため）。 */
  .us-download__group,
  .us-movie__list {
    max-width: 60rem; /* 固定: コンテナの最大幅は固定値で持つ（約束ごと (1)） */
    margin-inline: auto;
  }

  .us-contact {
    padding-block: 6rem; /* top.css 2321行 */
  }

  .us-contact__btn {
    height: auto; /* top.css 2350行 */
    min-height: 10rem;
    padding: 2rem 4.4rem 2rem 8.8rem;
  }

  .us-contact__btn-icon {
    left: 1.6rem; /* top.css 2356行 */
    width: 5.6rem;
    height: 5.6rem;
  }

  .us-contact__btn-main {
    /* 1行に収める（トップと同じ扱い＝top.css 2364行）。最長の「お問い合わせ・見積相談」は
       19px だと 219px 必要で入る幅が 203px しかなく折り返す。17px なら 196px で収まる。 */
    font-size: 1.7rem;
  }

  .us-contact__btn-sub {
    font-size: 1.3rem; /* top.css 2370行 */
    line-height: 1.4;
  }

  .us-contact__btn .ar {
    right: 1.2rem; /* top.css 2373行 */
  }
}