/* 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: 156px 0px 74px;
  width: 100%;
  max-width: 1000px;
  /* または margin: 0 auto; でも可 */
}

/*
 * 導線エリア
 */
.call-to-action {
    background-color: #05479b; /* 背景色は濃いブルー */
    color: #ffffff;             /* テキスト全体の色は白 */
    text-align: center;        /* テキストは中央揃え */
    padding: 60px 20px;        /* 上下の余白を多めに設定 */
    font-family: "ヒラギノ角ゴStd", "Hiragino Kaku Gothic Std", sans-serif;
    /* margin-bottom: 100px; */
}

/* テキストを横並びにするための親要素 */
.text-container {
  display: flex; /* 要素を横並びにする */
  justify-content: center; /* 中央に寄せる */
  align-items: baseline; /* テキストのベースラインを揃える */
  gap: 5px; /* テキスト間の隙間を設定 */
}

#text-container-sub p {
    font-size: 1.7rem;
    margin: 9px 0px 39px 0px;
}

/* 左側：青文字 */
.text-blue {
  color: #05479b; /* 文字色を青に */
  font-size: 1.3rem;
  font-weight: bold;
  margin: 0; /* 不要な余白を削除 */
}

/* 右側：白文字 */
.text-white {
  color: #ffffff; /* 文字色を白に */
  font-size: 1rem;
  font-weight: bold;
  margin: 0; /* 不要な余白を削除 */
}

.text-white {
    color: #ffffff;
    font-size: 1rem;
}

.decorated-text {
  font-size: 1.1rem;
  font-weight: bold;
  text-align: center;
  color: #ffffff;
}

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

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

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

/* 親要素: 白帯の全体設定 */
.info-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    padding: 0px 5px;
    /* border-radius: 8px; */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 左側のテキスト: ご相談・お問い合わせ無料！ */
.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: 900px;
    margin: 0 auto;
}

.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: 22px 100px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 2.3rem;
    transition: opacity 0.3s ease;
    border: 2px solid #ffffff;
}

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

.cta-section .cta-button02 {
    display: inline-flex;
    align-items: center;
    background-color: #f75e12;
    color: #ffffff;
    padding: 22px 100px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 2.3rem;
    transition: opacity 0.3s ease;
    border: 2px solid #ffffff;
}

.cta-section .cta-button02:hover {
    opacity: 0.85; /* ホバー時に少し透明にする */
}

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

.call-to-action .arrow-icon {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 9px solid #f75e12; /* 三角形を作成 */
    margin-left: 3px;
}

 .arrow-circle02 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background-color: #ffffff;
    border-radius: 50%;
    margin-left: 15px;
}

 .arrow-icon02 {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 9px solid #f75e12; /* 三角形を作成 */
    margin-left: 3px;
}

/* 費用負担を軽減 */
/* 2カラムレイアウトの親要素 */
.feature-section-container {
  /* ▼▼▼ 中央寄せのための指定を追加 ▼▼▼ */
  
  /* 1. コンテナの最大幅を設定 */
  /* max-width: 1100px; */
  
  /* 2. 左右のmarginをautoに設定して中央寄せ */
  /* margin-left: auto;
  margin-right: auto; */
  
  /* 3. スマホ表示などで画面端に余白を持たせる */
  padding-left: 0px;
  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: 800px;
    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: 0px 20px; /* 内側の余白 */
  font-weight: 800;
  font-size: 32px;
  letter-spacing: 0px;

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

.main-title {
    text-align: center;
    /* font-size: 46px; */
    color: #2c3e50;
    /* margin-bottom: 30px; */
    line-height: 1.3;
    font-weight: 500;

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

    /* 1. z-indexを有効にするためpositionを指定 */
    position: relative; 
    
    /* 2. content-boxより手前に表示 */
    z-index: 10; 
    
    /* 3. 下の要素を上に引き上げて重ねる */
    margin-bottom: -24px; /* この数値で重なる深さを調整 */
}

/* 上の行（サブタイトル）のスタイル */
.main-title .sub-heading {
  font-size: 22px; /* 小さめの文字サイズ */
  font-weight: 600;
  /* 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 53%, #fdffc8 0%);
    /* background-color: #f8f9fa; */
    /* border: 4px solid #e0e0e0; */
    border-radius: 31px;
    /* 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 37px 25px 40px;
  text-align: center;
  /* background-color: #f0f4f8; */
}

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

  /* 切れ目の位置と大きさ */
  /* top: 0;
  left: 30%;
  width: 40%;
  height: 4px; */

  /* 切れ目の背景色（ページの背景に合わせる） */
  /* background-color: #f0f4f8; */
  
  z-index: 2; /* 枠線の上に配置 */
}

  /* 3. 疑似要素を作成し、上の枠線に重ねて一部分を隠します */
