/* PC版のタグ */
/* bodyの背景設定 */
body {
    margin: 0;
    padding: 0;
    font-family: "ヒラギノ角ゴStd", "Hiragino Kaku Gothic Std", sans-serif;

  /* 背景画像を使う場合 */
  background: url("https://www.officecom.co.jp/service/img/subsidy_test/background03.jpg") no-repeat center center / cover;

  /* 背景色にしたい場合は ↓ に変更 */
  /* background-color: #f0f0f0; */
}



/* PNG画像のスタイル */
.header-action {
background: url("https://www.officecom.co.jp/service/img/subsidy_test/background01.jpg") no-repeat center center / cover;
}

.overlay-image {
  display: block; /* imgをブロック要素に */
  margin-left: auto;
  margin-right: auto;
  padding: 99px 0px 25px;
  /* または margin: 0 auto; でも可 */
}

/*
 * 導線エリア
 */
.call-to-action {
    background-color: #024698; /* 背景色 */
    padding: 50px 0;
    text-align: center;
}

/* テキストを横並びにするための親要素 */
.text-container {
margin-bottom: 10px;
}

#text-container-sub p {
        color: #ffffff;
        margin: 0;
        font-size: 12px;
}

/* 左側：青文字 */
.text-blue {
    display: inline-block;
    background-color: #ffffff;
    color: #024698;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 18px;
}

/* 右側：白文字 */
.text-white {
    color: white;
    font-size: 28px;
    margin-top: 10px;
}

.decorated-text {
  margin: 0;
    font-weight: bold;
    line-height: 1.6;
}

/* テキストの直前に「\」を追加する */
.decorated-text::before {
  content: "\\";
  margin-right: 0.9em;
  /* display: inline-block; */
  display: none;
  
  /* ▼▼▼ 角度・位置・長さをまとめて指定 ▼▼▼ */
  transform: 
    translateY(-7px)  /* 上に3px移動 */
    rotate(-15deg)     /* 15度傾ける（反時計回り） */
    scaleY(3.0);       /* 縦に1.8倍伸ばす */
}

/* テキストの直後に「/」を追加する */
.decorated-text::after {
  content: "/";
  margin-left: 0.9em;
  /* display: inline-block; */
  display: none;

  /* ▼▼▼ 角度・位置・長さをまとめて指定 ▼▼▼ */
  transform: 
    translateY(-7px)  /* 上に3px移動 */
    rotate(15deg)      /* 15度傾ける（時計回り） */
    scaleY(3.0);       /* 縦に1.8倍伸ばす */
}

/* 親要素: 白帯の全体設定 */
.info-banner {
        display: inline-block;
        background-color: #007bff;
        color: white;
        padding: 5px 15px;
        border-radius: 20px;
        font-size: 18px;
}

/* 左側のテキスト: ご相談・お問い合わせ無料！ */
.free-text {
  color: #0d6efd; /* 文字を青色に */
  font-weight: bold;
  font-size: 1.2rem;
  margin: 0; /* pタグの余分な余白を削除 */
}

/* 右側のテキストエリア */
.contact-prompt {
  background-color: #0d6efd; /* 右側の背景を青色に */
  padding: 10px 20px;
  border-radius: 5px;
}

/* 右側のテキスト: まずはお気軽にご連絡下さい！ */
.contact-prompt p {
  color: #ffffff; /* 文字を白色に */
  margin: 0; /* pタグの余分な余白を削除 */
  font-weight: bold;
}

.call-to-action .container {
        max-width: 960px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px; /* 要素間の隙間 */
}

.call-to-action h2 {
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 1rem;
}

.call-to-action p {
    font-size: 2.1rem;
}

/* 問い合わせボタン */
.call-to-action .cta-button {
    display: inline-flex;
    align-items: center;
    background-color: #f75e12;
    color: #ffffff;
    padding: 19px 30px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.9rem;
    transition: opacity 0.3s ease;
}

.call-to-action .cta-button:hover {
    opacity: 0.85; /* ホバー時に少し透明にする */
}

/* ボタン内の矢印アイコン */
.call-to-action .arrow-circle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 35px;
        height: 25px;
        border-radius: 50%;
        background-color: #ffffff;
}

.call-to-action .arrow-icon {
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 8px solid #f75e12;
        margin-left: 2px;
}

   /* ▼▼▼ ここからがスマホ対応の調整CSS ▼▼▼ */
    @media screen and (max-width: 768px) {
        .call-to-action {
            padding: 30px 0; /* 上下の余白を少し狭くする */
        }

        .container {
            padding: 0 15px; /* 左右の余白を調整 */
        }

        .text-blue.info-banner {
            font-size: 16px; /* フォントサイズを少し小さく */
        }

        .text-white {
            font-size: 22px; /* フォントサイズを調整 */
            line-height: 1.4;
        }

        #text-container-sub p {
            font-size: 12px; /* フォントサイズを調整 */
            line-height: 1.5;
        }
        
        /* ボタンを画面幅いっぱいに広げ、タップしやすくする */
        .cta-button {
            width: 100%; /* 横幅を100%に */
            padding: 18px 20px; /* 上下の余白を広げ、押しやすくする */
            font-size: 16px;
            box-sizing: border-box; /* paddingを含めてwidth:100%にする */
        }
    }
    /* ▲▲▲ スマホ対応の調整CSSはここまで ▲▲▲ */

/* 費用負担を軽減 */
/* 2カラムレイアウトの親要素 */
.feature-section-container {
  /* ▼▼▼ 中央寄せのための指定を追加 ▼▼▼ */
  padding-right: 20px;
  
  /* --- 以下は既存のスタイル（変更なし） --- */
  display: flex;
  align-items: center;
  gap: 40px;
}

/* --- コンテンツ全体のコンテナ --- */
.price-container {
  background-color: #ffffff;
  background-image:
      /* 縦線 */
      repeating-linear-gradient(
        to right,
        #ededed,
        #ededed 1px,
        transparent 1px,
        transparent 16px
      ),
      /* 横線 */
      repeating-linear-gradient(
        to bottom,
        #ededed,
        #ededed 1px,
        transparent 1px,
        transparent 16px
      );
}

.service-section {
    /* max-width: 1100px;
    margin: 0 auto;
    padding: 126px 0; */
}

.expand-width {
  background-color: #ffffff;
  background-image:
      /* 縦線 */
      repeating-linear-gradient(
        to right,
        #ededed,
        #ededed 1px,
        transparent 1px,
        transparent 8px
      ),
      /* 横線 */
      repeating-linear-gradient(
        to bottom,
        #ededed,
        #ededed 1px,
        transparent 1px,
        transparent 16px
      );
padding: 1px 16px;
  font-weight: 800;

  /* ▼▼▼ ここで要素自体の横幅を広げます ▼▼▼ */
  /* width: 400px; */
}

.main-title {
    text-align: center;
    color: #2c3e50;
    line-height: 13px;
    /* margin-bottom: 30px; */

    /* ▼▼▼ 重ねるための指定を追加 ▼▼▼ */

    /* 1. z-indexを有効にするためpositionを指定 */
    
    /* 2. content-boxより手前に表示 */
    z-index: 10; 
    
    /* 3. 下の要素を上に引き上げて重ねる */
}

/* 上の行（サブタイトル）のスタイル */
.main-title .sub-heading {
  font-size: 1.5rem; /* 小さめの文字サイズ */
  font-weight: 600; /* 太字を解除 */
  letter-spacing: 0px;
  /* color: #555; */
}

