/* --- フォントの定義 --- ここから　*/
.txt-spacing {
  /* --- 1. 設定変数 --- */

  /* 文字の間隔 (Letter Spacing) */
  /* 推奨: 0.05em 〜 0.1em (日本語は少し広げると読みやすいです) */
  --char-space: 0.05em; 
  
  /* 行の間隔 (Line Height) */
  /* 推奨: 見出しは1.2〜1.4、本文は1.5〜1.8 */
  /* 単位なしの数値推奨 (文字サイズに対する倍率になります) */
  --line-height: 1.3; 

  /* --- 2. スタイル定義 --- */
  letter-spacing: var(--char-space);
  line-height: var(--line-height);
}

/* ---  (オプション) スタイルバリエーション --- */
/* ギュッと詰まったスタイル */
.spacing-tight {
  --char-space: 0.03em; /* ほぼ詰めない */
  --line-height: 1;   /* 行間を狭く */
}

/* ゆったりしたスタイル */
.spacing-wide {
  --char-space: 0.07em; /* 文字間を広く */
  --line-height: 1.5;   /* 行間をかなり広く */
}
/* --- フォントの定義 --- ここまで　*/

/* --- 特殊なフォント装飾の定義 --- ここから　*/
/* --- class="shadow"の文字をシャドーで装飾　*/
.shadow {
  --shadow-color-rgb: 255,255,255; 
  --shadow-opacity: 1;
  --shadow-x: 2px;  /* Shadowの方向 (X水平，Y垂直) */
  --shadow-y: 2px;
  --shadow-blur: 0px;  /* Shadowの硬さ */
  text-shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) rgba(var(--shadow-color-rgb), var(--shadow-opacity));  
}

/* ---  (オプション) スタイルバリエーション --- */
/* 小文字向けshadowスタイル */
.small-shadow {
  --shadow-x: 1px;  /* Shadowの方向 (X水平，Y垂直) */
  --shadow-y: 1px;
}

/* --- class="circle"の文字をまるで装飾　*/
.circle {
  /* --- 1. 設定変数 (ここを変更してカスタマイズ) --- */
  --circle-color: #8fdbcc;     /* 円の色 */
  --circle-width: 140%;        /* 円の横幅 (文字幅に対する比率) */
  --circle-height: 140%;       /* 円の縦幅 (文字の高さに対する比率) */
  --circle-thickness: 4px;     /* 円の線の太さ */
  --circle-tilt: -2deg;        /* 円の傾き (マイナスで左上がり) */
  --circle-opacity: 1;       /* 円の透明度 */

  /* --- 2. スタイル定義 --- */
  position: relative;
  display: inline-block;
  white-space: nowrap;
  z-index: 1; /* 文字を上に表示 */
}

/* 擬似要素を使って円を描画 */
.circle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(var(--circle-tilt));
  
  width: var(--circle-width);
  height: var(--circle-height);
  
  /* 手書き風の円をSVGで定義 (maskとして使用) */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M15,40 Q20,10 100,10 T185,40 T100,70 T15,40' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M15,40 Q20,10 100,10 T185,40 T100,70 T15,40' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;

  background-color: var(--circle-color);
  opacity: var(--circle-opacity);
  
  /* 線の太さを調整するためのスケーリング補正 */
  border-radius: 50%; /* フォールバック用 */
  z-index: -1; /* 文字の後ろに配置 */
  pointer-events: none; /* クリックを邪魔しない */
}

/* --- class="nami"の文字をなみ線で装飾　*/
.nami {
  /* --- 1. 設定変数 (ここを変更してカスタマイズ) --- */
  --nami-color: #8fdbcc;       /* 波線の色 */
  --nami-width: 100%;          /* 波線の横幅 (100%で文字と同じ幅、110%で少しはみ出す) */
  --nami-height: 0.5em;        /* 波線の高さ (振れ幅の大きさ) */
  --nami-offset: -0.2em;       /* 文字のベースラインからの距離 (マイナス値で下へ移動) */
  --nami-opacity: 0.8;         /* 線の透明度 */
  --nami-thickness: 3px;       /* 線の太さ（SVG内の描画幅には影響しませんが、概念として） */

  /* --- 2. スタイル定義 --- */
  position: relative;
  display: inline-block;
  white-space: nowrap; /* 波線が途切れないように折り返しを防止 */
}

