/* ============================================================
 * Decorations (v0.5)
 *   実際のセクションID（#top, #service, #solutions, #purpose,
 *   #case, #knowledge, #faq, #cta）に対して装飾を配置。
 *   #issue は装飾なし（明示除外）。
 *
 *   ブロブ（有機曲線）と斜めバンドを織り交ぜて動きを出す。
 *   SVGは data-URI で inline 埋め込み → 追加ファイル不要。
 * ============================================================ */

/* ============================================================
 * ページ下地：html にほんのりグラデ
 * ============================================================ */
html {
  min-height: 100% !important;
  background:
    linear-gradient(180deg, #f6faff 0%, #fbfcfe 30%, #ffffff 100%) !important;
}
body.is-top {
  background: transparent !important;
}

/* ============================================================
 * A2MegaStrip：サービスバー内カードのホバー挙動
 *   カードとしての存在感を強めてクリック可能性を明示
 * ============================================================ */
#root .pm-mega-card:hover {
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.55) !important;
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,0.4), 0 4px 10px -2px rgba(0,0,0,0.2);
}
#root .pm-mega-card:hover .pm-mega-arrow {
  transform: translateX(4px);
}
#root .pm-mega-card:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ============================================================
 * すべての #root 直下 section を relative + 装飾許可コンテナに
 * （コンテンツ側の z-index を確保）
 * ============================================================ */
#root section {
  position: relative;
}
#root section > * {
  position: relative;
  z-index: 2;
}

/* 装飾は全て背面レイヤーへ */
#root section::before,
#root section::after {
  z-index: 0;
  pointer-events: none;
}

/* ============================================================
 * 明示除外：#issue（YOUR ISSUES ／御社の事業課題に…）は装飾なし
 * ============================================================ */
#root section#issue::before,
#root section#issue::after {
  content: none !important;
  background: none !important;
  display: none !important;
}

/* ============================================================
 * 1. HERO (#top)：右上に大ブロブ ＋ 左下に淡ブロブ
 * ============================================================ */
#root section#top {
  overflow: visible;
  isolation: isolate;
}
#root section#top::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -180px;
  width: 520px;
  height: 520px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%231c93d2' d='M48.6,-62.9C63,-52.8,74.8,-38,79.8,-21.2C84.8,-4.4,83,14.4,74.4,28.2C65.9,42.1,50.5,50.9,35.2,58.4C19.9,65.9,4.7,72,-10.9,73.7C-26.4,75.4,-42.4,72.6,-53.2,63C-64,53.3,-69.5,36.9,-72.9,20.1C-76.4,3.4,-77.7,-13.7,-71.2,-26.5C-64.7,-39.3,-50.3,-47.8,-36.4,-56.7C-22.5,-65.6,-9,-74.8,3.6,-79.5C16.3,-84.2,32.7,-84.5,42,-77.9C51.3,-71.3,53.6,-57.9,48.6,-62.9Z' transform='translate(100 100)'/%3E%3C/svg%3E");
  opacity: 0.32;
}
#root section#top::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -140px;
  width: 340px;
  height: 340px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%231c93d2' d='M39.7,-59.5C52.4,-51.6,64.2,-42.4,71,-30.1C77.7,-17.9,79.4,-2.6,76.1,11.5C72.9,25.5,64.7,38.4,53.6,47.7C42.6,57,28.7,62.8,13.6,66.9C-1.5,71,-17.9,73.3,-32.8,68.6C-47.8,64,-61.4,52.3,-69.5,37.5C-77.7,22.7,-80.4,4.7,-77,-11.9C-73.7,-28.5,-64.3,-43.8,-51.3,-52.5C-38.4,-61.3,-21.9,-63.6,-6.4,-54.9C9,-46.2,27.1,-67.4,39.7,-59.5Z' transform='translate(100 100)'/%3E%3C/svg%3E");
  opacity: 0.22;
}

/* ============================================================
 * 2. SERVICE (#service, #service-detail)：左に斜めバンド
 * ============================================================ */
