@charset "UTF-8";
/* ============================================================
   AIR SAFE LP  -  add20260723.css
   専用ページ（page-airsafe.php / Template Name: AIR SAFE LP）
   ============================================================ */

:root {
  --blue: #0097CF;
  --blue-d: #0079A8;
  --blue-l: #31B4E4;
  --ink: #222222;
  --ink-2: #4b4b4b;
  --gray: #e7e5e4;
  --gray-l: #f1efee;
  --dark: #3a3a3a;
  --line: #d8d4d3;
  --cw: 1120px;
}

/* ---------- reset / base ---------- */
.airsafe-lp {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: "Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}
.airsafe-lp * {
  box-sizing: border-box;
}
.airsafe-lp img {
  max-width: 100%;
  height: auto;
  display: block;
}
.airsafe-lp a {
  color: inherit;
  text-decoration: none;
  transition: .25s;
}
.as-wrapper {
  overflow: hidden;
}
.as-container {
  max-width: var(--cw);
  margin: 0 auto;
  padding: 0 24px;
}

/* English geometric type */
.as-lineup__title {
  font-family: "Barlow Semi Condensed","Noto Sans JP",sans-serif;
}

/* ============================================================
   HEADER
   ============================================================ */
.as-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  background: transparent;
}
.as-header__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 0 0 30px;
  height: 82px;
  display: flex;
  align-items: center;
}
.as-header__logo {
  display: flex;
  align-items: center;
}
.as-header__logo img {
  width: 230px;
  max-width: 100%;
}
.as-gnav {
  margin-left: auto;
}
.as-gnav ul {
  display: flex;
  gap: 38px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.as-gnav a {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  letter-spacing: .08em;
  position: relative;
}
.as-gnav a:hover {
  color: var(--blue);
}
.as-header__cta {
  display: flex;
  height: 82px;
  margin-left: 44px;
}
.as-hbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 122px;
  height: 100%;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
}
.as-hbtn img {
  height: 30px;
  width: auto;
  display: block;
}
.as-hbtn--contact {
  background: #fff;
  color: #6b6b6b;
}
.as-hbtn--catalog {
  background: #333;
  color: #fff;
}
.as-hbtn--catalog span {
  color: #fff;
}
.as-hbtn--contact:hover {
  color: var(--blue);
}
.as-hbtn--catalog:hover {
  background: #444;
}
.as-nav-toggle {
  display: none;
}

/* ============================================================
   HERO
   ============================================================ */
/* デザイン基準：インナー幅 1296px。右のテキスト要素は右へ 40px はみ出す。 */
.as-hero {
  background: #DDD9D8;
  position: relative;
  padding-top: 82px;
  overflow: hidden;
}
.as-hero__inner {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(24px,3vw,40px) 20px 140px;
  display: flex;
  align-items: flex-start;
    gap: 0;
}
.as-hero__visual {
  flex: 0 0 auto;
  width: 56.6%;
  margin-left: 52px;
}
/* 左へ少しブリード */
.as-hero__visual img {
  width: 100%;
}

/* --- 右テキスト（白パネル・右上/左下を斜めカット・右へ40pxはみ出し） --- */
.as-hero__body {
  flex: 1 1 0;
  min-width: 0;
  margin-top: 36px;
  background: #fff;
  --cx: 41px;
  --cy: 41px;
  /* 斜めカットの 横/縦（デザイン実測 40.7×41.3） */
  clip-path: polygon(0 0,calc(100% - var(--cx)) 0,100% var(--cy),100% 100%,var(--cx) 100%,0 calc(100% - var(--cy)));
  padding: clamp(30px,5.2vw,67px) clamp(26px,5.2vw,40px) clamp(28px,3.9vw,68px) clamp(24px,3.5vw,40px);
}

.as-hero__head {
  display: inline-block;
  width: 100%;
  text-align: center;
}
/* タイトル幅に収縮 → ラベルがタイトル中央に揃う */

.as-hero__label {
  position: relative;
  margin: 0;
  padding: 9px 0;
  text-align: center;
  color: var(--blue);
  font-family: "Zen Old Mincho",serif;
  font-weight: 400;
  font-size: clamp(16px,1.57vw,22px);
  letter-spacing: .1em;
  line-height: 1;
  white-space: nowrap;
}
.as-hero__label::before,
.as-hero__label::after {
  content: "";
  position: absolute;
  left: 50%;
  width: min(280px,100%);
  height: 1px;
  background: #333;
  transform: translateX(-50%);
}
.as-hero__label::before {
  top: 0;
}
.as-hero__label::after {
  bottom: 0;
}

.as-hero__title {
  margin: 20px 0 0;
  color: var(--blue);
  font-family: "Zen Old Mincho",serif;
  font-weight: 400;
  font-size: clamp(50px,5.86vw,82px);
  letter-spacing: .1em;
  line-height: 1;
  white-space: nowrap;
}

.as-hero__lead {
  margin: 26px 0 0;
  color: #333;
  font-family: "Zen Old Mincho",serif;
  font-weight: 400;
  font-size: clamp(14px,1.21vw,17px);
  line-height: 1.9;
  letter-spacing: .02em;
}
.as-hero__note {
  margin: 18px 0 0;
  color: var(--blue);
  font-size: clamp(11px,1vw,13px);
  line-height: 1.72;
  letter-spacing: .01em;
}

/* ============================================================
   MOVIE
   ============================================================ */
/* デザイン基準：1400×858。背景はブランドブルー、装飾は deco-right01 / deco-left01。 */
.as-movie {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(180deg,#00a0d6 0%,#0086bd 100%);
  padding: clamp(56px,6.2vw,87px) 0 clamp(64px,6.9vw,96px);
  --mcx: 60px;
  --mcy: 84px;
  /* 左上の斜めカット（デザイン実測 52.5×31.8） */
  clip-path: polygon(0 var(--mcy),var(--mcx) 0,100% 0,100% 100%,0 100%);
  margin-top: -84px;
}
/* --- 装飾（斜めストライプ） --- */
.as-movie__deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  height: auto;
  user-select: none;
}
.as-movie__deco--r {
  /* 右上：1400px基準で幅686px（686/1400 = 49%）。1400px超は中央1400pxの右端で固定 */
  top: 0;
  right: max(0px, calc(50% - 700px));
  width: 49%;
  max-width: 686px!important;
}
.as-movie__deco--l {
  /* 左下：1400px基準で幅580px（580/1400 = 41.43%）。1400px超は中央1400pxの左端で固定 */
  bottom: 0;
  left: max(0px, calc(50% - 700px));
  width: 41.43%;
  max-width: 580px!important;
}
/* デザインどおり左右反転 */

.as-movie__inner {
  position: relative;
  z-index: 1;
  max-width: 1130px;
  margin: 0 auto;
  padding: 0 24px;
}
.as-movie__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px,3vw,48px);
  flex-wrap: nowrap;
}
.as-movie__title {
  flex: 0 0 auto;
  margin: 0;
  display: flex;
  align-items: flex-end;
  gap: clamp(10px,1.2vw,16px);
  line-height: 1;
}
.as-movie__title .en {
  font-family: "Montserrat",sans-serif;
  font-weight: 600;
  font-size: clamp(52px,6.4vw,90px);
  letter-spacing: .06em;
  line-height: .92;
}
.as-movie__title .sl {
  width: 1px;
  height: clamp(22px,2.2vw,31px);
  background: #fff;
  transform: rotate(31deg);
  flex: 0 0 auto;
  margin: 0 clamp(2px,.4vw,6px) 8px;
}
.as-movie__title .ja {
  font-family: "Noto Sans JP",sans-serif;
  font-weight: 600;
  font-size: clamp(20px,2.36vw,33px);
  letter-spacing: .08em;
  line-height: 1.2;
}
.as-movie__desc {
  flex: 0 1 auto;
  margin: 0;
  font-size: clamp(13px,1.21vw,17px);
  font-weight: 400;
  line-height: 1.76;
  letter-spacing: .07em;
  white-space: nowrap;
}

.as-movie__frame {
  max-width: 1008px;
  margin: clamp(28px,3.3vw,46px) auto 0;
}
/* YouTube 埋め込み（デザイン枠 1008×534。動画は16:9のため上下は黒背景で処理） */
.as-movie__video {
  position: relative;
  background: #000;
  aspect-ratio: 1008/534;
}
.as-movie__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;

  width: 100%;
aspect-ratio: 10/6;
}

/* ============================================================
   BRAND BAND
   ============================================================ */
.as-brandband {
  background: #fff;
  padding: clamp(26px, 5vw, 32px) 0 clamp(36px, 5vw, 49px);
}
/* デザイン基準（アートボード1400px）：
   logo-air-safe 502×103 ＋「シリーズ誕生。」60px を下揃えで横並び／間隔29.5px */
.as-brandband__inner {
  margin: 0 auto;
  max-width: 1048px; /* コンテンツ幅1000px + 左右padding */
  padding: 0 24px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(16px,2.11vw,29.5px);
}
.as-brandband__logo {
  flex: 0 0 auto;
  width: clamp(300px,35.85vw,502px);
  height: auto;
}
/* margin-right：文末のトラッキング分を打ち消す
   margin-bottom：ロゴ左の三角マークが AIR SAFE 字面より下に出る分だけ持ち上げる */
