@charset "utf-8";
/* CSS Document */
/* AS-10 LP 専用CSS（Figmaのレイヤー仕様（CSS書き出し）に基づき数値を実測して反映） */

:root {
  --as10-blue: #0050b4;
  --as10-navy: #004c8c;
  --as10-teal: #007183;
  --as10-red: #cc0000;
  --as10-green: #3aad46;
  --as10-card-bg: #f2f6ff;
  --as10-card-border: #dadfeb;
  --as10-item-border: #d9e2ea;
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* このLPの編集範囲（l-contentBody内）だけNoto Sans JPを適用。ヘッダー・フッター等の共通部分には影響しません */
.l-contentBody {font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;}

@media screen and (min-width: 768px) {
  .l-contentBody a:hover,
  .l-contentBody button:hover {
    opacity: .7;
  }
  /* 「AS-10について、お気軽にご相談ください」ボックスのボタンは対象外 */
  .l-contentBody .as10-cv__list a:hover {
    opacity: 1;
  }
}

* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.row {display: flex;flex-wrap: wrap;}
.sp {display: none;}
@media only screen and (max-width: 767px) {
  .pc {display: none;}
  .sp {display: block;}
}
section {margin: 90px auto!important;max-width: 1000px;}
/* sec01〜sec04間はコンテンツ間130pxに */
.sec02, .sec03, .sec04 {margin-top: 130px!important;}
.sec04 {margin-bottom: 40px!important;}
/* ご導入のメリット〜関連製品ブロックはコンテンツ間40pxに */
.sec05 {margin-top: 40px!important;margin-bottom: 40px!important;}
.as10-cv {margin-top: 40px!important;margin-bottom: 40px!important;}
.sec06 {margin-top: 40px!important;}

/* ===== SP版のみ：見出し直下の余白・section間の余白 ===== */
@media only screen and (max-width: 767px) {
  .l-contentBody .m-hdgLv1 {margin-bottom: 20px;}
  section {margin: 70px auto!important;}
  .sec02, .sec03, .sec04, .sec05, .sec06 {margin-top: 70px!important;}
  .sec04, .sec05 {margin-bottom: 70px!important;}
  .as10-cv {margin-top: 70px!important;margin-bottom: 70px!important;}
}

/* 共通CTAボタン「製品について問い合わせる」（mv・sec03・sec06すべて共通） */
.as10-btnContact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  height: 84px;
  padding: 0 30px;
  font-size: 2.4rem;
  font-weight: bold;
  letter-spacing: .1em;
  color: #fff;
  text-decoration: none;
  background: var(--as10-red);
  border: 4px solid #f5f8fa;
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
  transition: none;
}
.as10-btnContact::after {
  content: '';
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: url(../images/as10/icon_arrow.svg) no-repeat center / contain;
  transition: transform .25s ease;
}
@media screen and (min-width: 768px) {
  .l-contentBody .as10-btnContact:hover {opacity: 1;}
  .as10-btnContact:hover::after {transform: translateX(4px);}
}
@media only screen and (max-width: 767px) {
  .as10-btnContact {height: auto;padding: 15px;font-size: 1.8rem;gap: 12px;}
  .as10-btnContact::after {width: 20px;height: 20px;}
}

/* 共通見出し（左ボーダー8px + 太字ネイビー42px、Figma Frame3065準拠） */
.as10-hdg {
  position: relative;
  margin-bottom: 20px;
  padding-left: 40px;
  font-size: clamp(2.2rem, 1.6vw + 1.8rem, 4.2rem);
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: .1em;
  color: var(--as10-blue);
  border-left: 8px solid var(--as10-blue);
}
@media only screen and (max-width: 767px) {
  .as10-hdg {padding-left: 20px;border-left-width: 6px;}
}
/* カラー背景カード内で使う小サイズ見出し（ご導入のメリット／ご使用例／関連製品：Figma実測29px、バー高さ41px） */
.as10-hdg--s {
  display: flex;
  align-items: center;
  height: 41px;
  padding: 0 0 0 40px;
  font-size: clamp(1.8rem, 1vw + 1.5rem, 2.9rem);
}
@media only screen and (max-width: 767px) {
  .as10-hdg--s {height: auto;padding: 8px 0 8px 20px;}
}
/* 見出しの強制改行は1080px以上のみ有効（スマホ〜タブレットは自然な折り返しに任せる） */
.brk {display: none;}
@media only screen and (min-width: 1080px) {
  .brk {display: inline;}
}