#root section#service,
#root section#service-detail {
  overflow: hidden;
}
#root section#service::before,
#root section#service-detail::before {
  content: '';
  position: absolute;
  top: 15%;
  left: -8%;
  width: 45%;
  height: 260px;
  background: linear-gradient(105deg, rgba(28,147,210,0.28) 0%, rgba(28,147,210,0.10) 60%, transparent 100%);
  transform: skewY(-6deg);
  border-radius: 8px;
}
#root section#service::after,
#root section#service-detail::after {
  content: '';
  position: absolute;
  bottom: -40px;
  right: -140px;
  width: 360px;
  height: 360px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%2314719f' d='M43.8,-56.8C55.1,-47.8,61.2,-31.9,64.6,-16.1C68.1,-0.3,68.9,15.4,62.3,27.6C55.7,39.7,41.7,48.3,26.7,55.5C11.6,62.6,-4.6,68.4,-19.6,66.1C-34.7,63.7,-48.6,53.4,-58.6,39.6C-68.6,25.8,-74.6,8.7,-72.6,-7.4C-70.6,-23.5,-60.5,-38.5,-47.4,-47.6C-34.3,-56.6,-18.1,-59.7,-1.3,-58.1C15.4,-56.5,32.5,-65.7,43.8,-56.8Z' transform='translate(100 100)'/%3E%3C/svg%3E");
  opacity: 0.22;
}

/* ============================================================
 * 3. SOLUTIONS (#solutions)：斜めバンドで背景を斬る
 * ============================================================ */
#root section#solutions {
  overflow: hidden;
  isolation: isolate;
}
#root section#solutions::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -5%;
  width: 65%;
  height: 140%;
  background: linear-gradient(115deg, transparent 0%, transparent 40%, rgba(28,147,210,0.22) 55%, rgba(20,113,159,0.10) 100%);
  transform: skewX(-8deg);
}
#root section#solutions::after {
  content: '';
  position: absolute;
  top: 20%;
  left: -100px;
  width: 260px;
  height: 260px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%231c93d2' d='M52.9,-64.3C67.6,-52.2,77.5,-33.9,79.7,-15.1C81.9,3.7,76.4,23,66.3,38.6C56.2,54.2,41.5,66,24.7,71.9C7.9,77.7,-11,77.6,-27.7,71.4C-44.4,65.2,-59,52.9,-68.5,37.1C-78,21.4,-82.4,2.1,-79,-16.1C-75.5,-34.4,-64.2,-51.6,-49.1,-63.6C-34,-75.5,-15.1,-82.3,2.1,-84.9C19.4,-87.5,38.2,-76.4,52.9,-64.3Z' transform='translate(100 100)'/%3E%3C/svg%3E");
  opacity: 0.22;
}

/* ============================================================
 * 4. PURPOSE (#purpose)：右下に濃紺ブロブ
 * ============================================================ */
#root section#purpose {
  overflow: visible;
}
#root section#purpose::after {
  content: '';
  position: absolute;
  bottom: -100px;
  right: -120px;
  width: 380px;
  height: 380px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%2314719f' d='M43.8,-56.8C55.1,-47.8,61.2,-31.9,64.6,-16.1C68.1,-0.3,68.9,15.4,62.3,27.6C55.7,39.7,41.7,48.3,26.7,55.5C11.6,62.6,-4.6,68.4,-19.6,66.1C-34.7,63.7,-48.6,53.4,-58.6,39.6C-68.6,25.8,-74.6,8.7,-72.6,-7.4C-70.6,-23.5,-60.5,-38.5,-47.4,-47.6C-34.3,-56.6,-18.1,-59.7,-1.3,-58.1C15.4,-56.5,32.5,-65.7,43.8,-56.8Z' transform='translate(100 100)'/%3E%3C/svg%3E");
  opacity: 0.22;
}

/* ============================================================
 * 5. CASE (#case)：上下斜めバンドで挟む（アタカ工業風）
 * ============================================================ */
#root section#case {
  overflow: hidden;
  isolation: isolate;
}
#root section#case::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -20%;
  left: -20%;              /* left/right 両方指定で画面幅ほぼいっぱい */
  width: auto;
  height: 240px;
  background: linear-gradient(-105deg,
    rgba(28,147,210,0.38) 0%,
    rgba(28,147,210,0.34) 15%,
    rgba(28,147,210,0.28) 30%,
    rgba(20,113,159,0.20) 45%,
    rgba(20,113,159,0.13) 60%,
    rgba(20,113,159,0.07) 75%,
    rgba(20,113,159,0.03) 88%,
    transparent 100%);
  transform: skewY(-5deg);
  border-radius: 8px;
}
#root section#case::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: -20%;
  right: -20%;             /* 同じく両側で全幅 */
  width: auto;
  height: 200px;
  background: linear-gradient(105deg,
    rgba(28,147,210,0.32) 0%,
    rgba(28,147,210,0.28) 15%,
    rgba(28,147,210,0.22) 30%,
    rgba(28,147,210,0.15) 45%,
    rgba(28,147,210,0.09) 60%,
    rgba(28,147,210,0.04) 75%,
    rgba(28,147,210,0.02) 88%,
    transparent 100%);
  transform: skewY(-4deg);
  border-radius: 8px;
}