.content-box::before {
  content: ''; /* 疑似要素を表示させるためのおまじない */
  position: absolute; /* 親要素を基準に絶対位置で配置 */
  border-radius: 20px;

  /* ▼▼▼ ここで切れ目の位置と大きさを調整 ▼▼▼ */
  top: -4px;          /* 上辺の枠線にぴったり重なるように配置（-border幅） */
  left: 30%;          /* 左から30%の位置から切れ目を始める */
  width: 40%;         /* 切れ目の幅を40%にする */
  height: 4px;        /* 切れ目の高さをborder幅と同じにする */

  /* ▼▼▼ ここが重要 ▼▼▼ */
  /* 親要素の背景と同じ色を指定して、線を隠す */
  background-color: #f0f4f8; 
}

.kouza_cont {
    border: 4px solid #263651;
    border-radius: 20px;
    /* 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: 16px;
    list-style: none;
    padding: 0;
    margin: 27px 0 0 0;
}

.features-list li {
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 19px;
    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: 17px;
    transition: background-color 0.3s ease;
}

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

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

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

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

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

/* タブレットサイズ用（横幅768px～1024px） */
@media (min-width: 768px) and (max-width: 1024px) {
  .image-content {
    margin: -240px -100px 29px 536px;
  }

  .features-list {
    padding: 0px 133px 0px 28px;
  }

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

    .service-section {
    padding: 30px 0;
    }

    .expand-width {
    font-size: 27px;
    }

    .main-title .sub-heading {
    font-size: 20px;
    }

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

    .image-content {
    width: 271px;
    margin-bottom: 20px;
    }

    #qa-button {
    font-size: 15px;
    padding: 12px 25px;
    }

    .feature-section-container {
    padding-left: 0px;
    padding-right: 20px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    }

}

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

    .main-title {
        font-size: 40px;
    }
    
    .image-content {
        width: 250px; /* 少し小さく */
        margin-bottom: 20px;
    }

    .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: 40px 20px;
}

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

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

/* 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: 32px;
  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 */
  margin: 0px 0px 67px 0px;
}

/* Individual character boxes */
.title-container__main-title span {
  display: block;
  background-color: #2c3e50; /* Dark blue-gray background */
  color: white;
  font-size: 32px;
  font-weight: bold;
  padding: 0.6em 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: 3rem;
    justify-content: center;
    align-items: center;
    margin: 47px 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: -79px;
    left: 40px;
    z-index: 0; /* テキストの背面に配置 */
    color: #a0d8ea; /* 画像の色を参考に設定 */
    font-family: 'Oswald', sans-serif; /* 英字に適したフォント */
    font-weight: 700;
    line-height: 1;
    user-select: none; /* テキスト選択不可に */
    opacity: 0.5;
}

.point-label {
/* ① 基準を「現在の位置」に設定 */
  position: relative;

  /* ② 現在の位置からどれだけ動かすか指定 */
  left: 140px;   /* 左に20px移動 */
}

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

.point-label img {
    max-width: 80%;
    height: auto;
}

/* --- 見出しタイトル --- */
.feature-title {
    font-size: 27px;
    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: 1.5rem 1rem;
    position: relative;
    margin-bottom: 0.75rem;
}

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

    z-index: -1;
}

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

