@charset "utf-8";
/*==========================================
 BtoB LP の土台（/b2b 以下の全ページで最初に読み込む。b2b/inc/assets.php）

 - LP は本体の common/css/base.css を読み込まない。LP で使う本体のスタイルを、ここに写して独立させている
   （2026-10-30、main 6e76eb0 の base.css から、LP の全ページ・各状態で一致したルールと、
    フォーム・診断の部品のルールだけを、元の記述と順番のまま取り出した）
 - 内容：デザイントークン（:root）・Web フォント・要素の基本・ページの外枠（#mainContents / .article-shell）・
   フォームの部品（.contactTyp01/02・.downloadTyp01・MW WP Form）・資料請求の「資料内容」・セルフチェック（.diagnose-*）
 - 本体の base.css を変えても LP には反映されない（逆も同じ）。LP の見た目はこのファイルと lp.css で管理する
 - 診断・フォーム・外枠の変更はこのファイルで、LP トップ・ヘッダー・フッターの変更は lp.css で行う
===========================================*/

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

html {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 62.5%;
  font-weight: 300;
}

@media only screen and (max-width: 767px) {
  html {
    font-size: 62.5%;
  }
}

a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

a { outline: none; text-decoration: none; }

a:link    { color: var(--color-text); text-decoration: none; }

a:visited { color: var(--color-text); text-decoration: underline; }

a:hover   { color: var(--color-text); text-decoration: underline; }

a:active  { color: var(--color-text); text-decoration: underline; }

html {
  background: var(--color-white);
  overflow: auto;
}

html, body { margin:0; padding:0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

p {
  margin: 0;
}

:root {
  /* --- section spacing tokens --- */
  --space-section: 100px;           /* 基本セクション間余白 */
  --space-section-sp: 50px;
  --space-section-lg: 120px;        /* 重いセクション区切り */
  --space-section-lg-sp: 80px;     /* 予約トークン：現在未使用。section-lg を持つ要素のSP対応時に使用する */
  --space-section-inner: 90px;      /* セクション内上余白（padding-top） */
  --space-section-inner-sp: 40px;
  --space-section-emphasis: 100px;  /* CTA・重要導線前の強調余白 */
  --space-section-emphasis-sp: 70px;

  --space-footer-utility-top: 65px;     /* フッターユーティリティ上余白 */
  --space-footer-utility-top-sp: 50px;

  /* --- color base layer（raw values） --- */
  --color-white:      #ffffff;
  --color-offwhite:      #f4f4f1;
  --color-gray-950:   #1a1a1a;
  --color-gray-700:   #484848;
  --color-gray-500:   #999999;   /* #949495 を吸収（差: 4/255） */
  --color-gray-300:   #cccccc;
  --color-gray-200:   #eeeeee;
  --color-gray-100:   #f4f4f4;
  --color-cyan:   #00B4D8;   /* ブランドシアン（#00ABD3 / #37ab86 / #4dbc92 を統合） */
  --color-red:    #cc0000;
  /* --- color semantic layer（base 参照） --- */
  --color-text:          var(--color-gray-950);   /* 本文・リンク・黒系（#333/#222/#000 を統合） */
  --color-text-muted:    var(--color-gray-500);   /* 補助テキスト（#999/#aaa/#bbb/#555 を統合） */
  --color-brand:         var(--color-cyan);   /* ブランドブルー */
  --color-brand-hover:   var(--color-cyan);
  --color-ui-dark:       var(--color-gray-700);   /* ボタン・濃いUI（#505050/#555 を統合） */
  --color-ui-mid:        var(--color-gray-500);   /* フッター・ナビ背景（#787878 を統合） */
  --color-error:         var(--color-red);    /* エラー文字色（#B70000/#C80C1A を統合） */
  --color-accent-cv:        var(--color-cyan);
  --color-accent-cv-border: var(--color-cyan);

  /* --- radius tokens --- */
  --radius-sm: 3px;   /* フォーム・小要素（4px を吸収） */
  /* --card-radius: 8px 定義済み（カード・ボタン共通、6px を吸収） */

  /* --- card spacing tokens --- */
  --card-padding-x: 25px;
  --card-space-top: 20px;       /* img → ラベル/見出し */
  --card-space-between: 15px;   /* ラベル → 本文 */
  --card-space-bottom: 25px;    /* 本文 → カード下端 */
  --card-body-padding-top-no-title: 20px;   /* c-card-tile--no-title: img直後p上余白 */
  --card-padding-y: 10px;

  --card-padding-x-sp: 20px;
  --card-space-top-sp: 20px;
  --card-space-between-sp: 10px;
  --card-space-bottom-sp: 20px;
  --card-body-padding-top-no-title-sp: 20px;

  --card-radius: 8px;
  --card-shadow: 3px 3px 6px 3px rgba(0, 0, 0, 0.1);
  --card-bg: var(--color-white);

  /* タイポグラフィ変数 */
  --font-body: 1.8rem;
  --font-body-sp: 1.4rem;
  --font-body-small: 1.4rem;
  --font-body-tag: 1.2rem;
  --font-body-large: 2.2rem;
  --font-body-large-sp: 2.0rem;
  --font-body-detail: 1.5rem;   /* 詳細ページ・長文コンテンツ本文 */
  --font-body-lead: 2.0rem;    /* リード文（本文と見出しの中間） */

  --font-ui: 1.6rem;
  --font-ui-small: 1.4rem;
  --font-ui-large: 1.8rem; /* 主要導線・グローバルナビ・大UI要素 */
  --font-caption-small: 1.2rem; /* SP注釈・補助ラベル */
  --font-caption-small-sp: 1.2rem ; 
  --font-caption: 1.3rem;
  --font-caption-xs: 1.0rem;    /* 極小ラベル（会社名・補助情報など） */
  --font-heading-emphasis: 3.0rem;

  --font-button-cta: 2.3rem;
  --font-button-cta-sp: 2.0rem;

  --font-heading-page: 3.0rem;
  --font-heading-section: 1.7rem;
  --font-heading-card: 1.8rem;
  --font-heading-sub: 2.1rem;   /* ページ内サブタイトル（非Poppins） */
  --font-heading-detail: 1.9rem; /* 詳細ページ内 h2 相当 */
  --font-display-service: 2.8rem;    /* サービスページ英語タイトル（Poppins） */
  --font-display-service-sp: 2.0rem;

  --lh-body: 2.0;
  --lh-body-tight: 1.6;
  --lh-body-detail: 1.85;       /* 詳細本文の行間 */
  --lh-ui: 1.4;
  --lh-ui-tight: 1.2; /* Poppins英字見出し・SP字詰め */
  --lh-body-relaxed: 1.75; /* 詳細コンテンツの段落・定義リスト */
  --lh-body-loose: 1.7; /* SPカード本文 */
  --lh-compact: 1.5;            /* 締めた行間（UI補足・小見出し） */
  --lh-loose: 2.2;              /* 広めの行間（サイドバー・説明文） */

  --lh-note: 2.0; /* works補足テキスト（情報リスト） */

  /* --- 資料請求 2ステップ：下部固定「次へ」バー --- */
  --download-next-bar-height: 100px;    /* バーの高さ（ページ下部の余白にも使う） */
  --download-next-bar-height-sp: 80px;
  --download-summary-thumb: 270px;      /* 資料が1種類のページ（/b2b/download）：「資料内容」のサムネイルの幅 */
  --download-summary-thumb-sp: 270px;
  --download-summary-text-start: 302px; /* 右の列（資料名・サムネイル）の左端：下の表の入力欄の左端（th 300px ＋ 表のセル間隔 2px。左のセル間隔 2px は padding で寄せる） */
  --download-next-button-height: 60px;  /* 「入力内容の確認」ボタンと揃える */
  --download-next-button-height-sp: 50px;
  --download-next-bar-bg: rgba(255, 255, 255, 0.9); /* 透明度付き（白90%）：背後のカードを透かして固定バーと分かるようにする */
  --download-back-button-height: 45px;     /* 「資料を選び直す」ボタン（PC/SP共通） */
  --download-back-button-padding-x: 30px;  /* 同ボタンの文字の左右余白 */

  /* --- ブランディング・セルフチェック（/diagnose） --- */
  --diagnose-width: 800px;            /* お問い合わせフォーム（.contactTyp02）と同じ本文幅 */
  --diagnose-button-height: 68px;     /* LP（/b2b）の主CTA・/b2b のフォームの送信ボタンと同じ天地（lp.css の --lp-button-h） */
  --diagnose-button-height-sp: 56px;
  --diagnose-input-height: 60px;      /* 依頼フォームの1行の入力欄の高さ（ボタンとは別） */
  --diagnose-option-min-height: 48px; /* 選択肢のタップ領域（全文がタップ対象） */
  --diagnose-focus-ring: 3px solid var(--color-brand);
  --diagnose-header-offset: 80px;     /* 固定ヘッダー（スクロール後の header.down）の高さ。フォーカスした設問をその下に出す */
  --diagnose-header-offset-sp: 54px;
  --diagnose-question-text-scale: 1.2; /* PC の設問画面の文字を 120% にする（SP は等倍） */
  --diagnose-brand-tint: rgba(0, 180, 216, 0.1); /* 薄いCIブルー（--color-cyan の10%）：選択肢のロールオーバー・結果下の導線の背景 */
  --diagnose-result-radius: 5px;      /* 結果の枠の角R */
  --diagnose-cta-gap: 60px;           /* 結果の枠と「より詳しい『ブランド診断』を受け取る」の導線の間（v2・tests/SAMPLE_CTA.png） */
  --diagnose-cta-gap-sp: 50px;
  --diagnose-request-fade: 0.3s;      /* 申し込みの入力画面・確認画面の切り替えのフェードイン */
  --diagnose-teaser-blur: 7px;        /* v2 の優先する取り組み例の2件目以降のぼかし（見た目の演出。tests/SAMPLE_CTA.png） */
  --diagnose-teaser-bleed-x: 72px;    /* ぼかしを結果の枠の外まで広げる幅：枠の左右の余白 60px＋枠線 2px＋にじみ 10px（.diagnose-result_Main の padding と合わせる） */
  --diagnose-teaser-bleed-x-sp: 42px; /* SP：余白 30px＋枠線 2px＋にじみ 10px */
  --diagnose-teaser-bleed-bottom: 62px;    /* 枠の下の余白 50px＋枠線 2px＋にじみ 10px */
  --diagnose-teaser-bleed-bottom-sp: 42px; /* SP：余白 30px＋枠線 2px＋にじみ 10px */
  --diagnose-result-heading: var(--font-heading-page);  /* 結果の大見出し：冒頭の見出し（.diagnose-check_Title）と同じ大きさ */
  --diagnose-result-heading-sp: var(--font-body-large-sp);
  --diagnose-result-subheading: var(--font-heading-sub);   /* 結果の小見出し（必要なこと。大見出しの下） */
  --diagnose-result-subheading-sp: var(--font-ui-large);
  --diagnose-score-pie: 200px;          /* ブランディング度の円の直径 */
  --diagnose-score-pie-sp: 140px;
  --diagnose-score-value: 4.8rem;       /* ブランディング度の数字（デザインサンプルの大きさ） */
  --diagnose-score-value-sp: 3.0rem;
  /* セルフチェックv2（10問・5軸。/b2b/diagnose の標準）の結果 */
  --diagnose-radar-width: 340px;        /* レーダーチャートの幅（viewBox 320×300 を少し大きく） */
  --diagnose-radar-width-sp: 280px;
  --diagnose-index-value: 4.8rem;       /* 総合指数の数字（現行版のブランディング度の数字と同じ大きさ） */
  --diagnose-index-value-sp: 3.6rem;
  --diagnose-axes-bar-height: 8px;      /* 5軸の指数の横棒の太さ */
  --diagnose-v2-action-name: 2.45rem;   /* v2 の取り組み名：--font-heading-sub（2.1rem）の約17%増。説明文より目立たせる（2026-10-31 指示：15〜20%増） */
  --diagnose-v2-action-name-sp: 2.1rem; /* SP：--font-ui-large（1.8rem）の約17%増 */
}

ul, li {
  list-style: none;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
  display: block;
  margin: 0;
  padding: 0;
  background: transparent;
}

body {
  overflow: hidden;
	min-width: 1250px;
  -webkit-text-size-adjust: 100%;
  font-size: var(--font-body);
  line-height: var(--lh-body);
}

@media only screen and (max-width: 1266px) {
  body {
    overflow: auto;
  	min-width: auto;
  }
}

@media only screen and (max-width: 767px) {
  body {
  	min-width: auto;
    font-size: var(--font-body-sp);
  }
}

header {
  position: fixed;
  z-index: 1000;
  top: 0;
  width: 100%;
  height: 120px;
  background-color: var(--color-white);
  transition: all 0.3s ease;
}

@media only screen and (max-width: 767px) {
  header {
    position: fixed;
    top: 0;
    height: 54px;
  }
}

footer {
  width: 100%;
  margin: var(--space-section) 0 0;
  padding: var(--space-section-inner) 25px 0;
  box-sizing: border-box;
  background-color: var(--color-ui-mid);
}

@media only screen and (max-width: 1266px) {
  footer {
    width: 100%;
    margin: var(--space-section) 0 0;
    padding: var(--space-section-inner) 25px 0;
    box-sizing: border-box;
    background-color: var(--color-ui-mid);
  }
}

@media only screen and (max-width: 767px) {
  footer {
    width: 100%;
    margin: var(--space-section-sp) 0 0;
    padding: var(--space-section-inner-sp) 0 0 !important;
  }
}

#mainContents {
  min-height: 500px;
  margin-top: 120px;
}

