@charset "UTF-8";
/*consultant css*/

/*header画像（2枚並び）*/
.header_container {
    height: 340px;
    display: flex; /* 横並びにする */
    width: 100%;
    position: relative; /* 文字を重ねるための基準 */
    overflow: hidden;
}

/* 2枚の画像を均等に配置 */
.header_img1, .header_img2 {
    flex: 1;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* 画像パスをここに設定 */
.header_img1 { background-image: url("/common/images/top/machine.jpg"); }
.header_img2 { background-image: url("/common/images/top/consul2.jpg"); }

/* タイトルの位置調整 */
.header_title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    width: 100%;
    z-index: 1;
    text-shadow: 0 0 5px rgba(0,0,0,0.7);
    margin: 0;
}
/*END header画像*/

/* リンクの基本設定 */
.hover-color {
    text-decoration: none; 
    border-bottom: 2px solid #333; /* 通常時は黒い線 */
    transition: all 0.3s ease;
    color: #333;
    padding-bottom: 0px; /* ここを 0px にすると線が文字に近づきます */
    display: inline-block; /* これを追加すると間隔の制御がより正確になります */
    line-height: 1.2;      /* 行間を調整して線を文字に寄せる */
}

/* マウスを乗せた時の設定 */
a.hover-color:hover {
    color: #d32f2f !important;
    border-bottom: 2px solid #d32f2f !important;
}

/* リスト全体の設定 */
ul {
    list-style: none; /* デフォルトの黒点を消す */
    padding: 0;
}

li {
    display: flex; /* 横並びにする */
    margin-bottom: 10px; /* リスト間の余白 */
    align-items: flex-start; /* 上揃えにする */
}

/* タイトル部分（幅を固定する） */
.list-title {
    width: 140px; /* ここでタイトルの幅を揃えます（PC/スマホで調整してください） */
    flex-shrink: 0; /* 幅が縮まないようにする */
    font-weight: bold;
}

/* 説明文部分（残り幅をすべて使う） */
.list-text {
    flex: 1;
}

/* マウスを乗せた時の設定 */
a.hover-color:hover .card {
    /* 黄金色のグラデーション（上から下へ） */
    background: linear-gradient(135deg, #fdf6e3, #d4af37); 
    border-color: #d4af37 !important; /* 枠線も金色に合わせる */
    transition: all 0.4s ease;
}

/* 文字色を少し濃い茶色や黒にして高級感を出す */
a.hover-color:hover .card h3,
a.hover-color:hover .card p {
    color: #d32f2f !important; /* 黒よりも少し柔らかい深みのある色 */
}

.card {
    display: flex;       /* カードの中身を縦並びにする */
    flex-direction: column; /* 縦方向 */
    padding: 20px;
    height: 100%;        /* 親のカードの高さに合わせる */
}

.card-content {
    display: flex;
    flex-direction: column;
    height: 100%;        /* 中身もカードいっぱいに広げる */
}

/* ※お問い合わせください。を中央揃えに */
.t_center {
    text-align: center;
    margin-top: auto;    /* これで上の余白が自動調整され、一番下に張り付く */
    margin-bottom: 0;
    padding-top: 15px;   /* 少し上の文章と隙間を作る */
}

/*==================================MQ======================================================*/
@media screen and (min-width: 968px) {
    /* PC表示の高さ調整 */
    .header_container {
        height: 400px;
    }
}