@charset "utf-8";

/* =======================================================
   共通設定
   ======================================================= */

html {
    font-family: sans-serif;
}

body {
    background: #fff;
    margin: 0;
    min-height: 100vh;      /* 画面の高さ分は必ず確保 */
    display: flex;          /* フッターを最下部に送る */
    flex-direction: column;
}

/* コンテンツ全体を包むラッパー */
.wrapper {
    flex: 1 0 auto;         /* ここが伸びて、フッターが一番下へ行く */
}

/* =======================================================
   ヘッダー
   PC・SP 共通：画面いっぱいの黒帯
   ======================================================= */

.header {
    background-color: #000;
    padding: 1rem 0;
    width: 100%;
    margin: 0;
}

/* ヘッダー内テキスト（現状未使用だが念のため） */
p.header-inner {
    padding: 0 1rem;
    font-size: 1rem;
    background-color: #000;
    color: #fff;
    margin: 0;
}

/* =======================================================
   リンク・リストなど
   ======================================================= */

a {
    color: #999;
    text-decoration: none;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* =======================================================
   コンテンツ（会社概要）
   ======================================================= */

.md-flex {
    display: flex;
}

.flex li + li {
    margin-left: 16px;
}

.contents {
    margin: 0;
    padding: 0;
}

.contents_title {
    font-size: 2rem;
    color: #333333;
    text-align: center;
    margin: 7rem 0 2rem 0;
}

/* 1行分のブロック（ラベル + 内容） */
.contents .contents_list {
    display: flex;
    width: 80%;
    max-width: 1200px;
    margin: 0 auto 0.5em auto;
}

/* 左側ラベル */
.contents .contents_list dt {
    width: 20%;
    margin: 0;
    border-bottom: 1px solid #ccc;
    font-size: 1rem;
    font-weight: bold;
    vertical-align: middle;
    padding: 1.25rem 1rem 1rem 0;
    color: #535353;
}

/* 右側内容 */
.contents .contents_list dd {
    width: 80%;
    margin: 0;
    padding: 1em 1em 1em 0;
    border-bottom: 1px solid #ccc;
    vertical-align: middle;
    line-height: 2rem;
    color: #535353;
}

h5 {
    font-size: 1rem;
    margin: 0;
    font-weight: 100;
}

/* =======================================================
   フッター
   PC：画面いっぱいの黒帯で、常に最下部（余白なし）
   SP：横幅もヘッダーと同じく全幅。途中で固定しない。
   ======================================================= */

.footer {
    width: 100%;
    padding: 2rem 0;
    font-size: 15px;
    color: #fff;
    background: #000;
    border-top: 1px solid #e5e7eb;
    text-align: center;
    margin-top: auto;       /* フッターをページ最下部へ */
}

.footer a:hover {
    color: #000;
}

/* =======================================================
   レスポンシブ（SP でも横並びのまま）
   ======================================================= */

/* タブレット以下 */
@media screen and (max-width: 767px) {
    .contents .contents_list {
        width: 90%;
    }

    /* テーブルレイアウトは“横並びのまま”。縦にはしない。 */
    .contents .contents_list dt {
        width: 30%;
        font-size: 0.9rem;
        padding: 1rem 0.5rem 1rem 0;
    }

    .contents .contents_list dd {
        width: 70%;
        font-size: 0.9rem;
        padding: 1rem 0 1rem 0.5rem;
    }

    h5 {
        font-size: 0.9rem;
    }

    .contents_title {
        font-size: 1.5rem;
        margin: 4rem 0 2rem 0;
    }
}

/* スマホ幅 */
@media screen and (max-width: 499px) {
    .contents .contents_list {
        width: 90%;
    }

    .contents .contents_list dt {
        width: 35%;
        font-size: 0.85rem;
        padding: 0.8rem 0.4rem 0.8rem 0;
    }

    .contents .contents_list dd {
        width: 65%;
        font-size: 0.85rem;
        padding: 0.8rem 0 0.8rem 0.4rem;
    }

    h5 {
        font-size: 0.9rem;
    }

    .contents_title {
        font-size: 1.5rem;
        margin: 4rem 0 2rem 0;
    }
}