@charset "utf-8";

.company_title {
    background-color: #46a48e;
    color: #fff;
    font-size: 27px;
    font-weight: bold;
    margin: 3rem 0 1rem;
    padding: .6rem 0!important;
    text-align: center;
    position: relative;
}

.company_title::after {
display: none;
}

.company_title::before {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
}

.service-container {
    display: flex;
    justify-content: center;
    gap: 30px; /* カード間のスペース */
    flex-wrap: wrap; /* 画面が狭い時に折り返す */
    max-width: 1200px;
    margin: 0 auto;
}

/* --- 各カードのスタイル --- */
.service-card {
    background-color: #ffffff;
    border: 2px solid #0080cb; /* ご指定のボーダー */
    border-radius: 12px;
    padding: 15px 20px;
    text-align: center;
    flex: 1; /* 親要素のスペースを均等に分ける */
    min-width: 280px; /* 最小幅 */
    max-width: 350px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s, box-shadow 0.3s;
}

/* .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 128, 203, 0.2);
} */

/* --- カード内の要素のスタイル --- */
.card-number {
    font-size: 48px;
    font-weight: bold;
    color: #0080cb;
    margin-bottom: 15px;
}

.card-title {
    font-size: 24px;
    color: #005a92; /* 少し濃い青で見やすく */
    margin-top: 0;
    margin-bottom: 20px;
}

.card-description {
    font-size: 15px;
    line-height: 1.7;
    text-align: left; /* 説明文は左揃えで読みやすく */
    color: #555;
    flex-grow: 1; /* この要素が伸びることでボタンが一番下に揃う */
    margin-bottom: 25px;
}

.card-button {
    display: inline-block;
    background-color: #0080cb;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
    margin-top: auto; /* 自動マージンで一番下に配置 */
}

.card-button:hover {
    background-color: #005a92; /* ホバー時の色変更 */
}

.company_display {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.company_display p:first-child {
    width: 280px;
}

.company_display p:nth-child(2) {
    flex: 1;
}

.company_display p img {
    width: 280px;
}


.h2_strong {
    color: #0080cb;
    font-size: 1.7rem;
    margin: 4rem 0 2rem;
    text-align: center;
}

.btn-detail-group {
    margin-bottom: 2rem!important;
    text-align: center;
}

.btn-detail {
    /* ボックスの基本設定 */
    display: inline-block;  /* 横幅や高さを指定できるようにする */
    box-sizing: border-box; /* paddingとborderを幅に含める */
    width: 400px;           /* 横幅を指定 */
    padding: 8px 0;        /* 上下の余白 */
    text-align: center;       /* テキストを中央揃え */
    
    /* 見た目の設定 */
    background-color: #33a98f; /* 背景色（元の画像を参考にしました） */
    color: #fff!important;           /* 文字色を白に */
    text-decoration: none;    /* リンクの下線を消す */
    border-radius: 3px;       /* 角を少し丸くする */
    
    /* フォントの設定 */
    font-size: 18px;          /* 文字の大きさ */
    font-weight: bold;        /* 文字を太字に */
    
    /* アニメーションの設定 */
    transition: opacity 0.3s ease; /* マウスを乗せた時の変化を滑らかにする */
  }

  /* マウスを乗せた時のスタイル */
  .btn-detail:hover {
    opacity: 0.8; /* 少し透明にする */
  }

/* --- レスポンシブ対応 (スマートフォンなど) --- */
@media (max-width: 768px) {
    .service-container {
        flex-direction: column;
        align-items: center;
    }

    .service-card {
        width: 90%;
        max-width: 500px;
    }
}