#mainContents.pt_0 {
  margin-top: 0;
}

#mainContents section.w_full {
  width: 100%;
  margin: 0;
}

@media only screen and (max-width: 767px) {
  #mainContents {
    min-height: 500px;
    margin-top: 54px;
  }
}

#mainContents section:has(> .service-card-grid) {
  padding-top: 90px;
}

@media only screen and (max-width: 767px) {
  #mainContents section:has(> .service-card-grid) {
    padding-top: 45px;
  }
}

#mainContents .article-shell {
  position: relative;
  width: 1200px;
  margin: 40px auto 0;
  padding: 100px 0 100px;
  background-color: var(--color-white);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

#mainContents .article-shell_Title {
  position: relative;
  width: 800px;
  margin: 0 auto clamp(20px, 5vw, 30px);
}

#mainContents .article-shell_Title p {
  /*position: absolute;
  top: -20;*/
  font-size: var(--font-body-small);
}

#mainContents .article-shell_Title p + p {
  margin-top: 10px;
}

#mainContents .article-shell .article-shell_Inner {
  width: 800px;
  margin: 0 auto;
  padding: 20px 0 20px;
}

#mainContents .article-shell .article-shell_Inner blockquote {
  position: relative;
  margin: 30px 0 30px;
  padding: 35px 35px 15px;
  border-left: 5px solid var(--color-white);
  box-sizing: border-box;
  background-color: var(--color-white);
}

#mainContents .article-shell .article-shell_Sns {
  position: fixed;
  right: 15px;
  top: 120px;
}

#mainContents .article-shell .article-shell_Sns a {
  display: block;
}

#mainContents .article-shell .article-shell_Sns a img {
  width: 48px;
  height: 48px;
}

#mainContents .article-shell .article-shell_bottom {
  position: relative;
  width: 660px;
  margin: 100px auto 0;
}

#mainContents .article-shell .article-shell_bottom .article-shell_link01 {
  position: absolute;
  right: 0;
  top: -10px;
}

#mainContents .article-shell .article-shell_bottom .article-shell_link01 a {
  font-size: var(--font-body-small); /* UI導線：記事下部の一覧・戻るリンク */
  text-decoration: underline;
  color: var(--color-text);
}

#mainContents .article-shell .article-shell_bottom .article-shell_link01 a:hover {
  opacity: 0.7;
}

#mainContents .article-shell .article-shell_bottom .article-shell_List {
  padding: 30px 0 0;
}

#mainContents .article-shell .article-shell_bottom .article-shell_List ul {
  padding: 0;
}

#mainContents .article-shell .article-shell_bottom .article-shell_List ul li {
  padding: 10px 0;
  border-bottom: 1px dotted var(--color-ui-mid);
}

#mainContents .article-shell .article-shell_bottom .article-shell_List ul li:last-child {
  padding: 10px 0 0;
  border-bottom: none;
}

#mainContents .article-shell .article-shell_bottom .article-shell_List ul li a {
  font-size: var(--font-body-small); /* 関連記事リンク：本文寄り読み導線 */
  line-height: var(--lh-body-tight);
  color: var(--color-text);
}

#mainContents .article-shell .article-shell_bottom .article-shell_List ul li a br {
display: none;
}

@media only screen and (max-width: 767px) {
  #mainContents .article-shell {
    width: 100%;
    margin: 15px 0;
    padding: 60px 0 80px;
  }
  #mainContents .article-shell_Title {
    width: 90%;
  }
  #mainContents .article-shell_Title p {
    /*top: 40px;*/
    font-size: var(--font-caption);
  }
  #mainContents .article-shell .article-shell_Inner {
    width: 90%;
    padding: 10px 0;
  }
  #mainContents .article-shell .article-shell_Sns {
    position: static;
    display: flex;
    justify-content: center;
  }
  #mainContents .article-shell .article-shell_bottom {
    width: 90%;
    margin: 50px auto;
  }
  #mainContents .article-shell .article-shell_bottom .article-shell_List {
    padding: 30px 0 0;
  }
  #mainContents .article-shell .article-shell_bottom .article-shell_List ul li {
    padding: 0 0 15px;
  }
  #mainContents .article-shell .article-shell_bottom .article-shell_List ul li a {
    font-size: var(--font-body-small);
  }
  #mainContents .article-shell .article-shell_bottom .article-shell_link01 a {
    font-size: var(--font-body-tag);
  }
  #mainContents .article-shell_Inner .link01 {
    margin: 0 auto;
  }
}

#mainContents .article-shell_Inner .link01 {
  width: 200px;
  height: 50px;
  margin: 50px auto 0;
}

#mainContents .article-shell_Inner .link01 a {
  position: relative;
  display: block;
  width: 200px;
  height: 50px;
  padding: 10px 0 0;
  box-sizing: border-box;
  background-color: var(--color-ui-dark);
  font-size: var(--font-ui);
  color: var(--color-white);
  text-align: center;
  transition: all 0.3s;
}

#mainContents .article-shell_Inner .link01 a::before {
  position: absolute;
  left: 16px;
  top: 17px;
  width: 9px;
  height: 18px;
  background-image: url("../img/icon02.svg");
  background-size: 100% 100%;
  content: "";
}

#mainContents .article-shell_Inner .link01 a:hover {
  text-decoration: none;
  opacity: 0.7;
  background-color: var(--color-brand);
  transition: all 0.3s;
}

.article-shell_Inner--works .detail__main_cont > p {
  padding-bottom:30px;
}

#mainContents .contactTyp01 {
  width: 800px;
  margin: 0 auto;
  padding: 0 0 70px;
}

