/* ==========================================================================
   page-agent.css
   内部ページ（運営者情報・編集方針・監修者紹介・お問い合わせ）用。プレフィックス p-。
   ルートclass起点の子孫セレクタで書く。値は variables.css の変数を使う。
   画面幅の区切りは 1279 → 1024 → 600 の順。
   ========================================================================== */

/* 4ページ共通 */
.p-about > p,
.p-editorial > p,
.p-supervisor > p,
.p-contact > p {
    margin-bottom: var(--space-24);
    color: var(--color-text);
    font-size: var(--fz-16);
    line-height: 1.9;
}
.p-about > section > p,
.p-editorial > section > p,
.p-supervisor > section > p,
.p-contact > section > p {
    margin-bottom: var(--space-16);
    color: var(--color-text);
    font-size: var(--fz-16);
    line-height: 1.9;
}
.p-about > section > h2,
.p-editorial > section > h2,
.p-supervisor > section > h2,
.p-contact > section > h2 {
    margin-top: var(--space-64);
}

/* 表 */
.p-about table,
.p-editorial table,
.p-supervisor table,
.p-contact table {
    width: 100%;
    margin-bottom: var(--space-24);
    border-collapse: collapse;
    font-size: var(--fz-15);
    line-height: 1.8;
}
.p-about table th,
.p-editorial table th,
.p-supervisor table th,
.p-contact table th {
    width: 26%;
    padding: var(--space-12) var(--space-16);
    border: 1px solid var(--color-line);
    background-color: var(--color-bg-sub);
    color: var(--color-text);
    font-weight: bold;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}
.p-about table td,
.p-editorial table td,
.p-supervisor table td,
.p-contact table td {
    padding: var(--space-12) var(--space-16);
    border: 1px solid var(--color-line);
    color: var(--color-text);
    vertical-align: top;
}

/* 監修者プロフィール */
.p-supervisor__profile {
    overflow: hidden;
}
.p-supervisor__profile > .p-image {
    float: left;
    width: 160px;
    margin: 0 var(--space-24) var(--space-16) 0;
}
.p-supervisor__profile > .p-image > img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 50%;
}
.p-supervisor__profile > p:first-of-type {
    margin-bottom: var(--space-8);
    font-weight: bold;
}
.p-supervisor__profile > p:first-of-type > span {
    display: block;
    color: var(--color-text-sub);
    font-size: var(--fz-14);
    font-weight: normal;
}
/* お問い合わせフォームの設置予定欄 */
.p-contact__form > p {
    padding: var(--space-20);
    border: 1px dashed var(--color-line);
    background-color: var(--color-bg-sub);
    color: var(--color-text-sub);
    font-size: var(--fz-15);
}

@media screen and (max-width: 600px) {
    .p-about table th,
    .p-editorial table th,
    .p-supervisor table th,
    .p-contact table th {
        display: block;
        width: auto;
        border-bottom: none;
        white-space: normal;
    }
    .p-about table td,
    .p-editorial table td,
    .p-supervisor table td,
    .p-contact table td {
        display: block;
    }
    .p-supervisor__profile > .p-image {
        float: none;
        width: 120px;
        margin: 0 auto var(--space-16);
    }
}

/* 記事本文用の黒丸リストが「このサイトの運営者」ブロックのバッジ一覧にも
   かかってしまうため打ち消す（本来はトップページ等のentry-contentの外で
   使う想定のパーツのため） */
.entry-content .operator-info-container .rank ul {
    list-style: none;
    margin: 0;
}
.entry-content .operator-info-container .rank li {
    list-style: none;
    margin: 0 8px;
}