.dot-emphasis {
  /* 疑似要素を配置する際の基準点にする */
  position: relative; 
}

.dot-emphasis::before {
  content: '・・・・・・'; /* 表示したい文字や記号 */
  
  /* ▼▼▼ 以下で位置を調整 ▼▼▼ */
  position: absolute;   /* 親要素を基準に絶対位置で配置 */
  top: -0.8em;        /* テキストの上部に移動 */
  left: 50%;          /* 親要素の左から50%の位置に配置 */
  transform: translateX(-50%); /* 中央にぴったり揃える */
  
  /* ▼▼▼ ドットの見た目を調整 ▼▼▼ */
  color: #1f9dda; /* ドットの色 */
  font-size: 1.0em; /* ドットの大きさ */
}

/* 下の行（メインタイトル）のスタイル */
.main-title strong {
  font-size: 45px; /* 大きめの文字サイズ */
  color: #000;
}

.main-title strong {
    font-weight: 800;
}

/* --- 白い枠線ボックス --- */
.content-box {
    background: linear-gradient(to bottom, transparent 40%, #fdffc8 0%);
    /* background-color: #f8f9fa; */
    /* border: 4px solid #e0e0e0; */
    border-radius: 20px;
    /* padding: 30px 40px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07); */

    /* 2. 疑似要素を配置する基準にするため、position: relative を指定 */
  position: relative;

  /* 3. グラデーション画像を枠線として適用するための設定 */
  border-image-slice: 1;
  
  
  /* --- 以下は見た目のためのスタイルです --- */
  padding: 0px 36px 25px 36px;
  text-align: center;
  /* background-color: #f0f4f8; */
}

/* .content-box::before {
    content: '';
  position: absolute;
  border-radius: 20px;


  top: -4px;
  left: 30%;
  width: 40%;
  height: 4px;


  background-color: #f0f4f8; 
  
  z-index: 2;
} */

  /* 3. 疑似要素を作成し、上の枠線に重ねて一部分を隠します */
/* .content-box::before {
content: '';
        position: absolute;
        border-radius: 20px;
        top: -4px;
        left: 13%;
        width: 73%;
        height: 4px;
        background-color: #ffffff;
} */

.kouza_cont {
    border: 3px solid #263651;
    border-radius: 10px;
    /* padding: 20px 20px 5px 20px; */
}


.main-content {
    /* display: flex;
    align-items: center;
    gap: 30px; */
}

/* --- 左側：テキストエリア --- */
.text-content {
    /* flex: 1;
    min-width: 0; */
}

/* --- 特徴リスト --- */
.features-list {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    list-style: none;
    padding: 0;
    margin: 23px 0 0 0;
}

.features-list li {
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 30px;
    color: #34495e;
    font-weight: bold;

    /* 背景色を透明に変更 */
    background-color: #dfe3e8;
}

.features-list .checkmark {
    color: #27ae60;
    margin-right: 8px;
    font-weight: bold;
}

/* --- 中央のボタン --- */
#qa-button-container {
    text-align: center;
    margin-bottom: 15px;
}
#qa-button {
    display: inline-block;
    background-color: #34495e;
    color: #ffffff;
    text-decoration: none;
    padding: 17px 32px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 23px;
    transition: background-color 0.3s ease;
}

#qa-button:hover {
    background-color: #4a657f;
}

/* --- 説明文 --- */
.description {
    font-size: 20px;
    line-height: 1.5;
    color: #555;
    text-align: justify;
}

/* 右側：画像エリア */
.image-content {
    position: relative; /* z-indexを有効にするため */
    z-index: 20;        /* タイトルなど他の要素より手前に表示 */
    /* width: 300px; */
    flex-shrink: 0;     /* コンテナが縮んでも画像の幅を維持 */

    /* ▼▼▼ 大きくはみ出すための指定を追加 ▼▼▼ */
    
    /* 1. 画像を1.2倍に拡大 */
    transform: scale(1.4);
    
    /* 2. ネガティブマージンで右側にはみ出させる */
    /* margin-right: -80px; */
    margin: -177px -250px 0px 8px;
}

.image-content img {
    max-width: 44%;
    /* height: auto;
    display: block; */
}

/* --- レスポンシブ対応 (幅900px以下のデバイス) --- */
@media (max-width: 900px) {
    body {
        padding: 20px 15px;
    }
    
    .main-content {
        /* flex-direction: column-reverse; */
    }

    .main-title {
        font-size: 38px;
        margin: 30px 0px -15px;
    }
    
    .image-content {
        width: 241px; /* 少し小さく */
        margin-bottom: 27px;
    }

    .content-box {
        padding: 20px;
    }
}
/* 費用負担を軽減 終わり */

.grant-application-main {
    background: url("https://www.officecom.co.jp/service/img/subsidy_test/background03.jpg") no-repeat center center / cover;
    margin: 0 auto;
    padding: 4px 26px;
}

.grant-application {
    border-radius: 35px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    background-color: #ffffff; /* 背景色を薄いグレーに設定 */
    padding: 6px;
    justify-content: center;
    align-items: center;
    margin: 28px auto;
}

.boundary_line {
  border: 3px solid #263651;
  border-radius: 33px;
  padding: 15px;
}