.as-brandband__catch {
  flex: 0 0 auto;
  margin: 0 -.12em .2em 0;
  font-family: "Zen Old Mincho",serif;
  font-weight: 400;
  color: #333;
  font-size: clamp(30px,4.29vw,60px);
  letter-spacing: .12em;
  line-height: 1;
  white-space: nowrap;
}
/* カタカナ部のみ字詰め（デザイン値：60px時 -2.24px） */
.as-brandband__kana {
  letter-spacing: -.037em;
}
.as-wordmark {
  font-family: "Barlow Semi Condensed",sans-serif;
  font-weight: 500;
  letter-spacing: .06em;
}
.as-wordmark--dark {
  color: var(--ink);
}

/* AIR SAFE triangle mark (CSS) */
.as-logo-mark {
  position: relative;
  width: 66px;
  height: 58px;
  flex: 0 0 auto;
}
.as-logo-mark::before,
.as-logo-mark::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
}
.as-logo-mark::before {
  left: 0;
  border-width: 0 0 58px 50px;
  border-color: transparent transparent var(--blue) transparent;
}
.as-logo-mark::after {
  left: 18px;
  border-width: 0 24px 58px 0;
  border-color: transparent transparent var(--ink) transparent;
}
.as-logo-mark--sm {
  width: 40px;
  height: 35px;
}
.as-logo-mark--sm::before {
  border-width: 0 0 35px 30px;
}
.as-logo-mark--sm::after {
  left: 11px;
  border-width: 0 15px 35px 0;
}

/* ============================================================
   INTRO
   ============================================================ */
/* デザイン基準（アートボード1400×960）：
   左テキスト 0〜677px ／ 右ビジュアル 677〜1400px、下端中央に LINE UP ロゴ */
.as-intro {
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  min-height: clamp(560px,68.57vw,960px);
  color: #fff;
  /* 右写真の背景色を左へ continuous に伸ばす（境目を消すため写真左端の実測値でトーンを合わせている） */
  background:
    radial-gradient(120% 85% at 100% 40%,rgba(255,255,255,.3) 0%,rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#00A2D2 0%,#00AADB 14%,#3CB5DE 40%,#0BA7D2 64%,#0096C3 84%,#007FAB 100%);
}
/* 左パディングは 1400px を超えたらインナー（中央1400px）の左端 +100px に張り付かせ、
   テキストがそれ以上外側へ出ないようにする */
.as-intro__text {
  flex: 0 0 48.357%; /* 677/1400 */
  max-width: 48.357%;
  /* 右パディングは本文の折返し幅（.as-intro__lead の max-width:511px）を
     1400px超でも確保できるよう浅めに取る */
  padding: clamp(52px,7.57vw,106px) clamp(24px,2.86vw,40px) clamp(140px,14vw,196px)
           max(clamp(24px,7.14vw,100px),calc((100% - 1400px)/2 + 100px));
}
.as-intro__title {
  margin: 0 0 clamp(24px,3.2vw,45px);
  font-family: "Zen Old Mincho",serif;
  font-weight: 400;
  font-size: clamp(30px,4.64vw,65px); /* 65/1400 */
  line-height: 1.415;                 /* 92/65 */
  letter-spacing: .12em;              /* 7.8/65 */
}
.as-intro__lead {
  margin: 0 0 clamp(28px,4vw,56px);
  max-width: 511px;
  font-size: clamp(14px,1.29vw,18px);
  line-height: 2;                     /* 36/18 */
  letter-spacing: .08em;              /* 1.44/18 */
}
/* デザイン値：482×69 / bg rgba(255,255,255,.3) × opacity .3 */
.as-intro__note {
  margin: 0;
  max-width: 482px;
  padding: clamp(10px,1vw,14px) clamp(14px,1.29vw,18px);
  background: rgba(255,255,255,.09);
  font-size: clamp(11px,1vw,14px);
  line-height: 1.43;                  /* 20/14 */
  letter-spacing: .02em;              /* .28/14 */
}
.as-intro__img {
  flex: 0 0 51.643%; /* 723/1400 */
  max-width: 51.643%;
  align-self: stretch;
  position: relative;
  overflow: hidden;
}
/* 画像を絶対配置にしてセクション高さの計算から外す。
   これをしないと画像の縦横比（1446:1920）がそのまま高さになり、
   1400px超で高さが伸び続けてしまう。高さは固定のまま cover で左右がクリップされる */
.as-intro__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
/* LINE UP ロゴ：幅736.5px、セクション下端にフラット合わせ（中央揃え） */
.as-intro__lineup {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: clamp(280px,52.6vw,737px);
  height: auto;
  pointer-events: none;
}

/* ============================================================
   LINE UP
   ============================================================ */
/* デザイン基準（アートボード1400×198）：白帯、ロゴ3点＋丸矢印を横並び */
.as-lineup {
  background: #fff;
  padding: 0;
  position: relative;
}
/* LINE UP の見出しは as-intro 下端の logo-lineup.svg が担うため、
   ここでは読み上げ用にのみ残す */
.as-lineup__title--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.as-lineup__inner {
  max-width: 1277px; /* 73px〜1350px */
  margin: 0 auto;
  padding: 0 24px;
  min-height: clamp(128px,14.14vw,198px);
  display: flex;
  align-items: center;
}
.as-lineup__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px,4.7vw,66px);
  margin-bottom: 12px;
}
.as-lineup__nav a {
  display: flex;
  align-items: flex-end; /* ロゴ下端そろえ（ロゴ上部のタグ・ルビ分の差を吸収） */
  gap: clamp(10px,1.43vw,20px);
}
.as-lineup__logo {
  height: auto;
  transition: opacity .25s;
}
.as-lineup__item--air .as-lineup__logo {
  width: clamp(168px,20.79vw,291px); /* 291/1400 */
}
.as-lineup__item--free .as-lineup__logo {
  width: clamp(207px,25.64vw,359px); /* 359/1400 */
}
.as-lineup__item--harness .as-lineup__logo {
  width: clamp(165px,20.43vw,286px); /* 286/1400 */
}
/* 丸ボタン48px＋矢印アイコン17×19（mask で塗りを白に） */
.as-lineup__nav .arw {
  flex: 0 0 auto;
  width: clamp(32px,3.43vw,48px);
  height: clamp(32px,3.43vw,48px);
  margin-bottom: -5px; /* 矢印中心をワードマーク中心に合わせる */
  border-radius: 50%;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .25s;
}
.as-lineup__nav .arw::before {
  content: "";
  display: block;
  width: 35.42%;  /* 17/48 */
  aspect-ratio: 17/19;
  background-color: #fff;
  -webkit-mask: url(../images/product/airsafe/icon-arrow-down.svg) no-repeat center/contain;
  mask: url(../images/product/airsafe/icon-arrow-down.svg) no-repeat center/contain;
}
.as-lineup__nav a:hover .as-lineup__logo {
  opacity: .7;
}
.as-lineup__nav a:hover .arw {
  background: var(--blue-d);
}

/* ============================================================
   PRODUCT SECTIONS
   ============================================================ */