#mainContents .contactTyp01 h1 {
  padding: 0 0 50px;
  font-size: 4.0rem; /* exception: ContactページH1固定 */
  font-weight: 700;
  text-align: center;
  color: var(--color-gray-700);
  line-height: var(--lh-ui);
}

#mainContents .contactTyp01 h2 {
  padding: 40px 0 10px;
  font-size: var(--font-heading-card);
  font-weight: 700;
}

#mainContents .contactTyp01 p {
  font-size: var(--font-body);
  line-height: var(--lh-body);
}

#mainContents .contactTyp01 .textBox {
  width: 100%;
  margin: 30px 0 0;
  padding: 20px 25px;
  border: 5px solid var(--color-gray-500);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#mainContents .contactTyp01 .textBox .column {
  width: 47%
}

#mainContents .contactTyp01 .textBox .column p {
  font-size: var(--font-body-small);
  line-height: var(--lh-body);
}

#mainContents .contactTyp01 .link01 {
  width: 235px;
  height: 60px;
  margin: 50px auto 0;
}

#mainContents .contactTyp01 .link01 a {
  display: block;
  width: 235px;
  height: 60px;
  padding: 13px 0 0;
  box-sizing: border-box;
  background-color: var(--color-brand);
  box-shadow: var(--card-shadow);
  font-size: var(--font-ui);
  color: var(--color-white);
  text-align: center;
  transition: all 0.3s;
}

#mainContents .contactTyp01 .link01 a:hover {
  text-decoration: none;
  opacity: 0.7;
  transition: all 0.3s;
}

@media only screen and (max-width: 767px) {
  #mainContents .contactTyp01 {
    width: calc(100% - 40px);
    padding: 20px 0;
  }
  #mainContents .contactTyp01 h1 {
    font-size: 3.6rem; /* exception: ContactページH1固定SP */
    line-height: var(--lh-body-tight);
  }
  #mainContents .contactTyp01 p {
    font-size: var(--font-body-small);
    line-height: var(--lh-body);
  }
  #mainContents .contactTyp01 .textBox {
    margin: 20px 0 0;
    padding: 20px 20px 0;
  }
  #mainContents .contactTyp01 .textBox .column {
    width: 100%;
    padding: 0 0 20px;
  }
}

#mainContents .contactTyp02 {
  width: 800px;
  margin: 0 auto;
  padding: 0 0 50px;
}

#mainContents .contactTyp02 h2 {
  padding: 0 0 40px;
  font-size: 2.6rem; /* exception: Contact h2固定 */
  font-weight: 700;
}

#mainContents .contactTyp02 h3 {
  padding: 0 0 5px;
  font-size: var(--font-heading-card);
  font-weight: 700;
  line-height: var(--lh-ui);
}

#mainContents .contactTyp02 p {
  font-size: var(--font-body);
  font-weight: 300;
}

#mainContents .contactTyp02 td p {
  font-size: var(--font-body-detail);
  margin: 10px 0;
}

#mainContents .contactTyp02 p a {
  text-decoration: underline;
  color: var(--color-text);
}

#mainContents .contactTyp02 p a:hover {
  opacity: 0.7;
}

#mainContents .contactTyp02 .download_Select {
  margin: 30px 0 0;
  padding: 30px 0 0;
  border-top: 1px solid var(--color-gray-500);
}

#mainContents .contactTyp02 .checkBox02 {
  padding: 20px 0 30px 0;
  font-size: var(--font-ui);
  font-weight: 500;
  line-height: var(--lh-ui);
}

#mainContents .contactTyp02 .checkBox02 span {
  padding: 0 0 15px;
}

#mainContents .contactTyp02 .checkBox02 span.error {
  padding: 5px 0 0;
  font-size: var(--font-ui);
  color: var(--color-error);
  display: block;
}

#mainContents .contactTyp02 .checkBox02 input[type="checkbox"] {
  margin: -2px 7px 0 0;
}

#mainContents .contactTyp02 table {
  width: 100%;
  margin: 0 0 15px;
  border-bottom: 1px solid var(--color-gray-500);
}

#mainContents .contactTyp02 table th {
  border-top: 1px solid var(--color-gray-300);
  position: relative;
  width: 300px;
  padding: 20px 0;
  font-size: var(--font-body);
  font-weight: 700;
  text-align: left;
  vertical-align: middle;
  line-height: var(--lh-body);
}

#mainContents .contactTyp02 table th span {
  margin: 0 0 0 10px;
  padding: 2px 15px 3px;
  border-radius: 30px;
  background-color: #E17E5E; /* exception: お問い合わせフォーム「必須」バッジ・オレンジアクセント */
  font-size: var(--font-body-small);
  font-weight: 700;
  color: var(--color-white);
}

#mainContents .contactTyp02 table td {
  border-top: 1px solid var(--color-gray-300);
  padding: 10px 0 10px;
  font-size: var(--font-body);
  line-height: var(--lh-body);
  vertical-align: middle;
  /* font-weight: 700; */
}

#mainContents .contactTyp02 table td span.mwform-checkbox-field label,
#mainContents .contactTyp02 table td span.mwform-radio-field label {
  display: block;
  padding: 0 0 10px;
}

#mainContents .contactTyp02 table td input[type="text"],
#mainContents .contactTyp02 table td input[type="email"],
#mainContents .contactTyp02 table td input[type="tel"] {
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 60px;
  padding: 0 20px;
  border: 1px solid var(--color-gray-500);
  background-color: var(--color-gray-100);
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  font-size: var(--font-ui);
  font-weight: 400;
}

#mainContents .contactTyp02 table td input[type="text"]::placeholder,
#mainContents .contactTyp02 table td input[type="email"]::placeholder,
#mainContents .contactTyp02 table td input[type="tel"]::placeholder {
  color: var(--color-gray-500);
}

#mainContents .contactTyp02 table td .formBox {
  position: relative;
}

#mainContents .contactTyp02 table td .formBox::after {
  position: absolute;
  right: 20px;
  top: 27px;
  width: 17px;
  height: 9px;
  background-image: url("../img/icon07.svg");
  background-size: cover;
  content: "";
}

#mainContents .contactTyp02 table td select {
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 60px;
  padding: 0 20px;
  border: 1px solid var(--color-gray-500);
  background-color: var(--color-gray-100);
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  font-size: var(--font-body-large);
  font-weight: 700;
}

#mainContents .contactTyp02 table td select::placeholder {
  color: var(--color-gray-500);
}

#mainContents .contactTyp02 table td textarea {
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 210px;
  padding: 10px 20px;
  border: 1px solid var(--color-gray-500);
  background-color: var(--color-gray-100);
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  resize: none;
  font-size: var(--font-ui);
  font-weight: 400;
  line-height: var(--lh-body-tight);
}

#mainContents .contactTyp02 table td textarea.typ02 {
  height: 100px;
}

#mainContents .contactTyp02 table td textarea::placeholder {
  color: var(--color-gray-500);
}

#mainContents .contactTyp02 .checkBox {
  padding: 20px 0 30px 220px;
}

#mainContents .contactTyp02 .mwform-checkbox-field input[type="checkbox"],
#mainContents .contactTyp02 .mwform-radio-field input[type="radio"]  {
  transform: scale(1.6);
  margin-right: 10px;
}

#mainContents .contactTyp02 .mwform-checkbox-field label,
#mainContents .contactTyp02 .mwform-checkbox-field-text {
  font-size: var(--font-body);
}

#mainContents .contactTyp02 .checkBox label {
  font-size: var(--font-caption);
  line-height: var(--lh-ui);
}

#mainContents .contactTyp02 .checkBox input[type="checkbox"] {
  margin: -2px 7px 0 0;
}

#mainContents .contactTyp02 .submitArea {
  width: 235px;
  margin: 0 auto;
  padding: 40px 0 0;
}

#mainContents .contactTyp02 .submitArea input[type="submit"] {
  -webkit-appearance: none;
  width: 100%;
  height: 60px;
  background-color: var(--color-brand-hover);
  border: none;
  font-size: 2.0rem; /* exception: お問い合わせ送信ボタン視認サイズ固定 */
  color: var(--color-white);
  cursor: pointer;
  box-shadow: var(--card-shadow);
}

#mainContents .contactTyp02 .submitArea input[type="submit"]:hover {
  text-decoration: none;
  opacity: 0.7;
}

#mainContents .contactTyp02 input:focus,
#mainContents .contactTyp02 select:focus,
#mainContents .contactTyp02 textarea:focus {
  outline: none;
}

@media only screen and (max-width: 767px) {
  #mainContents .contactTyp02 {
    width: calc(100% - 40px);
  }
  #mainContents .contactTyp02 h2 {
    padding: 40px 0 20px;
    font-size: 2.3rem; /* exception: Contact h2固定SP */
  }
  #mainContents .contactTyp02 p {
    font-size: var(--font-body-small);
  }
  #mainContents .contactTyp02 .download_Select {
    margin: 30px 0 0;
    padding: 30px 0 0;
    border-top: 1px solid var(--color-gray-500);
  }
  #mainContents .contactTyp02 .checkBox02 {
    padding: 20px 0 30px 0;
  }
  #mainContents .contactTyp02 .checkBox02 span {
    padding: 0 0 10px;
    font-size: var(--font-body-small);
  }
  #mainContents .contactTyp02 table th {
    display: block;
    width: 100%;
    padding: 10px 0 10px;
    border-top: 1px solid var(--color-gray-300);
  }
  #mainContents .contactTyp02 table td {
    display: block;
    width: 100%;
    padding: 10px 0 10px;
    border-top: none;
  }
  #mainContents .contactTyp02 .checkBox {
    padding: 20px 0 30px 0;
  }
}

