/* ============================================================
   サンブリッジ AWSソリューションLP 専用スタイル
   設置先: wp-content/themes/sunbridge/assets/styles/lp-aws.css
   全セレクタは .lp-aws 配下にスコープ済み（他ページへの影響なし）
   生成: 2026-08-12
   ============================================================ */


/* 全セレクタは .lp-aws 配下にスコープ済み。html/body/:root への指定はなし */
/* ============================================================
   サンブリッジ AWSソリューションLP デザイン案
   デザイントークンは現行サイト common.css の実測値に準拠
   1rem = 10px
   ============================================================ */
.lp-aws.lp-aws{
  --color-base-rgb:26,26,26; --color-sub-rgb:85,85,85; --color-dark-rgb:26,26,26; --color-light-rgb:130,130,130;
  --color-base:rgb(var(--color-base-rgb)); --color-sub:rgb(var(--color-sub-rgb));
  --color-dark:rgb(var(--color-dark-rgb)); --color-light:rgb(var(--color-light-rgb));
  --background-base:transparent; --background-accent:#F5F5F5; --background-light:#F5F5F5; --surface-invert:#1A1A1A;
  --gradient-accent:linear-gradient(133.26deg,#E7336E 1.42%,#EB6153 43.37%,#F9C158 85.31%);
  --gradient-button:linear-gradient(0deg,rgba(51,51,51,.2),rgba(51,51,51,.2)),var(--gradient-accent);
  --hairline:rgba(var(--color-base-rgb),.2);
  --ff-base:"Noto Sans JP","Yu Gothic UI","Meiryo",sans-serif;
  --ff-accent:"Montserrat","Noto Sans JP","Yu Gothic UI",sans-serif;
  --size-medium:104.6rem; --size-large:128.6rem; --gutter:2.4rem;
}
.lp-aws.lp-aws,.lp-aws.lp-aws *,.lp-aws.lp-aws *::before,.lp-aws.lp-aws *::after{box-sizing:border-box}
.lp-aws.lp-aws{margin:0 !important;background:var(--background-base);color:var(--color-base);
  font-family:var(--ff-base);font-size:1.7rem;line-height:1.5;-webkit-font-smoothing:antialiased}
.lp-aws.lp-aws img{max-width:100%;height:auto;display:block}
.lp-aws.lp-aws a{color:inherit;text-decoration:none}
.lp-aws.lp-aws ul{list-style:none;margin:0 !important;padding:0}

.lp-aws.lp-aws .l-inner{width:100%;max-width:calc(var(--size-medium) + var(--gutter)*2);
  padding-inline:var(--gutter);margin-inline:auto !important}
.lp-aws.lp-aws .l-inner--large{width:100%;max-width:calc(var(--size-large) + var(--gutter)*2);
  padding-inline:var(--gutter);margin-inline:auto !important}
.lp-aws.lp-aws .l-section{margin-top:12rem !important}

/* ---------- 共通見出し ---------- */
.lp-aws.lp-aws .c-h2{font-size:2.6rem;font-weight:700;line-height:1.4;padding-bottom:2.4rem;margin:0 0 5.6rem !important;position:relative}
.lp-aws.lp-aws .c-h2::before{content:"";position:absolute;left:0;bottom:0;width:8rem;height:.4rem;background:var(--gradient-accent)}
.lp-aws.lp-aws .c-h2--center{text-align:center}
.lp-aws.lp-aws .c-h2--center::before{left:50%;translate:-50%}
.lp-aws.lp-aws .c-lead{font-size:1.7rem;line-height:1.8;color:var(--color-sub);margin:-3.2rem 0 4.8rem !important}
.lp-aws.lp-aws .c-note{font-size:1.3rem;color:var(--color-light);line-height:1.7;margin-top:1.6rem !important}

/* ---------- ヘッダー（既存サイト共通パーツ） ---------- */

/* ---------- 01 HERO（1カラム・KVなし） ---------- */
.lp-aws.lp-aws .p-hero{padding:0 0 2.4rem;position:relative}
.lp-aws.lp-aws .p-hero::before{content:"";position:absolute;left:0;right:0;top:-8rem;height:calc(100% + 18rem);
  pointer-events:none;
  background:radial-gradient(58% 90% at 84% 8%,rgba(235,97,83,.07) 0%,rgba(235,97,83,0) 70%);}
.lp-aws.lp-aws .p-hero__desc{position:relative;font-size:1.7rem;line-height:1.9;color:var(--color-sub);margin:0 !important;width:100%}
.lp-aws.lp-aws .c-btn{background:var(--gradient-button);color:#fff;font-size:1.6rem;font-weight:700;
  padding:1.6rem;width:28.8rem;text-align:center;display:block;position:relative}
.lp-aws.lp-aws .c-btn--outline{background:transparent;border:1px solid var(--color-base);color:var(--color-base)}
.lp-aws.lp-aws .c-btn--small{padding:1.2rem;width:24rem;font-size:1.5rem}
.lp-aws.lp-aws .c-tel{border-left:1px solid rgba(0,0,0,.2);padding-left:3.2rem}
.lp-aws.lp-aws .c-tel__num{font-family:var(--ff-accent);font-size:2.8rem;line-height:1.3;display:flex;align-items:center;gap:.6rem}
.lp-aws.lp-aws .c-tel__num i{font-size:2.2rem;font-variation-settings:"FILL" 1}
.lp-aws.lp-aws .c-tel__open{font-size:1.4rem;color:var(--color-sub);padding-left:.4rem}

/* ---------- 02 課題 ---------- */
.lp-aws.lp-aws .p-problem__labels{display:grid;grid-template-columns:1fr 1fr;gap:4rem;margin-bottom:2.4rem !important}
.lp-aws.lp-aws .p-problem__label{font-family:var(--ff-accent);font-size:1.3rem;letter-spacing:.08em;color:var(--color-sub);
  padding-bottom:1.2rem;border-bottom:1px solid var(--hairline)}
.lp-aws.lp-aws .p-problem__label b{font-family:var(--ff-base);font-size:1.6rem;color:var(--color-base);margin-left:1.2rem !important}
.lp-aws.lp-aws .p-problem__cards{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 4rem;grid-auto-rows:1fr}
.lp-aws.lp-aws .c-card{background:var(--background-accent);padding:2.4rem}
.lp-aws.lp-aws .c-card__title{font-size:1.8rem;font-weight:700;line-height:1.5;padding-left:1.4rem;position:relative}
.lp-aws.lp-aws .c-card__title::before{content:"";position:absolute;left:0;top:1.1rem;width:.6rem;height:.6rem;background:var(--gradient-accent)}
.lp-aws.lp-aws .c-card__text{font-size:1.4rem;line-height:1.7;color:var(--color-sub);margin:1.2rem 0 0 !important}
.lp-aws.lp-aws .p-problem__close{text-align:center;font-size:2rem;font-weight:700;line-height:1.7;margin-top:6.4rem !important}

/* ---------- 03 AWSでできること ---------- */
.lp-aws.lp-aws .p-aws__values{display:grid;grid-template-columns:repeat(5,1fr);gap:1.6rem;margin-top:4.8rem !important}
.lp-aws.lp-aws .c-outline{border:1px solid var(--hairline);padding:2.4rem 1.6rem;text-align:center}
.lp-aws.lp-aws .c-outline__num{font-family:var(--ff-accent);font-size:1.2rem;color:var(--color-light);letter-spacing:.1em}
.lp-aws.lp-aws .c-outline__title{font-size:1.8rem;font-weight:700;margin:1.2rem 0 .8rem !important}
.lp-aws.lp-aws .c-outline__text{font-size:1.3rem;line-height:1.6;color:var(--color-sub)}
.lp-aws.lp-aws .c-lightBox{background:linear-gradient(135deg,rgba(231,51,110,.05) 0%,rgba(235,97,83,.05) 45%,rgba(249,193,88,.07) 100%),#FAFAFA;color:var(--color-base);border:1px solid rgba(0,0,0,.08);border-radius:3rem;padding:8rem 4rem;margin-top:6.4rem !important}
.lp-aws.lp-aws .c-lightBox__grid{display:grid;grid-template-columns:1fr 1fr;gap:4.8rem}
.lp-aws.lp-aws .c-lightBox h3{font-size:2.4rem;font-weight:700;line-height:1.4;margin:0 0 1.6rem !important;padding-left:2.4rem;position:relative}
.lp-aws.lp-aws .c-lightBox h3::before{content:"";position:absolute;left:.2rem;top:1.2rem;width:1.2rem;height:1.2rem;
  background:var(--gradient-accent);transform:rotate(45deg)}
.lp-aws.lp-aws .c-lightBox p{font-size:1.5rem;line-height:1.9;margin:0 !important;color:var(--color-sub)}

/* ---------- 04 選ばれる理由 ---------- */
/* 3枚のタイルで数字・見出し・説明の高さを揃える（見出しは2行分を確保） */
.lp-aws.lp-aws .p-why__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem}
.lp-aws.lp-aws .c-stat{background:var(--background-accent);padding:3.2rem 2.4rem;
  display:grid;grid-template-rows:auto auto 1fr;row-gap:1.6rem}
.lp-aws.lp-aws .c-stat__num{font-family:var(--ff-accent);font-size:4.4rem;font-weight:500;line-height:1.05;
  display:flex;align-items:baseline;min-height:4.8rem}
.lp-aws.lp-aws .c-stat__num small{font-size:2rem;font-weight:500;margin-left:.4rem !important}
.lp-aws.lp-aws .c-stat__title{font-size:1.6rem;font-weight:700;line-height:1.5;min-height:4.8rem;margin:0 !important}
.lp-aws.lp-aws .c-stat__label{font-size:1.3rem;line-height:1.7;color:var(--color-sub);margin:0 !important}
.lp-aws.lp-aws .p-why__badges{display:flex;align-items:center;gap:2.4rem;margin-top:4rem !important;padding:3.2rem;border:1px solid var(--hairline)}
.lp-aws.lp-aws .p-why__badgeSet{display:flex;gap:2.4rem;align-items:center;flex:none}
.lp-aws.lp-aws .c-badge__img{width:11rem;height:auto;flex:none}
.lp-aws.lp-aws .p-why__badgeText{font-size:1.4rem;line-height:1.9;color:var(--color-sub)}
.lp-aws.lp-aws .p-why__badgeText b{color:var(--color-base);font-size:1.6rem;display:block;margin-bottom:.8rem !important}

/* ---------- 05 サービスカード ---------- */
.lp-aws.lp-aws .p-service__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem}
.lp-aws.lp-aws .c-serviceCard{background:var(--background-accent);padding:2.4rem;display:flex;flex-direction:column}
.lp-aws.lp-aws .c-serviceCard__tag{font-family:var(--ff-accent);font-size:1.1rem;letter-spacing:.06em;
  color:#fff;background:var(--surface-invert);border:0;border-radius:.3rem;
  padding:.5rem 1rem;align-self:flex-start;flex:none;white-space:nowrap;margin-bottom:1.6rem !important}