.as-prod {
  position: relative;
}
.as-prod__inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: 0;
}
.as-prod__photo {
  flex: 1 1 46%;
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.as-prod__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.as-prod__body {
  flex: 1 1 54%;
  padding: 56px 24px 60px 48px;
}

.as-ribbon {
  display: inline-block;
  background: var(--dark);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 5px 20px 5px 16px;
  position: relative;
  margin-bottom: 14px;
  clip-path: polygon(0 0,100% 0,calc(100% - 12px) 50%,100% 100%,0 100%);
}
.as-ribbon--plain {
  background: transparent;
  color: #9aa;
  padding-left: 0;
  clip-path: none;
  font-size: 13px;
}

.as-prod__logo {
  font-family: "Barlow Semi Condensed",sans-serif;
  font-weight: 300;
  font-size: 56px;
  letter-spacing: .12em;
  line-height: 1;
  margin: 0 0 18px;
  color: var(--ink);
}
.as-prod__logo small {
  display: block;
  font-family: "Noto Sans JP";
  font-size: 13px;
  letter-spacing: .14em;
  color: #555;
  font-weight: 500;
  margin-bottom: 4px;
}
.as-prod__logo--2l {
  line-height: 1.02;
}

.as-prod__catch {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .04em;
  margin: 0 0 10px;
  line-height: 1.5;
}
.as-prod__sub {
  font-size: 11px;
  color: #888;
  margin: 0 0 14px;
}
.as-prod__lead {
  font-size: 14px;
  line-height: 1.9;
  margin: 0 0 26px;
  max-width: 560px;
}

/* white text on blue product */
.as-prod--air,
.as-prod--harness {
  background: var(--blue);
  color: #fff;
}
.as-prod--air .as-prod__logo,
.as-prod--harness .as-prod__logo {
  color: #fff;
}
.as-prod--air .as-prod__logo small,
.as-prod--harness .as-prod__logo small {
  color: rgba(255,255,255,.85);
}
.as-prod--air .as-prod__sub,
.as-prod--harness .as-prod__sub {
  color: rgba(255,255,255,.8);
}
.as-prod--air .as-ribbon,
.as-prod--harness .as-ribbon {
  background: var(--dark);
}
.as-prod--free {
  background: var(--gray-l);
}
.as-prod--free .as-prod__catch {
  color: var(--ink);
}

/* spec chips */
.as-spec-chips {
  display: flex;
  gap: 16px;
  margin: 0 0 24px;
  flex-wrap: wrap;
}
.as-chip {
  display: flex;
  align-items: center;
  gap: 8px;
}
.as-chip img {
  width: 66px;
  height: 66px;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  padding: 6px;
}
.as-prod--free .as-chip img {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.as-chip__label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
}
.as-chip__num {
  margin: 0;
  line-height: 1;
  font-family: "Barlow Semi Condensed",sans-serif;
}
.as-chip__num em {
  font-style: normal;
  font-size: 34px;
  font-weight: 600;
}
.as-chip__num span {
  font-size: 13px;
}

.as-prod__gallery figure {
  margin: 6px 0 0;
  max-width: 220px;
}
.as-prod__gallery img {
  width: 100%;
  max-width: 220px;
}
.as-prod__gallery figcaption {
  font-size: 11px;
  margin-top: 6px;
  color: rgba(255,255,255,.9);
}

/* ------------------------------------------------------------
   PRODUCT : RITRA AIR
   デザイン基準（アートボード1400×798）
   左 作業員写真 ／ 右 テキスト x719〜1299（幅580）
   ------------------------------------------------------------ */
.as-prod--air {
  overflow: hidden;
}
.as-prod--air .as-prod__inner {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  min-height: clamp(520px,57vw,798px);
}
/* 写真はセクション高より縦長に置き、上下を裁ち落とす（デザイン：798の枠に920を配置） */
.as-prod--air .as-prod__photo {
  flex: 0 0 51.36%; /* 719/1400 */
  max-width: 51.36%;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.as-prod--air .as-prod__photo img {
  width: clamp(360px,48vw,672px);
  height: auto;
  object-fit: contain;
}
.as-prod--air .as-prod__body {
  flex: 0 0 48.64%;
  max-width: 48.64%;
  padding: clamp(40px,5.93vw,83px) clamp(24px,7.21vw,101px) clamp(40px,5.86vw,82px) 0;
}
.as-prod__logoimg {
  margin: 0 0 clamp(16px,2.21vw,31px);
}
.as-prod__logoimg img {
  width: clamp(240px,29.64vw,415px); /* 415/1400 */
  height: auto;
}
.as-prod--air .as-prod__catch {
  margin: 0 0 clamp(4px,.57vw,8px);
  font-size: clamp(19px,2vw,28px);   /* 28/1400 */
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .07em;             /* 1.96/28 */
  color: #fff;
}
.as-prod__ast {
  font-size: .46em; /* 13/28 */
  vertical-align: super;
  letter-spacing: 0;
  margin-left: -32px;
  display: inline-block;
  transform: translateY(-4px);
}
.as-prod__ast.--top{
  margin-left: -13px;
  display: inline-block;
  transform: translateY(-14px);
}
.as-prod--air .as-prod__sub {
  margin: 0 0 clamp(14px,1.86vw,26px);
  font-size: clamp(11px,.93vw,13px);
  line-height: 1.38;
  letter-spacing: .02em;
  color: #fff;
}
.as-prod--air .as-prod__lead {
  margin: 0 0 clamp(24px,2.5vw,35px);
  max-width: 580px;
  font-size: clamp(13px,1.14vw,16px);
  line-height: 1.875;                /* 30/16 */
  letter-spacing: .03em;
}
/* スペック：左＝重量サークル＋製品写真、右＝巻取器サイズ */
.as-prod__specs {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px,2.9vw,41px);
}
.as-weights {
  display: flex;
  flex-direction: column;
  gap: clamp(8px,1.43vw,20px);
}
.as-weights__row {
  display: flex;
  align-items: center;
  gap: clamp(8px,1.4vw,20px);
}
.as-weights__img {
  width: clamp(76px,9.2vw,129px);   /* 128.8/1400 */
  height: auto;
}
.as-weights__img--twin {
  width: clamp(72px,8.79vw,123px);  /* 123/1400 */
}
/* 白い円 114px */
.as-wcircle {
  flex: 0 0 auto;
  margin: 0;
  width: clamp(74px,8.14vw,114px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3em;
  color: #fff;
  text-align: center;
}
.as-wcircle__label {
  font-size: clamp(10px,1vw,14px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
}
.as-wcircle__num {
  display: flex;
  align-items: baseline;
  line-height: 1;
}
.as-wcircle__num b {
  font-family: "Montserrat",sans-serif;
  font-weight: 700;
  font-size: clamp(20px,2vw,28px);
  letter-spacing: .03em;
}
.as-wcircle__num i {
  font-style: normal;
  font-size: clamp(10px,.93vw,13px);
  letter-spacing: .03em;
}
.as-wcircle__num i:last-child {
  font-family: "Montserrat",sans-serif;
  font-weight: 700;
}
/* 巻取器サイズ（271.4px幅＋キャプション） */
.as-device {
  flex: 0 0 auto;
  margin: 0;
  width: clamp(160px,19.39vw,271px); /* 271.4/1400 */
  text-align: center;
}
.as-device img {
  width: 100%;
  height: auto;
}
.as-device figcaption {
  margin-top: clamp(6px,.71vw,10px);
  font-size: clamp(11px,1vw,14px);
  line-height: 1.5;
  letter-spacing: .03em;
  color: #fff;
}

/* ------------------------------------------------------------
   PRODUCT : RITRA FREE
   デザイン基準（アートボード1400×918）
   左 作業員写真 ／ 右 テキスト x719〜1299（幅580）
   ------------------------------------------------------------ */
/* 背景色は worker-ritrafree-back.png 上部に焼き込まれたフェード色に合わせる（境目が出ないように） */
.as-prod--free {
  background: #ddd9d8;
  overflow: hidden;
}
/* 背景の円デコレーションは worker-ritrafree-back.png に含まれているためCSSでは描かない */
.as-prod--free .as-prod__inner {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  gap: 80px;
}
.as-prod--free .as-prod__photo {
  flex: 0 0 51.36%; /* 719/1400 */
  max-width: 51.36%;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  margin-left: -60px;
}
.as-prod--free .as-prod__photo img {
  height: auto;
  object-fit: contain;
}
.as-prod--free .as-prod__body {
  flex: 0 0 48.64%;
  max-width: 48.64%;
  padding: clamp(36px,4.43vw,62px) clamp(24px,7.21vw,101px) clamp(40px,8.93vw,125px) 0;
}
.as-prod--free .as-prod__logoimg {
  margin: 0 0 clamp(20px,2.57vw,36px);
}
.as-prod--free .as-prod__logoimg img {
  width: clamp(280px,35.43vw,496px); /* 496/1400 */
}
.as-prod--free .as-prod__catch {
  margin: 0 0 clamp(10px,1.36vw,19px);
  font-size: clamp(19px,2vw,28px);   /* 28/1400 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .07em;             /* 1.96/28 */
  color: #333;
}
.as-prod--free .as-prod__lead {
  margin: 0;
  max-width: 580px;
  font-size: clamp(13px,1.14vw,16px);
  line-height: 1.875;                /* 30/16 */
  letter-spacing: .03em;
  color: #333;
}
/* 重量サークル＋製品写真を2セット（x720〜1299.5 の580px幅いっぱい） */
.as-prod__devices {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: clamp(14px,1.36vw,19px) 0 clamp(20px,2.29vw,32px);
  width: 100%;
  max-width: 580px;
}
.as-prod__deviceset {
  display: flex;
  align-items: center;
  gap: clamp(6px,.93vw,13px);
}
/* 明るい背景側のサークル：白い線＋濃い文字 */
.as-wcircle--dark {
  border-color: #fff;
  color: #333;
  border: 1px solid #333333;
}
.as-prod__device1 {
  width: clamp(88px,10.68vw,150px);  /* 149.6/1400 */
  height: auto;
}
.as-prod__device2 {
  width: clamp(84px,10.27vw,144px);  /* 143.8/1400 */
  height: auto;
}

/* one-hand mechanism (RITRA FREE) デザイン値 580×273 */
.as-onehand {
  background: var(--dark);
  padding: clamp(12px,1.14vw,16px) clamp(14px,4vw,56px) clamp(14px,1.57vw,22px);
  margin: 0;
  max-width: 580px;
  --ocx: 34px;
  --ocy: 34px;
  /* 左上・右下を斜めカット */
  clip-path: polygon(0 var(--ocy),var(--ocx) 0,100% 0,100% calc(100% - var(--ocy)),calc(100% - var(--ocx)) 100%,0 100%);
}
.as-onehand__title {
  margin: 0 0 clamp(10px,1.07vw,15px);
  color: #fff;
  text-align: center;
  font-size: clamp(15px,1.57vw,22px);
  font-weight: 700;
  line-height: 1.73;                 /* 38/22 */
  letter-spacing: .08em;             /* 1.76/22 */
}
.as-onehand__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: clamp(8px,2.14vw,30px);       /* 30/1400 */
}
.as-onehand__steps li {
  color: #fff;
  font-size: clamp(11px,1vw,14px);
  text-align: center;
  line-height: 1.5;                  /* 21/14 */
  letter-spacing: .03em;
}
.as-onehand__steps img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #fff;
  margin-bottom: clamp(5px,.57vw,8px);
}

/* ============================================================
   FEATURE / OPTION（共通の特徴・オプション品）
   デザイン基準：アートボード1400／コンテンツ x100〜1300（幅1200）
   カード 582×335・段間36px
   ============================================================ */
.as-fs {
  background: #fff;
  padding: clamp(56px,7.57vw,106px) 0;
}
.as-fs__inner {
  max-width: 1248px; /* 1200 + 左右padding */
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- 見出し ---------- */
.as-fs__head {
  text-align: center;
  margin: 0 0 clamp(28px,3.5vw,49px);
}
.as-fs__head--option {
  margin: clamp(44px,5.43vw,76px) 0 clamp(28px,3.5vw,49px);
}
.as-fs__en {
  margin: 0 0 clamp(6px,1.14vw,16px);
  font-family: "Montserrat","Noto Sans JP",sans-serif;
  font-weight: 600;
  font-size: clamp(15px,1.71vw,24px);
  line-height: 1.2;
  letter-spacing: .11em;   /* 2.64/24 */
  text-transform: uppercase;
  color: #a2a2a2;
}
/* 見出し左右の罫線（デザイン：280px／オプションは292px） */
.as-fs__title {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px,2.86vw,40px);
  font-size: clamp(26px,3.43vw,48px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .06em;   /* 2.88/48 */
  color: var(--blue);
}
.as-fs__title span {
  flex: 0 0 auto;
}
.as-fs__title::before,
.as-fs__title::after {
  content: "";
  flex: 0 1 clamp(40px,20vw,280px);
  height: 1px;
  background: #c9c9c9;
}
.as-fs__head--option .as-fs__title::before,
.as-fs__head--option .as-fs__title::after {
  flex-basis: clamp(40px,20.86vw,292px);
}

/* ---------- カード共通グリッド ---------- */
.as-fs__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(16px,2.57vw,36px);
}

/* ---------- FEATURE カード（青・右下カット） ---------- */
.as-fs-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(10px,1.5vw,21px);
  min-height: clamp(240px,23.93vw,335px); /* 335/1400 */
  padding: clamp(20px,2.86vw,40px) clamp(16px,2.5vw,35px) clamp(20px,2.86vw,40px) clamp(20px,3.43vw,48px);
  background: var(--blue);
  color: #fff;
  overflow: hidden;
  --fcx: 48px;
  --fcy: 48px;
  /* 左上・右下を斜めカット */
  clip-path: polygon(0 var(--fcy),var(--fcx) 0,100% 0,100% calc(100% - var(--fcy)),calc(100% - var(--fcx)) 100%,0 100%);
}
.as-fs-card--rev {
  padding-left: clamp(16px,2.79vw,39px);
  padding-right: clamp(16px,1.86vw,26px);
}
.as-fs-card__body {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 322px;
}
.as-fs-card__img {
  flex: 0 0 auto;
  height: auto;
}
.as-fs-card__img--f1 {
  width: clamp(88px,10.57vw,148px);
}
.as-fs-card__img--f2 {
  width: clamp(104px,12.43vw,174px);
}
/* デザイン：カード下端まで写真を落とす */
.as-fs-card__img--f3 {
  width: clamp(140px,16.71vw,234px);
  align-self: flex-end;
  margin-bottom: clamp(-40px,-2.86vw,-20px);
}
.as-fs-card__img--f4 {
  width: clamp(115px,13.71vw,192px);
}