#mainContents .mw_wp_form_preview .preview_None {
  display: none;
}

#mainContents .mw_wp_form_input .input_None {
  display: none;
}

#mainContents .mw_wp_form_preview .contactTyp01 {
  padding: 70px 0 20px;
}

#mainContents .mw_wp_form .error {
  padding: 5px 0 0;
  font-size: var(--font-ui);
  color: var(--color-error);
  display: block;
}

#mainContents .mw_wp_form_preview .contactTyp02 table {
  /*border-top: 1px solid var(--color-gray-500);*/
}

#mainContents .mw_wp_form_preview .contactTyp02 table th span {
  display: none;
}

#mainContents .mw_wp_form_preview .contactTyp02 table tr {
  border-bottom: 1px solid var(--color-gray-500);
}

#mainContents .mw_wp_form_preview .contactTyp02 table tr th,
#mainContents .mw_wp_form_preview .contactTyp02 table tr td {
  padding: 20px 0;
  font-size: var(--font-body);
  vertical-align: middle;
  line-height: var(--lh-body-tight);
}

#mainContents .mw_wp_form_preview .contactTyp02 table td .formBox::after {
  display: none;
}

#mainContents .contactTyp01 h3 {
  margin: 60px 0 0;
  padding: 20px 0;
  border-top: 1px solid var(--color-gray-500);
  font-size: var(--font-heading-card);
  font-weight: 700;
}

@media only screen and (max-width: 767px) {
  #mainContents .mw_wp_form_preview .contactTyp02 table tr th {
    padding: 20px 0 10px;
  }
  #mainContents .mw_wp_form_preview .contactTyp02 table tr td {
    padding: 0 0 20px;
  }
}

#mainContents .utilityLayout01 .textBox {
  padding: 0 0 0 40px;
}

@media only screen and (max-width: 767px) {
  #mainContents .utilityLayout01 .textBox {
    padding: 0 0 0 20px;
  }
}

#mainContents .downloadTyp01 {
  width: 1000px; /* 資料カード（.columnBox）の幅。リード文は p 側で 800px に絞る */
  margin: 0 auto;
  padding: 0 0 70px;
}

#mainContents .downloadTyp01 h1 {
  font-size: 4.0rem; /* exception: ContactページH1固定 */
  font-weight: 700;
  text-align: center;
  color: var(--color-gray-700);
  line-height: var(--lh-ui);
}

#mainContents .downloadTyp01 h2 {
  padding: 20px 0 0;
  font-family: 'Poppins', sans-serif;
  font-size: 6.4rem; /* exception: DownloadページH1固定 */
  font-weight: 700;
  text-align: center;
  color: var(--color-gray-700);
}

#mainContents .downloadTyp01 p {
  width: 800px;
  margin: 0 auto;
  padding: 40px 0 0;
  font-size: var(--font-body);
  font-weight: 500;
}

#mainContents .downloadTyp01 .columnBox {
  width: 1000px;
  margin: 0 auto;
  padding: 70px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 50px;
}

#mainContents .downloadTyp01 .columnBox .column {
  min-width: 0;
  padding: 0 0 50px;
}

#mainContents .downloadTyp01 .columnBox .column img {
  width: 100%;
  height: auto;
}

#mainContents .downloadTyp01 .columnBox .column h3 {
  padding: 12px 0 0 12px;
  font-size: var(--font-ui);
  font-weight: 700;
  line-height: var(--lh-body-tight);
  border-left: 2px solid var(--color-gray-300);
}

#mainContents .downloadTyp01 .columnBox .column p {
  width: auto;
  padding: 10px 0 0 12px;
  font-size: var(--font-caption);
  font-weight: 500;
  line-height: var(--lh-body-loose);
  border-left: 2px solid var(--color-gray-300);
}

#mainContents .downloadTyp01 .pageDownLink {
  display: none;
}

#mainContents .article-shell:has(.download-materials_Notice) .contactTyp02 {
  display: none;
}

@media only screen and (max-width: 767px) {
  #mainContents .downloadTyp01 {
    width: calc(100% - 40px);
    padding: 20px 0 0;
  }
  #mainContents .downloadTyp01 h1 {
    font-size: 3.6rem; /* exception: ContactページH1固定SP */
    line-height: var(--lh-body-tight);
  }
  #mainContents .downloadTyp01 h2 {
    padding: 20px 0 0;
    font-size: 5.6rem; /* exception: Downloadページ大数字SP */
  }
  #mainContents .downloadTyp01 p {
    width: 100%;
    font-size: var(--font-body-sp);
  }
  #mainContents .downloadTyp01 .columnBox {
    width: 100%;
    padding: 40px 0 0;
    grid-template-columns: 1fr;
  }
  #mainContents .downloadTyp01 .columnBox .column {
    width: 100%;
    padding: 0 0 35px;
  }
  #mainContents .downloadTyp01 .columnBox .column img {
    width: 100%;
  }
  #mainContents .downloadTyp01 .columnBox .column h3 {
    padding: 15px 0 0 15px;
    font-size: var(--font-heading-card);
  }
  #mainContents .downloadTyp01 .columnBox .column p {
    padding: 10px 0 0 15px;
    font-size: var(--font-caption-small);
  }
  #mainContents .downloadTyp01 .pageDownLink {
    display: block;
    position: fixed;
    z-index: 100;
    right: 7px;
    bottom: 75px;
    width: 80px;
    height: 80px;
  }
  #mainContents .downloadTyp01 .pageDownLink img {
    width: 80px;
    height: 80px;
  }
}

body[data-download-step="1"] #mainContents .contactTyp02,
body[data-download-step="2"] #mainContents .downloadTyp01,
body[data-download-step] #mainContents .downloadTyp01 .pageDownLink,
body[data-download-step] #mainContents .contactTyp02 #p01,
body[data-download-step] #mainContents .contactTyp02 .checkBox02 {
  display: none;
}

body[data-download-step="1"] {
  padding-bottom: calc(var(--download-next-bar-height) + env(safe-area-inset-bottom));
}

body[data-download-single] #mainContents .downloadTyp01 {
  display: block;
  padding-bottom: 0; /* 見出しと説明文の間を /contact と同じ（h1 の下の余白だけ）にする */
}

body[data-download-single] #mainContents .downloadTyp01 > :not(h1),
body[data-download-single] #mainContents .contactTyp02 > h2 {
  display: none;
}

body[data-download-single] #mainContents .downloadTyp01 h1 {
  padding: 0 0 50px;
}

#mainContents .downloadTyp01 .download-step_Card {
  cursor: pointer;
}

#mainContents .downloadTyp01 .columnBox .download-step_CardHead {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0 0 12px;
  border-left: 2px solid var(--color-gray-300);
}

#mainContents .downloadTyp01 .columnBox .download-step_CardHead h3 {
  padding: 0;
  border-left: none;
}

#mainContents .downloadTyp01 .download-step_CardHead .mwform-checkbox-field {
  flex-shrink: 0;
}

#mainContents .downloadTyp01 .download-step_CardHead input[type="checkbox"] {
  width: 20px;  /* exception: 固定サイズ（カード選択用チェックボックス） */
  height: 20px;
  margin: 3px 0 0; /* exception: 見出し1行目の中央に揃える */
  accent-color: var(--color-brand);
  cursor: pointer;
}

#mainContents .downloadTyp01 .download-step_CardHead .mwform-checkbox-field-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#mainContents .downloadTyp01 .columnBox .download-step_Card.is-checked .download-step_CardHead,
#mainContents .downloadTyp01 .columnBox .download-step_Card.is-checked p {
  border-left-color: var(--color-brand);
}

#mainContents .downloadTyp01 .download-step_Error {
  padding: 30px 0 0;
  text-align: center;
  color: var(--color-error);
}

body[data-download-step="1"] .download-next-bar {
  display: block;
  position: fixed;
  z-index: 99; /* exception: ドロワー（z-index 100〜）より下、ページ内要素より上 */
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--download-next-bar-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
  background-color: var(--download-next-bar-bg);
  border-top: 1px solid var(--color-gray-300);
}

#mainContents .contactTyp02 .download-step_Summary {
  padding: 0 0 30px;
}

#mainContents .contactTyp02 .download-step_SummaryTitle:focus {
  outline: none;
}

#mainContents .contactTyp02 .download-step_SummaryList {
  padding: 15px 0 20px;
  font-size: var(--font-ui);
  font-weight: 500;
  line-height: var(--lh-ui);
}

#mainContents .contactTyp02 .download-step_SummaryList li {
  padding: 0 0 10px 1em;
  text-indent: -1em;
}

#mainContents .contactTyp02 .download-step_SummaryList li::before {
  content: "・";
}

#mainContents .contactTyp02 .download-step_Summary--single {
  display: grid;
  grid-template-columns: var(--download-summary-text-start) 1fr;
  align-items: start;
  padding-left: 2px; /* exception: 下の表のセル間隔（border-spacing 2px）の分だけ右へ寄せ、「お名前」の列と左端をそろえる */
}

#mainContents .contactTyp02 .download-step_Summary--single .download-step_SummaryList {
  margin: 0;
  padding: 0;
}

#mainContents .contactTyp02 .download-step_Summary--single {
  padding-bottom: 28px; /* exception: 30px から、下の表のセル間隔（border-spacing 2px）を引いた値 */
}

#mainContents .contactTyp02 .download-step_SummaryList li.download-step_SummaryItem {
  padding: 0;
  text-indent: 0;
}

#mainContents .contactTyp02 .download-step_SummaryList li.download-step_SummaryItem::before {
  content: none;
}