/* タブレットサイズ用（横幅768px～1024px） */
@media (min-width: 768px) and (max-width: 1024px) {
    .support-feature {
    display: flex;
    flex-direction: column; /* スマホでは縦並び */
    gap: 16px;
    }

    /* スマホだけ下に表示 */
    .feature-image-content {
    order: 2; /* 下に移動 */
    }
    .feature-text-content {
    order: 1; /* 上に表示 */
    }

    .point-background { 
        order: 3;
        margin-top: 20px; /* 上の文章との間に余白を追加 */
        align-self: center; /* 画像を中央寄せにする */
    }

    .title-container__sub-title {
    line-height: 56px;
    }

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

    .highlight-box {
    display: inline-block;
    background-color: #f3981d;
    color: #fff;
    padding: 1.5rem 1rem;
    position: relative;
    margin-bottom: 0.75rem;
    font-size: 2.3rem;
    }

    .highlight-box::before {
    top: 31px;
    left: 5px;
    right: -5px;
    }

    .point-label {
    position: relative;
    left: 416px;
    top: 7px;
    }

    .grant-application {
    max-width: 700px;
    border-radius: 35px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
    margin: 0;
    padding: 15px;
    width: 100%;
    }

    .feature-description {
    font-size: 1.6rem;
    line-height: 1.7;
    text-align: left;
    }

}

/* --- スマートフォン向けのレスポンシブ対応 --- */
@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: 50%;
        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: 1553px;
    padding: 20px 0px 0px;
}

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

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

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

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

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

/* "に依頼するメリット" の行 */
.merit-foreground .description {
    font-size: 40px;
    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 #3666a3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 0px 40px 40px 40px;
    text-align: center;
    flex: 1;
    max-width: 246px;
    min-width: 200px;
}

/* カードヘッダー (MERIT.01など) */
.card-header {
    background-color: #2e5b93; /* 濃い紺色 */
    color: white;
    font-weight: 400;
    font-size: 24px;
    padding: 17px 52px;
    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 {
    height: auto;
    margin-bottom: 20px;
    width: 85%;
}

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

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

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

/* タブレットサイズ用（横幅768px～1024px） */
@media (min-width: 768px) and (max-width: 1024px) {
    .merit-all {
        height: 4932px;
    }

    .merit-foreground .description {
    margin: 37px;
    }

    .merit-card {
    max-width: 640px;
    width: 100%;
    }

    .merit-section {
    display: flex;
    gap: 30px;
    flex-direction: column;
    align-items: center;
    }
}

/* スマートフォン向けのレスポンシブ設定 */
/* @media (max-width: 768px) {
    .merit-section {
        flex-direction: column;
        align-items: center;
    }
    .merit-card {
        max-width: 90%;
    }
} */
/* メリット終わり */

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

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

/* --- ヘッダー --- */
#achievements {
    margin: 0 auto;
    padding: 118px 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-family: "Hiragino Mincho ProN", "Yu Mincho", "MS P Mincho", serif;
    font-size: 30px;
    letter-spacing: 4px;
    opacity: 0.8;
    text-transform: uppercase;
    margin: 0;
    color: #829cc0;
}

#achievements-title {
    font-size: 40px;
    margin: 10px 0 79px 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: 250px;
    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: 20px;
}

.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 20px 15px 20px;
    flex-grow: 1; /* この要素が残りの高さを埋めてフッターを下に押し出す */
    text-align: center;
}

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

.case-list__title {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 5px 0;
    line-height: 31px;
}

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

.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; */
}

/* タブレットサイズ用（横幅768px～1024px） */
@media (min-width: 768px) and (max-width: 1024px) {
    .case-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-sizing: border-box;
    width: 100%;
    max-width: 350px;
    }

    .case-list {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
    }
}

/* --- レスポンシブ対応 --- */
@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;
padding: 10px 0px 77px;
  /* min-height: 40vh; */
  /* 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: 3.0rem;
  color: #333;
  margin: 0 0 20px 0;
  font-weight: bold;
}

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

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

/* オレンジ色のお問い合わせボタン */
#cta-section-all .cta-button02 {
  display: inline-block; /* paddingやmarginを有効にするため */
  background-color: #f06d20; /* オレンジ色 */
  color: #ffffff;
  font-size: 2.4rem;
  font-weight: bold;
  text-decoration: none; /* aタグの下線を消す */
  padding: 22px 75px;
  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;
}
/* 助成金・補助金採択一覧終わり */

