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


/* reCAPTCHA 保護マーク非表示　ーーーーーーーーーーーーーーー */
.grecaptcha-badge { visibility: hidden; }


/* 固定ページのタイトル下　ーーーーーーーーーーーーーーー */
.c-pageTitle{
margin-bottom:2em;
}


/* ウェブフォント読み込み中の対策 ーーーーーーーーーーーーーーー */
@font-face {
  font-family: icomoon;
  font-style: normal;
  font-weight: 400;
  src:
    url(/wp-content/themes/swell/assets/fonts/icomoon.woff2?fq24x) format("woff2"),
    url(/wp-content/themes/swell/assets/fonts/icomoon.ttf?fq24x) format("truetype"),
    url(/wp-content/themes/swell/assets/fonts/icomoon.woff?fq24x) format("woff"),
    url(/wp-content/themes/swell/assets/fonts/icomoon.svg?fq24x#icomoon) format("svg");
  font-display: swap;
}


/* サイドバー用：カテゴリリンク ーーーーーーーーーーーーーーー */
.mo-side-category{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mo-side-category__item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #f7f7f7;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  text-decoration: none;
  color: #333;
  transition: .2s ease;
}
.mo-side-category__item:hover{
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  transform: translateY(-1px);
}
.mo-side-category__figure{
  width: 52px;
  height: 52px;
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mo-side-category__figure img{
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.mo-side-category__text{
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}


/* トップページのプロフカード
-------------------------------------------------- */
.mo-badge,
.mo-badge *{
  box-sizing: border-box;
}
.mo-badge{
--mo-yellow: clamp(28px, 4vw, 35px);
--mo-body: clamp(15px, 1.8vw, 18px);

width: 100%;
max-width: 640px;
margin: 22px auto;
}

.mo-badge__card{
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 320px;
padding: 24px;
overflow: hidden;
aspect-ratio: 16 / 9;
border: 2px solid rgba(255,255,255,.6);
border-radius: 18px;
background: transparent;
box-shadow:
  0 4px 12px rgba(255,255,255,0.6),
  inset 0 1px 5px rgba(255,255,255,0.8);
isolation: isolate;
}

/* ぼかしレイヤーは分離 */
.mo-badge__card::before{
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: rgba(255,255,255,.45);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.mo-badge__txt{
position: relative;
z-index: 2;
width: 100%;
margin-inline: auto;
}

/* 上段：黒フチを太く */
.mo-badge__label,
.mo-badge__num{
color: #ffc600;
font-size: var(--mo-yellow);
font-weight: 900;
paint-order: stroke fill;
text-stroke: 6px #333;
-webkit-text-stroke: 6px #333;
line-height: 1.6;
text-shadow:
  0 2px 6px rgba(255,255,255,.25),
  0 4px 10px rgba(0,0,0,.10);
}

/* 下段：白い影を強く */
.mo-badge__body{
margin: 16px 0 0;
color: #333;
font-size: var(--mo-body);
font-weight: 900;
line-height: 1.7;
text-shadow:
  1px 1px 4px #fff,
  -1px 1px 4px #fff,
  1px -1px 4px #fff,
  -1px -1px 4px #fff;
}

/* キャラ */
.mo-badge__chara{
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
display: block;
width: clamp(120px, 32vw, 200px);
height: auto;
object-fit: contain;
pointer-events: none;
filter: drop-shadow(0 16px 22px rgba(0,0,0,.18));
}

/* スマホ */
@media (max-width: 700px){
.mo-badge{
--mo-yellow: 23px;
--mo-body: 13px;
}
.mo-badge__card{
max-width: 420px;
min-height: 280px;
padding: 15px;
aspect-ratio: auto;
border-radius: 18px;
margin: 0 auto;
}
.mo-badge__txt{
text-align: left;
}
.mo-badge__line{
justify-content: flex-start;
}
.mo-badge__label,
.mo-badge__num{
paint-order: normal;
text-stroke: 0px #333;
-webkit-text-stroke: 0px #333;
text-shadow:
1px 1px 2px rgba(51, 51, 51, 0.85),
2px 2px 9px rgba(255, 255, 255, 0.8),
-2px 2px 9px rgba(255, 255, 255, 0.8),
2px -2px 9px rgba(255, 255, 255, 0.8),
-2px -2px 9px rgba(255, 255, 255, 0.8);
}
.mo-badge__chara{
width: 120px;
}
}


/* ピックアップバナーのカテゴリの色 ーーーーーーーーーーーーーーー */
.-cap-btm_right .c-bannerLink__label {
background-color:#00a8ff;
color:#fff;
}


/* コメント移行ボタン ーーーーーーーーーーーーーーー */
#comments_go.c-fixBtn {
background: #d81718;
border-radius: 50%;
flex-direction: column;
gap: 2px;
color: #fff;
border: none;
}
#comments_go.c-fixBtn .c-fixBtn__icon,
#comments_go.c-fixBtn .c-fixBtn__label {
color: #fff;
}


/* コメント欄のカスタマイズ ーーーーーーーーーーーーーーー */

/* コメント欄の背景を白に */
.p-commentArea {
background: #fff;
padding:1em;
}
/* コメント欄の枠線を消す */
.-body-solid .p-commentArea {
box-shadow: none;
}

/* コメント共通（カード） */
.comment .comment-body {
position: relative;
background: #fff !important; /* 性別なし */
border-radius: 14px;
padding: 14px 16px;
margin-bottom: 25px; /* 日付分の余白 */
box-shadow: 3px 3px 3px rgba(0,0,0,.08);
}
/* 男性：薄い青 */
.comment.gender-male .comment-body {
background: #d0f1ff !important;
}
/* 女性：薄いピンク */
.comment.gender-female .comment-body {
background: #ffd2e7 !important;
}
/* コメント上部（名前・日付） */
.comment-meta {
color: #777;
font-size: 12px;
margin-bottom: 6px;
}
/* コメント文章 */
.comment-content {
font-size: 14px;
}
/* 返信リンク */
.comment-reply-link {
display: inline-block;
margin-top: 8px;
font-size: 12px;
}
/* 返信インデント */
.comment.depth-2 { margin-left: 28px; }
.comment.depth-3 { margin-left: 56px; }
/* 名前横の性別アイコン（共通） */
.comment-author .fn::after {
content: "";
display: inline-block;
width: 15px;
height: 15px;
margin-left: 6px;
vertical-align: middle;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* 男性アイコン */
.comment.gender-male .comment-author .fn::after {
background-image: url("https://www.matchout.jp/wp-content/uploads/2025/12/male.png");
}
/* 女性アイコン */
.comment.gender-female .comment-author .fn::after {
background-image: url("https://www.matchout.jp/wp-content/uploads/2025/12/female.png");
}
/* 日付を右下・箱の外に表示 */
.comment-metadata {
position: absolute;
right: 6px;
bottom: -28px;
font-size: 10px;
color: #999;
}


/* 記事上：この記事を書いた人ブロック ーーーーーーーーーーーーーーー */
.blog-author-box{
display:flex;
align-items:flex-start;
gap:24px;
max-width:780px;
margin:40px auto;
padding:24px 28px;
background:#fff;
border:2px solid #eee;
border-radius:14px;
box-shadow:1px 2px 6px rgba(0,0,0,.06);
}
/* 左カラム（アイコン＋名前） */
.author-left{
flex:0 0 110px;
text-align:center;
}
/* アイコン */
.author-icon img{
width:92px;
height:92px;
border-radius:50%;
object-fit:cover;
}
/* 名前（画像下） */
.author-name{
margin-top:4px;
font-size:.95rem;
font-weight:700;
color:#333;
}
/* 右テキスト */
.author-info{
flex:1;
min-width:240px;
}
/* ラベル */
.author-label{
margin:0 0 8px;
font-size:.75rem;
color:#999;
}
/* 説明文 */
.author-desc{
margin:0;
font-size:.95rem;
line-height:1.65;
color:#444;
}
/* ── スマホ対応 ── */
@media(max-width:640px){
.blog-author-box{
flex-direction:column;
align-items:center;
text-align:center;
}
.author-info{
width:100%;
}
.author-label{
text-align:center;
margin-bottom:10px;
}
.author-desc{
text-align:left;
}
}


/* サイドバーのプロフカード ーーーーーーーーーーーーーーー */

/* SWELLのカスタムHTMLウィジェット装飾を無効化 */
#sidebar .widget_custom_html .c-widget,
#sidebar .widget_custom_html {
padding: 0 !important;
background: transparent !important;
border-radius: 0 !important;
}
/* プロフカード本体（背景：渋谷／角丸なし） */
.original-profile-card {
background-image: url("https://www.matchout.jp/wp-content/uploads/2025/12/masa-back-image-1.jpg");
background-size: cover;
background-position: center;
padding: 24px 16px 20px;
margin-bottom: 28px;
text-align: center;
}
/* アイコン（背景なし・直置き） */
.profile-icon {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 10px;
display: block;
}
/* 名前 */
.profile-name {
font-size:16px;
font-weight:700;
color:#333;
margin-bottom:14px;
text-shadow:0 1px 2px rgba(255,255,255,0.6);
}
/* 白背景：本文だけ */
.profile-textbox {
background: rgba(255, 255, 255, 0.85);
border-radius: 16px;
padding: 22px 16px;
margin-bottom: 14px;
text-align: left;
}
/* 箇条書き */
.profile-list {
list-style: none;
padding: 0;
margin: 0 0 14px 0;
}
.profile-list li {
font-size: 13px;
line-height: 1.6;
}
/* 本文 */
.profile-text {
font-size: 13px;
line-height: 1.75;
margin-bottom: 0;
}
/* ボタン（白背景の外） */
.profile-button {
display: inline-block;
background: #e53935;
color: #fff;
padding: 12px 28px;
border-radius: 30px;
font-size: 16px;
text-decoration: none;
}