/* ================= mv：メインビジュアル（PC/SPとも画像。ボタンのみHTMLで重ねる） ================= */
/* 見出し(h1)とはみ出さないよう、l-contentMainの通常コンテンツ幅にそろえる（ブレイクアウトなし） */
.mv {width: 100%;margin-top: 0!important;}
.mv {text-align: center;}
.mv__media {position: relative;}
.mv__media img {display: block;width: 100%;}
.mv__media img.pc {display: block;aspect-ratio: 1585 / 575;object-fit: cover;}
.mv__media img.sp {display: none;}
/* ボタン位置：left 698/1585=44.04%、中心top 465/575=80.87%（1080px以上のみ）。
   固定pxサイズだと画像側のテキストと被るため、vwベースで画像とほぼ同じ比率で縮小するようにする */
.mv__btn {
  position: absolute;
  left: 44.04%;
  top: 80.87%;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  white-space: nowrap;
  padding: clamp(8px, 1.1vw, 30px) clamp(10px, 1.6vw, 30px);
  font-size: clamp(1.3rem, 1.35vw, 2.4rem);
  gap: clamp(6px, 1vw, 20px);
}
.mv__btn::after {
  width: clamp(16px, 1.6vw, 24px);
  height: clamp(16px, 1.6vw, 24px);
}
.mv__btn--sp {
  display: none;
  position: static;
  width: auto;
  min-width: 0;
  margin-top: 20px;
  transform: none;
}
/* 1080px未満（タブレット〜スマホ）は「あらゆるテープ貼りを、この１台で。」の縦テキストとボタンが被るため、
   画像上への重ね配置をやめて画像下の静的ボタンに切り替える */
@media only screen and (max-width: 1079px) {
  .mv__btn--pc {display: none;}
  .mv__btn--sp {display: inline-flex;}
}
@media only screen and (max-width: 767px) {
  .mv__media img.pc {display: none;}
  .mv__media img.sp {display: block;aspect-ratio: 524 / 632;object-fit: cover;}
}