.lp-aws.lp-aws .c-serviceCard__title{font-family:var(--ff-accent);font-size:2rem;font-weight:600;line-height:1.4;
  padding-left:1.4rem;position:relative}
.lp-aws.lp-aws .c-serviceCard__title::before{content:"";position:absolute;left:0;top:1.1rem;width:.6rem;height:.6rem;background:var(--gradient-accent)}
.lp-aws.lp-aws .c-serviceCard__text{font-size:1.4rem;line-height:1.7;color:var(--color-sub);margin:1.6rem 0 0 !important;flex:1}
.lp-aws.lp-aws .c-serviceCard__more{font-family:var(--ff-accent);font-size:1.2rem;color:var(--color-sub);margin-top:2.4rem !important;
  display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--hairline);padding-top:1.6rem}
.lp-aws.lp-aws .c-serviceCard__more i{font-size:2rem}
.lp-aws.lp-aws .c-serviceCard--soon{border:1px dashed var(--hairline);background:transparent;align-items:center;justify-content:center;
  color:var(--color-light);font-size:1.3rem;text-align:center;line-height:1.8}

/* ---------- 06 業務別 ---------- */
.lp-aws.lp-aws .p-dept__tabs{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:3.2rem !important}
.lp-aws.lp-aws .p-dept__tab{font-size:1.3rem;padding:.8rem 1.8rem;border:1px solid var(--hairline);color:var(--color-sub)}
.lp-aws.lp-aws .p-dept__tab.is-active{background:var(--surface-invert);color:#fff;border-color:var(--color-base);font-weight:700}
.lp-aws.lp-aws .p-dept__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.lp-aws.lp-aws .c-tile{border:1px solid var(--hairline);padding:1.8rem 2rem;font-size:1.5rem;line-height:1.6;
  display:flex;align-items:center;gap:1.2rem}
.lp-aws.lp-aws .c-tile::before{content:"";width:.6rem;height:.6rem;background:var(--gradient-accent);flex:none}

/* ---------- 07 事例 ---------- */
.lp-aws.lp-aws .p-case__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem}
.lp-aws.lp-aws .c-caseCard{background:var(--background-accent);display:flex;flex-direction:column}
.lp-aws.lp-aws .c-caseCard__fig{display:block;position:relative;background:#fff;overflow:hidden;cursor:zoom-in}
.lp-aws.lp-aws .c-caseCard__fig img{width:100%;height:auto;display:block;transition:transform var(--transition,.4s ease)}
.lp-aws.lp-aws .c-caseCard__fig:hover img{transform:scale(1.04)}
.lp-aws.lp-aws .c-caseCard__zoom{position:absolute;right:0;bottom:0;background:rgba(5,6,6,.82);color:#fff;
  font-size:1.1rem;letter-spacing:.04em;padding:.5rem 1rem}

/* 構成図の拡大（CSSのみ・:target） */
.lp-aws.lp-aws .c-zoom{display:none;position:fixed;inset:0;z-index:80;padding:6.4rem 2.4rem;
  align-items:center;justify-content:center}
.lp-aws.lp-aws .c-zoom:target{display:flex}
.lp-aws.lp-aws .c-zoom__bg{position:absolute;inset:0;background:rgba(5,6,6,.93)}
.lp-aws.lp-aws .c-zoom__inner{position:relative;margin:0 !important;max-width:132rem;width:100%}
.lp-aws.lp-aws .c-zoom__inner img{width:100%;height:auto;background:#fff}
.lp-aws.lp-aws .c-zoom__inner figcaption{font-size:1.3rem;color:rgba(255,255,255,.8);margin-top:1.6rem !important;text-align:center}
.lp-aws.lp-aws .c-zoom__close{position:absolute;top:2.4rem;right:2.4rem;font-size:1.4rem;color:#fff;
  border:1px solid rgba(255,255,255,.4);padding:.8rem 1.6rem}
.lp-aws.lp-aws .c-caseCard__body{padding:2.4rem;display:flex;flex-direction:column;flex:1}
.lp-aws.lp-aws .c-caseCard__meta{font-size:1.2rem;color:var(--color-sub);display:flex;gap:1.2rem;flex-wrap:wrap}
.lp-aws.lp-aws .c-caseCard__meta span{border:1px solid var(--hairline);padding:.2rem .8rem}
.lp-aws.lp-aws .c-caseCard__title{font-size:1.8rem;font-weight:700;line-height:1.6;margin:1.6rem 0 !important;
  padding-bottom:1.6rem;border-bottom:1px solid var(--hairline)}
.lp-aws.lp-aws .c-caseCard__row{font-size:1.4rem;line-height:1.7;color:var(--color-sub);margin-bottom:1.2rem !important}
.lp-aws.lp-aws .c-caseCard__row b{color:var(--color-base);display:block;font-size:1.2rem;letter-spacing:.04em;margin-bottom:.4rem !important}
.lp-aws.lp-aws .c-caseCard__result{margin-top:auto !important;font-size:1.5rem;font-weight:700;line-height:1.6;padding-top:1.6rem;
  border-top:1px solid var(--hairline)}
.lp-aws.lp-aws .p-case__cta{margin-top:4.8rem !important;border:1px solid var(--hairline);padding:4rem;text-align:center}
.lp-aws.lp-aws .p-case__cta h3{font-size:2rem;font-weight:700;margin:0 0 2.4rem !important;line-height:1.5}
.lp-aws.lp-aws .p-case__ctaBtns{display:flex;justify-content:center;gap:1.6rem;flex-wrap:wrap}

/* ---------- 中間CV：資料ダウンロードバンド ---------- */
.lp-aws.lp-aws .p-dlBand{display:flex;align-items:center;gap:4rem;padding:4rem;
  border:1px solid rgba(235,97,83,.28);border-radius:1.6rem;
  background:linear-gradient(135deg,rgba(231,51,110,.10) 0%,rgba(235,97,83,.10) 45%,rgba(249,193,88,.13) 100%),#fff}
.lp-aws.lp-aws .p-dlBand__label{font-family:var(--ff-accent);font-size:1.2rem;letter-spacing:.1em;
  color:var(--color-sub);margin:0 0 1.2rem !important;padding-left:1.4rem;position:relative}
.lp-aws.lp-aws .p-dlBand__label::before{content:"";position:absolute;left:0;top:.5rem;width:.6rem;height:.6rem;
  background:var(--gradient-accent)}
.lp-aws.lp-aws .p-dlBand__title{font-size:2.2rem;font-weight:700;line-height:1.5;margin:0 0 1.2rem !important}
.lp-aws.lp-aws .p-dlBand__text{font-size:1.4rem;line-height:1.8;color:var(--color-sub);margin:0 !important}
.lp-aws.lp-aws .p-dlBand .c-btn{flex:none}

/* ---------- 追従型CTAバナー ---------- */
.lp-aws.lp-aws .p-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(255,255,255,.96);border-top:1px solid rgba(0,0,0,.12);box-shadow:0 -.2rem 1.2rem rgba(0,0,0,.08)}
.lp-aws.lp-aws .p-sticky__inner{width:min(100% - 4rem,152rem);margin-inline:auto !important;
  display:flex;align-items:center;justify-content:center;gap:2.4rem;padding:1.6rem 0}
.lp-aws.lp-aws .p-sticky__tel{font-family:var(--ff-accent);font-size:2rem;display:flex;align-items:baseline;gap:.4rem}
.lp-aws.lp-aws .p-sticky__tel em{font-family:var(--ff-base);font-style:normal;font-size:1.2rem;color:var(--color-sub)}
.lp-aws.lp-aws .c-btn--sticky{width:auto;padding:1.2rem 2.8rem;font-size:1.4rem}

/* ---------- 08 支援範囲 ---------- */

/* ---------- 09 サポート ---------- */
.lp-aws.lp-aws .p-support__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem}
.lp-aws.lp-aws .c-support{border:1px solid var(--hairline);padding:3.2rem 2.4rem}
.lp-aws.lp-aws .c-support__no{font-family:var(--ff-accent);font-size:1.2rem;color:var(--color-light);letter-spacing:.1em}
.lp-aws.lp-aws .c-support__title{font-size:2rem;font-weight:700;margin:1.2rem 0 2rem !important}
.lp-aws.lp-aws .c-support li{font-size:1.4rem;line-height:1.8;color:var(--color-sub);padding-left:1.6rem;position:relative}
.lp-aws.lp-aws .c-support li::before{content:"・";position:absolute;left:0;top:0}

/* ---------- 10 FAQ ---------- */
.lp-aws.lp-aws .c-faq__item{border-top:1px solid rgba(0,0,0,.18);padding:2.4rem 0}
.lp-aws.lp-aws .c-faq__item:last-child{border-bottom:1px solid rgba(0,0,0,.18)}
.lp-aws.lp-aws .c-faq__q{font-size:1.7rem;font-weight:700;display:flex;justify-content:space-between;gap:2rem;align-items:flex-start}
.lp-aws.lp-aws .c-faq__q i{font-size:2.2rem;color:var(--color-sub);flex:none}
.lp-aws.lp-aws .c-faq__a{font-size:1.5rem;line-height:1.9;color:var(--color-sub);margin-top:1.6rem !important;padding-right:4rem}

/* ---------- 11 最終CTA ---------- */
.lp-aws.lp-aws .c-contactBox{background:var(--background-light);border:1px solid rgba(0,0,0,.14);color:var(--color-dark);
  max-width:var(--size-medium);margin:12rem auto 0 !important;padding:8rem 2rem}
.lp-aws.lp-aws .c-contactBox__title{font-size:2rem;font-weight:700;line-height:1.4;text-align:center;padding-bottom:1.6rem;
  position:relative;margin:0 !important}
.lp-aws.lp-aws .c-contactBox__title::before{content:"";position:absolute;left:50%;bottom:0;translate:-50%;
  width:8rem;height:.15rem;background:var(--gradient-accent)}
.lp-aws.lp-aws .c-contactBox__body{margin-top:4rem !important;display:flex;flex-direction:column;align-items:center;gap:2.4rem}
.lp-aws.lp-aws .c-contactBox__btns{display:flex;gap:1.6rem;flex-wrap:wrap;justify-content:center}
.lp-aws.lp-aws .c-btn--dark{background:var(--color-dark);border:1px solid var(--color-dark)}
.lp-aws.lp-aws .c-contactBox .c-tel{border-left:0;padding-left:0;text-align:center}
.lp-aws.lp-aws .c-contactBox .c-tel__num{justify-content:center}
.lp-aws.lp-aws .c-contactBox .c-tel__open{color:var(--color-light);display:block;text-align:center;padding-left:0}

/* ---------- 12 関連サービス ---------- */
.lp-aws.lp-aws .p-related{padding-top:12rem}
.lp-aws.lp-aws .p-related__title{font-family:var(--ff-accent);font-size:3.2rem;font-weight:500;line-height:1;margin:0 0 3.2rem !important}
.lp-aws.lp-aws .p-related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem}