/* Container for the entire title */
.title-container {
  text-align: center;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* Top line: "助成金・補助金の" */
.title-container__sub-title {
  font-size: 1.3em;
  font-weight: bold;
  color: #2c3e50; /* Dark blue-gray color */
  /* margin-bottom: 0em; */
  margin: 44px 0px 0;
}

/* Container for the boxed text */
.title-container__main-title {
  display: flex; /* Arrange characters in a row */
  justify-content: center; /* Center the boxes */
}

/* Individual character boxes */
.title-container__main-title span {
  display: block;
  background-color: #2c3e50; /* Dark blue-gray background */
  color: white;
  font-size: 2.0em;
  font-weight: bold;
  padding: 0.5em 0.5em; /* Adjust padding for size */
  
  /* White line separating the boxes */
  border-right: 2px solid white; 
}

/* Remove the border from the very last box */
.title-container__main-title span:last-child {
  border-right: none;
}

/* --- メインセクションのスタイリング --- */
.support-feature {
    display: flex;
    gap: 3rem; /* テキストと画像の間の余白 */
    font-family: 'Noto Sans JP', sans-serif;
    padding: 2rem;
    justify-content: center;
    align-items: center;
    margin: 52px auto;
}

/* --- 左側：テキストコンテンツ --- */
.feature-text-content {
    flex: 1.2; /* テキスト側の幅を少し広めに設定 */
    position: relative; /* 背景の「POINT 01」を配置する基準 */
}

.feature-image-content {
    flex: 1; /* 画像側の幅 */
    text-align: center;
}

.feature-image-content img {
    max-width: 100%;
    height: auto;
}

/* --- 背景の「POINT 01」 --- */
.point-background {
    position: absolute;
    top: -90px;
    left: 40px;
    z-index: 0; /* テキストの背面に配置 */
    color: #a0d8ea; /* 画像の色を参考に設定 */
    font-family: 'Oswald', sans-serif; /* 英字に適したフォント */
    font-weight: 700;
    line-height: 1;
    user-select: none; /* テキスト選択不可に */
    opacity: 0.7;
}

.point-background img {
    max-width: 125px;
}

.point-label {
    position: relative;
    left: 0px;
    top: 14px;
}

/* ▼▼▼ スマホ向けのスタイル（ここで表示順を入れ替え） ▼▼▼ */
    @media screen and (max-width: 768px) {
        /* orderの値を上書きして、表示順を変更する */
        .feature-title { order: 1; }
        .feature-description { order: 2; }
        
        /* point-backgroundのorderを一番大きい数値にして一番下に配置 */
        .point-background { 
            order: 3;
            margin-top: 20px; /* 上の文章との間に余白を追加 */
            align-self: center; /* 画像を中央寄せにする */
        }
    }

/* .point-number {
    font-size: 8rem;
} */

/* --- 見出しタイトル --- */
.feature-title {
    font-size: 3.75rem;
    font-weight: 700;
    margin: 0 0 1.5rem 0;
    position: relative; /* 背景文字より手前に表示 */
    z-index: 1;
}

/* オレンジのハイライトボックス */
.highlight-box {
    display: inline-block; /* インラインブロック要素に */
    background-color: #f3981d; /* 画像の色を参考に設定 */
    color: #fff;
    padding: 0.5rem 0.5rem;
    position: relative;
    margin-bottom: 0.75rem;
}

/* ハイライトボックス左の短い線 */
.highlight-box::before {
    content: '';
    position: absolute;
    /* left: -10px;
    top: 50%; */
    transform: translateY(-50%);
    height: calc(95% + 0px);
    top: 19px;
    left: 2px;
    right: -8px;
    bottom: 0px;
    border: 2px solid #e67e22;

    z-index: -1;
}

/* --- 説明文 --- */
.feature-description {
    font-size: 1.5rem;
    line-height: 1.4;
    color: #333;
    position: relative;
    z-index: 1;
}

/* --- スマートフォン向けのレスポンシブ対応 --- */
@media (max-width: 768px) {
    body {
        padding: 1rem;
    }
    .support-feature {
        /* flex-direction: column;
        gap: 2rem;
        padding: 2rem; */
    }
    .feature-text-content {
        /* text-align: center; */
    }
    .point-background {
        /* top: -30px; */
        left: 81%;
        transform: translateX(-50%); /* 中央に配置 */
        /* width: 100%; */
    }
    .point-number {
        font-size: 6rem; /* 少し小さく */
    }
    .feature-title {
        font-size: 1.5rem;
    }
}

/* メリット */
.merit-all {
    /* max-width: 1080px; */
    /* width: 100%; */
    background: url("https://www.officecom.co.jp/service/img/subsidy_test/background02.jpg") no-repeat center center / cover;
    height: 2690px;
}

.merit-container {
    position: relative; /* 子要素を絶対配置するための基準 */
    text-align: center; /* テキストを中央揃え */
    padding: 37px 0;
    font-family: sans-serif; /* フォントを指定 */
    overflow: hidden; /* はみ出した背景テキストを隠す */
}

/* 背景の "MERIT" のスタイル */
.merit-background {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%); /* 中央配置のテクニック */
    font-size: 220px; /* 文字の大きさ */
    font-weight: bold;
    color: #E0EFFF; /* 薄い青色 */
    z-index: 1; /* 前景テキストの背面に配置 */
    user-select: none; /* テキスト選択を無効に */
}

/* 前景のコンテンツ全体のコンテナ */
.merit-foreground {
    position: relative;
    z-index: 2; /* 背景テキストより手前に配置 */
}

/* "オフィス コム × ナビット" の行 */
.merit-foreground .companies {
    font-size: 2.0rem;
    font-weight: bold;
    margin-bottom: 9px; /* 下の行との余白 */
}

/* 青い背景のボックスのスタイル */
.merit-foreground .company-tag {
    background-color: #003366; /* 濃い青色 */
    color: #fdffbe;
    padding: 4px 11px;
    border-radius: 3px; /* 少し角を丸める */
}

/* "に依頼するメリット" の行 */
.merit-foreground .description {
    font-size: 4.5rem;
    font-weight: bold;
    color: #333; /* 濃いグレー */
    margin: 0;
    text-align: center;
}

.font-tag {
  font-weight:300;
}

/* カードを囲む全体のセクション */
.merit-section {
    display: flex;
    justify-content: center;
    gap: 30px; /* カード間のスペース */
    flex-wrap: wrap; /* 画面幅が足りない場合に折り返す */
}

/* 各カードのスタイル */
.merit-card {
    background-color: #ffffff;
    border-radius: 20px; /* 角の丸み */
    border: 3px solid #2e5b93;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 0px 40px 40px 40px;
    text-align: center;
    flex: 1; /* 親要素の幅に応じて伸縮 */
}

/* カードヘッダー (MERIT.01など) */
.card-header {
    background-color: #2e5b93; /* 濃い紺色 */
    color: white;
    font-weight: 500;
    font-size: 20px;
    padding: 8px 50px;
    border-radius: 0 0 20px 20px; /* 左下と右下のみ角丸にする */
    display: inline-block; /* 幅をコンテンツに合わせる */
    margin-bottom: 25px;
}

/* 円形のキャッチフレーズ */
.card-catchphrase {
    width: 160px;
    height: 160px;
    background-color: #3b5998; /* 青色 */
    color: white;
    border-radius: 50%; /* 正円にする */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0 auto 25px auto; /* 上下左右中央に配置 */
    font-size: 20px;
    font-weight: bold;
    line-height: 1.4;
}

/* キャッチフレーズ内の黄色い文字 */
.card-catchphrase .highlight {
    color: #ffdd57; /* 黄色 */
    font-size: 24px;
}

/* アイコン画像 */
.card-icon {
    margin-bottom: 20px;
    max-width: 200px;
}

/* カードのサブタイトル */
#card-subtitle {
    color: #1e2f42;
    font-size: 20px;
    font-weight: 550;
    margin-bottom: 15px;
    line-height: 29px;
}

/* カードの説明文 */
.card-description {
    font-size: 14px;
    color: #1e2f42;
    line-height: 1.7;
    text-align: left; /* 説明文だけ左揃え */
}

.card-description .text-red {
    color: #dc6353; /* 赤色を指定 */
}

/* スマートフォン向けのレスポンシブ設定 */
@media (max-width: 768px) {
    .merit-section {
        flex-direction: column; /* 縦並びに変更 */
        align-items: center;
    }
    .merit-card {
        max-width: 90%; /* 画面幅に対して少し余裕を持たせる */
    }
}
/* メリット終わり */

/* 助成金・補助金採択一覧 */

/* ページ全体の基本設定 */

/* --- ヘッダー --- */
#achievements {
    margin: 0 auto;
    padding: 60px 20px 0px;
    background: url("https://www.officecom.co.jp/service/img/subsidy_test/background03.jpg") no-repeat center center / cover;
}

#achievements-header {
    text-align: center;
    color: white;
    margin-bottom: 40px;
}

#achievements-subtitle {
    font-size: 1.5rem;
    letter-spacing: 4px;
    opacity: 0.8;
    text-transform: uppercase;
    margin: 0;
    color: #829cc0;
}

#achievements-title {
    font-size: 4.5rem;
    margin: 10px 0 29px 0;
    font-weight: bold;
    color: #003271;
}


/* --- カードリスト --- */
.case-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* 画面幅に応じて折り返す */
    gap: 25px; /* カード間の隙間 */
}

/* 個別のカード (.case-card) は .case-list__item を内包する親 */
.case-card {
    background-color: white;
    border-radius: 8px;
    overflow: hidden; /* 角丸からはみ出す要素を隠す */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    width: 290px;
    display: flex;
    flex-direction: column; /* 中の要素を縦に積む */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* .case-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
} */

/* カードヘッダー (CASE 01) */
.case-list__item {
    background-color: #05479b;
    color: white;
    padding: 11px;
    text-align: center;
    font-weight: bold;
    font-size: 26px;
}