/* 数値見出し（約-50g／130kg） */
.as-fs-card__big {
  margin: 0 0 clamp(10px,1.5vw,21px);
  display: flex;
  align-items: baseline;
  font-family: "Montserrat",sans-serif;
  font-weight: 300;
  line-height: 1;
  color: #fff;
}
.as-fs-card__big b {
  font-weight: 300;
  font-size: clamp(38px,4.71vw,66px);
  letter-spacing: .01em;
}
.as-fs-card__big i {
  font-style: normal;
  font-family: "Noto Sans JP",sans-serif;
  font-size: clamp(15px,1.71vw,24px);
  margin-right: .12em;
}
.as-fs-card__big em {
  font-style: normal;
  font-size: clamp(19px,2.29vw,32px);
  margin-left: .06em;
}
.as-fs-card__big--dim {
  opacity: .65;
}
/* 英字ロゴ見出し（SPEEDROCK／SAFETY BELT） */
.as-fs-card__wordmark {
  margin: 0 0 clamp(4px,.71vw,10px);
  font-family: "Montserrat",sans-serif;
  font-weight: 300;
  font-size: clamp(22px,2.71vw,38px);
  line-height: 1.1;
  letter-spacing: .04em;
  color: #fff;
}
.as-fs-card__name {
  margin: 0 0 clamp(8px,1.29vw,18px);
  font-size: clamp(15px,1.43vw,20px);
  font-weight: 700;
  line-height: 1.9;        /* 38/20 */
  letter-spacing: .08em;   /* 1.6/20 */
  color: #fff;
}
.as-fs-card__name--1l {
  line-height: 1.35;       /* 27/20 */
}
.as-fs-card__text {
  margin: 0;
  font-size: clamp(13px,1.14vw,16px);
  line-height: 1.875;      /* 30/16 */
  letter-spacing: .03em;
  color: #fff;
}
.as-fs-card__note {
  margin: clamp(8px,1.14vw,16px) 0 0;
  font-size: clamp(11px,.93vw,13px);
  line-height: 1.38;       /* 18/13 */
  letter-spacing: .02em;
  color: #fff;
}

/* ---------- OPTION カード（グレー・左上＋右下カット） ---------- */
.as-fs-ocard {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(12px,1.75vw,25px);
  min-height: clamp(240px,23.93vw,335px);
  padding: clamp(18px,1.64vw,23px) clamp(14px,2vw,28px) clamp(18px,2.5vw,35px) clamp(18px,2.57vw,36px);
  background: var(--gray);
  overflow: hidden;
  --ocx2: 40px;
  --ocy2: 40px;
  clip-path: polygon(0 var(--ocy2),var(--ocx2) 0,100% 0,100% calc(100% - var(--ocy2)),calc(100% - var(--ocx2)) 100%,0 100%);
}
.as-fs-ocard__body {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 291px;
}
/* 字間はデザイン値 .08em だと「固定用 ショックアブソーバ」が1行に収まらないため .05em */
.as-fs-ocard__name {
  margin: 0 0 clamp(10px,1.93vw,27px);
  font-size: clamp(15px,1.43vw,20px);
  font-weight: 700;
  line-height: 1.6;        /* 32/20 */
  letter-spacing: .05em;
  color: var(--blue);
}
.as-fs-ocard__text {
  margin: 0;
  font-size: clamp(13px,1.14vw,16px);
  line-height: 1.875;
  letter-spacing: .03em;
  color: #333;
}
.as-fs-ocard__img {
  flex: 0 0 auto;
  width: clamp(140px,16.39vw,229px); /* 229.455/1400 */
  height: auto;
}

/* ------------------------------------------------------------
   PRODUCT : AIR HARNESS
   デザイン基準（アートボード1400×773）
   左 テキスト x100〜606 ／ 右 img-harness.png を x714〜1507（右へ107pxブリード）
   ------------------------------------------------------------ */