/* ---------- フッター ---------- */

/* 注記（デザイン案としての説明。実装時は削除） */
.lp-aws.lp-aws .a-note{font-size:1.2rem;color:#7f7c7c;border-left:2px solid #4a4949;padding:.4rem 0 .4rem 1.2rem;margin-top:1.6rem !important;line-height:1.7}
/* アイコン：本番実装では現行サイトと同じ Material Symbols Outlined（arrow_forward / keyboard_arrow_right / call / add / remove）を使用。
   本デザイン案は書き出し用に代替グリフで表示している */
.lp-aws.lp-aws .c-icon{font-style:normal;line-height:1;display:inline-block}
.lp-aws.lp-aws .c-icon--arrow{font-size:2rem}
.lp-aws.lp-aws .c-icon--tel{font-family:var(--ff-accent);font-size:1.4rem;letter-spacing:.06em;color:var(--color-sub);margin-right:.6rem !important}
.lp-aws.lp-aws .c-icon--toggle{font-size:2rem;color:var(--color-sub)}

/* ============================================================
   レスポンシブ（既存サイトと同じブレークポイント 1024 / 600）
   ============================================================ */
@media screen and (max-width:1023px){
  .lp-aws.lp-aws .p-service__grid,.lp-aws.lp-aws .p-case__grid,.lp-aws.lp-aws .p-related__grid,.lp-aws.lp-aws .p-support__grid{grid-template-columns:1fr 1fr}
  .lp-aws.lp-aws .p-dept__grid{grid-template-columns:1fr 1fr}
  .lp-aws.lp-aws .p-aws__values{grid-template-columns:repeat(3,1fr)}
  .lp-aws.lp-aws .p-why__stats{grid-template-columns:1fr}
  .lp-aws.lp-aws .p-why__badges{flex-direction:column;align-items:flex-start}
}
@media screen and (max-width:1023px){
  .lp-aws.lp-aws .p-dlBand{flex-direction:column;align-items:flex-start;gap:2.4rem}
}
@media screen and (max-width:599px){
  .lp-aws.lp-aws .l-section{margin-top:8rem !important}
  .lp-aws.lp-aws .p-hero__desc br{display:none}
  .lp-aws.lp-aws .p-problem__labels{display:none}
  .lp-aws.lp-aws .p-problem__cards{grid-template-columns:1fr;grid-auto-rows:auto}
  .lp-aws.lp-aws .p-problem__close{font-size:2rem;margin-top:4.8rem !important}
  .lp-aws.lp-aws .p-dlBand{padding:3.2rem 2rem}
  .lp-aws.lp-aws .p-dlBand__title{font-size:1.8rem}
  .lp-aws.lp-aws .p-case__ctaBtns,.lp-aws.lp-aws .c-contactBox__btns{flex-direction:column;align-items:stretch}
  .lp-aws.lp-aws .c-zoom{padding:2.4rem 1.6rem}
  .lp-aws.lp-aws .c-zoom__inner img{overflow-x:auto}
  .lp-aws.lp-aws .c-zoom__close{top:.8rem;right:1.6rem}
  /* 追従バナーはSPでボタン2つのみ表示 */
  .lp-aws.lp-aws .p-sticky__inner{gap:1.2rem;padding:1.2rem 1.6rem}
  .lp-aws.lp-aws .p-sticky__tel{display:none}
  .lp-aws.lp-aws .c-btn--sticky{flex:1;padding:1.2rem .8rem;font-size:1.3rem;width:auto}
  .lp-aws.lp-aws .c-h2{font-size:2.2rem;margin-bottom:4rem !important}
  .lp-aws.lp-aws .c-lead{font-size:1.5rem;margin:-2.4rem 0 3.2rem !important}
  .lp-aws.lp-aws .p-hero{padding-top:0}
  .lp-aws.lp-aws .p-hero__desc{font-size:1.5rem;margin-top:0 !important}
  .lp-aws.lp-aws .c-btn{width:100%}
  .lp-aws.lp-aws .c-tel{border-left:0;padding-left:0;text-align:center}
  .lp-aws.lp-aws .c-tel__num{justify-content:center;font-size:2.4rem}
  .lp-aws.lp-aws .c-tel__open{display:block;text-align:center;padding-left:0}
  .lp-aws.lp-aws .p-problem__groups{grid-template-columns:1fr;gap:3.2rem}
  .lp-aws.lp-aws .p-problem__close{font-size:1.6rem;margin-top:4rem !important}
  .lp-aws.lp-aws .p-problem__close br{display:none}
  .lp-aws.lp-aws .p-aws__values{grid-template-columns:1fr 1fr;gap:1.2rem}
  .lp-aws.lp-aws .c-lightBox{border-radius:2rem;padding:5.6rem 2.4rem;margin-top:4.8rem !important}
  .lp-aws.lp-aws .c-lightBox__grid{grid-template-columns:1fr;gap:3.2rem}
  .lp-aws.lp-aws .c-lightBox h3{font-size:2rem}
  .lp-aws.lp-aws .p-service__grid,.lp-aws.lp-aws .p-case__grid,.lp-aws.lp-aws .p-related__grid,.lp-aws.lp-aws .p-support__grid,.lp-aws.lp-aws .p-dept__grid{grid-template-columns:1fr}
  .lp-aws.lp-aws .p-why__badgeSet{flex-wrap:wrap}
  .lp-aws.lp-aws .p-dept__tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.8rem}
  .lp-aws.lp-aws .p-dept__tab{white-space:nowrap}
  .lp-aws.lp-aws .c-caseCard__title{font-size:1.7rem}
  .lp-aws.lp-aws .c-caseCard__title br{display:none}
  .lp-aws.lp-aws .p-case__cta{padding:3.2rem 2rem}
  .lp-aws.lp-aws .p-case__cta h3{font-size:1.7rem}
  .lp-aws.lp-aws .c-contactBox{margin-top:8rem !important;padding:5.6rem 1.6rem}
  .lp-aws.lp-aws .p-related{padding-top:8rem}
  .lp-aws.lp-aws .p-related__title{font-size:2.4rem}
}



