/* style.css（完全版: Reset + Header + recruit + 本文 + Footer + レスポンシブ） */

/* Reset and Common */
        
        .hero {
            position: relative;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

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

        .hero-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #000;
            font-size: 2em;
            font-weight: bold;
            text-align: center;
            white-space: nowrap; /* テキストが改行されないようにする */
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        table td {
            padding: 10px 5px;
            vertical-align: top;
        }

        table td:first-child {
            font-weight: bold;
            width: 150px;
        }

.container {
    max-width: 90%;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.container h2 {
    text-align: left;       /* 見出しも左寄せ */
    margin-bottom: 20px;
    font-size: 1.8em;
    color: #333;
}

.container table {
    width: 100%;
    border-collapse: collapse;
}

.container table td {
    padding: 10px 0;
    border-bottom: 1px solid #ccc; /* デフォルトの下線 */
    text-align: left;
    vertical-align: top;
}

.container table tr:first-child td {
    border-top: 1px solid #ccc;    /* 一番上の行の上線 */
}

.container table td:first-child {
    font-weight: bold;               /* 左カラムを太字 */
    width: 15%;
    border-bottom: 2px solid #38A6CC; /* 左カラムだけ下線カラー変更 */
}

.container table tr:first-child td {
    border-top: 1px solid #ccc; /* 右カラム用の上線（グレー） */
}

.container table tr:first-child td:first-child {
    border-top: 2px solid #38A6CC; /* 左カラム上線カラー */
}

.recruit table td:nth-child(2) {
  padding-left: 1em; /* ← インデント量。例：1em ≒ 全角1文字分 */

}
.site-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #0f789c, #38a6cc);
  color: #fff;
  border: none;
  padding: 18px 35px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(56, 166, 204, 0.4);
}

/* ボタンのホバー効果 */
.site-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(56, 166, 204, 0.6);
}

/* ボタン内のアイコン (外部リンクなど) */
.button-icon {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

/* ボタンセクションを中央揃えにする */
.feature-button-section {
  text-align: center; /* 中の要素（ボタン）を中央に配置 */
  padding-top: 20px; /* ボタンの上の余白 */
  padding-bottom: 20px; /* ボタンの下の余白 */
}
/* レスポンシブ対応：画面幅が768px以下の場合 */
@media screen and (max-width: 768px) {
    .container table,
    .container table tbody,
    .container table tr,
    .container table td {
        display: block;
        width: 100% !important; /* 幅を100%に */
        box-sizing: border-box;
    }

    .container table tr {
        margin-bottom: 20px; /* 各項目の間に余白を追加 */
    }

    .container table td {
        border: none; /* デフォルトの線をリセット */
        width: 100% !important; /* 幅を100%に上書き */
        padding-left: 0;
        padding-right: 0;
        text-align: left !important; /* テキストを左寄せに */
    }

    .container table td:first-child {
        border-top: none; /* 上線をリセット */
        padding-bottom: 5px; /* 項目名と説明の間の余白 */
        border-bottom: 2px solid #38A6CC; /* 項目名の下線 */
    }

    .hero-text {
        font-size: 1.8em; /* スマートフォン表示でフォントサイズを調整 */
        width: 90%; /* テキストが画面からはみ出ないように調整 */
    }
}