@charset "UTF-8";

/* =========================================================
   TUF ガバナンスページ
   style.css

   編集するときは、まず「基本設定」を変更してください。
   レイアウトやスマートフォン用の設定は下の各セクションに
   分けてあります。
   ========================================================= */


/* =========================================================
   01. 基本設定
   ========================================================= */

:root {
    /* 文字・リンク */
    --text-color: #111111;
    --link-color: #0645d6;

    /* 背景 */
    --page-background: #f4f4f4;
    --document-background: #ffffff;
    --table-header-background: #f5f5f5;

    /* 線 */
    --border-color: #111111;
    --sub-border-color: #dddddd;

    /* PC版の本文幅・余白 */
    --document-width: 1000px;
    --document-padding-top: 72px;
    --document-padding-right: 80px;
    --document-padding-bottom: 90px;
    --document-padding-left: 80px;

    /* 本文 */
    --body-font-size: 16px;
    --body-line-height: 1.65;
}


/* =========================================================
   02. リセット・共通設定
   ========================================================= */


/* =========================================================
   03. メイン文書
   ========================================================= */

.document {
    width: min(100%, var(--document-width));
    min-height: 100vh;

    margin: 0 auto;
    padding:
        var(--document-padding-top)
        var(--document-padding-right)
        var(--document-padding-bottom)
        var(--document-padding-left);
	padding-top:0 !important;
    background: var(--document-background);
}


/* =========================================================
   04. ページタイトル
   ========================================================= */

.document-header {
    margin: 0 0 42px;
    text-align: center;
}

h1 {
    margin: 0;

    font-size: 27px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.04em;
}


/* =========================================================
   05. セクション見出し
   ========================================================= */

.section {
    margin: 0 0 34px;
}

h2 {
    margin: 0 0 3px;

    font-size: 22px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.03em;
}


/* =========================================================
   06. 本文・項目
   ========================================================= */

p {
    margin: 0 0 16px;
    font-size: 16px;
}

/*
   「自社制作番組の推進：」などの小見出しと本文を
   同じ行から続けて表示するための設定です。
*/
.topic {
    margin: 0 0 22px;
}

.topic h3 {
    display: inline;
    margin: 0;

    font-size: 16px;
    font-weight: 700;
}

.topic p {
    display: inline;
}

/* URL一覧 */
.links,
.site-links {
    margin-bottom: 22px;
}

/* 表の直前にある説明文 */
.table-lead {
    margin: 0 0 3px;
}

/* 最後のガバナンス説明 */
.governance-note {
    margin-top: 18px;
}


/* =========================================================
   07. テーブル共通
   ========================================================= */

.table-wrap {
    width: 100%;

    /* PCでは必要に応じて横スクロール可能 */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;

    border: 2px solid var(--border-color);
    border-collapse: collapse;

    background: #ffffff;

    font-size: 15px;
    line-height: 1.55;
}

th,
td {
    padding: 7px 9px;

    border: 1px solid var(--border-color);

    text-align: left;
    vertical-align: top;
    font-weight: 400;
}

thead th {
    background: var(--table-header-background);
    border-bottom: 1px solid var(--border-color);
    font-weight: 500;
}


/* =========================================================
   08. 「企業経営に関わる諸情報」テーブル
   ========================================================= */

.info-table th:first-child {
    width: 23%;
}

.info-table td {
    width: 77%;
}

.info-table tbody th {
    font-weight: 500;
}


/* =========================================================
   09. 「取締役会の開催状況」テーブル
   ========================================================= */

.meeting-table th:nth-child(1) {
    width: 34%;
}

.meeting-table th:nth-child(2) {
    width: 38%;
}

.meeting-table th:nth-child(3) {
    width: 28%;
}


/* =========================================================
   10. スマートフォン対応

   700px以下では、
   ・ページ余白を小さくする
   ・見出しを少し小さくする
   ・表をカード形式に変更する
   という構成です。
   ========================================================= */

@media (max-width: 700px) {

    body {
        background: #ffffff;
        line-height: 1.7;
    }

    .document {
        width: 100%;
        padding: 38px 20px 55px;
    }

    .document-header {
        margin-bottom: 30px;
    }

    h1 {
        font-size: 22px;
    }

    h2 {
        margin-bottom: 7px;
        font-size: 20px;
    }

    p,
    .topic h3,
    .topic p {
        font-size: 15px;
    }

    .section {
        margin-bottom: 30px;
    }

    .topic {
        margin-bottom: 19px;
    }

    .links,
    .site-links {
        word-break: break-word;
    }


    /* -----------------------------------------------------
       スマートフォン：テーブルをカード型にする
       ----------------------------------------------------- */

    .table-wrap {
        overflow: visible;
    }

    table {
        border: 0;
        font-size: 14px;
    }

    /* tableの各要素を縦積みにする */
    table,
    thead,
    tbody,
    tr,
    th,
    td {
        display: block;
    }

    /* PC用のヘッダー行はスマートフォンでは非表示 */
    thead {
        display: none;
    }

    /* 1行を1枚のカードとして表示 */
    .info-table tr,
    .meeting-table tr {
        margin: 0 0 12px;
        border: 1px solid var(--border-color);
    }

    /* 「項目」のセル */
    .info-table tbody th {
        width: 100% !important;
        padding: 9px 11px;

        background: var(--table-header-background);
        border: 0;
        border-bottom: 1px solid var(--border-color);

        font-weight: 700;
    }

    /* 内容のセル */
    .info-table tbody td,
    .meeting-table td {
        width: 100% !important;
        padding: 9px 11px;

        border: 0;
        border-bottom: 1px solid var(--sub-border-color);
    }

    .info-table tbody td:last-child,
    .meeting-table td:last-child {
        border-bottom: 0;
    }

    /*
       取締役会テーブルでは、PC版の列見出しを
       CSSで各セルの上に表示する。
    */
    .meeting-table td::before {
        display: block;
        margin-bottom: 2px;

        font-size: 12px;
        font-weight: 700;
    }

    .meeting-table td:nth-child(1)::before {
        content: "開催日";
    }

    .meeting-table td:nth-child(2)::before {
        content: "出席者";
    }

    .meeting-table td:nth-child(3)::before {
        content: "出席率";
    }
}


/* =========================================================
   11. PC・タブレット用
   ========================================================= */

@media (min-width: 701px) {

    .section + .section {
        break-before: auto;
    }
}


/* =========================================================
   12. 印刷用
   ========================================================= */

@media print {

    body {
        background: #ffffff;
    }

    .document {
        width: 100%;
        padding: 25mm 20mm;
        box-shadow: none;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    .section {
        break-inside: auto;
    }

    .table-wrap {
        overflow: visible;
    }
}