/* ================= sec01：課題提起 ================= */
.sec01 p {font-size: 1.6rem;line-height: 1.5;margin-top: 20px;color: #333;}
.sec01 p strong {font-weight: bold;color: var(--as10-blue);}
.sec01 figure {margin: 60px 0 0;}
.sec01 figure img {width: 100%;border-radius: 10px;}

/* ================= sec02：ラインナップ（画像に商品名・説明を含む1枚構成） ================= */
.sec02 p {font-size: 1.6rem;line-height: 1.5;margin-bottom: 32px;color: #333;}
.sec02 .lineup {
  padding: 30px;
  background: #f2f2f2;
}
.sec02 .lineup .row {justify-content: flex-start;gap: 10px;}
.sec02 .lineup li {width: 180px;}
.sec02 .lineup li img {width: 180px;height: 235px;display: block;}
@media only screen and (max-width: 767px) {
  .sec02 .lineup {padding: 15px;}
  .sec02 .lineup li {width: 48%;}
  .sec02 .lineup li img {width: 100%;height: auto;}
}

/* ================= sec03：AS-10訴求（Figma List Item準拠） ================= */
.sec03 p {font-size: 1.6rem;line-height: 1.5;margin-top: 20px;color: #333;}
.sec03 .checklist {margin: 20px 0;flex: 0 0 56.4%;max-width: 564px;}
.sec03 .checklist li {
  position: relative;
  margin-bottom: 10px;
  padding: 12px 14px 12px 44px;
  font-size: 1.5rem;
  line-height: 1.9;
  letter-spacing: .02em;
  color: #23303b;
  background: #fff;
  border: 1px solid var(--as10-item-border);
  border-radius: 10px;
}
.sec03 .checklist li:last-child {margin-bottom: 0;}
.sec03 .checklist li::before {
  content: "✓";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 1.3rem;
  font-weight: bold;
  color: #fff;
  background: #0068b7;
  border-radius: 50%;
}
.sec03 .row {align-items: stretch;gap: 0;margin: 20px 0;flex-wrap: nowrap;}
.sec03 .row .photo {flex: 1;min-width: 0;}
.sec03 .row .photo img {width: 100%;height: 100%;object-fit: contain;}
.sec03 .lead {margin: 32px 0;}
.sec03 .headline {margin: 32px 0;font-size: clamp(1.8rem, 2.8vw, 4rem);font-weight: bold;text-align: center;line-height: 1.65;letter-spacing: .02em;color: #000;}
@media only screen and (max-width: 767px) {
  .sec03 .row {flex-wrap: wrap;}
  .sec03 .row .photo {width: 100%;margin-top: 20px;}
  .sec03 .row .photo img {height: auto;}
}

/* ================= sec04：ご導入のメリット（Figma Frame3062準拠） ================= */
.sec04 .card {padding: 60px;background: var(--as10-card-bg);border: 1px solid var(--as10-card-border);}
.sec04 .row {gap: 18px;}
.sec04 .row li {flex: 1;padding: 20px 20px 40px;text-align: center;background: #fff;border: 1px solid var(--as10-item-border);border-radius: 14px;}
.sec04 .row li .num {display: block;margin-bottom: 6px;font-size: 1.6rem;font-weight: bold;color: var(--as10-blue);opacity: .2;letter-spacing: .1em;}
.sec04 h3 {font-size: 2rem;font-weight: bold;color: var(--as10-blue);letter-spacing: .1em;margin-bottom: 10px;}
.sec04 p {font-size: 1.6rem;line-height: 1.8;color: #333;text-align: left;}
.sec04 .note {margin-top: 28px;font-size: 1.6rem;text-align: left;color: #333;}
@media only screen and (max-width: 767px) {
  .sec04 .card {padding: 20px 15px;}
  .sec04 .row {flex-direction: column;}
  .sec04 .row li {margin-bottom: 15px;}
}

/* ================= sec05：ご使用例（Figma Frame3064準拠：白ボックス1つに2カラム内包） ================= */
.sec05 .card {padding: 60px;background: var(--as10-card-bg);border: 1px solid var(--as10-card-border);}
.sec05 .box {display: flex;gap: 15px;padding: 40px;background: #fff;border: 1px solid var(--as10-item-border);border-radius: 14px;}
.sec05 .box .col {flex: 1;}
.sec05 .box .col li {position: relative;margin-bottom: 6px;padding-left: 0;font-size: 1.6rem;line-height: 1.8;color: #333;}
.sec05 .note {margin-top: 20px;font-size: 1.6rem;color: #333;text-align: center;}
@media only screen and (max-width: 767px) {
  .sec05 .card {padding: 20px 15px;}
  .sec05 .box {flex-direction: column;padding: 20px;gap: 20px;}
}

/* ================= secCv：問い合わせボックス（Figma Container準拠） ================= */
.as10-cv {
  max-width: 1000px;
  margin: 0 auto;
  padding: 34px;
  text-align: center;
  color: #fff;
  background: var(--as10-navy);
  border-radius: 14px;
}
.as10-cv__hdg {margin-top: 0;margin-bottom: 20px;font-size: 2.3rem;font-weight: bold;line-height: 1.4;letter-spacing: .02em;}
.as10-cv__list {display: flex;flex-wrap: wrap;justify-content: center;gap: 18px;}
.as10-cv__list li {width: 262px;}
.as10-cv__list a {
  display: block;
  padding: 16px;
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: .02em;
  text-decoration: none;
  border-radius: 30px;
}
.as10-cv__list li:nth-child(1) a {color: #fff;background: #cf1225;border: 3px solid #fff;}
.as10-cv__list li:nth-child(2) a {color: var(--as10-navy);background: #fff;}
@media only screen and (max-width: 767px) {
  .as10-cv {padding: 28px 18px;}
  .as10-cv__hdg {font-size: 1.7rem;}
  .as10-cv__list li {width: 100%;}
}

/* ================= sec06：関連製品（Figma Frame3063準拠） ================= */
.sec06 {padding: 60px;background: var(--as10-card-bg);border: 1px solid var(--as10-card-border);}
.sec06 h3.as10-hdg {margin-bottom: 20px;}
.sec06 .row {gap: 27px;}
.sec06 .row li {flex: 1;display: flex;align-items: center;gap: 16px;padding: 18px;text-align: left;background: #fff;border: 1px solid var(--as10-item-border);border-radius: 14px;}
.sec06 .row li img {width: 96px;height: 96px;object-fit: contain;border-radius: 6px;margin: 0;flex-shrink: 0;}
.sec06 .row li p {font-size: 1.6rem;line-height: 1.4;color: #333;font-weight: normal;}
.sec06 .row li a.m-link {display: inline-block;margin-top: 6px;font-size: 1.4rem;color: #0068b7;}
.sec06 .as10-btnContact {margin: 32px auto 0;}
@media only screen and (max-width: 767px) {
  .sec06 {padding: 20px 15px;}
  .sec06 .row {flex-direction: column;}
  .sec06 .row li {width: 100%;text-align: left;}
}