#mainContents .contactTyp02 .download-step_SummaryName {
  display: block;
  font-size: var(--font-heading-card); /* 左の「資料内容」（.contactTyp02 h3）と同じ文字 */
  font-weight: 700;
  line-height: var(--lh-ui);
}

#mainContents .contactTyp02 .download-step_SummaryThumb {
  display: block;
  box-sizing: border-box;
  width: var(--download-summary-thumb);
  max-width: 100%;
  height: auto;
  margin-top: 15px;
  border: 1px solid var(--color-gray-200);
}

#mainContents .contactTyp02 .download-step_Back {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--download-back-button-height);
  margin: 0 auto;
  padding: 0 var(--download-back-button-padding-x);
  background-color: var(--color-brand);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-ui);
  font-weight: 700;
  line-height: var(--lh-ui);
  color: var(--color-white);
  cursor: pointer;
  transition: all 0.3s ease;
}

#mainContents .contactTyp02 .download-step_Back::before {
  content: "＜\00a0"; /* flex の子になると末尾の通常スペースは消えるため、ノーブレークスペースで半角空ける */
}

#mainContents .contactTyp02 .download-step_Back:hover {
  background-color: var(--color-brand-hover);
}

@media only screen and (max-width: 767px) {
  body[data-download-step="1"] {
    padding-bottom: calc(var(--download-next-bar-height-sp) + env(safe-area-inset-bottom));
  }
  #mainContents .downloadTyp01 .download-step_CardHead input[type="checkbox"] {
    margin: 4px 0 0; /* exception: SP見出し1行目の中央に揃える */
  }
  body[data-download-step="1"] .download-next-bar {
    height: calc(var(--download-next-bar-height-sp) + env(safe-area-inset-bottom));
  }
  #mainContents .contactTyp02 .download-step_SummaryList {
    font-size: var(--font-body-small);
  }
  #mainContents .contactTyp02 .download-step_Summary--single {
    grid-template-columns: 1fr;
  }
  #mainContents .contactTyp02 .download-step_Summary--single .download-step_SummaryList {
    margin-top: 10px;
  }
  #mainContents .contactTyp02 .download-step_SummaryThumb {
    width: var(--download-summary-thumb-sp);
    margin-top: 10px;
  }
}

#mainContents .diagnose-check {
  width: var(--diagnose-width);
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0 50px;
  color: var(--color-text);
}

#mainContents .diagnose-check [hidden] {
  display: none;
}

#mainContents .diagnose-check p {
  font-size: var(--font-ui);
  font-weight: 400;
  line-height: var(--lh-body-tight);
}

#mainContents .diagnose-check a {
  color: var(--color-text);
  text-decoration: underline;
}

#mainContents .diagnose-check :focus-visible {
  outline: var(--diagnose-focus-ring);
  outline-offset: 2px;
}

#mainContents .diagnose-check [tabindex="-1"]:focus {
  outline: none;
}

#mainContents .diagnose-check [tabindex="-1"],
#mainContents .diagnose-check input,
#mainContents .diagnose-check textarea {
  scroll-margin-top: calc(var(--diagnose-header-offset) + 20px); /* exception: ヘッダーとの間に少し余白を空ける */
}

#mainContents .diagnose-check_PageTitle {
  padding: 0 0 50px;
  font-size: 4.0rem; /* exception: /contact・/download のページ見出しと同じ大きさ */
  font-weight: 700;
  text-align: center;
  color: var(--color-brand);
  line-height: var(--lh-ui);
}

#mainContents .diagnose-check_Intro {
  padding: 50px 40px;
  border: 2px solid var(--color-brand); /* 導入部（見出し〜開始ボタン）をCIブルーの枠で囲む */
  border-radius: var(--card-radius);
  text-align: center;
}

#mainContents .diagnose-check_Title {
  margin: 0 0 20px;
  font-size: var(--font-heading-page);
  font-weight: 700;
  line-height: var(--lh-compact);
  text-wrap: balance;      /* 折り返したとき、最後の行に数文字だけ残らないようにする */
  word-break: auto-phrase; /* 語の途中（「見える／化」など）で改行しない。未対応のブラウザは通常の折り返し */
}

#mainContents .diagnose-check_Keep {
  white-space: nowrap;
}

#mainContents .diagnose-check p.diagnose-check_Note {
  margin: 0 0 30px;
  font-size: var(--font-body-lead); /* 導入部の注記（※登録不要…）は、見出しの下の説明文と同じ大きさ */
  color: var(--color-ui-dark);
  text-wrap: balance;
  word-break: auto-phrase;
}

#mainContents .diagnose-check p.diagnose-check_Guide {
  margin: 50px 0 0;
  font-weight: 700;
  color: var(--color-brand);
}

#mainContents .diagnose-check p.diagnose-check_Guide--sub {
  margin: 25px 0;
  font-size: var(--font-ui-small);
  font-weight: 400;
  color: var(--color-ui-dark);
}

#mainContents .diagnose-check p.diagnose-check_Progress {
  margin: 0 0 20px;
  padding: 8px 15px;
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  text-align: center;
  font-size: var(--font-ui);
  font-weight: 700;
  line-height: var(--lh-ui);
  color: var(--color-brand);
}

#mainContents .diagnose-check_Questions .diagnose-question_Title {
  margin: 15px 0 30px;
}

#mainContents .diagnose-check_Actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  padding: 30px 0 0;
}

#mainContents .diagnose-check_Button {
  -webkit-appearance: none;
  appearance: none;
  min-width: 235px; /* exception: 「入力内容の確認」ボタンと同幅 */
  min-height: var(--diagnose-button-height);
  padding: 10px 30px;
  background-color: var(--color-brand-hover);
  border: none;
  border-radius: var(--radius-sm); /* LP の主CTA と同じ角丸 */
  box-shadow: var(--card-shadow);
  font-size: var(--font-ui-large);
  font-weight: 700;
  line-height: var(--lh-ui);
  color: var(--color-white);
  cursor: pointer;
}

#mainContents .diagnose-check_Button:hover {
  opacity: 0.7;
}

#mainContents .diagnose-check_Button--sub {
  background-color: var(--color-white);
  border: 1px solid var(--color-ui-dark);
  box-shadow: none;
  color: var(--color-text);
}

#mainContents .diagnose-check_Button:disabled {
  background-color: var(--color-gray-300);
  box-shadow: none;
  color: var(--color-ui-dark);
  cursor: not-allowed;
  opacity: 1;
}

#mainContents .diagnose-check_ErrorSummary {
  margin: 0 0 20px;
  padding: 15px 20px;
  border: 2px solid var(--color-error);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
}

#mainContents .diagnose-check p.diagnose-check_ErrorTitle {
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--color-error);
}

#mainContents .diagnose-check_ErrorList li {
  padding: 0 0 5px;
  font-size: var(--font-ui);
  line-height: var(--lh-ui);
}

#mainContents .diagnose-question {
  margin: 0 0 30px;
  padding: 20px 25px 15px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--card-radius);
  background-color: var(--color-white);
}

#mainContents .diagnose-check_Questions .diagnose-question {
  border-color: var(--color-brand);
}

#mainContents .diagnose-question.is-error {
  border: 2px solid var(--color-error);
}

#mainContents .diagnose-question_Title {
  float: left; /* legend を枠線の上ではなく枠の内側に置く */
  width: 100%;
  margin: 0 0 15px;
  padding: 0;
  font-size: var(--font-heading-card);
  font-weight: 700;
  line-height: var(--lh-ui);
}

#mainContents .diagnose-question > :not(legend) {
  clear: both;
}

#mainContents .diagnose-question_Num {
  margin: 0 10px 0 0;
  color: var(--color-brand);
}

#mainContents .diagnose-question_Badge,
#mainContents .diagnose-request_Badge {
  display: inline-block;
  margin: 0 0 0 10px;
  padding: 2px 10px;
  border: 1px solid var(--color-ui-dark);
  border-radius: var(--radius-sm);
  font-size: var(--font-caption);
  font-weight: 700;
  line-height: var(--lh-ui);
  vertical-align: middle;
}

#mainContents .diagnose-question_Badge--optional,
#mainContents .diagnose-request_Badge--optional {
  border-color: var(--color-gray-500);
  font-weight: 400;
}

#mainContents .diagnose-check p.diagnose-question_Error,
#mainContents .diagnose-check p.diagnose-request_Error {
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--color-error);
}

#mainContents .diagnose-question_Option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: var(--diagnose-option-min-height);
  margin: 0 0 8px;
  padding: 12px 15px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  font-size: var(--font-ui);
  line-height: var(--lh-body-tight);
  cursor: pointer;
}

#mainContents .diagnose-question_Option:hover {
  border-color: var(--color-ui-dark);
  background-color: var(--diagnose-brand-tint);
}

#mainContents .diagnose-question_Option:has(input:checked) {
  border: 2px solid var(--color-brand);
  padding: 11px 14px; /* exception: 枠線が2pxになる分を詰めて位置を変えない */
  font-weight: 700;
}

#mainContents .diagnose-question_Option input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 3px 0 0; /* exception: 1行目の文字の中央に揃える */
  accent-color: var(--color-brand);
}

#mainContents .diagnose-question_Option input:focus-visible {
  outline: var(--diagnose-focus-ring);
  outline-offset: 2px;
}

#mainContents .diagnose-question_Note label {
  display: block;
  margin: 10px 0 5px;
  font-size: var(--font-ui);
  font-weight: 700;
  line-height: var(--lh-ui);
}

#mainContents .diagnose-check p.diagnose-question_Help,
#mainContents .diagnose-check p.diagnose-request_Help {
  margin: 0 0 8px;
  font-size: var(--font-ui-small);
  color: var(--color-ui-dark);
}

