@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* --- 移動した著者情報のスタイル調整 --- */

/* 1. セクション全体の余白 */
.post_content .l-articleBottom__section.-author {
    margin-bottom: 40px !important; /* 目次との間隔 */
    margin-top: 20px;
}

/* 2. タイトル「この記事を書いた人」のデザインリセット */
/* SWELLの本文H2デザイン（背景色や帯）を打ち消します */
.post_content .l-articleBottom__section.-author .c-secTitle {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 1em;
    color: #333; /* 文字色 */
    font-size: 16px; /* 文字サイズ */
    text-align: center; /* 中央寄せ */
    font-weight: bold;
}

/* タイトルの装飾（擬似要素）も完全に消す */
.post_content .l-articleBottom__section.-author .c-secTitle::before,
.post_content .l-articleBottom__section.-author .c-secTitle::after {
    content: none !important;
    display: none !important;
}

/* 3. プロフィールボックス本体のデザイン */
/* 枠線をつけてカード風にします */
.post_content .p-authorBox {
    border: 1px solid #e5e5e5; /* 薄いグレーの枠線 */
    border-radius: 4px; /* 角を少し丸く */
    padding: 20px; /* 内側の余白 */
    background-color: #fdfdfd; /* 背景色（真っ白より少しグレー寄り） */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* うっすら影をつける */
}

/* スマホ表示時の微調整 */
@media screen and (max-width: 599px) {
    .post_content .p-authorBox {
        padding: 15px;
    }
}

/* --- プロフィール内のSNSアイコンの崩れを修正 --- */

/* 1. リスト（箇条書き）スタイルの完全リセット */
.post_content .p-authorBox ul.p-authorBox__iconList {
    margin: 1em 0 0 0 !important;
    padding: 0 !important;
    list-style: none !important; /* 点を消す */
    display: flex !important; /* 横並びを強制 */
    flex-wrap: wrap;
    border: none !important;
    background: none !important;
}

/* 2. リストアイテムのリセット */
/* 本文特有のチェックマークやアイコンが出ないようにする */
.post_content .p-authorBox ul.p-authorBox__iconList li {
    margin: 0 10px 10px 0 !important; /* アイコン同士の間隔 */
    padding: 0 !important;
    border: none !important;
    background: none !important;
    list-style: none !important;
}

/* 謎の点やアイコン（擬似要素）を完全に削除 */
.post_content .p-authorBox ul.p-authorBox__iconList li::before,
.post_content .p-authorBox ul.p-authorBox__iconList li::after {
    content: none !important;
    display: none !important;
}

/* 3. リンク（丸いボタン部分）のスタイル修正 */
.post_content .p-authorBox .c-iconList__link {
    text-decoration: none !important; /* 下線を消す */
    box-shadow: none !important; /* SWELLのリンク装飾を消す */
    border-radius: 50% !important; /* 丸くする */
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;  /* アイコンの幅 */
    height: 40px; /* アイコンの高さ */
    font-size: 18px; /* 中のマークのサイズ */
    color: #fff !important; /* アイコンの色を白に */
    background-color: #c2b6a8; /* テーマカラー（必要に応じて変更してください） */
    transition: opacity 0.3s;
}

/* ホバー時の挙動 */
.post_content .p-authorBox .c-iconList__link:hover {
    opacity: 0.8;
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.15) !important;
}

/* 4. アイコン（svg/iタグ）の調整 */
.post_content .p-authorBox .c-iconList__icon {
    margin: 0 !important;
    vertical-align: middle;
}

/* --- プロフィールの文字サイズ調整 --- */

/* 1. 名前のサイズ */
.post_content .p-authorBox .p-authorBox__name {
    font-size: 20px !important; 
    font-weight: bold !important; 
    line-height: 1.4;
    display: block; 
    margin-bottom: 5px; 
}

/* 2. プロフィール本文のサイズ */
.post_content .p-authorBox .p-authorBox__desc {
    font-size: 14px !important; 
    line-height: 1.7; 
    margin-top: 10px; 
}

/* --- スマホ表示時の微調整 --- */
@media screen and (max-width: 599px) {
    /* スマホでの名前サイズ */
    .post_content .p-authorBox .p-authorBox__name {
        font-size: 18px !important; 
    }
    
    /* スマホでの本文サイズ */
    .post_content .p-authorBox .p-authorBox__desc {
        font-size: 13px !important; 
    }
}

/* QAブロック全体のリセットと余白 */
.swell-block-faq {
    margin: 40px 0;
}

/* 各QAのアイテム（カード化） */
.swell-block-faq__item {
    background: #fff;
    border: 1px solid #eaeaea; /* 薄い枠線 */
    border-radius: 8px; /* 角丸 */
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); /* ふんわりした影 */
    transition: transform 0.3s ease;
}

.swell-block-faq__item:hover {
    transform: translateY(-2px); /* ホバーで少し浮く */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

/* 質問（Q）のデザイン */
.swell-block-faq .faq_q {
    position: relative;
    padding: 0 0 16px 45px !important; /* アイコン分の左余白 */
    margin-bottom: 16px !important;
    border-bottom: 1px dashed #ddd; /* 点線の下線 */
    font-weight: 700;
    font-size: 1.1em;
    color: #333;
    background: none !important; /* SWELLデフォルト背景の打ち消し */
}

/* Qアイコン */
.swell-block-faq .faq_q::before {
    content: 'Q';
    position: absolute;
    left: 0;
    top: -2px;
    width: 32px;
    height: 32px;
    background: #c2b6a8; /* サイトのメインカラー */
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
}

/* 回答（A）のデザイン */
.swell-block-faq .faq_a {
    position: relative;
    padding: 0 0 0 45px !important;
    margin-top: 0 !important;
    color: #555;
    background: none !important;
    font-size: 0.95em;
    line-height: 1.8;
}

/* Aアイコン */
.swell-block-faq .faq_a::before {
    content: 'A';
    position: absolute;
    left: 0;
    top: 0; /* 位置調整 */
    width: 32px;
    height: 32px;
    background: #fff;
    color: #c2b6a8; /* メインカラーの文字 */
    border: 2px solid #c2b6a8; /* メインカラーの枠線 */
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 28px; /* ボーダー分を引いて中央配置 */
    text-align: center;
    border-radius: 50%;
}