/* ============================================================
 * 6. KNOWLEDGE (#knowledge)：左上に淡ブロブ
 * ============================================================ */
#root section#knowledge {
  overflow: visible;
}
#root section#knowledge::before {
  content: '';
  position: absolute;
  top: -80px;
  left: -140px;
  width: 320px;
  height: 320px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%231c93d2' d='M39.7,-59.5C52.4,-51.6,64.2,-42.4,71,-30.1C77.7,-17.9,79.4,-2.6,76.1,11.5C72.9,25.5,64.7,38.4,53.6,47.7C42.6,57,28.7,62.8,13.6,66.9C-1.5,71,-17.9,73.3,-32.8,68.6C-47.8,64,-61.4,52.3,-69.5,37.5C-77.7,22.7,-80.4,4.7,-77,-11.9C-73.7,-28.5,-64.3,-43.8,-51.3,-52.5C-38.4,-61.3,-21.9,-63.6,-6.4,-54.9C9,-46.2,27.1,-67.4,39.7,-59.5Z' transform='translate(100 100)'/%3E%3C/svg%3E");
  opacity: 0.24;
}

/* ============================================================
 * 7. FAQ (#faq)：右下に小ブロブ（控えめ）
 * ============================================================ */
#root section#faq {
  overflow: visible;
}
#root section#faq::after {
  content: '';
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 240px;
  height: 240px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%231c93d2' d='M52.9,-64.3C67.6,-52.2,77.5,-33.9,79.7,-15.1C81.9,3.7,76.4,23,66.3,38.6C56.2,54.2,41.5,66,24.7,71.9C7.9,77.7,-11,77.6,-27.7,71.4C-44.4,65.2,-59,52.9,-68.5,37.1C-78,21.4,-82.4,2.1,-79,-16.1C-75.5,-34.4,-64.2,-51.6,-49.1,-63.6C-34,-75.5,-15.1,-82.3,2.1,-84.9C19.4,-87.5,38.2,-76.4,52.9,-64.3Z' transform='translate(100 100)'/%3E%3C/svg%3E");
  opacity: 0.22;
}

/* ============================================================
 * 8. CTA (#cta)：斜め×2 でダイナミックに
 * ============================================================ */
#root section#cta {
  overflow: hidden;
  isolation: isolate;
}
#root section#cta::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -10%;
  width: 55%;
  height: 160%;
  background: linear-gradient(75deg, rgba(28,147,210,0.25) 0%, rgba(28,147,210,0.08) 60%, transparent 100%);
  transform: skewX(-10deg);
}
#root section#cta::after {
  content: '';
  position: absolute;
  bottom: -30%;
  right: -10%;
  width: 55%;
  height: 160%;
  background: linear-gradient(-75deg, rgba(20,113,159,0.22) 0%, rgba(20,113,159,0.06) 60%, transparent 100%);
  transform: skewX(10deg);
}

/* ============================================================
 * RESPONSIVE：モバイルでは装飾を控えめに
 * ============================================================ */
@media (max-width: 900px) {
  #root section#top::before {
    width: 320px;
    height: 320px;
    top: -30px;
    right: -100px;
    opacity: 0.14;
  }
  #root section#top::after {
    width: 220px;
    height: 220px;
    bottom: -50px;
    left: -80px;
    opacity: 0.30;
  }
  #root section#purpose::after,
  #root section#service::after {
    width: 260px;
    height: 260px;
  }
  #root section#knowledge::before {
    width: 220px;
    height: 220px;
    top: -40px;
    left: -80px;
  }
}
@media (max-width: 600px) {
  /* 斜めバンドは邪魔になるので非表示 */
  #root section#service::before,
  #root section#service-detail::before,
  #root section#solutions::before,
  #root section#case::before,
  #root section#case::after,
  #root section#cta::before,
  #root section#cta::after {
    display: none;
  }
  /* ブロブは残すが小さめに */
  #root section#top::before,
  #root section#top::after,
  #root section#purpose::after,
  #root section#knowledge::before,
  #root section#faq::after,
  #root section#service::after {
    width: 180px;
    height: 180px;
    opacity: 0.18;
  }
}