#mainContents .diagnose-check p.diagnose-question_Count,
#mainContents .diagnose-check p.diagnose-request_Count {
  margin: 5px 0 0;
  font-size: var(--font-ui-small);
  text-align: right;
  color: var(--color-ui-dark);
}

#mainContents .diagnose-check textarea,
#mainContents .diagnose-check input[type="text"],
#mainContents .diagnose-check input[type="email"],
#mainContents .diagnose-check input[type="url"] {
  -webkit-appearance: none;
  display: block;
  width: 100%;
  padding: 10px 15px;
  border: 1px solid var(--color-gray-500);
  border-radius: var(--radius-sm);
  background-color: var(--color-gray-100);
  box-sizing: border-box;
  font-size: var(--font-ui);
  line-height: var(--lh-body-tight);
}

#mainContents .diagnose-check input[type="text"],
#mainContents .diagnose-check input[type="email"],
#mainContents .diagnose-check input[type="url"] {
  min-height: var(--diagnose-input-height);
}

#mainContents .diagnose-check textarea {
  resize: vertical;
}

#mainContents .diagnose-check [aria-invalid="true"] {
  border: 2px solid var(--color-error);
}

#mainContents .diagnose-result {
  margin-top: 100px;
  scroll-margin-top: calc(var(--diagnose-header-offset) + 20px); /* exception: 「結果を見る」の後、枠の上端が固定ヘッダーに隠れないようにする */
}

#mainContents .diagnose-result_Main {
  margin: 0 0 40px;
  padding: 50px 60px;
  border: 2px solid var(--color-brand);
  border-radius: var(--diagnose-result-radius);
  background-color: var(--color-white);
}

#mainContents .diagnose-check .diagnose-result_State {
  margin: 50px 0 0;
  text-align: center;
  text-wrap: balance; /* 折り返したとき、最後の行に数文字だけ残らないようにする（未対応のブラウザは通常の折り返し） */
  word-break: auto-phrase; /* 語の途中（「確／かめたい」など）で改行しない */
  font-size: var(--diagnose-result-heading);
  font-weight: 700;
  line-height: var(--lh-compact);
}

#mainContents .diagnose-check p.diagnose-result_Insight {
  margin: 20px 0 50px;
  text-align: center;
  text-wrap: balance; /* 折り返したとき、最後の行に数文字だけ残らないようにする（未対応のブラウザは通常の折り返し） */
  word-break: auto-phrase; /* 語の途中（「確／かめたい」など）で改行しない */
  font-size: var(--diagnose-result-subheading);
  font-weight: 700;
  line-height: var(--lh-compact);
  color: var(--color-brand);
}

#mainContents .diagnose-check p.diagnose-result_Text {
  margin: 0;
}

#mainContents .diagnose-check p.diagnose-result_Note {
  margin: 15px 0 0;
  font-size: var(--font-body-small);
  line-height: var(--lh-ui);
  color: var(--color-ui-dark);
}

#mainContents .diagnose-check p.diagnose-result_Label {
  margin: 30px 0 5px;
  font-size: var(--font-ui);
  font-weight: 700;
  line-height: var(--lh-ui);
  color: var(--color-brand);
}

#mainContents .diagnose-check p.diagnose-result_Label::before {
  content: "●";
}

#mainContents .diagnose-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin: 30px 0 0;
}

#mainContents .diagnose-score_Head {
  flex: none;
}

#mainContents .diagnose-check p.diagnose-score_Label {
  margin: 0;
  font-size: var(--font-ui-large);
  font-weight: 700;
  line-height: var(--lh-ui);
  color: var(--color-brand);
}

#mainContents .diagnose-score_Pie {
  flex: none;
  width: var(--diagnose-score-pie);
  height: var(--diagnose-score-pie);
}

#mainContents .diagnose-score_Rest {
  fill: var(--diagnose-brand-tint);
}

#mainContents .diagnose-score_Slice {
  fill: var(--color-brand);
}

#mainContents .diagnose-score_Frame {
  fill: none;
  stroke: var(--color-brand);
  stroke-width: 1.5; /* exception: viewBox 100 に対する円の線の太さ（約3px） */
}

#mainContents .diagnose-check p.diagnose-score_Value {
  margin: 0;
  min-width: 3.2em; /* exception: 数字の桁数（—% と 80%）で円の位置がずれないように幅をそろえる */
  font-size: var(--diagnose-score-value);
  font-weight: 700;
  line-height: var(--lh-ui-tight);
  color: var(--color-brand);
}

#mainContents .diagnose-check p.diagnose-score_Note {
  max-width: 16em; /* exception: 算出の説明（31字）を2行にし、円と数字を横一列に並べたまま収める */
  margin: 10px 0 0;
  font-size: var(--font-caption);
  line-height: var(--lh-ui);
  color: var(--color-brand);
  text-wrap: balance; /* 折り返したとき、最後の行に数文字だけ残らないようにする */
  word-break: auto-phrase; /* 語の途中（「社内／共有」など）で改行しない。未対応のブラウザは通常の折り返し */
}

#mainContents .diagnose-check p.diagnose-result_Label--first {
  margin-top: 0;
}

#mainContents .diagnose-check .diagnose-result_Actions {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: diagnose-action;
  border-top: 1px solid var(--color-gray-300);
}

#mainContents .diagnose-check .diagnose-result_Action {
  position: relative;
  margin: 0;
  padding: 15px 0 15px 2.2em;
  border-bottom: 1px solid var(--color-gray-300);
  counter-increment: diagnose-action;
}

#mainContents .diagnose-check .diagnose-result_Action:last-child {
  border-bottom: none;
}

#mainContents .diagnose-check .diagnose-result_Action::before {
  content: counter(diagnose-action);
  position: absolute;
  top: 15px;
  left: 0;
  font-size: var(--font-heading-sub);
  font-weight: 700;
  line-height: var(--lh-compact);
  color: var(--color-brand);
}

#mainContents .diagnose-check .diagnose-result_ActionName {
  display: block;
  font-size: var(--font-heading-sub);
  font-weight: 700;
  line-height: var(--lh-compact);
  color: var(--color-brand);
}

#mainContents .diagnose-result_Closing {
  margin: 30px 0 0;
  text-align: center;
}

#mainContents .diagnose-result_ClosingArrow {
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto 25px;
  border-top: 20px solid var(--color-gray-300);
  border-right: 75px solid transparent;
  border-left: 75px solid transparent;
}

#mainContents .diagnose-check p.diagnose-result_ClosingText {
  margin: 0;
  text-align: left; /* 三角形は中央、文は左揃え */
  font-size: var(--font-ui-large);
  font-weight: 700;
  line-height: var(--lh-body-tight);
  color: var(--color-brand);
}

#mainContents .diagnose-result_ClosingLead {
  display: block;
}

#mainContents .diagnose-check .diagnose-result_ActionDetail {
  display: block;
  margin-top: 5px;
  font-size: var(--font-ui);
  line-height: var(--lh-body-loose);
}

@media only screen and (min-width: 768px) {
  #mainContents .diagnose-check_Questions p.diagnose-check_Guide {
    margin-top: 100px;
    text-align: center;
    font-size: calc(var(--font-ui-large) * var(--diagnose-question-text-scale)); /* 案内文は本文より一回り大きく */
  }
  #mainContents .diagnose-check_Questions p.diagnose-check_Guide--sub {
    margin: 50px 0;
    font-size: calc(var(--font-ui-small) * var(--diagnose-question-text-scale));
  }
  #mainContents .diagnose-check_Questions .diagnose-question_Title {
    margin: 30px 0 45px; /* 元の下余白 15px に上下 30px を足す */
    font-size: calc(var(--font-heading-card) * var(--diagnose-question-text-scale));
  }
  #mainContents .diagnose-check_Questions .diagnose-question_Option,
  #mainContents .diagnose-check_Questions p.diagnose-question_Error,
  #mainContents .diagnose-check_Questions p.diagnose-check_ErrorTitle,
  #mainContents .diagnose-check_Questions .diagnose-check_ErrorList li {
    font-size: calc(var(--font-ui) * var(--diagnose-question-text-scale));
  }
  #mainContents .diagnose-check_Questions .diagnose-check_Button {
    font-size: calc(var(--font-ui-large) * var(--diagnose-question-text-scale));
  }
}

#mainContents .diagnose-request {
  margin: 100px 0 0;
  padding: 40px 30px;
  border: 2px solid var(--color-brand);
  border-radius: var(--card-radius);
  background-color: var(--diagnose-brand-tint);
}

/* v2：導線を結果の枠のすぐ下に置く（結果の枠の下余白 40px と重なり、間は --diagnose-cta-gap）。v2 には「回答を見直す」を出さない */
#mainContents .diagnose-result_Main + .diagnose-request {
  margin-top: var(--diagnose-cta-gap);
}

#mainContents .diagnose-request_Title {
  margin: 0 0 15px;
  text-align: center;
  font-size: var(--font-heading-page); /* 冒頭の見出し（.diagnose-check_Title）と同じ大きさ */
  font-weight: 700;
  line-height: var(--lh-compact);
  color: var(--color-brand);
}

#mainContents .diagnose-check p.diagnose-request_Lead {
  margin: 0 0 15px;
  text-align: center;
}

#mainContents .diagnose-check p.diagnose-request_Status,
#mainContents .diagnose-check p.diagnose-request_Notice {
  margin: 0 0 20px;
  padding: 12px 15px;
  border: 1px solid var(--color-ui-dark);
  border-radius: var(--radius-sm);
  font-weight: 700;
}

#mainContents .diagnose-check p.diagnose-request_Status:empty {
  display: none;
}