/* 擬似要素を使って波線を描画 */
.nami::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 中央揃え */
  bottom: var(--nami-offset);  /* 文字の下に配置 */
  
  width: var(--nami-width);
  height: var(--nami-height);
  
  /* 手書き風の波線をSVGパスで定義 (maskとして使用) */
  /* ベジェ曲線を使って、機械的な波線ではない「手描き感」を出しています */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M5,10 Q30,18 60,10 T120,10 T180,10' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M5,10 Q30,18 60,10 T120,10 T180,10' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");

  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  
  background-color: var(--nami-color);
  opacity: var(--nami-opacity);
  
  z-index: 1; /* 文字の後ろ（下層）に配置 */
  pointer-events: none; /* マウス操作を邪魔しない */
}

/* --- class="dot"の文字をdotで装飾　*/
.dot {
  /* --- 1. 設定変数 --- */
  --dot-color: #8fdbcc;        /* 点の色 */
  --dot-style: filled circle;     /* 点のスタイル */
  --dot-position: under;       /* 点の位置 (over:上 / under:下) */

  /* --- 2. 影の設定変数 --- */
  /* 文字と点の両方に落ちる影の設定です */
  --dot-shadow-color: rgba(255, 255, 255, 1); /* 影の色と透明度 */
  --dot-shadow-x: 1px;         /* 横方向のズレ */
  --dot-shadow-y: 1px;         /* 縦方向のズレ */
  --dot-shadow-blur: 1px;      /* 影のぼかし具合 */

  /* --- 3. スタイル定義 --- */
  -webkit-text-emphasis: var(--dot-style) var(--dot-color);
  -webkit-text-emphasis-position: var(--dot-position) right;
  text-emphasis: var(--dot-style) var(--dot-color);
  text-emphasis-position: var(--dot-position) right;
  
  /* 点と文字が重ならないように行間を確保 */
  line-height: 1;

  /* 影を適用 (drop-shadowフィルターを使用) */
  /* これにより、文字の形状と点の形状の両方に影がつきます */
  filter: drop-shadow(var(--dot-shadow-x) var(--dot-shadow-y) var(--dot-shadow-blur) var(--dot-shadow-color));
}

/* --- (オプション) 影なしバージョン --- */
.dot-no-shadow {
  --dot-shadow-color: transparent; /* 影を透明にして消す */
}

/* (オプション) スタイルバリエーション --- */
/* 黄色丸 */
.dot-yellow {
  --dot-color: #FFD966;
}
/* 小さな丸 */
.dot-small-white {
  --dot-color: #FFFFFF;
  --dot-style: '・'; /* 任意の文字を指定することも可能です */
}
/* 二重丸 */
.dot-double {
  --dot-color: #8fdbcc;
  --dot-style: double-circle;
}

/* --- class="mark"の文字を黄色の円角背景で装飾　*/
.mark {
  /* 背景装飾の基準点とする */
  position: relative;
  /* 文字を太字にする */
  font-weight: 700;
  /* 文字が背景に乗っているように見せるため、文字色は通常通り */
  color: inherit; 
  /* 擬似要素に背景を与えるため、パディングを確保する */
  padding: 0 2px; 
  /* テキストが改行された場合にも対応できるよう、インラインブロック要素化 */
  display: inline-block;
  z-index: 1;
}

