@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* 1. プロフィール欄の外枠（全体を中央に整列させる土台） */
.author-box {
    border: 1px solid #e2dacb !important; /* フキダシと統一した優しい薄茶線 */
    border-radius: 16px !important; /* 角をまあるく */
    background-color: #fafafa !important; /* 清潔感のあるペールホワイト */
    padding: 30px 24px !important; /* 上下の余白を広げてさらにゆったり */
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important; /* ほんのり優しい影 */
    box-sizing: border-box !important;
    text-align: center !important; /* 中身をすべて中央に寄せる */
    width: 100% !important;
    overflow: hidden !important; /* 絶対に枠外にはみ出させない命令 */
}

/* 2. 「この記事を書いた人」のタイトル */
.author-box h3, 
.author-box .author-widget-title {
    font-size: 0.85em !important;
    letter-spacing: 0.15em !important;
    color: #888888 !important;
    margin: 0 auto 15px auto !important; /* 中央寄せの土台マージン */
    display: block !important;
    border: none !important;
    padding: 0 !important;
    text-align: center !important;
    width: 100% !important;
}

/* 3. 中身のエリア（裏側に残る不要な余白をすべてゼロにしてリセット） */
.author-box-content,
.author-box .author-content {
    display: flex !important;
    flex-direction: column !important; /* 確実に上から下への縦並びにする */
    align-items: center !important; /* 横方向もど真ん中に整列 */
    justify-content: center !important;
    padding: 0 !important; 
    margin: 0 !important; /* 左右のズレの原因になるマージンを完全消去 */
    float: none !important;
    width: 100% !important;
}

/* 4. 丸型アイコン写真（文字との間の隙間をここで強制的にあける） */
.author-box .author-thumb {
    float: none !important; /* 左への回り込みを完全に強制解除 */
    margin: 25px auto 20px auto !important; /* 文字との間の隙間をしっかり確保 */
    padding: 0 !important; /* ズレの原因になる内側の余白をゼロに */
    display: inline-block !important;
    clear: both !important;
    width: 90px !important;
    height: 90px !important;
}
.author-box .author-thumb img,
.author-box img.avatar {
    width: 90px !important;  /* スマホで見やすいちょうどいいサイズ */
    height: 90px !important;
    border-radius: 50% !important; /* 綺麗な丸型に固定 */
    display: block !important;
    margin: 0 !important;
}

/* 5. お名前の部分（★サイズと太さをさらに抑えて、完全に文章に馴染ませる★） */
.author-box .author-name {
    margin: 0 auto 16px auto !important; /* 下の文章の間に適度な隙間を空ける */
    padding: 0 !important; 
    display: block !important;
    float: none !important;
    clear: both !important;
    text-align: center !important;
    width: 100% !important;
}
.author-box .author-name a {
    font-family: "YuMincho", "Yu Mincho", "MS Mincho", serif !important; /* 美しい明朝体 */
    font-size: 1.05em !important; /* 【変更】サイズを1.15emから1.05emへ。自己紹介の文章（0.95em）に極限まで近づけました */
    font-weight: normal !important; /* 【変更】太字をやめ、標準（レギュラー）の細さにすることで、圧倒的に上品で控えめな印象に */
    color: #444444 !important; /* 文章と同じ優しい濃いグレー */
    text-decoration: none !important;
    letter-spacing: 0.1em !important; /* 文字の間隔を少しだけ広げ、細くても美しく読めるように調整 */
    display: inline-block !important;
    white-space: nowrap !important; /* スマホでも絶対に途中で文字を折らない */
}

/* 6. プロフィール本文の文章 */
.author-box .author-description {
    font-family: "YuMincho", "Yu Mincho", "MS Mincho", serif !important; /* 美しい明朝体 */
    line-height: 1.85 !important; /* 1行ずつに心地よいゆとり */
    color: #444444 !important;
    font-size: 0.95em !important;
    margin: 12px 0 0 0 !important; /* 左右のマージンをゼロにしてはみ出しを防ぐ */
    padding: 0 !important; 
    text-align: left !important; /* 文章は左寄せにして読書の読みやすさを最優先 */
    clear: both !important;
    float: none !important;
    width: 100% !important; 
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}