/* v2 の確認画面のボタン：左に「入力画面に戻る」、右に「送信」。SP でも横に並べる（下の SP の指定） */
#mainContents .diagnose-request_ConfirmActions {
  flex-wrap: nowrap;
}

/* 申し込みの入力画面・確認画面・完了画面（.diagnose-check_Complete）は、切り替わるときに短くフェードインする（OS で「視差効果を減らす」を選んでいる人には動かさない） */
@media (prefers-reduced-motion: no-preference) {
  #mainContents .diagnose-request_Form:not([hidden]),
  #mainContents .diagnose-request_Confirm:not([hidden]),
  #mainContents .diagnose-check_Complete:not([hidden]) {
    animation: diagnose-request-fade-in var(--diagnose-request-fade) ease-out;
  }
}

@keyframes diagnose-request-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#mainContents .diagnose-request > .diagnose-check_Button {
  display: block;
  margin: 30px auto 0;
}

#mainContents .diagnose-request_Panel {
  margin: 30px 0 0;
  padding: 30px 0 0;
  border-top: 1px solid var(--color-gray-300);
}

#mainContents .diagnose-request_Heading {
  margin: 0 0 20px;
  font-size: var(--font-heading-card);
  font-weight: 700;
  line-height: var(--lh-ui);
}

#mainContents .diagnose-request_SubHeading {
  margin: 20px 0 10px;
  font-size: var(--font-ui);
  font-weight: 700;
  line-height: var(--lh-ui);
}

#mainContents .diagnose-request_Field {
  margin: 0 0 25px;
}

#mainContents .diagnose-request_Field > label {
  display: block;
  margin: 0 0 8px;
  font-size: var(--font-ui);
  font-weight: 700;
  line-height: var(--lh-ui);
}

#mainContents .diagnose-request_Honeypot {
  position: absolute;
  left: -10000px; /* exception: 画面外に出すための固定値 */
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#mainContents .diagnose-request_Privacy {
  margin: 0 0 25px;
  padding: 25px 0 0;
  border-top: 1px solid var(--color-gray-300);
}

#mainContents .diagnose-check .diagnose-request_PrivacyTitle {
  margin: 0 0 5px;
  font-size: var(--font-ui);
  font-weight: 700;
  line-height: var(--lh-ui);
}

#mainContents .diagnose-check p.diagnose-request_PrivacyText {
  margin: 0;
  font-size: var(--font-ui);
  line-height: var(--lh-body-tight);
}

#mainContents .diagnose-check p.diagnose-request_Insight {
  margin: 0 0 10px;
  font-weight: 700;
}

#mainContents .diagnose-request_List {
  margin: 0 0 10px;
  border-top: 1px solid var(--color-gray-300);
}

#mainContents .diagnose-request_List dt {
  padding: 12px 0 4px;
  font-size: var(--font-ui-small);
  font-weight: 700;
  line-height: var(--lh-ui);
  color: var(--color-ui-dark);
}

#mainContents .diagnose-request_List dd {
  margin: 0;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--color-gray-300);
  font-size: var(--font-ui);
  line-height: var(--lh-body-tight);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --- セルフチェックv2（10問・5軸の複合評価・検証版）：ステージングだけの切り替えタブと、結果のスコア・レーダーチャート・取り組みの理由 --- */
#mainContents .diagnose-variant {
  margin: 0 0 40px;
  padding: 15px 20px;
  border: 1px dashed var(--color-ui-dark);
  border-radius: var(--radius-sm);
}

#mainContents .diagnose-check p.diagnose-variant_Label {
  margin: 0 0 10px;
  font-size: var(--font-caption);
  line-height: var(--lh-ui);
  color: var(--color-ui-dark);
}

#mainContents .diagnose-variant_Tabs {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#mainContents .diagnose-variant_Tabs li {
  flex: 1;
}

#mainContents .diagnose-check a.diagnose-variant_Tab {
  display: block;
  padding: 10px;
  border: 2px solid var(--color-brand);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: var(--font-ui);
  font-weight: 700;
  line-height: var(--lh-ui);
  color: var(--color-brand);
  text-decoration: none;
}

#mainContents .diagnose-check a.diagnose-variant_Tab[aria-current="page"] {
  background-color: var(--color-brand);
  color: var(--color-white);
}

#mainContents .diagnose-index {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin: 20px 0 0;
}

#mainContents .diagnose-index_Overall {
  flex: 1;
  max-width: 16em; /* exception: 指数の説明（2行）を数字の幅に合わせる */
  text-align: center;
}

#mainContents .diagnose-check p.diagnose-index_Name {
  margin: 0 0 4px;
  font-size: var(--font-ui);
  font-weight: 700;
  line-height: var(--lh-ui);
}

#mainContents .diagnose-check p.diagnose-index_Value {
  margin: 0;
  font-size: var(--diagnose-index-value);
  font-weight: 700;
  line-height: var(--lh-ui-tight);
  color: var(--color-brand);
}

#mainContents .diagnose-index_Unit {
  margin-left: 4px;
  font-size: var(--font-ui);
}

#mainContents .diagnose-check p.diagnose-index_Note {
  margin: 10px 0 0;
  font-size: var(--font-caption);
  line-height: var(--lh-ui);
  color: var(--color-ui-dark);
  text-wrap: balance; /* 折り返したとき、最後の行に数文字だけ残らないようにする */
  word-break: auto-phrase; /* 語の途中で改行しない。未対応のブラウザは通常の折り返し */
}

#mainContents .diagnose-radar {
  flex: none;
  width: var(--diagnose-radar-width);
}

#mainContents .diagnose-radar_Svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

#mainContents .diagnose-radar_Grid {
  fill: none;
  stroke: var(--color-gray-300);
  stroke-width: 1;
}

#mainContents .diagnose-radar_Area {
  fill: var(--diagnose-brand-tint);
  stroke: var(--color-brand);
  stroke-width: 2.5;
}

#mainContents .diagnose-radar_Dot {
  fill: var(--color-brand);
}

#mainContents .diagnose-radar_Label {
  fill: var(--color-text);
  font-size: 14px; /* exception: SVG の viewBox（幅 320）に対する軸名の大きさ */
  font-weight: 700;
}

#mainContents .diagnose-radar_Label.is-pending {
  fill: var(--color-text-muted);
}

#mainContents .diagnose-axes {
  display: grid;
  grid-template-columns: 1fr 14em; /* exception: 横棒と数字の欄の幅 */
  gap: 0 20px;
  margin: 30px 0 0;
  border-top: 1px solid var(--color-gray-300);
}

#mainContents .diagnose-axes_Name,
#mainContents .diagnose-axes_Value {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-gray-300);
}

#mainContents .diagnose-axes_Label {
  display: block;
  font-size: var(--font-ui);
  font-weight: 700;
  line-height: var(--lh-ui);
}

#mainContents .diagnose-axes_Desc {
  display: block;
  font-size: var(--font-caption);
  line-height: var(--lh-ui);
  color: var(--color-ui-dark);
}

#mainContents .diagnose-axes_Value {
  display: flex;
  align-items: center;
  gap: 10px;
}

#mainContents .diagnose-axes_Bar {
  flex: 1;
  height: var(--diagnose-axes-bar-height);
}

#mainContents .diagnose-axes_BarRest {
  fill: var(--diagnose-brand-tint);
}

#mainContents .diagnose-axes_BarFill {
  fill: var(--color-brand);
}

#mainContents .diagnose-axes_Number {
  min-width: 4.5em; /* exception: 数字（0〜100）と「判定保留」で横棒の長さがずれないように幅をそろえる */
  text-align: right;
  font-size: var(--font-ui-large);
  font-weight: 700;
  line-height: var(--lh-ui);
  color: var(--color-brand);
}

#mainContents .diagnose-axes_Value.is-pending .diagnose-axes_Number {
  font-size: var(--font-ui-small);
  color: var(--color-text-muted);
}

#mainContents .diagnose-result_Notes p.diagnose-result_Note + p.diagnose-result_Note {
  margin-top: 5px;
}

#mainContents .diagnose-check .diagnose-result_ActionReason {
  display: block;
  margin-top: 10px;
  padding: 10px 15px;
  border-radius: var(--radius-sm);
  background-color: var(--diagnose-brand-tint);
  font-size: var(--font-ui-small);
  line-height: var(--lh-body-tight);
}

/* v2 の優先する取り組み：番号を「01｜」の形にする（現行版の .diagnose-result_Actions は番号だけのまま） */
#mainContents .diagnose-check .diagnose-result_Actions--ranked .diagnose-result_Action {
  padding-left: 3.4em; /* exception: 「01｜」の幅 */
}

#mainContents .diagnose-check .diagnose-result_Actions--ranked .diagnose-result_Action::before {
  content: counter(diagnose-action, decimal-leading-zero) "｜";
}

/* v2 の優先する取り組み例：1件目は全文、2件目は取り組み名まで、その下と3件目はぼかして見せる（見た目の演出。内容・判定・送信は変えない。tests/SAMPLE_CTA.png）
   2件目以降の各項目の上に、背景をぼかす層を重ねる。左右は結果の枠の外まで、最後の項目は枠の下端の外まで広げ、枠線ごとぼかす */
#mainContents .diagnose-check .diagnose-result_Actions--ranked .diagnose-result_Action:nth-child(n+2)::after {
  content: "";
  position: absolute;
  top: 0;
  right: calc(-1 * var(--diagnose-teaser-bleed-x));
  left: calc(-1 * var(--diagnose-teaser-bleed-x));
  bottom: -1px; /* exception: 項目の下の区切り線（1px）も覆い、次の項目の層とすき間なくつなぐ */
  -webkit-backdrop-filter: blur(var(--diagnose-teaser-blur));
  backdrop-filter: blur(var(--diagnose-teaser-blur));
  pointer-events: none;
}