/* お客様の声テスト */
/* body {
    background-color: #fefd6c;
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
} */

.pickup-slider-title {
    background-color: #ff69b4; /* ピンク */
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    border: 3px solid white;
    font-size: 1.5rem;
    margin-bottom: 40px;
}

.pickup-slider {
    position: relative;
    width: 90%;
    max-width: 1000px;
    height: 400px;
    overflow: hidden;
}

.pickup-slider__track {
    display: flex;
    align-items: center;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.pickup-slider__slide {
    flex-shrink: 0;
    width: 60%;
    max-width: 500px;
    height: 300px;
    margin: 0 20px;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    
    /* アニメーション設定 */
    transform: scale(0.8);
    opacity: 0.6;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.pickup-slider__slide.is-active {
    /* アクティブなスライドのスタイル */
    transform: scale(1.1);
    opacity: 1;
    z-index: 10;
}

.pickup-slider__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pickup-slider__content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    color: white;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

.pickup-slider__content h2 {
    font-size: 1.8rem;
    margin: 0 0 10px 0;
}

.pickup-slider__content p {
    font-size: 1rem;
    margin: 0;
}

.pickup-slider__tag {
    display: inline-block;
    background-color: rgba(50, 50, 50, 0.8);
    padding: 5px 10px;
    font-size: 0.8rem;
    border-radius: 5px;
    margin-bottom: 10px;
}
.pickup-slider__name {
    background-color: white;
    color: black;
    text-shadow: none;
    padding: 10px;
    font-weight: bold;
    width: fit-content;
}

.pickup-slider__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #ff69b4;
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    z-index: 20;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.pickup-slider__btn--prev {
    left: 30px;
}

.pickup-slider__btn--next {
    right: 30px;
}
/* お客様の声テスト終わり */

/* お客様の声 */
.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: 40px;
    margin-bottom: 55px;
}

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

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

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

/* スライドの基本スタイル */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 510px;
    background-color: #fff;
    /* border: 1px solid #cce0ff;
    border-top: 4px solid #cce0ff; */
    /* border-radius: 10px; */
    border-right: 5px solid #cce0ff;
    border-bottom: 5px solid #cce0ff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 57px;
    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; */
    padding: 71px 0px;
    display: flex;
    justify-content: center;
    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: 200px;
    height: 200px;
}

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

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

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

.slide-body p {
    font-size: 1.6rem;
    line-height: 1.8;
    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: 50px;
    height: 50px;
    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;
    min-height: 40vh;
    padding: 63px 0px 135px;
}

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

.background-text-main-title {
    color: #c00000;
    font-size: 40px;
    font-weight: bold;
    margin: 33px;
}

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

.comparison-section-subtitle {
    color: #333;
    font-size: 40px;
    font-weight: bold;
    margin: 0px 0 102px 0;
}

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

.background-text {
    position: relative;
    top: 100px;
    left: 0;
    right: 0;
    font-size: 14rem;
    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: 2.0rem;
    vertical-align: middle;
}

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

/* テーブル本体 */
.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: 15%; /* 幅を固定 */
    font-size: 2.0rem;
}

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

/* オフィスコムのデータ列 */
.comparison-table .data-main {
    background-color: #fdecec;
    color: #c00000;
    font-weight: bold;
    font-size: 2.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: 0;
    top: 50%;
    transform: translateY(-50%) skewX(45deg);
    font-size: 2rem;
    opacity: 0.8;
}

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


/* サブタイトル */
#contact-section-main .cta-banner__subtitle {
    font-size: 1.5rem;
    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: 2.3rem;
    font-weight: bold;
    padding: 20px 160px;
    border-radius: 8px;
    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: 20px;
    height: 20px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    margin-left: 15px;
}

/* アイコン内の再生マーク（三角形） */
#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;
}