.case-card img {

}

.case-list__thumbnail {
    width: 383px;
    height: 190px;
    object-fit: cover; /* 画像の比率を保ったままトリミング */
    display: block; /* 画像下の余白をなくす */
}

.case-list__thumbnail02 {
    /* width: 291px; */
    height: 190px;
    object-fit: cover; /* 画像の比率を保ったままトリミング */
    display: block; /* 画像下の余白をなくす */
}

.case-list__body {
    padding: 20px;
    flex-grow: 1; /* この要素が残りの高さを埋めてフッターを下に押し出す */
    text-align: center;
}

.case-list__tag {
    display: inline-block;
    border: 1px solid #05479b;
    color: #05479b;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}

.case-list__title {
    font-size: 22px;
    font-weight: bold;
    margin: 0 0 5px 0;
}

.case-list__description {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.case-list__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    background-color: #f9f9f9;
    text-align: center;
    background-color: #f5f5f5;
    /* padding: 15px 20px; */
    text-align: center;
    /* margin-top: auto; */
}

.amount-label {
    font-size: 16px;
    color: #555;
    vertical-align: middle;
}

.case-list__amount {
    font-size: 42px;
    font-weight: bold;
    color: #d35400; /* オレンジ系の色 */
    margin-left: 5px;
    line-height: 1.2;
    font-family: "Hiragino Kaku Gothic Std";
    /* vertical-align: middle; */
}

.case-list__unit {
    font-size: 16px;
    font-weight: normal;
    color: #333;
    margin-left: 4px;
     /* font-size: 14px;
     color: #333;
     vertical-align: baseline; */
}

/* --- レスポンシブ対応 --- */
@media (max-width: 768px) {
    .achievements-title {
        font-size: 28px;
    }
    .case-list {
        flex-direction: column;
        align-items: center;
    }
    .case-card {
        width: 90%;
        max-width: 320px; /* スマホでの最大幅 */
    }
}

#cta-section-all {
/* ヒラギノフォントを優先し、Windowsや他OSの代替フォントも指定 */
  font-family: "Hiragino Kaku Gothic Std", "Hiragino Sans", "Meiryo", "メイリオ", "Yu Gothic", "游ゴシック", sans-serif;
  margin: 0;
  display: flex; /* 中央配置のため */
  justify-content: center;
  align-items: center;
  min-height: 33vh;
  /* background-color: #f0f4f8; */
}

#cta-section {
  /* 画像の背景にある薄い青のグラデーションを再現 */
  /* background: linear-gradient(to bottom, #eef5ff, #ffffff); */
  padding: 50px 20px;
  text-align: center;
  width: 100%;
  max-width: 900px;
  box-sizing: border-box;
}

/* 上部のサブタイトル */
.cta-subtitle {
  font-size: 1.5rem;
  color: #333;
  margin: 0 0 20px 0;
  font-weight: bold;
}

/* 青い帯のラッパー */
#cta-main-text-wrapper {
  background-color: #0d47a1; /* 濃い青色 */
  padding: 6px;
  margin: 0 auto 30px auto;
}

/* 青い帯の中のメインテキスト */
.cta-main-text {
  color: #feff70;
  font-size: 2.5rem;
  font-weight: bold;
  margin: 0;
  line-height: 1.6;
}

/* オレンジ色のお問い合わせボタン */
#cta-section-all .cta-button02 {
    display: inline-block;
    background-color: #f06d20;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    padding: 8px 20px;
    border-radius: 8px;
    border-bottom: 4px solid #c85a17;
    transition: all 0.2s ease;
}

/* ボタンにマウスを乗せた時の効果 */
#cta-section-all .cta-button02:hover {
  background-color: #fb7f36;
  transform: translateY(-2px); /* 少し上に動かす */
  border-bottom-width: 6px;
}

/* ボタンをクリックした時の効果 */
#cta-section-all .cta-button02:active {
  transform: translateY(1px); /* 少し下に動かす */
  border-bottom-width: 3px;
}
/* 助成金・補助金採択一覧終わり */

/* お客様の声 調整版 */
/* --- PC・タブレット用の基本スタイル（既存の想定） --- */

.testimonial-all {
    background-color: #f8f9fa;
    padding: 60px 20px;
    font-family: sans-serif;
}
.testimonial-section {
    max-width: 800px;
    margin: 0 auto;
}
.section-title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 40px;
}
.slider-container {
    position: relative;
    overflow: hidden;
}
.slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.slide {
    flex: 0 0 100%;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.slide-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}
.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}
.quote-headline {
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 5px 0;
}
.company-info {
    font-size: 14px;
    color: #555;
    margin: 0;
}
.slide-body p {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #f06d20;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
}
.prev { left: -20px; }
.next { right: -20px; }

/* ============================================= */
/* --- スマートフォン用の調整 (480px以下) --- */
/* ============================================= */
@media (max-width: 480px) {

    .testimonial-all {
        /* 全体の余白を狭くする */
        padding: 4px 0px;
    }

    .section-title {
        /* 見出しを小さくする */
        font-size: 24px;
    }

    .slide {
        /* カード内の余白を狭くする */
        padding: 20px;
    }

    .slide-header {
        /* * [重要] アバター画像とテキストを縦積みに変更 
         */
        flex-direction: column; 
        text-align: center;
        gap: 15px;
    }

    .avatar {
        /* アバター画像を少し小さくする */
        width: 70px;
        height: 70px;
    }

    .quote-headline {
        /* 見出しテキストを小さくする */
        font-size: 16px;
    }

    .slide-body p {
        /* 本文テキストを小さくし、行間を調整 */
        font-size: 14px;
        line-height: 1.7;
    }
    
    .slide-body {
        /* 縦積みレイアウトに伴い、本文のテキスト揃えを左に戻す */
        text-align: left;
    }

    .slider-nav {
        /* ナビゲーションボタンを小さくし、位置を調整 */
        width: 35px;
        height: 35px;
        font-size: 20px;
    }
    .prev { left: 5px; }
    .next { right: 5px; }

}

/* お客様の声 */
.testimonial-section {
    width: 100%;
    max-width: 1080px;
    padding: 40px 20px;
    box-sizing: border-box;
}

.testimonial_line {
  border: 3px solid #263651;
  border-radius: 33px;
  padding: 25px;
}

.section-title {
    text-align: center;
    color: #114595;
    font-size: 2.5rem;
    margin-bottom: 55px;
    font-weight: bold;
}

.slider-container {
    position: relative;
    padding: 0 40px; /* 矢印ボタンのスペースを確保 */
}

.slider-wrapper {
    position: relative;
    width: 100%;
    min-height: 206px; /* スライドの高さがバラバラでもレイアウトが崩れないように */
}

/* スライドの基本スタイル */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 378px;
    background-color: #fff;
    border: 1px solid #cce0ff;
    border-top: 4px solid #cce0ff;
    /* border-radius: 10px; */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 17px;
    box-sizing: border-box;
    
    /* アニメーション設定 */
    opacity: 0;
    visibility: hidden;
    transform: rotateY(10deg) scale(0.95);
    transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s;
}

