@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
*/

/* --- Google Fonts 読み込み --- */
@import url('https://fonts.googleapis.com/css2?family=Rounded+Mplus+1c:wght@300;400;500;700;900&display=swap');

/* --- 本文（記事・固定ページ・ウィジェット） --- */
body,
.entry-content,
.p-entry__content,
.p-article,
.l-article,
.post_content,
.widget,
.c-card__body,
.c-postList,
.editor-styles-wrapper,
p,
li {
    font-family: 'Rounded Mplus 1c','Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo',sans-serif !important;
    font-weight: 400 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- 見出し（太すぎを1段階下げて700） --- */
h1, h2, h3 {
    font-family: 'Rounded Mplus 1c',sans-serif !important;
    font-weight: 700 !important;
}

h4, h5, h6 {
    font-family: 'Rounded Mplus 1c',sans-serif !important;
    font-weight: 500 !important;
}

/* --- 細字（キャプションなど） --- */
small, .caption, .is-style-caption {
    font-family: 'Rounded Mplus 1c',sans-serif !important;
    font-weight: 300 !important;
}

/* --- 念のため（本文に確実に反映させる最終指定） --- */
html body * {
    font-family: 'Rounded Mplus 1c','Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo',sans-serif !important;
}

/* === 見出しウェイト調整 === */
.p-entry__content h1, .p-entry__content h2, .p-entry__content h3,
.entry-content h1, .entry-content h2, .entry-content h3,
.l-article h1, .l-article h2, .l-article h3,
.p-article h1, .p-article h2, .p-article h3,
.post_content h1, .post_content h2, .post_content h3,
.editor-styles-wrapper h1, .editor-styles-wrapper h2, .editor-styles-wrapper h3,
h1.wp-block-heading, h2.wp-block-heading, h3.wp-block-heading,
.c-postTitle__ttl, .p-postTitle__ttl, .c-pageTitle, .p-pageTitle,
.single .c-postTitle__ttl, .page .c-pageTitle {
    font-family: 'Rounded Mplus 1c', sans-serif !important;
    font-weight: 700 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1 strong, h1 b, h2 strong, h2 b, h3 strong, h3 b,
.entry-content h1 strong, .entry-content h1 b,
.entry-content h2 strong, .entry-content h2 b,
.entry-content h3 strong, .entry-content h3 b {
    font-weight: 700 !important;
}

h1 a, h2 a, h3 a,
.entry-content h1 a, .entry-content h2 a, .entry-content h3 a {
    font-family: 'Rounded Mplus 1c', sans-serif !important;
    font-weight: 700 !important;
}

/* ====================================
   SWELL風 YouTube登録者数ソートカード
   ==================================== */
#swell-yt-api-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 2em;
    margin-bottom: 2em;
}

.swell-yt-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    text-decoration: none !important;
    color: #333;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

.swell-yt-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}

.swell-yt-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #f0f0f0;
    object-fit: cover;
    margin-right: 16px;
    flex-shrink: 0;
    vertical-align: top !important;
}

.swell-yt-content {
    flex: 1;
    min-width: 200px;
}

.swell-yt-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}

.swell-yt-name {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 4px 0;
    line-height: 1.4;
    color: #333;
    text-decoration: none;
}

.swell-yt-count {
    color: #c00;
    font-weight: bold;
    font-size: 14px;
    display: inline-block;
    background: #fff5f5;
    padding: 2px 8px;
    border-radius: 4px;
    align-self: flex-start;
}

.swell-yt-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 8px 0 0 0;
    border-top: 1px solid #f0f0f0;
    padding-top: 8px;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}