@charset "UTF-8";
/*
  /rakurakucloud/gwtg/asset/css/page/p-gwtg-way001.css
  way001ページ固有のスタイル（背景装飾ぼかしの配置など）
*/
.p-gwtg-way001 {
  position: relative;
  overflow-x: hidden; /* 装飾が画面外にはみ出しても横スクロールを出さない */
  min-height: 100vh;
  /* background: linear-gradient(90deg, var(--white) 0%, var(--rcloud-bg-sub-03) 10%, var(--rcloud-bg-sub-03) 90%, var(--white) 100%); */
  background-color: var(--rcloud-bg-sub-03);
}

/*
  各セクションはコンテンツとして装飾より前面に出す。
  重なり順（奥→手前）：セクション背景色 → 装飾ぼかし → セクション内コンテンツ
  section自体を position:relative / z-index:1 にすると背景色ごと前面化して
  装飾が隠れるため、装飾を section より上の z-index に置き、
  各 section の中身（inner）だけをさらに前面に出す方針とする。
*/
/*
  重なり順（奥→手前）：セクション背景色 → 装飾ぼかし → コンテンツ
  - section には z-index を付けない（背景色は最背面のまま）
  - 装飾ぼかしを z-index:1
  - 各 section の中身（inner等の直下要素）を z-index:2 で装飾より前面へ
  section に position/z-index を付けると新しいスタッキング文脈ができて
  装飾が背景ごと裏に回ってしまうため、あえて付けない。
*/
.p-gwtg-way001 > section > * {
  position: relative;
  z-index: 2;
}

.p-gwtg-way001--component-inner {
  max-width: 1160px;
  margin: 0 auto;
  position: relative;
}

/* 背景装飾ぼかし（楽楽クラウドコンポーネントをぼかした画像・1種類を使い回し） */
.p-gwtg-way001__decoration {
  position: absolute;
  z-index: 1; /* セクション背景（z:auto）より前面・コンテンツ（z:2）より背面 */
  pointer-events: none;
  background-image: url("/rakurakucloud/gwtg/asset/image/component/component-rcloud-white.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 590px;
  height: 816px;
  filter: blur(10px); /* ぼかし */
  opacity: 0.9; /* ★ここで透明度を指定（0.0 ～ 1.0） */
  @media screen and (max-width: 840px) {
 filter: blur(6px); /* ぼかし */
  }
}

/* --- FV〜メッセージ箇所に3個（大きさ2種） --- */
/* 大：右上 */
.p-gwtg-way001__decoration--01 {
  top: -90px;
  right: -230px;
  @media screen and (max-width: 840px) {
    top: -40px;
    right: -80px;
    width: 300px;
    height: 300px;
  }
}
/* 小：左中央あたり */
.p-gwtg-way001__decoration--02 {
  top: 1020px;
  left: -480px;

  @media screen and (max-width: 840px) {
    top: 520px;
    left: -60px;
    width: 260px;
    height: 260px;
  }
}
/* 小：右（ストーリー下部あたり） */
.p-gwtg-way001__decoration--03 {
  top: 1910px;
  right: -430px;
  @media screen and (max-width: 840px) {
    top: 1100px;
    right: -110px;
    width: 300px;
    height: 300px;
  }
}

/* --- 導入事例（白座布団下）に1個 --- */
.p-gwtg-way001__decoration--04 {
  top: 3160px;
  left: -350px;
  @media screen and (max-width: 840px) {
    top: 2320px;
    left: -110px;
    width: 300px;
    height: 300px;
  }
}

.p-gwtg-way001__decoration--05 {
  top: -1000px;
  right: 0px;
  @media screen and (max-width: 840px) {
    top: 0;
    right: -80px;
    width: 300px;
    height: 300px;
  }
}