/* 表示されるスライドのスタイル */
.testimonial-all {
    /* font-family: "Hiragino Kaku Gothic Std", "Hiragino Sans", "Meiryo", "メイリオ", "Yu Gothic", "游ゴシック", sans-serif; */
    margin: 0;
    display: flex;
    background: url(https://www.officecom.co.jp/service/img/subsidy_test/background03.jpg) no-repeat center center / cover;
}

.slide.active {
    opacity: 1;
    visibility: visible;
    transform: rotateY(0deg) scale(1);
}

.slide-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.avatar {
    width: 100px;
    height: 100px;
}

.quote-info {
    text-align: left;
}

.quote-headline {
    color: #f06d20;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0;
    line-height: 18px;
}

.company-info {
    font-size: 1.1rem;
    color: #555;
    margin: 5px 0 0 0;
}

.slide-body p {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #1a467d;
    text-align: left;
    margin: 0;
    font-weight: 500;
}

/* ナビゲーション（矢印） */
.slider-nav {
    /* position: absolute; */
    top: 44%;
    /* transform: translateY(-50%); */
    background-color: #f06d20;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 2rem;
    /* line-height: 50px;
    text-align: center;
    cursor: pointer; */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, transform 0.3s;
}
.slider-nav:hover {
    background-color: #fb7f36;
    transform: translateY(-50%) scale(1.1);
}
.slider-nav.prev { left: 0; }
.slider-nav.next { right: 0; }

/* ページネーション（点） */
.slider-pagination {
    text-align: center;
    margin-top: 204px;
}
.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #cce0ff;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}
.dot:hover {
    transform: scale(1.2);
}
.dot.active {
    background-color: #0d47a1;
}
/* お客様の声終わり */

/* 助成金・補助金サポートと他社比較 */
#comparison-section-main {
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ", sans-serif;
    background-color: #f4f7f9;
    /* display: flex;
    justify-content: center;
    align-items: center;
    min-height: 66vh; */
    padding: 20px;
    box-sizing: border-box;
}

.comparison-section {
    /* width: 100%;
    max-width: 1080px; */
    text-align: center;
}

.background-text-main-title {
    color: #c00000;
    font-size: 2.0rem;
    font-weight: bold;
    margin: 4px;
}

.comparison-section-text {
    position: relative;
    z-index: 1;
    top: 5px;
}

.comparison-section-subtitle {
    color: #333;
    font-size: 2.0rem;
    font-weight: bold;
    margin: 0px 0 29px 0;
    padding: 3px 42px;
}

#comparison-section-main .table-wrapper {
    position: relative; /* 背景文字の基準位置 */
    margin-top: 50px;
}

.background-text {
    position: relative;
    top: 117px;
    left: 0;
    right: 0;
    font-size: 6rem;
    font-weight: 900;
    color: #e6f0f8;
    z-index: 1;
    pointer-events: none; /* テキストがクリック操作を妨げないようにする */
}

/* テーブル全体のスタイル */
.comparison-table {
    width: 100%;
    border-collapse: collapse; /* ボーダーを重ねる */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    overflow: hidden; /* 角丸を適用するため */
    position: relative;
    z-index: 2; /* 背景文字より手前に表示 */
}

.comparison-table th, td {
    padding: 18px 15px;
    font-size: 1.5rem;
    vertical-align: middle;
}

/* ヘッダー行 */
.comparison-table thead th {
    background-color: #7f7f7f;
    color: white;
    font-weight: bold;
    font-size: 0.8rem;
}
.comparison-table thead .header-main {
    background-color: #c00000;
    font-size: 0.9rem;
    line-height:  1.4;
}

/* テーブル本体 */
.comparison-table tbody tr {
    border-bottom: 1px solid #e9ecef;
}
.comparison-table tbody tr:last-child {
    border-bottom: none;
}

/* 左端のフィーチャーラベル列 */
.comparison-table .feature-label {
    background-color: #1f4e79;
    color: white;
    font-weight: bold;
    width: 26%; /* 幅を固定 */
    font-size: 1.0rem;
}

/* データセル */
.comparison-table td {
    background-color: #ffffff;
    color: #595959;
    font-size: 1.0rem;
    line-height: 13px;
}

/* オフィスコムのデータ列 */
.comparison-table .data-main {
    background-color: #fdecec;
    color: #c00000;
    font-weight: bold;
    font-size: 1.0rem;
}
/* 助成金・補助金サポートと他社比較終わり */

/* 導線部分 */
#contact-section-main {
    /* font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ", sans-serif; */
    margin: 0;
}

/* バナー全体 */
#contact-section-main .cta-banner {
    color: #ffffff;
    padding: 40px 30px;
    border-radius: 8px;
    text-align: center;
    /* max-width: 800px;
    margin: 47px auto; */
}

/* メインタイトル */
#contact-section-main .cta-banner__title {
    position: relative; /* 斜線の配置基準 */
    /* display: inline-block;
    font-size: 2.1rem;
    font-weight: bold;
    margin: 0 auto 12px auto;
    padding: 0 30px; */
    letter-spacing: 1.5px;
}

/* 太字ではない部分のフォントウェイトを通常に戻す */
#contact-section-main .cta-banner__title-normal {
    font-weight: normal;
}

/* 左の斜線 */
#contact-section-main .cta-banner__title::before {
    content: '/';
    position: absolute;
    left: -19px;
    top: 50%;
    transform: translateY(-50%) skewX(45deg);
    font-size: 3rem;
    opacity: 0.8;
}

/* 右の斜線 */
#contact-section-main .cta-banner__title::after {
    content: '/';
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%) skewX(-15deg);
    font-size: 3rem;
    opacity: 0.8;
}


/* サブタイトル */
#contact-section-main .cta-banner__subtitle {
    font-size: 0.8rem;
    margin: 0 0 24px 0;
    opacity: 0.9;
}

/* CTAボタン */
#contact-section-main .cta-banner__button {
    display: inline-flex; /* テキストとアイコンを横並びにする */
    align-items: center;
    justify-content: center;
    background-color: #f56525; /* 背景のオレンジ色 */
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 20px 22px;
    border-radius: 3px;
    text-decoration: none;
    border: 2px solid rgba(255, 255, 255, 0.6); /* 外側の白い枠線 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease-in-out;
}

#contact-section-main .cta-banner__button:hover {
    background-color: #e65c1e;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

/* ボタン内のアイコン */
#contact-section-main .cta-banner__button-icon {
    position: relative;
    width: 25px;
    height: 20px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    margin-left: 12px;
}

/* アイコン内の再生マーク（三角形） */
#contact-section-main .cta-banner__button-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid #ffffff;
}

/* CTAボタン */
.achievements-cta-banner .cta-banner__button {
    display: inline-flex; /* テキストとアイコンを横並びにする */
    align-items: center;
    justify-content: center;
    background-color: #f56525; /* 背景のオレンジ色 */
    color: #ffffff;
    font-size: 1.7rem;
    font-weight: bold;
    padding: 14px 25px;
    border-radius: 3px;
    text-decoration: none;
    border: 2px solid rgba(255, 255, 255, 0.6); /* 外側の白い枠線 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease-in-out;
}

.achievements-cta-banner .cta-banner__button:hover {
    background-color: #e65c1e;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

/* ボタン内のアイコン */
.achievements-cta-banner .cta-banner__button-icon {
    position: relative;
    width: 25px;
    height: 20px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    margin-left: 12px;
}

/* アイコン内の再生マーク（三角形） */
.achievements-cta-banner .cta-banner__button-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid #ffffff;
}

/* セクション全体のコンテナ */
#contact-section-main .contact-section {
    background-color: #1a3a69; /* 濃い青色の背景 */
    /* padding: 54px 40px 150px 40px; */
}