.mark::before {
  content: "";
  /* 絶対配置でテキストの背面に固定 */
  position: absolute;
  /* 親要素 (.mark) のパディング領域も含めて全体を覆う */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 背景色 */
  background-color: #8fdbcc;
  /* 角を丸くする */
  border-radius: 4px; 
  /* テキストの裏側に配置 */
  z-index: -1; 
}
/* --- 特殊なフォント装飾の定義 --- ここまで　*/

/* --- 画面幅が768px未満の場合に比較テーブルモジュールを非表示にする --- ここから　*/
@media (max-width: 767px) {
    .pricing-comparison.srp {
        display: none !important;
    }
}
/* --- 画面幅が768px未満の場合に比較テーブルモジュールを非表示にする --- ここまで　*/

/* --- 英単語が途中で切れるのを防ぐ設定 ---　ここから */
h1, h2, h3, .hs-richtext {
    word-break: normal !important;
    overflow-wrap: break-word !important; /* これがあれば英単語は適切に改行されます */
    word-wrap: break-word !important;
}

/* スマホでは強制的に改行を許可して、画面からはみ出すのを防ぐ */
@media (max-width: 767px) {
    h1, h2, h3, .hs-richtext, p, div {
        word-break: break-all !important; /* 必要なら単語の途中でも改行する */
        overflow-wrap: break-word !important;
    }
@media (max-width: 480px) {
    h1, h2, h3, .hs-richtext, p, div {
        word-break: break-all !important; /* 必要なら単語の途中でも改行する */
        overflow-wrap: break-word !important;
    }
}
/* --- 英単語が途中で切れるのを防ぐ設定 ---　ここまで */

/* --- 画面幅1229px以下：文字サイズ調整 ---　ここから */
@media (max-width: 1229px) {
    /* テンプレート見出し */
    .heading-text h1 { font-size: 36px !important; }
    .heading-text h2 { font-size: 29px !important; }
    .heading-text h3 { font-size: 23px !important; }
    .heading-text h4 { font-size: 20px !important; }
    .heading-text h5 { font-size: 18px !important; }
    .heading-text p { font-size: 16px !important; }

    /* リッチテキスト内の見出し */
    .hs-richtext h1 { font-size: 36px !important; }
    .hs-richtext h2 { font-size: 29px !important; }
    .hs-richtext h3 { font-size: 23px !important; }
    .hs-richtext h4 { font-size: 20px !important; }
    .hs-richtext h5 { font-size: 18px !important; }
    .hs-richtext p { font-size: 16px !important; }

  /* 事例モジュール */
    .case-stud-top-content h1 { font-size: 36px !important; }
    .case-stud-top-content h2 { font-size: 29px !important; }
    .case-stud-top-content h3 { font-size: 23px !important; }
    .case-stud-top-content h4 { font-size: 20px !important; }
    .case-stud-top-content h5 { font-size: 18px !important; }
    .case-stud-top-content p { font-size: 16px !important; }

  /* タイムラインモジュール */
    .row-fluid .timeline-with-scrolling-animation-timeline-main h2.title { font-size: 29px !important; }
    .row-fluid .timeline-with-scrolling-animation-timeline-main .timeline-with-scrolling-animation-heading-main .content { font-size: 23px !important; }
    .row-fluid .timeline-with-scrolling-animation-timeline-main .timeline-with-scrolling-animation-timeline-outer .timeline-section h3 { font-size: 23px !important; }
    .row-fluid .timeline-with-scrolling-animation-timeline-main .timeline-with-scrolling-animation-timeline-outer .timeline-section .timeline-text { font-size: 18px !important; }

  /* アコーディオン（FAQ）モジュール */
  .accordion-with-background-color-content-inner h2 { font-size: 29px !important; }
  .faq-box .faq-title { font-size: 23px !important; }
  .faq-box .faq-content { font-size: 18px !important; }
  
  /* アコーディオン（FAQ_type1）モジュール */
  .panel-heading h5 { font-size: 23px !important; }
  .panel-heading .tagline { font-size: 18px !important; }
  .panel-body .content p { font-size: 18px !important; }
}
/* --- 画面幅1229px以下：文字サイズ調整 ---　ここまで */

/* --- 画面幅991px以下：文字サイズ調整 ---　ここから */
@media (max-width: 991px) {
    /* テンプレート見出し */
    .heading-text h1 { font-size: 32px !important; }
    .heading-text h2 { font-size: 26px !important; }
    .heading-text h3 { font-size: 22px !important; }
    .heading-text h4 { font-size: 19px !important; }
    .heading-text h5 { font-size: 17px !important; }
    .heading-text p { font-size: 15px !important; }

    /* リッチテキスト内の見出し */
    .hs-richtext h1 { font-size: 32px !important; }
    .hs-richtext h2 { font-size: 26px !important; }
    .hs-richtext h3 { font-size: 22px !important; }
    .hs-richtext h4 { font-size: 19px !important; }
    .hs-richtext h5 { font-size: 17px !important; }
    .hs-richtext p { font-size: 15px !important; }

  /* 事例モジュール */
    .case-stud-top-content h1 { font-size: 32px !important; }
    .case-stud-top-content h2 { font-size: 26px !important; }
    .case-stud-top-content h3 { font-size: 22px !important; }
    .case-stud-top-content h4 { font-size: 19px !important; }
    .case-stud-top-content h5 { font-size: 17px !important; }
    .case-stud-top-content p { font-size: 15px !important; }

  /* タイムラインモジュール */
    .row-fluid .timeline-with-scrolling-animation-timeline-main h2.title { font-size: 26px !important; }
    .row-fluid .timeline-with-scrolling-animation-timeline-main .timeline-with-scrolling-animation-heading-main .content { font-size: 22px !important; }
    .row-fluid .timeline-with-scrolling-animation-timeline-main .timeline-with-scrolling-animation-timeline-outer .timeline-section h3 { font-size: 22px !important; }
    .row-fluid .timeline-with-scrolling-animation-timeline-main .timeline-with-scrolling-animation-timeline-outer .timeline-section .timeline-text { font-size: 18px !important; }

  /* アコーディオン（FAQ）モジュール */
  .accordion-with-background-color-content-inner h2 { font-size: 26px !important; }
  .faq-box .faq-title { font-size: 22px !important; }
  .faq-box .faq-content { font-size: 18px !important; }
  
  /* アコーディオン（FAQ_type1）モジュール */
  .panel-heading h5 { font-size: 22px !important; }
  .panel-heading .tagline { font-size: 18px !important; }
  .panel-body .content p { font-size: 18px !important; }
}
/* --- 画面幅991px以下：文字サイズ調整 ---　ここまで */

/* --- 画面幅767px以下：文字サイズ調整 ---　ここから */
@media (max-width: 767px) {
    /* テンプレート見出し */
    .heading-text h1 { font-size: 28px !important; }
    .heading-text h2 { font-size: 24px !important; }
    .heading-text h3 { font-size: 20px !important; }
    .heading-text h4 { font-size: 18px !important; }
    .heading-text h5 { font-size: 16px !important; }
    .heading-text p { font-size: 15px !important; }

    /* リッチテキスト内の見出し */
    .hs-richtext h1 { font-size: 28px !important; }
    .hs-richtext h2 { font-size: 24px !important; }
    .hs-richtext h3 { font-size: 20px !important; }
    .hs-richtext h4 { font-size: 18px !important; }
    .hs-richtext h5 { font-size: 16px !important; }
    .hs-richtext p { font-size: 15px !important; }

  /* 事例モジュール */
    .case-stud-top-content h1 { font-size: 28px !important; }
    .case-stud-top-content h2 { font-size: 24px !important; }
    .case-stud-top-content h3 { font-size: 20px !important; }
    .case-stud-top-content h4 { font-size: 18px !important; }
    .case-stud-top-content h5 { font-size: 16px !important; }
    .case-stud-top-content p { font-size: 15px !important; }

  /* タイムラインモジュール */
    .row-fluid .timeline-with-scrolling-animation-timeline-main h2.title { font-size: 24px !important; }
    .row-fluid .timeline-with-scrolling-animation-timeline-main .timeline-with-scrolling-animation-heading-main .content { font-size: 20px !important; }
    .row-fluid .timeline-with-scrolling-animation-timeline-main .timeline-with-scrolling-animation-timeline-outer .timeline-section h3 { font-size: 20px !important; }
    .row-fluid .timeline-with-scrolling-animation-timeline-main .timeline-with-scrolling-animation-timeline-outer .timeline-section .timeline-text { font-size: 16px !important; }

  /* アコーディオン（FAQ）モジュール */
  .accordion-with-background-color-content-inner h2 { font-size: 24px !important; }
  .faq-box .faq-title { font-size: 20px !important; }
  .faq-box .faq-content { font-size: 16px !important; }
  
  /* アコーディオン（FAQ_type1）モジュール */
  .panel-heading h5 { font-size: 20px !important; }
  .panel-heading .tagline { font-size: 16px !important; }
  .panel-body .content p { font-size: 16px !important; }
}
/* --- 画面幅767px以下：文字サイズ調整 ---　ここまで */

/* --- 画面幅480px以下：文字サイズ調整 ---　ここから */
@media (max-width: 480px) {
    /* テンプレート見出し */
    .heading-text h1 { font-size: 24px !important; }
    .heading-text h2 { font-size: 21px !important; }
    .heading-text h3 { font-size: 19px !important; }
    .heading-text h4 { font-size: 17px !important; }
    .heading-text h5 { font-size: 16px !important; }
    .heading-text p { font-size: 15px !important; }

    /* リッチテキスト内の見出し */
    .hs-richtext h1 { font-size: 24px !important; }
    .hs-richtext h2 { font-size: 21px !important; }
    .hs-richtext h3 { font-size: 19px !important; }
    .hs-richtext h4 { font-size: 17px !important; }
    .hs-richtext h5 { font-size: 16px !important; }
    .hs-richtext p { font-size: 15px !important; }

  /* 事例モジュール */
    .case-stud-top-content h1 { font-size: 24px !important; }
    .case-stud-top-content h2 { font-size: 21px !important; }
    .case-stud-top-content h3 { font-size: 19px !important; }
    .case-stud-top-content h4 { font-size: 17px !important; }
    .case-stud-top-content h5 { font-size: 16px !important; }
    .case-stud-top-content p { font-size: 15px !important; }

  /* タイムラインモジュール */
    .row-fluid .timeline-with-scrolling-animation-timeline-main h2.title { font-size: 21px !important; }
    .row-fluid .timeline-with-scrolling-animation-timeline-main .timeline-with-scrolling-animation-heading-main .content { font-size: 19px !important; }
    .row-fluid .timeline-with-scrolling-animation-timeline-main .timeline-with-scrolling-animation-timeline-outer .timeline-section h3 { font-size: 19px !important; }
    .row-fluid .timeline-with-scrolling-animation-timeline-main .timeline-with-scrolling-animation-timeline-outer .timeline-section .timeline-text { font-size: 16px !important; }

  /* アコーディオン（FAQ）モジュール */
  .accordion-with-background-color-content-inner h2 { font-size: 21px !important; }
  .faq-box .faq-title { font-size: 18px !important; }
  .faq-box .faq-content { font-size: 16px !important; }
  
  /* アコーディオン（FAQ_type1）モジュール */
  .panel-heading h5 { font-size: 18px !important; }
  .panel-heading .tagline { font-size: 16px !important; }
  .panel-body .content p { font-size: 16px !important; }
}
/* --- 画面幅480px以下：文字サイズ調整 ---　ここまで */

/* スマホで隠す */
@media (max-width: 767px) {
    .mobile-hidden {
        display: none !important;
    }
}