/* タブレットサイズ用（横幅768px～1024px） */
@media (min-width: 768px) and (max-width: 1024px) {
    #contact-section-main .cta-banner__button {
    padding: 20px 20px;
    }

    #contact-grid .phone-icon {
    width: 20px;
    height: 20px;
    }

    #contact-grid .phone-number {
    font-size: 3.0rem !important;
    }
}

/* 助成金・補助金採択 */
/* バナー全体 */
.achievements-cta-banner .cta-banner {
    color: #ffffff;
    padding: 40px 30px;
    border-radius: 8px;
    text-align: center;
    max-width: 800px;
    margin: 47px auto;
}

/* メインタイトル */
.achievements-cta-banner .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;
}

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

/* 左の斜線 */
.achievements-cta-banner .cta-banner__title::before {
    content: '/';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) skewX(45deg);
    font-size: 2rem;
    opacity: 0.8;
}

/* 右の斜線 */
.achievements-cta-banner .cta-banner__title::after {
    content: '/';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) skewX(-15deg);
    font-size: 2rem;
    opacity: 0.8;
}


/* サブタイトル */
.achievements-cta-banner .cta-banner__subtitle {
    font-size: 1.5rem;
    margin: 0 0 24px 0;
    opacity: 0.9;
}

/* CTAボタン */
.achievements-cta-banner .cta-banner__button {
    display: inline-flex; /* テキストとアイコンを横並びにする */
    align-items: center;
    justify-content: center;
    background-color: #f56525; /* 背景のオレンジ色 */
    color: #ffffff;
    font-size: 2.3rem;
    font-weight: bold;
    padding: 31px 130px;
    border-radius: 8px;
    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: 20px;
    height: 20px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    margin-left: 15px;
}

/* アイコン内の再生マーク（三角形） */
.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-block;
    background-color: #f06d20;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    padding: 15px 50px;
    border-radius: 8px;
    border-bottom: 4px solid #c85a17;
    transition: all 0.2s ease;
}
.cta-button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

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

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

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

#contact-grid .phone-number {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    gap: 4px;
    font-size: 4.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: 35px;
    height: 35px;
    background-size: cover; /* 画像を要素いっぱいに広げる */
    background-repeat: no-repeat; /* 画像の繰り返しをオフに */
    background-position: center; /* 画像を中央に配置 */
    margin: 0px 0px -7px;
}

#contact-grid .business-hours {
    margin: 14px 0 0 0;
    font-size: 1.4rem;
    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: 82vh;
    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: 50px 20px;
}


/* 各種助成金・補助金のご案内 */
#grant-info-main {
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ", sans-serif;
    margin: 0;
    /* 背景画像とグラデーションのオーバーレイ */
    /* background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('https://i.imgur.com/uRjV8xI.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; */
    background: url("https://www.officecom.co.jp/service/img/subsidy_test/background02.jpg") no-repeat center center / cover;
}

/* --- Block: grant-info --- */
/* セクション全体のコンテナ */
#grant-info-main .grant-info {
    max-width: 1200px;
    margin: 0 auto;
    padding: 101px 20px;
}

/* --- Elements of grant-info --- */
/* ヘッダーエリア */
#grant-info-main .grant-info__header {
    text-align: center;
    margin-bottom: 40px;
}

#grant-info-main .grant-info__pre-title {
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS P Mincho", serif;
    font-size: 30px;
    color: #a0b4c8;
    font-weight: bold;
    letter-spacing: 2px;
    margin: 0;
}

#grant-info-main .grant-info__title {
    font-size: 40px;
    color: #1f3a5f;
    margin: 10px 0 100px 0;
}

/* カードグリッド */
#grant-info-main .grant-info__grid {
    display: grid;
    /* PCでは4列表示 */
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* カード本体 */
#grant-info-main .grant-info__card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    display: flex;
    flex-direction: column; /* フッターを下に固定するため */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#grant-info-main .grant-info__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

#grant-info-main .grant-info__card-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10; /* 画像の縦横比を固定 */
    object-fit: cover; /* 画像の比率を保ったままトリミング */
    display: block;
}

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

#grant-info-main .grant-info__card-title {
    font-size: 1.6rem;
    color: #1f3a5f;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