/* ============================================================
   白背景化にともなう調整
   カード面(#F5F5F5)が白地(#FFF)に埋もれないよう境界線を足す
   ============================================================ */
.lp-aws.lp-aws .c-card,
.lp-aws.lp-aws .c-stat,
.lp-aws.lp-aws .c-serviceCard,
.lp-aws.lp-aws .c-caseCard{border:1px solid rgba(0,0,0,.08)}
.lp-aws.lp-aws .c-caseCard__fig{border-bottom:1px solid rgba(0,0,0,.08)}

/* ============================================================
   ボタンの状態変化（白背景化にともなう追加）
   ・実体はspanなのでcursorを明示
   ・塗りボタンは覆いの暗幕(20%)を外して明るくする
   ・アウトラインは反転塗り
   ============================================================ */
.lp-aws.lp-aws .c-btn{cursor:pointer;border-radius:.4rem;
  transition:background .25s ease,color .25s ease,box-shadow .25s ease,transform .25s ease}
.lp-aws.lp-aws .c-btn:hover{background:var(--gradient-accent);box-shadow:0 .6rem 1.6rem rgba(231,51,110,.28);transform:translateY(-.2rem)}
.lp-aws.lp-aws .c-btn--outline:hover{background:var(--color-base);color:#fff;box-shadow:0 .6rem 1.6rem rgba(0,0,0,.18)}
.lp-aws.lp-aws .c-btn--dark:hover{background:var(--gradient-accent);border-color:transparent}

/* 資料ダウンロードバンドのボタンは、バンド内で最も強い要素にする */
.lp-aws.lp-aws .p-dlBand .c-btn--outline{background:var(--gradient-button);color:#fff;border:0;
  box-shadow:0 .4rem 1.2rem rgba(231,51,110,.28)}
.lp-aws.lp-aws .p-dlBand .c-btn--outline:hover{background:var(--gradient-accent);color:#fff;
  box-shadow:0 .8rem 2rem rgba(231,51,110,.36)}

/* ============================================================
   部門別ソリューションのタブ切替
   投稿本文には <script> も <input> も保存できないため :target で実装する。
   :has() は :target の変化でスタイルが再計算されない（実機で確認）ため使わない。
   パネルを先、タブを後ろに置き、兄弟セレクタ(~)で強調を制御している。
   ============================================================ */
.lp-aws.lp-aws .p-dept__body{display:flex;flex-direction:column}
.lp-aws.lp-aws .p-dept__tabs{order:-1}
.lp-aws.lp-aws .p-dept__tab{cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.lp-aws.lp-aws .p-dept__tab:hover{border-color:var(--color-base);color:var(--color-base)}
.lp-aws.lp-aws .p-dept__panel{display:none;scroll-margin-top:12rem}
.lp-aws.lp-aws .p-dept__panel--default{display:grid}
.lp-aws.lp-aws .p-dept__panel:target{display:grid}
.lp-aws.lp-aws .p-dept__panel:target ~ .p-dept__panel--default{display:none}
/* 既定（未選択時）はセールスを強調 */
.lp-aws.lp-aws .p-dept__tab[href="#dept-sales"]{background:var(--surface-invert);color:#fff;
  border-color:var(--surface-invert);font-weight:700}
/* どれかが選ばれたら既定の強調を解除 */
.lp-aws.lp-aws .p-dept__panel:target ~ .p-dept__tabs .p-dept__tab[href="#dept-sales"]{background:transparent;
  color:var(--color-sub);border-color:var(--hairline);font-weight:400}
/* 選ばれたタブを強調 */
.lp-aws.lp-aws #dept-sales:target ~ .p-dept__tabs .p-dept__tab[href="#dept-sales"],
.lp-aws.lp-aws #dept-mk:target ~ .p-dept__tabs .p-dept__tab[href="#dept-mk"],
.lp-aws.lp-aws #dept-cs:target ~ .p-dept__tabs .p-dept__tab[href="#dept-cs"],
.lp-aws.lp-aws #dept-hr:target ~ .p-dept__tabs .p-dept__tab[href="#dept-hr"],
.lp-aws.lp-aws #dept-legal:target ~ .p-dept__tabs .p-dept__tab[href="#dept-legal"],
.lp-aws.lp-aws #dept-plan:target ~ .p-dept__tabs .p-dept__tab[href="#dept-plan"],
.lp-aws.lp-aws #dept-acc:target ~ .p-dept__tabs .p-dept__tab[href="#dept-acc"],
.lp-aws.lp-aws #dept-common:target ~ .p-dept__tabs .p-dept__tab[href="#dept-common"]{
  background:var(--surface-invert);color:#fff;border-color:var(--surface-invert);font-weight:700}

/* ============================================================
   支援範囲：サンブリッジの対応領域を矢印帯で明示する
   ============================================================ */
.lp-aws.lp-aws 
.lp-aws.lp-aws 

/* ============================================================
   プロジェクトの進め方（提案資料P8の図をHTMLで再現）
   ============================================================ */

/* ============================================================
   FAQアコーディオン（details/summary。JS不要）
   ============================================================ */
.lp-aws.lp-aws .c-faq__item{padding:0 !important}
.lp-aws.lp-aws .c-faq__q{cursor:pointer;list-style:none;padding:2.4rem 0;
  transition:color .2s ease}
.lp-aws.lp-aws .c-faq__q::-webkit-details-marker{display:none}
.lp-aws.lp-aws .c-faq__q:hover{color:#C22A5E}
.lp-aws.lp-aws .c-faq__item[open] .c-faq__q{padding-bottom:1.2rem}
.lp-aws.lp-aws .c-faq__item .c-faq__toggle::after{content:"＋"}
.lp-aws.lp-aws .c-faq__item[open] .c-faq__toggle::after{content:"−"}
.lp-aws.lp-aws .c-faq__a{margin-top:0 !important;padding-bottom:2.4rem !important;padding-right:4rem}

@media screen and (max-width:599px){
  .lp-aws.lp-aws .p-dept__panel{scroll-margin-top:8rem}
}

/* ============================================================
   テーマが .c-serviceContents 配下の h3 に付ける菱形マーカーと
   左パディングを、LP内では無効化する。
   LP自前のマーカー(.c-lightBox h3 / .c-card__title / .c-serviceCard__title)は
   より詳細度が高いため、そのまま残る。
   ============================================================ */
.lp-aws.lp-aws h3{padding-left:0}
.lp-aws.lp-aws h3::before{content:none}

/* ============================================================
   部門タブ：JSが動いている場合はこちらが優先される。
   JSはハッシュを使わないため :target 側のルールは一切当たらない
   （＝クリックしてもページが移動しない）。
   JSが無い環境では上の :target 版がそのまま動く。
   ============================================================ */
.lp-aws.lp-aws .p-dept.is-js .p-dept__panel{display:none}
.lp-aws.lp-aws .p-dept.is-js .p-dept__panel.is-shown{display:grid}
.lp-aws.lp-aws .p-dept.is-js .p-dept__tab{background:transparent;color:var(--color-sub);
  border-color:var(--hairline);font-weight:400}
.lp-aws.lp-aws .p-dept.is-js .p-dept__tab.is-active{background:var(--surface-invert);color:#fff;
  border-color:var(--surface-invert);font-weight:700}

/* ============================================================
   構成図の拡大表示：JSが動いている場合はクラスで開閉する。
   テーマのスクリプトが history.pushState でURLを書き換えるため、
   :target が発火せず拡大できないことを実機で確認したための対応。
   JSが無い環境では上の :target 版が働く。
   ============================================================ */
.lp-aws.lp-aws .c-zoom.is-open{display:flex}
.lp-aws.lp-aws .c-caseCard__fig{cursor:zoom-in}
.lp-aws.lp-aws .c-zoom__bg,.lp-aws.lp-aws .c-zoom__close{cursor:pointer}
.lp-aws.lp-aws .c-zoom.is-open{cursor:zoom-out}

/* ============================================================
   図は画像で表示する（レイアウトが画面幅で崩れないようにするため）。
   常に画面幅にぴったり収め、横スクロールは発生させない。
   小さくて読めないときは、事例の構成図と同じくクリックで拡大する。
   ============================================================ */
.lp-aws.lp-aws .p-figure{margin:0 0 4.8rem !important}
.lp-aws.lp-aws .p-figure__open{display:block;position:relative;background:#fff;cursor:zoom-in}
.lp-aws.lp-aws .p-figure__open img{width:100%;height:auto;display:block}

@media screen and (max-width:599px){
  /* 認定ロゴ：縦積みをやめて1行に収める */
  .lp-aws.lp-aws .p-why__badgeSet{flex-wrap:nowrap;gap:1.2rem;width:100%;justify-content:center}
  .lp-aws.lp-aws .c-badge__img{width:auto;flex:1 1 0;min-width:0;max-width:10rem}

  /* 部門タブ：右に切れるのをやめて画面内で折り返す */
  .lp-aws.lp-aws .p-dept__tabs{flex-wrap:wrap;overflow-x:visible;padding-bottom:0;gap:.6rem}
  .lp-aws.lp-aws .p-dept__tab{font-size:1.2rem;padding:.7rem 1.2rem}
}