/* 上部の案内バー */
.top-bar {
    text-align: center;
    color: white;
    font-size: 0.9rem;
    margin-bottom: 20px;
}
.top-bar p {
    margin: 0;
}
.top-bar .highlight {
    background-color: white;
    color: #1a3a69;
    padding: 3px 8px;
    font-weight: bold;
    border-radius: 3px;
}
.top-bar .separator {
    margin: 0 10px;
}
.top-bar .sub-text {
    opacity: 0.9;
}

/* 中央のボタン */
.main-action {
    text-align: center;
    margin-bottom: 40px;
}
.cta-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #ff9900;
        color: #333;
        text-decoration: none;
        font-weight: bold;
        padding: 15px 40px;
        border-radius: 50px;
        font-size: 18px;
        transition: background-color 0.3s;
        gap: 10px; /* テキストと矢印の間の隙間 */
}
.cta-button:hover {
background-color: #ffb74d;
}

/* 連絡先カードのグリッド */
#contact-grid {
    display: grid;
    /* grid-template-columns: repeat(2, 1fr); */
    gap: 20px; /* カード間の余白 */
    /* max-width: 900px;
    margin: 0 auto; */
}

/* 連絡先カード */
#contact-grid .contact-card {
    background-color: white;
    padding: 16px 17px;
    border-radius: 2px;
    /* text-align: left; */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

#contact-grid .card-title {
    margin: 0 0 6px 0;
    font-size: 1.3rem;
    color: #1a3a69;
}

#contact-grid .phone-number {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    gap: 4px;
    font-size: 3.5rem;
    font-weight: bold;
    color: #1a3a69;
    text-decoration: none;
    margin: 0;
}

#contact-grid .phone-icon {
    color: #f06d20;
    font-style: normal; /* 絵文字の斜体を防ぐ */
    background-image: url("https://www.officecom.co.jp/service/img/subsidy_test/img_tel01.png") ;
    width: 28px;
    height: 28px;
    background-size: cover; /* 画像を要素いっぱいに広げる */
    background-repeat: no-repeat; /* 画像の繰り返しをオフに */
    background-position: center; /* 画像を中央に配置 */
    margin: 0px 0px -7px;
}

#contact-grid .business-hours {
    margin: 9px 0 0 0;
    font-size: 1.1rem;
    color: #1a3a69;
}

/* レスポンシブ対応 (画面幅が768px以下の場合) */
@media (max-width: 768px) {
    .contact-section {
        padding: 20px;
    }
    .contact-grid {
        grid-template-columns: 1fr; /* スマホでは1列表示 */
    }
    .top-bar .separator,
    .top-bar .sub-text {
        display: none; /* スマホでは一部テキストを非表示 */
    }
    .phone-number {
        font-size: 1.5rem; /* スマホでは電話番号を少し小さく */
    }
}
/* 導線部分終わり */
.grant-subsidy-container-main {
    font-family: 'Helvetica Neue', 'Arial', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
    background-color: #f0f4f8;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: url(https://www.officecom.co.jp/service/img/subsidy_test/background03.jpg) no-repeat center center / cover;
}

.grant-subsidy-info {
    /* max-width: 1200px;
    margin: 0 auto; */
    padding: 20px 0px;
}