#mainContents .diagnose-check .diagnose-result_Actions--ranked .diagnose-result_Action:nth-child(n+2):last-child::after {
  bottom: calc(-1 * var(--diagnose-teaser-bleed-bottom));
}

/* 2件目は番号（02｜）と取り組み名まで見せ、その下（説明）からぼかす：番号と取り組み名を、ぼかしの層より手前に出す */
#mainContents .diagnose-check .diagnose-result_Actions--ranked .diagnose-result_Action:nth-child(2)::before {
  z-index: 1;
}

#mainContents .diagnose-check .diagnose-result_Actions--ranked .diagnose-result_Action:nth-child(2) .diagnose-result_ActionName {
  position: relative;
  z-index: 1;
}

/* 背景をぼかす指定に対応しないブラウザでは、項目の文字をぼかす */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #mainContents .diagnose-check .diagnose-result_Actions--ranked .diagnose-result_Action:nth-child(n+3),
  #mainContents .diagnose-check .diagnose-result_Actions--ranked .diagnose-result_Action:nth-child(2) .diagnose-result_ActionDetail {
    filter: blur(var(--diagnose-teaser-blur));
  }
}

/* v2 の総合スコアで、すべての軸が未判定のとき（数字の代わりに「判定できません」） */
#mainContents .diagnose-check p.diagnose-index_Value.is-pending {
  font-size: var(--font-heading-sub);
}

/* v2 の取り組み名と番号はひと回り大きく（説明文の大きさは変えない） */
#mainContents .diagnose-check .diagnose-result_Actions--ranked .diagnose-result_Action::before,
#mainContents .diagnose-check .diagnose-result_Actions--ranked .diagnose-result_ActionName {
  font-size: var(--diagnose-v2-action-name);
}

/* v2 の取り組み名の部品（ui.js の actionName）：部品の途中で改行しないようにし、1〜2文字だけの行を防ぐ。
   幅360px未満では部品が1行に収まらないことがあるので、普通の改行に任せる（iPhone Safari を含め inline-block と <wbr> だけを使う） */
@media only screen and (min-width: 360px) {
  #mainContents .diagnose-check .diagnose-result_ActionNamePart {
    display: inline-block;
  }
}

@media only screen and (max-width: 767px) {
  #mainContents .diagnose-check .diagnose-result_Actions--ranked .diagnose-result_Action::before,
  #mainContents .diagnose-check .diagnose-result_Actions--ranked .diagnose-result_ActionName {
    font-size: var(--diagnose-v2-action-name-sp);
  }
  #mainContents .diagnose-check .diagnose-result_Actions--ranked .diagnose-result_Action:nth-child(n+2)::after {
    right: calc(-1 * var(--diagnose-teaser-bleed-x-sp));
    left: calc(-1 * var(--diagnose-teaser-bleed-x-sp));
  }
  #mainContents .diagnose-check .diagnose-result_Actions--ranked .diagnose-result_Action:nth-child(n+2):last-child::after {
    bottom: calc(-1 * var(--diagnose-teaser-bleed-bottom-sp));
  }
}

#mainContents .diagnose-check .diagnose-result_ActionReasonLabel {
  display: block;
  font-weight: 700;
  color: var(--color-brand);
}

@media only screen and (max-width: 767px) {
  #mainContents .diagnose-check {
    width: calc(100% - 40px);
  }
  #mainContents .diagnose-check [tabindex="-1"],
  #mainContents .diagnose-check input,
  #mainContents .diagnose-check textarea {
    scroll-margin-top: calc(var(--diagnose-header-offset-sp) + 20px); /* exception: ヘッダーとの間に少し余白を空ける */
  }
  #mainContents .diagnose-check p.diagnose-check_Progress {
    font-size: var(--font-ui-small);
  }
  #mainContents .diagnose-check p {
    font-size: var(--font-body-small);
  }
  #mainContents .diagnose-check_Intro {
    padding: 25px 15px;
    text-align: left;
  }
  #mainContents .diagnose-check_PageTitle {
    padding-top: 20px; /* SP の /contact・/download は見出しの外枠（.contactTyp01・.downloadTyp01）に上 20px があるので、位置をそろえる */
    font-size: 3.6rem; /* exception: /contact・/download のページ見出し（SP）と同じ大きさ */
    line-height: var(--lh-body-tight);
  }
  #mainContents .diagnose-check_PageTitle span {
    display: block;
  }
  #mainContents .diagnose-check_PageTitle .diagnose-check_PageTitleSep {
    display: none;
  }
  #mainContents .diagnose-check_Title {
    font-size: var(--font-body-large-sp);
  }
  #mainContents .diagnose-check p.diagnose-check_Note {
    font-size: var(--font-ui);
  }
  #mainContents .diagnose-check_Button {
    width: 100%;
    min-width: 0;
    min-height: var(--diagnose-button-height-sp);
    font-size: var(--font-ui);
  }
  #mainContents .diagnose-question {
    padding: 15px 15px 10px;
  }
  #mainContents .diagnose-question_Title {
    font-size: var(--font-ui);
  }
  #mainContents .diagnose-question_Option {
    font-size: var(--font-ui-small);
  }
  #mainContents .diagnose-result {
    margin-top: 50px;
  }
  #mainContents .diagnose-result_Main {
    padding: 30px;
  }
  #mainContents .diagnose-check .diagnose-result_Action::before,
  #mainContents .diagnose-check .diagnose-result_ActionName {
    font-size: var(--font-ui-large);
  }
  #mainContents .diagnose-check .diagnose-result_State {
    font-size: var(--diagnose-result-heading-sp);
  }
  #mainContents .diagnose-check p.diagnose-result_Insight {
    margin: 15px 0 30px;
    font-size: var(--diagnose-result-subheading-sp);
  }
  #mainContents .diagnose-result_ClosingArrow {
    margin-bottom: 15px;
    border-top-width: 14px;
    border-right-width: 50px;
    border-left-width: 50px;
  }
  #mainContents .diagnose-check p.diagnose-result_ClosingText {
    font-size: var(--font-ui);
  }
  #mainContents .diagnose-score {
    flex-wrap: wrap;
    gap: 10px 20px;
  }
  #mainContents .diagnose-score_Head {
    flex-basis: 100%;
    text-align: center;
  }
  #mainContents .diagnose-check p.diagnose-score_Label {
    font-size: var(--font-ui);
  }
  #mainContents .diagnose-check p.diagnose-score_Note {
    max-width: none;
    margin-top: 2px;
    font-size: var(--font-caption-small-sp);
  }
  #mainContents .diagnose-score_Label br {
    display: none;
  }
  #mainContents .diagnose-score_Pie {
    width: var(--diagnose-score-pie-sp);
    height: var(--diagnose-score-pie-sp);
  }
  #mainContents .diagnose-check p.diagnose-score_Value {
    font-size: var(--diagnose-score-value-sp);
  }
  #mainContents .diagnose-check .diagnose-result_Action {
    padding-left: 0;
  }
  #mainContents .diagnose-check .diagnose-result_ActionName {
    padding-left: 1.8em;
  }
  #mainContents .diagnose-request {
    margin-top: 50px;
    padding: 30px 15px;
  }
  #mainContents .diagnose-result_Main + .diagnose-request {
    margin-top: var(--diagnose-cta-gap-sp);
  }
  #mainContents .diagnose-request_ConfirmActions .diagnose-check_Button {
    flex: 1 1 0;
    min-width: 0;
    padding-right: 10px;
    padding-left: 10px;
  }
  #mainContents .diagnose-check_Questions p.diagnose-check_Guide:not(.diagnose-check_Guide--sub) {
    font-size: var(--font-ui);
  }
  #mainContents .diagnose-request_Title {
    font-size: var(--font-body-large-sp);
  }
  #mainContents .diagnose-variant_Tabs {
    flex-direction: column;
  }
  #mainContents .diagnose-index {
    flex-direction: column;
    gap: 20px;
  }
  #mainContents .diagnose-check p.diagnose-index_Value {
    font-size: var(--diagnose-index-value-sp);
  }
  #mainContents .diagnose-radar {
    width: var(--diagnose-radar-width-sp);
  }
  #mainContents .diagnose-axes {
    grid-template-columns: 1fr;
  }
  #mainContents .diagnose-axes_Name {
    padding-bottom: 0;
    border-bottom: none;
  }
  #mainContents .diagnose-axes_Value {
    padding-top: 5px;
  }
  #mainContents .diagnose-check .diagnose-result_Actions--ranked .diagnose-result_Action {
    padding-left: 0;
  }
  #mainContents .diagnose-check .diagnose-result_Actions--ranked .diagnose-result_ActionName {
    padding-left: 2.6em; /* exception: SP の「01｜」の幅 */
  }
}

#tcd {
  margin-bottom: 0;
}

#tcd a:hover img {
  opacity: 0.8;
}

#tcd article {
  padding-top: 160px;
}

#tcd article.post,
#tcd article.pt_0 {
  padding-top: 0;
}

@media only screen and (max-width: 767px) {
  #tcd article {
    padding-top: 90px;
  }
  #tcd article.pt_0 {
    padding-top: 0;
  }
}

@media only screen and (max-width: 900px) {
  html {
    height: 100%;
  }
  body {
    height: 100%;
    margin: 0;
  }
}

h1 {
  border: none !important;
}

.section-base {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 100px;
  background-color: var(--color-gray-100);
}

@media only screen and (max-width: 767px) {
  .section-base {
    padding-top: 25px;
    padding-bottom: 50px;
  }
}