:root {
  /* 色 */
  --office-color-heading: #333333;
  --office-color-card-bg: #ebf4ff;
  --office-color-check: #0577bd;
  --office-color-link: #0577bd;
  --office-color-link-hover: #0465a1;
  --office-color-link-active: #045688;
  --office-color-focus: rgb(0, 95, 204);
  --office-color-panel-shadow: rgba(5, 119, 189, 0.25);
  --office-color-h1grad-1: #00beff;
  --office-color-h1grad-2: #0098ec;
  --office-color-h1grad-3: #007bd7;
  --office-color-h1grad-4: #0062c4;
  --office-color-h1grad-5: #004bb1;
  /* フォント（--office-font-subtext は共有トークン） */
  --office-font-subtext: 14px;
  --office-font-lead: 18px;
  /* 角丸 */
  --office-radius-card: 8px;
  --office-radius-panel: 10px;
  /* レイアウト寸法（本文枠の左右 padding＝h1 の負マージンと対） */
  --office-space-panel-x: 20px;
  /* レイアウト寸法（リード挿絵） */
  --office-size-lead-illust-pc: 220px;
  --office-size-lead-illust-mb: 190px;
  --office-space-lead-illust-top-pc: -16px;
  /* レイアウト寸法（ドット背景・装飾円） */
  --office-size-dot-tile: 40px;
  --office-size-deco-circle: min(40vw, 485px);
  --office-space-deco-left-top: 422px;
  --office-size-header: 42px;
}

/* 画面全体にドット背景を敷く */
html {
  background-image: url("../images/common/bg_blue.png");
  background-repeat: repeat;
  background-position: 50% 20px;
  background-size: var(--office-size-dot-tile) var(--office-size-dot-tile);
}

/* リンクの状態別（下線はブラウザ既定のまま） */
a {
  color: var(--office-color-link);
}
a:hover {
  color: var(--office-color-link-hover);
}
a:active {
  color: var(--office-color-link-active);
}
a:focus-visible {
  outline: 2px solid var(--office-color-focus);
  outline-offset: 2px;
}

/* 装飾円の位置基準。min-height は円の切れ防止 */
.trial {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ページ左右の装飾円（幅は画面幅に追従・全コンテンツの背面） */
.trial::before,
.trial::after {
  content: "";
  position: absolute;
  width: var(--office-size-deco-circle);
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% calc(var(--office-size-deco-circle) * 1670 / 485);
}
.trial::before {
  left: 0;
  top: calc(var(--office-size-header) + var(--office-space-deco-left-top));
  background-image: url("../images/common/circle_bg_left_01_lg.png");
}
.trial::after {
  right: 0;
  top: calc(var(--office-size-header) - var(--office-size-deco-circle) * 420 / 485);
  background-image: url("../images/common/circle_bg_right_01_lg.png");
}

/* ヘッダの白背景を打ち消してドットを見せる */
.trial .trial-header {
  background-color: transparent;
}

/* .contents の既存背景を打ち消してドットを見せる */
.trial .contents {
  background-image: none;
}

/* 本文枠（白カード）を装飾の前面に置き、上端に見出し帯を収める */
.trial .contents .form_wrapper {
  position: relative;
  z-index: 1;
  background-color: #ffffff;
  border-radius: var(--office-radius-panel);
  padding: 0 var(--office-space-panel-x) 40px;
  box-shadow: 0 12px 18px 12px var(--office-color-panel-shadow);
}

/* 見出しをフルブリードのグラデーション帯に */
.trial .contents .form_wrapper > h1 {
  position: relative;
  z-index: 0;
  margin: 0 calc(var(--office-space-panel-x) * -1) 24px;
  border-radius: var(--office-radius-panel) var(--office-radius-panel) 0 0;
  padding: 24px 16px;
  background-image: linear-gradient(130deg, var(--office-color-h1grad-1) 0%, var(--office-color-h1grad-2) 35%, var(--office-color-h1grad-3) 55%, var(--office-color-h1grad-4) 75%, var(--office-color-h1grad-5) 100%);
  color: #ffffff;
}

/* 見出し帯のドット（グラデーションの上・テキストの下） */
.trial .contents .form_wrapper > h1::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background-image: url("../images/common/bg_01.png");
  background-repeat: repeat;
  background-position: 50% 20px;
  background-size: var(--office-size-dot-tile) var(--office-size-dot-tile);
}

/* リードを薄青カードに（1 カラム） */
.contents .form_lead {
  display: block;
  box-sizing: border-box;
  width: auto;
  max-width: 640px;
  margin: 24px auto 16px;
  padding: 24px;
  background-color: var(--office-color-card-bg);
  border-radius: var(--office-radius-card);
}

/* チェックリスト（背景イラストの持ち主。PC は画像右・本文左） */
.contents .form_lead .form_lead_check {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(var(--office-size-lead-illust-pc) * 125 / 170 + var(--office-space-lead-illust-top-pc));
  padding: 0 calc(var(--office-size-lead-illust-pc) + 16px) 0 0;
  background-image: url("../images/index/intro_illust.svg");
  background-repeat: no-repeat;
  background-position: right var(--office-space-lead-illust-top-pc);
  background-size: var(--office-size-lead-illust-pc) auto;
  text-align: left;
  font-size: var(--office-font-lead);
  line-height: 2;
  font-weight: bold;
  color: var(--office-color-heading);
}
/* チェックマーク（テキスト字形の ✔） */
.contents .form_lead .form_lead_check > li::before {
  content: "✔";
  margin-right: 0.25em;
  color: var(--office-color-check);
}

/* footer 背景を透明に */
.trial footer {
  background-color: transparent;
}

@media screen and (max-width: 767px) {
  /* モバイル: 装飾円の幅 */
  :root {
    --office-size-deco-circle: 45vw;
  }

  /* モバイル: カード幅をフォーム群と揃える */
  .contents .form_lead {
    max-width: 508px;
    padding: 10px 20px 20px;
  }

  /* モバイル: イラストを上・中央に */
  .contents .form_lead .form_lead_check {
    display: block;
    min-height: 0;
    padding: calc(var(--office-size-lead-illust-mb) * 125 / 170 + 30px) 0 0;
    background-position: center top;
    background-size: var(--office-size-lead-illust-mb) auto;
    font-size: var(--office-font-subtext);
  }
}