.as-prod--harness {
  background: var(--blue);
  color: #fff;
  overflow: hidden;
}
.as-prod--harness .as-prod__inner {
  position: relative;
  align-items: flex-start;
  max-width: 1400px;
  min-height: clamp(480px,55.21vw,773px); /* 773/1400 */
}
.as-prod--harness .as-prod__body {
  flex: 0 0 51%; /* 714/1400 */
  max-width: 51%;
  padding: clamp(48px,7.86vw,110px) 0 clamp(40px,5vw,70px) clamp(24px,7.14vw,100px);
}
.as-prod--harness .as-prod__logoimg {
  margin: 0 0 clamp(18px,2.57vw,36px);
}
.as-prod--harness .as-prod__logoimg img {
  width: clamp(280px,35.71vw,500px); /* 500/1400 */
}
.as-prod--harness .as-prod__catch {
  margin: 0 0 clamp(8px,.86vw,12px);
  max-width: 524px;
  font-size: clamp(19px,2vw,28px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .07em;   /* 1.96/28 */
  color: #fff;
}
.as-prod--harness .as-prod__sub {
  margin: 0 0 clamp(18px,2.14vw,30px);
  font-size: clamp(11px,.93vw,13px);
  line-height: 1.38;
  letter-spacing: .02em;
  color: #fff;
}
.as-prod--harness .as-prod__lead {
  margin: 0;
  max-width: 506px;
  font-size: clamp(13px,1.14vw,16px);
  line-height: 1.875;      /* 30/16 */
  letter-spacing: .03em;
}
/* 右のビジュアルは吹き出し・バックル写真・装飾までPNGに含まれる1枚 */
.as-prod--harness .as-prod__photo {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
}
.as-prod--harness .as-prod__photo img {
  position: absolute;
  top: clamp(6px,.71vw,10px);
  right: clamp(-107px,-7.64vw,-40px);
  width: clamp(420px,56.64vw,793px); /* 793/1400 */
  height: auto;
  max-width: none;
}

/* 旧レイアウト（背中X型・腿V型の吹き出し）— 現在は未使用 */
.as-harness-points {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 30px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.as-harness-points li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 220px;
}
.as-hpt__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.as-hpt__txt {
  font-size: 12px;
  line-height: 1.6;
  color: #fff;
}
.as-hpt__txt b {
  display: block;
  font-size: 16px;
  margin-bottom: 2px;
}
.as-harness-switch {
  position: absolute;
  right: 24px;
  bottom: 26px;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  line-height: 1.5;
}
.as-prod--harness .as-prod__photo {
  overflow: visible;
}

/* ============================================================
   COMPARISON（組み合わせ時の重量比較）
   デザイン基準：見出し ＋ img-comparison.svg（1200×442）を x100〜1300 に配置
   ============================================================ */
.as-comparison {
  background: #fff;
  padding: 96px 0;
}
.as-comparison__inner {
  max-width: 1248px; /* 1200 + 左右padding */
  margin: 0 auto;
  padding: 0 24px;
}
.as-comparison .as-fs__head {
  margin-bottom: clamp(34px,4.29vw,60px);
}
.as-comparison__fig {
  width: 100%;
  height: auto;
}

/* ============================================================
   PRODUCT DETAIL（製品詳細）
   デザイン基準：アートボード1400×1865／コンテンツ x100〜1300（幅1200）
   ============================================================ */
.as-detail {
  background: var(--gray-l);
  padding: clamp(48px,6.07vw,85px) 0 clamp(60px,7.71vw,108px);
}
.as-detail__inner {
  max-width: 1248px; /* 1200 + 左右padding */
  margin: 0 auto;
  padding: 0 24px;
}
/* 見出し：PRODUCT DETAIL ／ 製品詳細 */
.as-detail__head {
  margin: 0 0 clamp(24px,3.43vw,48px);
  display: flex;
  align-items: flex-end;
  gap: clamp(8px,1.14vw,16px);
  color: var(--blue);
  line-height: 1;
}
.as-detail__head .en {
  font-family: "Montserrat",sans-serif;
  font-weight: 600;
  font-size: clamp(21px,5.06vw,75px); /* 75/1400 */
  letter-spacing: .06em;              /* 4.5/75 */
  line-height: .96;
  text-transform: uppercase;
}
.as-detail__head .sl {
  flex: 0 0 auto;
  width: clamp(2px,.21vw,3px);
  height: clamp(14px,2.23vw,31px);    /* 31.18/1400 */
  margin: 0 clamp(2px,.4vw,6px) clamp(3px,.5vw,7px);
  background: currentColor;
  transform: rotate(26deg);
}
.as-detail__head .ja {
  font-weight: 600;
  font-size: clamp(16px,2.36vw,33px); /* 33/1400 */
  letter-spacing: .08em;              /* 2.64/33 */
  line-height: 1.3;
}
/* 表はSVG1枚（table-item01 1200×873／table-item02 638×554） */
.as-detail__table {
  width: 100%;
  height: auto;
}
/* AIR HARNESS ブロック：左 ロゴ＋写真 499.17px ／ 右 表 637.64px（間 62.83px） */
.as-detail__harness {
  margin-top: clamp(56px,8.57vw,120px);
  display: flex;
  align-items: flex-start;
  gap: clamp(24px,4.49vw,63px);
}
.as-detail__harness-main {
  flex: 0 0 41.6%;  /* 499.17/1200 */
  max-width: 41.6%;
}
/* logo-harness.svg は絵柄の右19%・上19%が余白。デザイン値386.67pxは絵柄幅なので
   SVG全体は 386.67/0.81 = 477.4px、上の余白ぶんをネガティブマージンで打ち消す */
.as-detail__logo {
  width: 95.64%;    /* 477.4/499.17 */
  margin: -4.95% 0 clamp(24px,4.2vw,59px) 2%;
  height: auto;
}
.as-detail__img {
  width: 100%;
  height: auto;
}
.as-detail__scroll--sub {
  flex: 0 0 53.14%; /* 637.64/1200 */
  max-width: 53.14%;
}

/* ============================================================
   FOOTER
   ============================================================ */
/* デザイン基準（アートボード1400×514）：ボタン2つ → ロゴ＋SNS → コピーライト */
.as-footer {
  background: var(--blue);
  color: #fff;
  padding: clamp(48px,6.79vw,95px) 24px clamp(24px,2.71vw,38px);
}
.as-footer__inner {
  max-width: 1400px;
  margin: 0 auto;
}

/* --- CONTACT / CATALOG ボタン（456×157・白1px罫） --- */
.as-footer__btns {
  display: flex;
  justify-content: center;
  gap: clamp(14px,2.14vw,30px);
}
.as-fbtn {
  flex: 0 1 456px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(12px,1.71vw,24px);
  min-height: clamp(104px,11.21vw,157px); /* 157/1400 */
  padding: clamp(16px,2.29vw,32px);
  border: 1px solid #fff;
  color: #fff;
}
.as-fbtn:hover {
  background: rgba(255,255,255,.12);
}
/* 白丸88px＋アイコン（アイコンSVGは絵柄のみのため丸はCSSで作る） */
.as-fbtn__icon {
  flex: 0 0 auto;
  width: clamp(56px,6.29vw,88px);
  height: clamp(56px,6.29vw,88px);
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.as-fbtn__icon img {
  width: 48.9%;  /* 43/88 */
  height: auto;
}
.as-fbtn__tx {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}
.as-fbtn__tx b {
  font-family: "Montserrat",sans-serif;
  font-weight: 700;
  font-size: clamp(26px,3.43vw,48px); /* 48/1400 */
  line-height: 1.2;
  letter-spacing: .03em;              /* 1.44/48 */
  text-transform: uppercase;
}
.as-fbtn__tx small {
  font-size: clamp(13px,1.43vw,20px); /* 20/1400 */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
}

/* --- ロゴ ＋ SNS --- */
.as-footer__mid {
  margin-top: clamp(24px,3vw,42px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px,6.07vw,85px);
  flex-wrap: wrap;
}
.as-footer__logos {
  margin: 0;
  display: flex;
  align-items: center;
  gap: clamp(10px,1.64vw,23px);
}
.as-footer__logolink {
  display: block;
  line-height: 0;
}
.as-footer__logolink:hover {
  opacity: .75;
}
.as-footer__logo {
  width: clamp(180px,22.21vw,311px); /* 311/1400 */
  height: auto;
}
.as-footer__tsuyoron {
  width: clamp(88px,10.93vw,153px);  /* 153/1400 */
  height: auto;
}
.as-footer__sns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  gap: clamp(18px,2.65vw,37px);
}
.as-footer__sns a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px,.86vw,12px);
  color: #fff;
}
.as-footer__sns a:hover {
  opacity: .75;
}
/* ラベルの行を揃えるためアイコン枠の高さを最大値63pxで固定 */
.as-footer__sns .ic {
  height: clamp(38px,4.5vw,63px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.as-footer__sns .ic img {
  height: auto;
}
.as-footer__sns li:nth-child(1) .ic img {
  width: clamp(38px,4.43vw,62px);
}
.as-footer__sns li:nth-child(2) .ic img {
  width: clamp(44px,5.2vw,73px);
}
.as-footer__sns li:nth-child(3) .ic img {
  width: clamp(38px,4.5vw,63px);
}
.as-footer__sns .tx {
  font-size: clamp(11px,1vw,14px);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.as-copyright {
  margin: clamp(36px,5.07vw,71px) 0 0;
  text-align: center;
  font-size: clamp(11px,.93vw,13px);
  line-height: 1.4;
  letter-spacing: .01em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px) {
  .as-gnav ul {
    gap: 16px;
  }
  .as-gnav a {
    font-size: 12.5px;
  }
  .as-header__logo img {
   width: 140px;
  }
}

@media (max-width:900px) {
  .as-lineup{
    display: none;
  }
  .as-header__inner {
    padding-left: 18px;
    height: auto;
  }
  .as-gnav {
    display: none;
  }
  .as-nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 52px;
    height: 52px;
    background: none;
    border: 0;
    cursor: pointer;
    flex: 0 0 auto;
  }
  .as-nav-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--ink);
    margin: 0 auto;
    transition: .3s;
  }
  .as-header.is-open .as-gnav {
    display: block;
    position: absolute;
    top: 82px;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 8px 16px rgba(0,0,0,.12);
  }
  .as-header.is-open .as-gnav ul {
    flex-direction: column;
    gap: 0;
  }
  .as-header.is-open .as-gnav li {
    border-top: 1px solid #eee;
  }
  .as-header.is-open .as-gnav a {
    display: block;
    padding: 15px 20px;
  }
  .as-header__cta {
    margin-left: auto;
    height: auto;
  }
  .as-hbtn {
    width: 84px;
    aspect-ratio: 1;
    font-size: 11px;
  }
  .as-hbtn img {
    height: 24px;
  }

  /* HERO：縦積みに切り替え */
  .as-hero__inner {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 8px 24px 44px;
    padding-bottom: 90px;
  }
  .as-hero__visual {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }
  .as-hero__body {
    flex: 0 0 auto;
    width: 100%;
    max-width: 560px;
    margin-right: 0;
    text-align: center;
    --cx: 30px;
    --cy: 30px;
    padding: 34px 26px 34px;
    margin-top: 10px;
  }
  .as-hero__head {
    display: block;
  }
  .as-hero__title {
    font-size: clamp(46px,10vw,72px);
  }
  .as-hero__lead {
    display: inline-block;
    text-align: left;
  }
  .as-hero__note {
    display: inline-block;
    text-align: left;
  }

  /* MOVIE：見出しと説明を縦積み */
  .as-movie__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
  }
  .as-movie__desc {
    white-space: normal;
  }

  .as-intro {
    flex-direction: column;
    min-height: 0;
  }
  .as-intro__text,
  .as-intro__img {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
  }
  .as-intro__text {
    padding: 50px 24px 40px;
  }
  .as-intro__img {
    order: -1;
    aspect-ratio: 723/620;
  }
  .as-intro__lineup {
    position: static;
    transform: none;
    width: min(88%,560px);
    margin: 0 auto;
    padding-bottom: 22px;
  }

  .as-prod__inner {
    flex-direction: column;
  }
  .as-prod--harness .as-prod__body {
    order: -1;
  }
  .as-prod__photo {
    width: 100%;
  }
  .as-prod__body {
    padding: 40px 24px;
  }

  /* RITRA AIR：縦積み */
  .as-prod--air .as-prod__inner {
    min-height: 0;
  }
  .as-prod--air .as-prod__photo,
  .as-prod--air .as-prod__body {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
  }
  .as-prod--air .as-prod__photo {
    justify-content: center;
  }
  .as-prod--air .as-prod__photo img {
    width: min(100%,420px);
    margin: 0;
  }
  .as-prod--air .as-prod__body {
    padding: 36px 24px 44px;
  }
  .as-prod__logoimg img {
    width: min(80%,415px);
  }
  .as-prod--air .as-prod__lead {
    max-width: none;
  }
  .as-prod__specs {
    flex-wrap: wrap;
    gap: 20px;
  }
  .as-wcircle {
    width: 92px;
  }
  .as-weights__img {
    width: 100px;
  }
  .as-weights__img--twin {
    width: 96px;
  }
  .as-device {
    width: min(46%,271px);
  }

  /* RITRA FREE：縦積み */
  .as-prod--free .as-prod__inner {
    min-height: 0;
    gap: 0;
  }
  .as-prod--free .as-prod__photo,
  .as-prod--free .as-prod__body {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
  }
  .as-prod--free .as-prod__photo {
    justify-content: center;
  }
  .as-prod--free .as-prod__photo img {
    width: min(100%,460px);
    margin: 0;
  }
  .as-prod--free .as-prod__body {
    padding: 32px 24px 44px;
  }
  .as-prod--free .as-prod__logoimg img {
    width: min(88%,496px);
  }
  .as-prod--free .as-prod__lead {
    max-width: none;
  }
  .as-prod__devices {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 28px;
    max-width: none;
    margin: 20px 0 24px;
  }
  .as-prod__deviceset .as-wcircle {
    width: 92px;
  }
  .as-prod__device1 {
    width: 118px;
  }
  .as-prod__device2 {
    width: 114px;
  }
  .as-onehand {
    padding: 14px 18px 20px;
    --ocx: 24px;
    --ocy: 24px;
    margin-inline: auto;
  }

  /* AIR HARNESS：縦積み（右ビジュアルの絶対配置を解除） */
  .as-prod--harness .as-prod__inner {
    min-height: 0;
  }
  .as-prod--harness .as-prod__body,
  .as-prod--harness .as-prod__photo {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
  }
  .as-prod--harness .as-prod__body {
    padding: 40px 24px 8px;
  }
  .as-prod--harness .as-prod__logoimg img {
    width: min(84%,500px);
  }
  .as-prod--harness .as-prod__catch,
  .as-prod--harness .as-prod__lead {
    max-width: none;
  }
  .as-prod--harness .as-prod__photo img {
    position: static;
    width: 108%;
    margin: 0 -8% 0 0;
    max-width: none;
  }

  /* PRODUCT DETAIL：表はSVG1枚のため縮小せず横スクロールで可読性を確保 */
  .as-detail__harness {
    flex-direction: column;
    gap: 32px;
    margin-top: 48px;
    align-items: center;
  }
  .as-detail__harness-main,
  .as-detail__scroll--sub {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
  }
  .as-detail__harness-main {
    max-width: 500px;
  }
  .as-detail__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -24px;
    padding: 0 24px;
  }
  .as-detail__scroll .as-detail__table {
    width: 1000px;
    max-width: none;
  }
  .as-detail__scroll .as-detail__table--sub {
    width: 100%;
  }

  /* COMPARISON：SVG1枚のため縮小せず横スクロールで可読性を確保 */
  .as-comparison__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -24px;
    padding: 0 24px;
  }
  .as-comparison__scroll .as-comparison__fig {
    width: 760px;
    max-width: none;
  }

  /* FEATURE / OPTION：1カラム */
  .as-fs__cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .as-fs-card,
  .as-fs-ocard {
    min-height: 0;
    --fcx: 32px;
    --fcy: 32px;
    --ocx2: 28px;
    --ocy2: 28px;
  }
  .as-fs-card {
    padding: 26px 24px 28px;
  }
  .as-fs-card--rev {
    padding-left: 24px;
    padding-right: 24px;
  }
  .as-fs-ocard {
    padding: 24px 22px 26px;
  }
  .as-fs-card__body,
  .as-fs-ocard__body {
    max-width: none;
  }
  .as-fs-card__img--f3 {
    margin-bottom: -28px;
  }

  .as-harness-points {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 20px;
  }
  .as-harness-switch {
    position: static;
    text-align: left;
    margin-top: 16px;
    color: #d22;
  }

}

