@charset "utf-8";

/*
 * Blog Author Component
 *
 * ブログ記事用の「この記事の監修者」ブロック。
 * ショートコード [blog_author] で記事本文中に挿入される。
 * Figma 仕様（node 1:17713 "03-1案"）を忠実に再現。
 *
 * 構造:
 *   .blog-author          ... 全体ラッパ（1012px、自身は枠なし）
 *   .blog-author__heading ... ピンクの帯（1012 × 62、全幅・枠なし）
 *   .blog-author__body    ... 白本体（1012 × 316、全周 1px ボーダー）
 *
 * 重要: blog.css の `.article_contents * { font-size: 15px }` と
 *       `.article_contents * + * { margin-top: 1em }` が本コンポーネント内に
 *       強く効いてくる。コンポーネントセレクタに `.article_contents` を前置し
 *       specificity 0,2,0 を確保して打ち消す。
 */

/* === レイアウト全体 === */
.article_contents .blog-author,
.blog-author {
    box-sizing: border-box;
    max-width: 1012px;
    width: 100%;
    margin: 70px auto;
    color: #333;
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", sans-serif;
}

.blog-author *,
.blog-author *::before,
.blog-author *::after {
    box-sizing: border-box;
}

/* blog.css の干渉リセット（specificity 0,2,0 で勝つ）
   font-size / line-height / margin / padding / max-width をいったん打ち消し、
   この下で各要素ごとに改めて指定する。
   注意: .blog-author 自身は含めない（外側 margin を保持するため） */
.article_contents .blog-author * {
    font-size: revert;
    line-height: revert;
    margin: 0;
    padding: 0; /* blog.css の `.article_contents p { padding-bottom: 16px }` を打ち消す */
    max-width: none;
}

/* article_box のリンクアンダーラインも打ち消し（既存運用に合わせる） */
.article_box .blog-author a,
.article_box .blog-author a:hover {
    text-decoration: none;
}

/* === ピンクの帯 (Figma: Rectangle 2 / 1012×62 / #e9cad8 / borderなし) === */
.article_contents .blog-author__heading,
.blog-author__heading {
    height: 62px;
    background: #e9cad8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.article_contents .blog-author__heading-text,
.blog-author__heading-text {
    /* Figma: Hiragino Sans W4。Figmaが内部で W4 を CSS 400 として描画するため
       見た目を合わせて 400 を指定（500 だとブラウザ上で太く見える） */
    font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Yu Gothic", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    color: #333;
    letter-spacing: 0;
}

/* === 白本体 (Figma: Rectangle 1 / 1012×316 / #fff / border 1px #e9cad8) === */
.article_contents .blog-author__body,
.blog-author__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    /* Figma: 上 50 / 下 29 / 左右 49 */
    padding: 50px 49px 29px;
    background: #fff;
    border: 1px solid #e9cad8;
}

/* === 左カラム === */
.article_contents .blog-author__profile,
.blog-author__profile {
    flex: 0 0 227px;
    width: 227px;
    text-align: center;
}

.article_contents .blog-author__photo,
.blog-author__photo {
    width: 153px;
    height: 153px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
}

.article_contents .blog-author__photo img,
.blog-author__photo img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.article_contents .blog-author__role,
.blog-author__role {
    margin-top: 6px; /* 写真とのアキ */
    /* Figma: Hiragino Sans W3。Figma上では Light 相当に見えるため 300 に */
    font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Yu Gothic", sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

.article_contents .blog-author__name,
.blog-author__name {
    margin-top: 0; /* 役職とくっつく（Figma 通り） */
    /* Figma: Hiragino Sans W4。視覚的な太さを Figma に合わせて 400 を指定 */
    font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Yu Gothic", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.5;
    color: #333;
}

/* === 右カラム: プロフィール本文 === */
.article_contents .blog-author__bio,
.blog-author__bio {
    flex: 0 1 673px;
    width: 673px;
    /* Figma: Hiragino Kaku Gothic ProN W3 */
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Yu Gothic", sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 30px;
    color: #333;
    text-align: justify;
}

/* === SP（〜999px）: 縦積みレイアウト === */
@media screen and (max-width: 999px) {
    .article_contents .blog-author,
    .blog-author {
        margin: 40px auto;
    }

    .article_contents .blog-author__heading,
    .blog-author__heading {
        height: 50px;
    }

    .article_contents .blog-author__heading-text,
    .blog-author__heading-text {
        font-size: 17px;
    }

    .article_contents .blog-author__body,
    .blog-author__body {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 28px 20px 24px;
    }

    .article_contents .blog-author__profile,
    .blog-author__profile {
        flex: 0 0 auto;
        width: 100%;
    }

    .article_contents .blog-author__photo,
    .blog-author__photo {
        width: 130px;
        height: 130px;
    }

    .article_contents .blog-author__role,
    .blog-author__role {
        font-size: 14px;
    }

    .article_contents .blog-author__name,
    .blog-author__name {
        font-size: 18px;
    }

    .article_contents .blog-author__bio,
    .blog-author__bio {
        flex: 0 1 auto;
        width: 100%;
        font-size: 14px;
        line-height: 26px;
    }
}