#grant-info-main .grant-info__card-description {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.7;
    margin: 0;
}

#grant-info-main .grant-info__card-footer {
    padding: 0 48px 20px 20px;
    display: flex;
    justify-content: flex-end; /* ボタンを右寄せ */
    gap: 10px;
}

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

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


/* --- レスポンシブ対応 --- */
/* タブレットサイズ */
@media (max-width: 1024px) {
    .grant-info__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .grant-info__title {
        font-size: 2rem;
    }
}

/* タブレット（縦）サイズ */
@media (max-width: 768px) {
    .grant-info__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* スマートフォンサイズ */
@media (max-width: 500px) {
    .grant-info {
        padding: 30px 15px;
    }
    .grant-info__grid {
        grid-template-columns: 1fr; /* 1列表示 */
    }
    .grant-info__title {
        font-size: 1.8rem;
    }
}
/* 各種助成金・補助金のご案内終わり */

/* 助成金と補助金の違いに関して */
.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;
    width: 100%;
    max-width: 800px; /* 最大幅を指定 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

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

.grant-subsidy-subtitle {
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS P Mincho", serif;
    margin: 0;
    color: #4a6a8a;
    font-size: 30px;
}

.grant-subsidy-main-title {
    margin: 5px 0 100px 0;
    color: #1e3a5f;
    font-size: 40px;
    font-weight: bold;
}

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

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

.grant-subsidy-icon {
    width: 140px;
    height: 130px;
    margin-right: 20px;
}

.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: 0;
    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 30px 30px 30px; /* 上だけ多めに余白を取り、ヘッダーの重なりスペースを確保 */
    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.5rem;
    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: 680px;
    width: 100%;
    height: auto;
}

/* タブレットサイズ用（横幅768px～1024px） */
@media (min-width: 768px) and (max-width: 1024px) {
    .grant-subsidy-main-title {
    margin: 17px 0 100px 0;
    }

    .grant-subsidy-container {
    max-width: 630px;
    }
}

/* 全体を囲むコンテナ */
.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%);
}

/* タブレットサイズ用（横幅768px～1024px） */
@media (min-width: 768px) and (max-width: 1024px) {
    .callout-shape::before {
    content: '';
    position: absolute;
    top: 555px;
    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: 155px 0px 262px;
}

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

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

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

.faq-module__subtitle {
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS P Mincho", serif;
    font-size: 30px;
    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;
}

/* タブレットサイズ用（横幅768px～1024px） */
@media (min-width: 768px) and (max-width: 1024px) {
    .faq-module__title {
    margin: 0 0 20px 0;
    }
}
/* よくあるご質問終わり */

/*見出し*/
.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 {
	text-align: center;
	margin-top: 25px;
	margin-bottom: 20px;
}

.officeservice_lowpInner {
	width: 1100px;
	margin: 0 auto 100px;
}

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

/* お客様の声テスト */
/* 基本スタイル */
/* body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
} */

/* 本来「もっと見る」で展開する中身を常に表示 */
.more-content {
  display: block;
}

/* セクション全体 */
.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;
}

.c-crsl-section .grant-info__card-description {
    font-size: 1.9rem;
    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; }
}
/* テスト終わり */

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

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

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

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

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

    .expand-width {
        font-size: 32px;
    }

    .feature-section-container {
        flex-direction: column;
        gap: 20px;
    }

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

    #qa-button {
        font-size: 16px;
        padding: 12px 25px;
    }

    .description {
        font-size: 15px;
    }
} */

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

    .title-container__main-title {
        font-size: 40px;
    }

    .support-feature {

        flex-direction: column;
        gap: 20px;
        margin-bottom: 40px;
    }


    .support-feature:nth-child(3) {
        flex-direction: column;
    }


    .support-feature:nth-child(3) .feature-image-content {
        order: -1;
    }

    .feature-title {
        font-size: 24px;
        text-align: center;
    }

    .feature-text-content {
        text-align: center;
    }

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

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

    .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;
    }

    #achievements-title {
        font-size: 30px;
    }

    .cta-main-text {
        font-size: 20px;
    }
} */