/* 各種助成金・補助金のご案内 */
/* セクション全体 */
.c-crsl-section {
    width: 100%;
    padding: 60px 20px;
    background-color: #e0efff;
    background-image: radial-gradient(#c0c5cc 1px, transparent 1px);
    background-size: 15px 15px;
    box-sizing: border-box;
}

.c-crsl-section .grant-info__card-content {
    padding: 20px;
    flex-grow: 1; /* 内容が少なくても高さを広げる */
}

.c-crsl-section .grant-info__card-title {
    font-size: 3.1rem;
    color: #1f3a5f;
    margin: 0 0 10px 0;
    line-height: 1.2;
    font-weight: bold;
}

.c-crsl-section .grant-info__card-description {
    font-size: 1.6rem;
    color: #555;
    line-height: 1.5;
    margin: 0;
}

.c-crsl-section .grant-info__card-footer {
    padding: 0 0px 20px 0px;
    display: flex;
    /* justify-content: flex-end; */
    gap: 10px;
}

/* ボタンの共通スタイル */
.c-crsl-section .grant-info__button {
    display: inline-block;
    /* padding: 11px 8px; */
    border: none;
    border-radius: 0px;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    transition: opacity 0.3s ease;
}
.c-crsl-section .grant-info__button:hover {
    opacity: 0.85;
}

/* --- Modifiers for grant-info__button --- */
/* ボタンの種類ごとの色分け */
.c-crsl-section .grant-info__button--detail {
    background-color: #c9302c; /* 赤色 */
}
.c-crsl-section .grant-info__button--related {
    background-color: #337ab7; /* 青色 */
}
.c-crsl-section .grant-info__button--subsidy {
    background-color: #1a0a92; /* 青色 */
}

/* カルーセルのコンテナ */
.c-crsl-container {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    display: none;
}

.c-crsl-container-sub {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

/* カードが表示されるビューポート */
.c-crsl-wrapper {
    overflow: hidden;
    width: 100%;
}

/* 実際にスライド/表示されるトラック */
.c-crsl-track {
    /* display: flex;
    gap: 20px; */
    /* transition: transform 0.5s ease-in-out; */

    display: grid;
  /* grid-template-columns: repeat(2, 1fr); 2列 */
  gap: 20px;
}

/* カードのスタイル */
.c-crsl-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    min-width: 300px;
    border: 3px solid;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
}
.c-crsl-card img {
    width: 100%;
    height: 255px;
    object-fit: cover;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.c-crsl-card__content {
    padding: 15px;
    font-size: 16px;
    color: #333;
    line-height: 1.5;
}

.c-crsl-card__content, .grant-info__card-content {
    display: flex; /* Flexboxを有効化 */
    flex-direction: column; /* 子要素を縦方向に並べる */
    flex-grow: 1; /* 親の高さに合わせて伸びるようにする */
    padding: 15px; /* 元々あったpaddingを維持 */
    flex: 1;
}

/* 左右のナビゲーションボタン */
.c-crsl-button {
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    background-color: #f06d20;
    color: white;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s;
}
.c-crsl-button--prev { left: -70px; }
.c-crsl-button--next { right: -70px; }
/* .c-crsl-button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
} */

/* --- カード下部の詳細ボタンエリア --- */
/* .c-crsl-card__action {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
    text-align: center;
} */

.c-crsl-card__action {
    margin-top: auto; /* ★★★ これがボタンを下端にそろえるための重要な指定 ★★★ */
    padding-top: 16px; 
    border-top: 1px solid #e0e0e0;
    text-align: center;
}

/* --- ボタン本体のスタイル --- */
.c-crsl-card__action .c-crsl-card__button {
    display: inline-block;
    width: 90%;
    padding: 12px 12px;
    background-color: #979797; /* 目立つ色（青系） */
    color: #ffffff; /* 文字色は白 */
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    /* border-radius: 50px; */
    /* box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3); */
    transition: all 0.3s ease;
    position: relative; /* 矢印配置の基準 */
}

/* --- マウスを乗せた時のスタイル --- */
.c-crsl-card__action .c-crsl-card__button:hover {
    background-color: #d1d1d1; /* 少し濃い青に */
    transform: translateY(-2px); /* 少し上に浮き上がる動き */
    /* box-shadow: 0 6px 12px rgba(0, 123, 255, 0.4); */
}

/* --- ボタン内の矢印アイコン --- */
.c-crsl-card__action .c-crsl-card__button-arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    transition: right 0.3s ease;
}

/* --- マウスを乗せた時の矢印の動き --- */
.c-crsl-card__action .c-crsl-card__button:hover .c-crsl-card__button-arrow {
    right: 15px; /* 少し左に動く */
}

/* もっと見るボタン */
.c-crsl-see-more {
    display: block;
    width: 300px;
    margin: 40px auto 0;
    padding: 20px 30px;
    background-color: #0d47a1;
    color: white;
    text-decoration: none;
    text-align: center;
    border-radius: 50px;
    font-weight: bold;
    transition: background-color 0.3s;
    cursor: pointer;

}
.c-crsl-see-more:hover { background-color: #4273bd; }

/* ▼▼ ここから追加・修正 ▼▼ */

/* タグを囲むフッター */
.grant-info__card-footer {
    display: flex; /* 中のタグを横並びにする */
    flex-wrap: wrap; /* タグが多い場合に折り返す */
    gap: 8px; /* タグ間の隙間 */
    margin-top: 16px; /* ★ 説明文との間に余白を確保 */
    padding-bottom: 16px; /* ボタンエリアとの余白 */
}

/* タグボタンのスタイル */
.grant-info__button {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid #ccc;
    background-color: #f8f9fa;
    color: #495057;
}

/* 「補助金」などの種別タグのスタイル */
.grant-info__button--subsidy {
    background-color: #e2f0ff;
    border-color: #a9d2ff;
    color: #0056b3;
}

/* ボタンを囲むコンテナ (前回と同じ) */
.c-crsl-card__action {
    /* margin-top: auto; を削除し、自然な流れで配置 */
    padding-top: 16px; 
    border-top: 1px solid #e0e0e0;
    text-align: center;
}

/* ---------------------------------- */
/* ▼ アコーディオンで表示されるグリッド ▼ */
/* ---------------------------------- */

.c-crsl-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 20px auto 0;
    overflow: hidden;
    max-height: 0; /* 最初は高さを0にして非表示 */
    transition: max-height 0.7s ease-in-out;
}
.c-crsl-grid-container .c-crsl-card {
    min-width: 0; /* min-widthをリセット */
    width: 100%;
}

/* 展開時のスタイル */
.c-crsl-section.is-expanded .c-crsl-grid-container {
    max-height: 3500px; /* コンテンツ全体の高さまで広がるように大きな値を指定 */
}


/* レスポンシブ対応 */
@media (max-width: 1150px) {
    .c-crsl-button--prev { left: 10px; }
    .c-crsl-button--next { right: 10px; }
}
@media (max-width: 768px) {
    /* スマホではグリッドを1列表示に */
    .c-crsl-grid-container {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 480px) {
    .c-crsl-card { min-width: 250px; }
    .c-crsl-section { padding: 40px 10px; }
}
/* 各種助成金・補助金のご案内終わり */

/* 助成金と補助金の違いに関して */
.grant-subsidy-enclosure {
    /* background: url(../subsidy01/img/img_difference04.png) no-repeat center center;
    background-size: contain;
    padding: 30px 20px 20px 20px; */

    background-color: rgba(227, 242, 253, 0.85); /* 半透明の背景 */
    backdrop-filter: blur(4px); /* 背景をぼかす（すりガラス効果） */
    border-radius: 25px;
    box-shadow: 0 8px 30px rgba(0, 80, 150, 0.1);
}
/* 全体を囲むコンテナ */
.grant-subsidy-container {
    background-color: #e3f2fd; /* 画像に近い水色 */
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* ヘッダー部分 */
.grant-subsidy-header {
    text-align: center;
    margin-bottom: 30px;
}

.grant-subsidy-subtitle {
    margin: 0;
    color: #4a6a8a;
    font-size: 1.5rem;
}

.grant-subsidy-main-title {
    margin: 0px 0 21px 0;
    color: #1e3a5f;
    font-size: 2.0rem;
    font-weight: bold;
    line-height: 30px;
}

/* 助成金・補助金カードのセクション */
.grant-subsidy-definitions {
    margin-bottom: 30px;
}

/* 各説明カード（助成金・補助金） */
.grant-subsidy-card {
    background-color: #ffffff;
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    align-items: flex-start; /* アイコンとテキストを上揃えに */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.grant-subsidy-icon {
    width: 100%;
}

.grant-subsidy-card-content {
    flex: 1; /* 残りのスペースをすべて使用 */
}

.grant-subsidy-card-title {
    /* font-size: 26px; */
    font-weight: bold;
    color: #1e3a5f;
    /* border-bottom: 2px solid #64b5f6; */
    /* padding-bottom: 5px; */
    margin-top: 14px;
    margin-bottom: 0px;
    display: inline-block; /* 下線が文字幅に合うように */
}

.grant-subsidy-card p {
    margin: 0;
    color: #333;
    line-height: 1.6;
}

.grant-subsidy-card-description {
    margin-top: 10px !important; /* !importantで優先度を上げる */
    font-size: 14px;
}

/* 共通内容セクション */
.grant-subsidy-common-title {
    background-color: #1a237e; /* 濃い青 */
    color: #ffffff;
    text-align: center;
    padding: 15px;
    border-radius: 10px;
    font-size: 20px;
    margin: 30px 0 20px 0;
}

.grant-subsidy-common-content {
    background-color: #ffffff;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.grant-subsidy-common-content p {
    margin: 0;
    line-height: 1.8;
    color: #333;
    font-size: 15px;
}

/* カード全体（親要素） */
.subsidy-info-card {
    position: relative; /* 子要素(header)を絶対位置で配置するための基準点 */
    max-width: 800px;
    margin: 70px 0px 0px; /* 画面中央に配置 */
    background-color: #fffbeb; /* 本体背景色をクリーム色に */
    border: 1px solid #2c568f; /* 水色の枠線 */
    border-radius: 16px; /* 角丸 */
    padding: 40px 10px 30px 10px; /* 上だけ多めに余白を取り、ヘッダーの重なりスペースを確保 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 影 */
}

/* カードヘッダー（子要素） */
.subsidy-info-card__header {
    position: absolute; /* 親要素を基準に絶対位置を指定 */
    top: -22px; /* カードの上端から、自身の高さの約半分だけ上に移動 */
    left: 50%; /* 親要素の左から50%の位置に配置 */
    transform: translateX(-50%); /* 要素自身の幅の50%分、左にずらして中央揃え */
    
    background-color: #2c568f; /* 濃い青色 */
    color: #ffffff;
    padding: 8px 30px;
    border-radius: 9999px; /* 角を完全に丸くしてカプセル型に */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    white-space: nowrap; /* タイトルが改行されないようにする */
}

.subsidy-info-card__header h2 {
    margin: 0;
    font-size: 2.0rem;
    font-weight: 600;
}

/* カードの本文エリア */
.subsidy-info-card__body p {
    /* margin: 0 0 1.5em 0; */
    line-height: 1.4;
    color: #333;
}

.subsidy-info-card__body p:last-child {
    /* margin-bottom: 0; */
}

/* フッター（イラスト部分） */
.grant-subsidy-footer {
    text-align: center;
    margin-top: 30px;
}

.grant-subsidy-illustration {
    max-width: 470px;
    width: 100%;
    height: auto;
}

/* 全体を囲むコンテナ */
.frame-layout-container {
    position: relative; /* 角の装飾やイラストを配置する基準 */
    width: 100%;
    max-width: 600px;
    height: 80vh;
    max-height: 800px;
    background-color: rgba(227, 242, 253, 0.85); /* 半透明の背景 */
    backdrop-filter: blur(4px); /* 背景をぼかす（すりガラス効果） */
    border-radius: 25px;
    box-shadow: 0 8px 30px rgba(0, 80, 150, 0.1);
    display: flex;
    flex-direction: column;
    padding-bottom: 120px; /* イラスト分のスペースを確保 */
    box-sizing: border-box;
}

/* 角の装飾の共通スタイル */
.frame-layout-corner {
    position: absolute;
    width: 60px;
    height: 60px;
    border-color: #005A9C;
    border-style: solid;
}

/* 左上の角 */
.frame-layout-corner--tl {
    top: -10px;
    left: -10px;
    border-width: 9px 0 0 9px;
    border-top-left-radius: 30px;
}

/* 右上の角 */
.frame-layout-corner--tr {
    top: -10px;
    right: -10px;
    border-width: 9px 9px 0 0;
    border-top-right-radius: 30px;
}

/* 左下の角 */
.frame-layout-corner--bl {
    bottom: -10px;
    left: -10px;
    border-width: 0 0 9px 9px;
    border-bottom-left-radius: 30px;
}

/* 右下の角 */
.frame-layout-corner--br {
    bottom: -10px;
    right: -10px;
    border-width: 0 9px 9px 0;
    border-bottom-right-radius: 30px;
}


/* コンテンツエリア */
.frame-layout-content {
    padding: 60px;
    overflow-y: auto; /* 内容が多い場合にスクロールできるようにする */
}

/* イラストのコンテナ */
.frame-layout-illustration {
    position: absolute;
    bottom: -10px; /* 少し下にはみ出させる */
    left: 50%;
    transform: translateX(-50%);
    width: 45%;
    max-width: 280px;
}

.frame-layout-illustration img {
    width: 100%;
    display: block; /* 画像下の余分な余白を防ぐ */
}

.callout-shape::before {
    content: '';
    position: absolute;
    top: 473px;
    left: 400px;
    width: 10%;
    height: 23%;
    background-color: #e2f1fc;
    clip-path: polygon(0% 0, 60% 0, 100% 50%, 0% 0%, 0 0%);
}
/* 助成金と補助金の違いに関して終わり */

/* よくあるご質問 */

.faq-module__main {
    /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans CJK JP", "Yu Gothic", sans-serif; */
    background-color: #f3f8ff;
    margin: 0;
    padding: 56px 20px;
}

/* FAQモジュール全体 */
.faq-module {
    max-width: 1000px;
    margin: 0 auto;
}

/* ヘッダー部分 */
.faq-module__header {
    text-align: center;
    margin-bottom: 40px;
}

.faq-module__title {
    font-size: 2.5rem;
    color: #1f3a5f;
    margin: 0 0 8px 0;
}

.faq-module__subtitle {
    font-size: 2.0rem;
    color: #2c568f;
    margin: 0;
    font-weight: bold;
}

/* Q&Aリストのラッパー */
.faq-module__list {
    margin: 0;
    padding: 0;
}

/* 各Q&Aのセット */
.faq-module__item {
    margin-bottom: 24px;
}

/* 質問と回答の共通スタイル */
.faq-module__question,
.faq-module__answer {
    display: flex; /* アイコンとテキストを横並びにする */
    align-items: flex-start; /* 上揃えにする */
    padding: 16px;
    line-height: 1.7;
}

.faq-module__question p,
.faq-module__answer p {
    margin: 0;
    flex: 1; /* テキストエリアが残りの幅をすべて使うように */
}

/* 質問（dt）のスタイル */
.faq-module__question {
    background-color: #3b5998;
    color: #ffffff;
}

/* 回答（dd）のスタイル */
.faq-module__answer {
    background-color: #ffffff;
    color: #333;
    margin: 0px 0 0 0; /* dtとの間に少し隙間を空ける */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* QとAのアイコン共通スタイル */
.faq-module__icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%; /* 円形にする */
    font-weight: bold;
    margin-right: 12px;
    flex-shrink: 0; /* アイコンが縮まないようにする */
}

/* Qアイコンのスタイル */
.faq-module__icon--q {
    background-color: #ffffff;
    color: #3b5998;
}

/* Aアイコンのスタイル */
.faq-module__icon--a {
    background-color: #3b5998;
    color: #ffffff;
}
/* よくあるご質問終わり */

/*見出し*/
.officeservice_tit_bnr{
	position: relative;
	padding: 62px 0;
	background: #1c5093;
	text-align: center;
	overflow: visible;
}

.officeservice_tit_bnr p{
	font-family: 'Montserrat', sans-serif;
	color: #dabb70;
	font-weight: bold;
}

.officeservice_tit_bnr h2{
	margin: 0 0 20px;
	font-size: 34px;
	color: #fff;
}

.officeservice_tit_bnr::before{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 4px;
	height: 40px;
	background: #1c5093;
	transform: translateX(-50%);
}

p.officeservice_conSerText {
    font-size: 12px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.officeservice_lowpInner {
	margin: 0 auto 60px;
}

h4.officeservice_conSerTitle {
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    margin-top: 50px;
}

/* --- タブレット用のスタイル (768px以下) --- */
@media (max-width: 768px) {
    .info-banner {
        font-size: 20px;
        padding: 8px 18px;
    }

    .text-white {
        font-size: 24px;
    }

    #text-container-sub p {
        font-size: 12px;
    }

    .cta-button {
        font-size: 18px;
        padding: 12px 30px;
    }
}

/* --- タブレット用のスタイル (768px以下) --- */
@media (max-width: 768px) {
    .price-container {
        padding: 3px 12px 35px;
    }

    .expand-width {
        font-size: 1.5rem;
        letter-spacing: 0px;
    }

    .feature-section-container {
        flex-direction: column; /* 縦並びに変更 */
        /* gap: 20px; */
    }

    .features-list li {
        font-size: 9px;
    }

    #qa-button {
        font-size: 13px;
        padding: 6px 14px;
    }

    .description {
        font-size: 12px;
    }
}

/* --- タブレット用のスタイル (768px以下) --- */
@media (max-width: 768px) {
    .grant-application {
        /* padding: 40px 15px; */
    }
    
    .title-container__main-title {
        font-size: 6px;
    }

    .support-feature {
        /* 縦積みに変更 */
        flex-direction: column;
        gap: 20px;
        margin-bottom: 40px;
    }

    /* 反転設定をリセット */
    .support-feature:nth-child(3) {
        flex-direction: column-reverse;
    }

    /* スマホでは2番目のセクションの画像を上にする */
    .support-feature:nth-child(3) .feature-image-content {
        order: -1;
    }

    .feature-title {
        font-size: 17px;
        text-align: left;
    }

    .feature-text-content {
        display: flex;
    flex-direction: column;
    }

    .feature-description {
        text-align: left;
    }
}

/* --- タブレット用のスタイル (768px以下) --- */
@media (max-width: 768px) {
    .merit-all {
        padding: 75px 15px;
    }
    
    .merit-background {
        font-size: 109px;
    }
    
    .merit-foreground .description {
        font-size: 2.0rem;
    }

    .merit-section {
        /* flex-direction: column;
        align-items: center;
        gap: 25px; */
    }

    .merit-card {
        /* max-width: 500px;
        width: 100%; */
    }

    #card-subtitle {
        min-height: auto; /* 高さ揃えを解除 */
    }
}

/* --- タブレット用のスタイル (768px以下) --- */
@media (max-width: 768px) {
    .case-list {
        grid-template-columns: 1fr; /* 1列のレイアウトに変更 */
    }

    #achievements-title {
        font-size: 2rem;
    }

    .cta-main-text {
        font-size: 11px;
    }
}