@media (max-width:640px) {
  .as-container {
    padding: 0 18px;
  }
  .as-header__inner {
    padding-left: 14px;
  }
  .as-nav-toggle {
    width: 42px;
    height: 42px;
  }
  .as-hbtn {
    width: 66px;
    font-size: 10px;
    gap: 3px;
  }
  .as-hbtn img {
    height: 20px;
  }
  .as-hero__title {
    font-size: clamp(42px,12vw,60px);
  }
  .as-hero__label {
    font-size: 16px;
  }
  .as-lineup__inner {
    min-height: 0;
    padding: 28px 24px;
  }
  .as-lineup__nav {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  .as-lineup__item--air .as-lineup__logo {
    width: min(72vw,320px);
  }
  .as-lineup__item--free .as-lineup__logo {
    width: min(72vw,320px);
  }
  .as-lineup__item--harness .as-lineup__logo {
    width: min(72vw,320px);
  }
  .as-lineup__nav .arw {
    width: 40px;
    height: 40px;
  }
  .as-prod__logo {
    font-size: 44px;
  }
  .as-prod__catch {
    font-size: 22px;
  }
  .as-intro__title {
    font-size: 34px;
  }
  .as-brandband__inner {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .as-brandband__logo {
    width: min(88%,360px);
  }
  .as-brandband__catch {
    margin: 0 -.12em 0 0;
  }
  .as-logo-mark {
    width: 46px;
    height: 40px;
  }
  .as-logo-mark::before {
    border-width: 0 0 40px 34px;
  }
  .as-logo-mark::after {
    left: 12px;
    border-width: 0 16px 40px 0;
  }
  /* FOOTER：ボタンを縦積み、ロゴ／SNSも縦に */
  .as-footer__btns {
    flex-direction: column;
    align-items: center;
  }
  /* SP：アイコンは左から40px固定、テキストはボックス全体に対して中央 */
  .as-fbtn {
    flex: 0 0 auto;
    width: 100%;
    max-width: 456px;
    position: relative;
    justify-content: center;
    gap: 0;
  }
  .as-fbtn__icon {
    position: absolute;
    left: 9vw;
    top: 50%;
    transform: translateY(-50%);
  }
  .as-fbtn__tx {
    flex: 0 0 auto;
    width: 100%;
    padding-left: 7vw;
  }
  .as-footer__mid {
    flex-direction: column;
    gap: 28px;
  }
  .as-onehand__steps {
    gap: 8px;
  }
}

/* ============================================================
   AIR HARNESS：ビジュアルの時間差クロスフェード
   img-harness.png ⇄ img-harness2.png を自動で切り替え
   ============================================================ */
.as-harness-switch {
  display: block;
  position: relative;
}
/* PC：もともと img に当てていた絶対配置をラッパーへ移す */
.as-prod--harness .as-prod__photo .as-harness-switch {
  position: absolute;
  top: clamp(6px,.71vw,10px);
  right: clamp(-107px,-7.64vw,-40px);
  width: clamp(420px,56.64vw,793px); /* 793/1400 */
  max-width: none;
}
/* 1枚目：通常フロー（高さの基準）／2枚目：その上に重ねる */
.as-prod--harness .as-prod__photo .as-harness-switch__img {
  position: relative;
  top: auto;
  right: auto;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
}
/* 1枚目：表示中は2枚目を完全に非表示（逆位相のアニメーション） */
.as-prod--harness .as-prod__photo .as-harness-switch__img--1 {
  animation: asHarnessSwitchA 8s ease-in-out infinite;
}
.as-prod--harness .as-prod__photo .as-harness-switch__img--2 {
  position: absolute;
  top: 20px;
  left: 0;
  opacity: 0;
  animation: asHarnessSwitchB 8s ease-in-out infinite;
}
@keyframes asHarnessSwitchA {
  0%, 37%   { opacity: 1; }  /* 1枚目を表示（約3秒） */
  47%, 90%  { opacity: 0; }  /* 2枚目の表示中は非表示 */
  100%      { opacity: 1; }
}
@keyframes asHarnessSwitchB {
  0%, 37%   { opacity: 0; }  /* 1枚目の表示中は非表示 */
  47%, 90%  { opacity: 1; }  /* 2枚目を表示（約3.4秒） */
  100%      { opacity: 0; }
}
/* 動きを減らす設定の環境では切り替えを止める（1枚目のみ表示） */
@media (prefers-reduced-motion: reduce) {
  .as-prod--harness .as-prod__photo .as-harness-switch__img--1,
  .as-prod--harness .as-prod__photo .as-harness-switch__img--2 {
    animation: none;
  }
}

@media (max-width:900px) {
  /* 縦積みレイアウト：絶対配置を解除（relative は重ね合わせの基準として維持） */
  .as-prod--harness .as-prod__photo .as-harness-switch {
    position: relative;
    top: auto;
    right: auto;
    width: 108%;
    margin: 0 -8% 0 0;
  }
}

/* ============================================================
   COMPARISON：スマホは専用画像（img-comparison-sp.png）に切り替え
   横スクロールなしで画面幅にフィットさせる
   ============================================================ */
@media (max-width:640px) {
  .as-comparison__scroll {
    overflow-x: visible;
    margin: 0;
    padding: 0;
  }
  .as-comparison__scroll .as-comparison__fig {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}

/* ============================================================
   スマホ専用の改行（見出し「組み合わせ時の／重量比較」など）
   ============================================================ */
.as-br-sp {
  display: none;
}
@media (max-width:640px) {
  .as-br-sp {
    display: inline;
  }
}

/* ============================================================
   PRODUCT DETAIL：スマホでは表を画面幅いっぱいの横スクロールに
   （table-item01 / table-item02 とも縮小せず可読性を確保）
   ============================================================ */
@media (max-width:640px) {
  .as-detail__scroll,
  .as-detail__scroll--sub {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .as-detail__scroll .as-detail__table {
    width: 640px;
    max-width: none;
  }
  .as-detail__scroll .as-detail__table--sub {
    width: 90%;
    margin-inline: auto;
    max-width: none;
  }
}

/* ============================================================
   HERO：「国内最軽量」右上の ※（注記マーク）
   ============================================================ */
.as-hero__ast {
  display: inline-block;
  font-size: 0.16em;
  letter-spacing: 0;
  vertical-align: top;
  margin-left: -1.74em;
  transform: translateY(0.5em);
}

/* ============================================================
   RITRA AIR：写真とテキストの左右を入れ替え
   （左＝テキスト／右＝作業員写真。スマホの縦積み順は従来どおり写真→テキスト）
   ============================================================ */
@media (min-width:901px) {
  .as-prod--air .as-prod__inner {
    flex-direction: row-reverse;
  }
  /* 余白も左右反転（元：右101px・左0） */
  .as-prod--air .as-prod__body {
    padding-right: 0;
    padding-left: clamp(24px,7.21vw,101px);
  }
  /* 写真の内側寄せも反転（元：左2.04%） */
  .as-prod--air .as-prod__photo img {
    margin-left: 70px;
  }
}

/* ============================================================
   FEATURE：見出しテキストをSVG画像に置き換え
   txt-feaure01（約-50g）／02（SPEEDROCK）／03（130kg）／04（SAFETY BELT）
   ※周囲の余白は元の .as-fs-card__big / __wordmark をそのまま利用
   ============================================================ */
.as-fs-card__txtimg {
  display: block;
  height: auto;
  max-width: 100%;
}
/* デザイン原寸（アートボード1400px基準）で可変 */
.as-fs-card__txtimg--f1 {
  width: clamp(96px,11.64vw,163px);  /* 163/1400 */
}
.as-fs-card__txtimg--f2 {
  width: clamp(165px,20.36vw,285px); /* 285/1400 */
}
.as-fs-card__txtimg--f3 {
  width: clamp(107px,13.21vw,185px); /* 185/1400 */
}
.as-fs-card__txtimg--f4 {
  width: clamp(133px,16.43vw,230px); /* 230/1400 */
}

/* ============================================================
   スマホ：MOVIEセクション上部の斜めカットを緩やかに
   PC値（60×84＝約54°）は幅の狭い画面では立ちすぎるため、
   デザイン実測比（52.5：31.8 ≒ 1.65：1／約33°）に合わせる
   ※ margin-top は必ず --mcy と同じ値にする（前セクションとの重なり量）
   ============================================================ */
@media (max-width:900px) {
  .as-movie {
    --mcx: 72px;
    --mcy: 44px;
    margin-top: -44px;
  }
}
@media (max-width:640px) {
  .as-movie {
    --mcx: 64px;
    --mcy: 38px;
    margin-top: -38px;
  }
}

/* ============================================================
   ページ内リンクのスムーススクロール
   固定ヘッダー（82px／SP 62px）のぶんだけ着地位置をずらす
   ============================================================ */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}
@media (max-width:900px) {
  html {
    scroll-padding-top: 72px;
  }
}
/* 動きを減らす設定の環境では即時ジャンプ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ============================================================
   スマホ：RITRA AIR / RITRA FREE は本文（as-prod__lead）の下に写真を配置
   ロゴ → キャッチ → 注記 → 本文 → 写真 → スペック の順
   ============================================================ */
@media (max-width:900px) {
  .as-prod--air .as-prod__inner,
  .as-prod--free .as-prod__inner {
    padding: 36px 24px 44px;
    gap: 0;
  }
  /* body を透過させ、子要素を inner の並び替え対象にする */
  .as-prod--air .as-prod__body,
  .as-prod--free .as-prod__body {
    display: contents;
  }
  .as-prod--air .as-prod__body > *,
  .as-prod--free .as-prod__body > * {
    order: 6;
  }
  .as-prod--air .as-prod__logoimg,
  .as-prod--free .as-prod__logoimg {
    order: 1;
  }
  .as-prod--air .as-prod__catch,
  .as-prod--free .as-prod__catch {
    order: 2;
  }
  .as-prod--air .as-prod__sub,
  .as-prod--free .as-prod__sub {
    order: 3;
  }
  .as-prod--air .as-prod__lead,
  .as-prod--free .as-prod__lead {
    order: 4;
  }
  .as-prod--air .as-prod__photo,
  .as-prod--free .as-prod__photo {
    order: 5;
    margin: 24px 0;
  }
}

/* ------------------------------------------------------------
   スマホ：RITRA AIR / RITRA FREE の縦間隔を詰める
   （PC用の clamp 余白が縦積みでは広く見えるため上書き）
   ------------------------------------------------------------ */
@media (max-width:900px) {
  .as-prod--air .as-prod__inner,
  .as-prod--free .as-prod__inner {
    padding: 32px 24px 36px;
  }
  .as-prod--air .as-prod__logoimg,
  .as-prod--free .as-prod__logoimg {
    margin-bottom: 12px;
  }
  .as-prod--air .as-prod__catch,
  .as-prod--free .as-prod__catch {
    margin-bottom: 6px;
  }
  .as-prod--air .as-prod__sub {
    margin-bottom: 10px;
  }
  .as-prod--air .as-prod__lead,
  .as-prod--free .as-prod__lead {
    margin-bottom: 0;
  }
  /* 本文と写真、写真とスペックの間 */
  .as-prod--air .as-prod__photo,
  .as-prod--free .as-prod__photo {
    margin: 16px 0 0;
  }
  .as-prod--air .as-prod__specs {
    margin-top: 16px;
    justify-content: center;
  }
  .as-prod--free .as-prod__devices {
    margin: 16px 0 18px;
  }
}

/* ============================================================
   AIR HARNESS：タブレット幅（〜1100px）でもテキストと写真が
   重なるため、900px以下と同じ縦積みレイアウトに切り替える
   ============================================================ */
@media (max-width:1100px) {
  .as-prod--harness .as-prod__inner {
    flex-direction: column;
    min-height: 0;
    gap: 16px;
  }
  .as-prod--harness .as-prod__body,
  .as-prod--harness .as-prod__photo {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
  }
  .as-prod--harness .as-prod__body {
    padding: 40px 24px 8px;
  }
  .as-prod--harness .as-prod__logoimg img {
    width: min(84%,500px);
  }
  .as-prod--harness .as-prod__catch,
  .as-prod--harness .as-prod__lead {
    max-width: none;
  }
  /* 写真の絶対配置を解除（relative は2枚重ねの基準として維持） */
  .as-prod--harness .as-prod__photo .as-harness-switch {
    position: relative;
    top: auto;
    right: auto;
    width: 90%;
    margin: 0 auto;
  }
}

/* ============================================================
   スマホ全体の余白調整（セクション上下＋左右の統一）
   ※ 個別セクションの指定より後に置いて上書きしています
   ============================================================ */
@media (max-width:900px) {
  /* --- セクションの上下余白 --- */
  .as-movie {
    padding: 52px 0 56px;
  }
  .as-brandband {
    padding: 26px 0 32px;
  }
  .as-fs {
    padding: 52px 0;
  }
  .as-comparison {
    padding: 52px 0;   /* PCは96px固定だったため縮小 */
  }
  .as-detail {
    padding: 44px 0 56px;
  }
  .as-footer {
    padding: 52px 24px 28px;
  }
  /* HERO下端：MOVIEの斜めカット（--mcy:44px）ぶんの重なりを確保しつつ詰める */
  .as-hero__inner {
    padding-bottom: 60px;
  }
  .as-intro__text {
    padding: 44px 24px 36px;
  }
  /* 見出しまわり */
  .as-fs__head {
    margin-bottom: 26px;
  }
  .as-detail__head {
    margin-bottom: 22px;
  }
  .as-comparison .as-fs__head {
    margin-bottom: 26px;
  }
}

@media (max-width:640px) {
  /* --- 左右余白を20pxに統一 --- */
  .as-hero__inner,
  .as-movie__inner,
  .as-brandband__inner,
  .as-lineup__inner,
  .as-fs__inner,
  .as-comparison__inner,
  .as-detail__inner,
  .as-footer {
    padding-left: 20px;
    padding-right: 20px;
  }
  .as-intro__text {
    padding: 40px 20px 32px;
  }
  .as-prod--air .as-prod__inner,
  .as-prod--free .as-prod__inner {
    padding: 28px 20px 32px;
  }
  .as-prod--harness .as-prod__body {
    padding: 32px 20px 8px;
  }
  /* --- カード内側 --- */
  .as-fs-card {
    padding: 24px 20px 26px;
  }
  .as-fs-ocard {
    padding: 18px 18px 22px;
  }
  /* --- セクションの上下余白（さらに詰める） --- */
  .as-movie {
    padding: 44px 0 48px;
  }
  .as-fs {
    padding: 44px 0;
  }
  .as-comparison {
    padding: 44px 0;
  }
  .as-detail {
    padding: 40px 0 48px;
  }
  .as-footer {
    padding-top: 44px;
    padding-bottom: 24px;
  }
  .as-hero__inner {
    padding-bottom: 72px;
  }
  .as-lineup__inner {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .as-lineup__nav {
    gap: 28px;
  }
  .as-fs__cards {
    gap: 14px;
  }
}

/* ============================================================
   スマホ：ハンバーガーボタン＆メニュー
   ・ボタンは青ベタ／ヘッダー高さいっぱい／ラインは白
   ・開くと×、再クリックで三本線に戻る（.as-header.is-open で切替）
   ・メニューは画面全体を覆い、ヘッダー（ロゴ・ボタン）より下のレイヤー
   ============================================================ */
@media (max-width:900px) {
  /* ヘッダー内の重なり順：ロゴ・CTA・トグルはメニューより上 */
  .as-header__logo,
  .as-header__cta,
  .as-nav-toggle {
    position: relative;
    z-index: 2;
  }

  .as-prod--harness .as-prod__photo .as-harness-switch__img--1,
  .as-prod--harness .as-prod__photo .as-harness-switch__img--2 {
    top: 34px;
  }

  .as-nav-toggle {
    align-self: stretch;   /* ヘッダー高さいっぱい */
    width: 72px;
    height: auto;
    margin-left: 0px;
    padding: 0;
    gap: 6px;
    background: var(--blue);
    transition: background .3s ease;
  }
  .as-nav-toggle span {
    width: 24px;
    background: #fff;
    transition: transform .3s ease, opacity .2s ease;
  }
  /* 三本線 → × */
  .as-header.is-open .as-nav-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .as-header.is-open .as-nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  .as-header.is-open .as-nav-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* メニュー：画面全体を覆う */
  .as-header.is-open .as-gnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;
    padding-top: 82px;
    background: #fff;
    box-shadow: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .as-header.is-open .as-gnav a {
    padding: 18px 24px;
    font-size: 16px;
  }
}

@media (max-width:640px) {
  .as-nav-toggle {
    width: 62px;
  }
  .as-nav-toggle span {
    width: 22px;
  }
  .as-header.is-open .as-gnav a {
    padding: 16px 20px;
  }
}

/* ============================================================
   AIR HARNESS：画像切り替えは画面内に入ってから開始
   （JS: js/airsafe.js が .is-inview を付与）
   ============================================================ */
.as-prod--harness .as-prod__photo .as-harness-switch__img {
  animation-play-state: paused;
}
.as-prod--harness .as-prod__photo .as-harness-switch.is-inview .as-harness-switch__img {
  animation-play-state: running;
}
/* JS無効環境では従来どおり自動再生 */
.no-js .as-prod--harness .as-prod__photo .as-harness-switch__img {
  animation-play-state: running;
}

/* ============================================================
   スクロールヒント（scroll-hint.js）用の微調整
   ・アイコンを表の中央に重ねるため、スクロール要素を配置基準にする
   ============================================================ */
.as-detail__scroll.scroll-hint {
  position: relative;
}
.as-detail__scroll .scroll-hint-icon {
  top: calc(50% - 25px);
}

/* ============================================================
   LINE UP ロゴ：1文字ずつ下から出現
   （インラインSVG。JS: js/airsafe.js が画面内で .is-inview を付与）
   ============================================================ */
.as-intro__lineup .ll__in {
  transform: translateY(130px);
  opacity: 0;
}
.as-intro__lineup.is-inview .ll__in {
  animation: asLineupRise .8s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes asLineupRise {
  from { transform: translateY(130px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
/* 1文字ずつ 0.09秒ずつ遅らせる */
.as-intro__lineup.is-inview .ll--l .ll__in { animation-delay: 0s; }
.as-intro__lineup.is-inview .ll--i .ll__in { animation-delay: .09s; }
.as-intro__lineup.is-inview .ll--n .ll__in { animation-delay: .18s; }
.as-intro__lineup.is-inview .ll--e .ll__in { animation-delay: .27s; }
.as-intro__lineup.is-inview .ll--u .ll__in { animation-delay: .40s; }
.as-intro__lineup.is-inview .ll--p .ll__in { animation-delay: .49s; }

/* 動きを減らす設定では最初から表示 */
@media (prefers-reduced-motion: reduce) {
  .as-intro__lineup .ll__in {
    transform: none;
    opacity: 1;
    animation: none !important;
  }
}

/* 初回のフェード開始を「画面に入ってから1.5秒後」にする
   （1周期8秒／フェード開始は37%＝2.96秒 → 負のディレイで1.46秒ぶん進めた状態から再生）
   2回目以降は従来どおり8秒周期 */
.as-prod--harness .as-prod__photo .as-harness-switch__img--1,
.as-prod--harness .as-prod__photo .as-harness-switch__img--2 {
  animation-delay: -1.46s;
}

/* scroll-hint の影（左右のグラデーション）は使用しない
   ※ 万一ラッパーが挿入されても表の幅基準がずれないよう保険を入れておく */
.scroll-hint-shadow-wrap::before,
.scroll-hint-shadow-wrap::after {
  content: none;
}
.as-detail__harness > .scroll-hint-shadow-wrap,
.as-detail__inner > .scroll-hint-shadow-wrap {
  width: 100%;
}

/* ============================================================
   スマホ：各セクションの上下paddingは最低40pxを確保
   （これまでの調整で40pxを下回っていた箇所の底上げ）
   ============================================================ */
@media (max-width:900px) {
  .as-lineup__inner {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .as-brandband {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .as-intro__text {
    padding-top: 44px;
    padding-bottom: 40px;
  }
  .as-footer {
    padding-bottom: 40px;
  }
  .as-prod--air .as-prod__inner,
  .as-prod--free .as-prod__inner {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .as-prod--harness .as-prod__body {
    padding-top: 40px;
  }
}

@media (max-width:640px) {
  .as-lineup__inner {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .as-intro__text {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .as-footer {
    padding-top: 44px;
    padding-bottom: 40px;
  }
  .as-prod--air .as-prod__inner,
  .as-prod--free .as-prod__inner {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .as-prod--harness .as-prod__body {
    padding-top: 40px;
  }
  .as-detail {
    padding-top: 40px;
    padding-bottom: 48px;
  }
}

/* ============================================================
   スマホ：斜めカット（clip-path）の大きさ・角度を全体で統一
   横40px × 縦24px（約31°）に揃える
   ・.as-hero__body      … --cx / --cy
   ・.as-movie           … --mcx / --mcy（margin-top は --mcy と同値）
   ・.as-onehand         … --ocx / --ocy
   ・.as-fs-card         … --fcx / --fcy
   ・.as-fs-ocard        … --ocx2 / --ocy2
   ============================================================ */
@media (max-width:900px) {
  .as-hero__body {
    --cx: 40px;
    --cy: 24px;
  }
  .as-movie {
    --mcx: 40px;
    --mcy: 24px;
    margin-top: -24px;
  }
  .as-onehand {
    --ocx: 40px;
    --ocy: 24px;
    margin: 0 auto;
  }
  .as-fs-card {
    --fcx: 40px;
    --fcy: 24px;
  }
  .as-fs-ocard {
    --ocx2: 40px;
    --ocy2: 24px;
  }
}

/* スマホの LINE UP ロゴ下の余白は不要 */
@media (max-width:900px) {
  .as-intro__lineup {
    padding-bottom: 0;
  }
}