/*
Theme Name: AFFINGER Child
Template: affinger
Description: AFFINGER6 対応
Version: 20240601
*/

/*media Queries スマートフォンとタブレットサイズ（959px以下）で適応したいCSS - スマホ・タブレット
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 959px) {


	/*-- ここまで --*/
}
	
/*media Queries タブレットサイズ（600px～959px）のみで適応したいCSS -タブレットのみ
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 959px) {


	/*-- ここまで --*/
}	
	
/*media Queries タブレット（600px）以上で適応したいCSS -タブレット・PC
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) {


	/*-- ここまで --*/
}

/*media Queries PCサイズ（960px）以上で適応したいCSS - PCのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (min-width: 960px) {


	/*-- ここまで --*/
}

/*media Queries スマホサイズ（599px）以下で適応したいCSS - スマホのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (max-width: 599px) {

	
	/*-- ここまで --*/
}


/*ヘッダーに影を入れる*/

@media print, screen and (max-width: 599px) {

#s-navi dt {

box-shadow: 0 3px 6px rgba(0, 0, 0, .18);
}
}
	/*-- ここまで --*/


/* ===== 年表ページ 前年・翌年ナビゲーション ===== */
.history-nav {
  display: flex !important;           /* 強制横並び */
  justify-content: space-between;     /* 左右に配置 */
  align-items: center;
  flex-wrap: nowrap;                  /* 折り返し防止 */
  gap: 10px;                          /* 間隔を調整 */
  border-top: 1px solid #e6e6e6;
  margin-top: 40px;
  padding-top: 20px;
  font-size: 15px;
}

.history-nav .prev,
.history-nav .next,
.history-nav .home {
  flex: 1;                            /* 均等配置 */
  text-align: center;
}

.history-nav .prev { text-align: left; }
.history-nav .next { text-align: right; }
.history-nav .home { text-align: center; }

.history-nav a {
  color: #f7941d;
  font-weight: 600;
  text-decoration: none;
}

.history-nav a:hover {
  text-decoration: underline;
}


/* ---------------------------------
 Pz-LinkCard調整
---------------------------------*/
/* 共通の角丸 */
:root {
  --border-radius:4px;
}

/*角丸*/
.lkc-external-wrap,
.lkc-thumbnail,
.lkc-thumbnail img{
	border-radius:var(--border-radius);
}

/*コンテンツ内調整*/
.lkc-content{
	overflow:visible;
	height:auto;
}

/*余白調整*/
.lkc-card{
	margin:1.5rem 1.5rem 3rem 1.5rem;
}

/*max幅調整*/
.lkc-external-wrap, .lkc-internal-wrap, .lkc-this-wrap{
	max-width:100%;
}

/*サムネイル調整*/
.lkc-thumbnail{
	border: 1px solid #ddd;
	margin:0 0 0 3rem;
	width: 25%;
	max-width:100%;
	max-height:100%;
	line-height: 0;
}

/*スマホサイズのサムネイル調整*/
@media screen and (max-width: 575.98px){
.lkc-thumbnail{
    margin:0;
    float:none;
    margin-bottom: 1.5rem;
    width: 100%;
}
.lkc-thumbnail img{
    width:100%;
    max-width:100%;
    max-height:100%;
    height:auto;
    margin:0;
}
}

/*記事タイトル*/
.lkc-title-text{
margin-bottom:1em;
}

/*URL非表示調整*/
.lkc-url{
display:none;
}

/*抜粋文*/
.lkc-excerpt{
overflow: visible;
margin-bottom: 1em;
width: calc( 100% / 3 * 2);
}

/*サイト情報*/
.lkc-info{
position:absolute;
bottom:1.5rem;
}


/* ---------------------------------
 推しサイページ
---------------------------------*/
.member-color-table {
  width: 70% !important;
  margin: 0 0 20px 0 !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
}
.member-color-table th,
.member-color-table td {
  border-bottom: 1px solid #ddd !important;
  padding: 4px 8px !important;
  font-size: 15px !important;
  text-align: left !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
  min-width: 0 !important;
}
.member-color-table th {
  background: #f8b500 !important;
  color: #fff !important;
  font-weight: bold !important;
}
.member-color-table colgroup col:nth-child(1) { width: 25% !important; }
.member-color-table colgroup col:nth-child(2) { width: 20% !important; text-align: center !important; }
.member-color-table colgroup col:nth-child(3) { width: 55% !important; }
.dot {
  display: inline-block !important;
  width: 17px !important;
  height: 17px !important;
  border-radius: 50% !important;
  border: 1px solid #ccc !important;
  margin-right: 3px !important;
  vertical-align: middle !important;
}
/* ▼ 折りたたみ矢印 */
details summary {
  cursor: pointer !important;
  font-size: 1.1em !important;
  margin: 14px 0 6px !important;
  display: flex !important;
  align-items: center !important;
  font-weight: bold !important;
  width: 70% !important;
}
details summary::before {
  content: "▶" !important;
  display: inline-block !important;
  margin-right: 8px !important;
  transition: transform 0.25s ease !important;
  color: #f8b500 !important;
}
details[open] summary::before {
  transform: rotate(90deg) !important;
}
details summary:hover {
  color: #f8b500 !important;
}
/* ▼ スマホ対応 */
@media (max-width: 768px) {
  .member-color-table,
  details summary { width: 100% !important; }
  .member-color-table th,
  .member-color-table td { font-size: 14px !important; padding: 4px 6px !important; }
  .dot { width: 15px !important; height: 15px !important; }
}


/* ---------------------------------
   インフォメーションバー（上部帯）
---------------------------------*/
#st-header-top-widgets-box {
  background-color: #333333; /* 背景を黒に */
  color: #ffffff; /* テキストを白に */
  padding: 3px 0; /* 少し上下に余白 */
  text-align: center; /* 中央寄せ（お好みで） */
}

/* リンクテキストの色 */
#st-header-top-widgets-box a {
  color: #ffffff; /* 白文字 */
  text-decoration: none; /* 下線なし */
  font-weight: 500;
  font-size: 14px;
}

/* ==========================
   SKE48 PORTAL：データページ（リーダー一覧）
   ヘッダー色 #F6A800 固定対応版（Affinger競合対策）
   ========================== */
.ske48-data {
  margin: 0 auto;
  max-width: 880px;
  padding: 0 20px;
  box-sizing: border-box;
}

/* テーブル全体 */
.ske48-data table {
  width: 70%;
  min-width: 540px;
  margin: 1.5em 0 1.5em 0;
  border-collapse: collapse;
  border: 1px solid #ddd;
  table-layout: fixed;
  background: #fff;
  font-size: 15px;
  word-break: keep-all;
  white-space: normal;
}

/* 左寄せ配置 */
.ske48-data table,
.ske48-data h2,
.ske48-data h3 {
  margin-left: 0;
}

/* 枠線・セル */
.ske48-data th,
.ske48-data td {
  border: 1px solid #ddd !important;
  padding: 10px 12px !important;
  text-align: left;
  vertical-align: middle;
  line-height: 1.6;
}

/* ==========================
   ✅ ヘッダー行（Affinger上書き強化）
   ========================== */
.ske48-data table th {
  background-color: #F6A800 !important;  /* SKEオレンジ */
  color: #fff !important;                /* 白文字 */
  font-weight: 600 !important;
}

/* カラム比率 */
.ske48-data td:first-child,
.ske48-data th:first-child {
  width: 30%;
  white-space: nowrap;
}
.ske48-data td:last-child,
.ske48-data th:last-child {
  width: 70%;
  word-break: break-word;
}

/* 見出し類 */
.ske48-data h2, .ske48-data h3 {
  max-width: 700px;
  margin: 2em 0 0.5em 0;
  padding-left: 0.3em;
  border-left: 4px solid #ee7948;
}
.ske48-data p, .ske48-data ul {
  max-width: 700px;
  margin: 0 0 1em 0;
  line-height: 1.7;
}
.ske48-data ul {
  padding-left: 1.2em;
}

/* 現職セルハイライト */
.ske48-data td:has(> span.current) {
  background: #fff5e6 !important;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .ske48-data table {
    width: 100%;
    min-width: auto;
    font-size: 14px;
  }
  .ske48-data td:first-child {
    width: 35%;
  }
  .ske48-data td:last-child {
    width: 65%;
  }
}

/* =========================
 SKE48 PORTAL データページ共通CSS（学年別・月別対応）
========================= */

/* --- テーブルヘッダー（SKEオレンジ） --- */
#ske48-birthday-list table thead tr th,
.data-section table.data-table thead tr th {
  background-color: #F6A800 !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-align: left;
}

/* --- テーブル本体（共通） --- */
#ske48-birthday-list table,
.data-section table.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 20px;
  font-size: 0.95em;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0,0,0,0.05);
}

/* --- セル装飾（共通） --- */
#ske48-birthday-list th,
#ske48-birthday-list td,
.data-section table.data-table th,
.data-section table.data-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

/* --- 偶数行の背景 --- */
#ske48-birthday-list tbody tr:nth-child(odd),
.data-section table.data-table tbody tr:nth-child(odd) {
  background-color: #fffdf7;
}

/* --- hover時の強調 --- */
#ske48-birthday-list tbody tr:hover,
.data-section table.data-table tbody tr:hover {
  background-color: #fff6dc;
  transition: 0.2s;
}

/* --- 数値列（年齢など）を中央寄せ --- */
#ske48-birthday-list td:nth-child(3),
#ske48-birthday-list td:nth-child(5),
.data-section table.data-table td:nth-child(3),
.data-section table.data-table td:nth-child(5) {
  text-align: center;
}

/* --- リンク装飾（共通） --- */
#ske48-birthday-list a,
.data-section a {
  color: #000;
  text-decoration: none;
}
#ske48-birthday-list a:hover,
.data-section a:hover {
  color: #F6A800;
  text-decoration: underline;
}

/* --- PC表示時のみ左寄せ＋70%幅 --- */
@media (min-width: 769px) {
  #ske48-birthday-list table,
  .data-section table.data-table {
    width: 70%;
    margin-left: 0;
    margin-right: auto;
  }
}

/* ---------------------------------
   WP-FORMSのデザイン
---------------------------------*/
/* ===== WPForms全体を左寄せ配置に変更 ===== */

/* ページ内全体の中央寄せを打ち消す */
.page-id-811 .entry-content,
.page-id-811 #content {
  text-align: left !important;
}

/* フォーム本体を左揃えで配置 */
#wpforms-801 {
  margin: 0 !important;
  text-align: left !important;
  max-width: 700px; /* 必要に応じて幅を調整。外すと100%幅になります */
}

/* 各入力フィールドを左寄せ */
#wpforms-801 .wpforms-field,
#wpforms-801 .wpforms-field-label,
#wpforms-801 input,
#wpforms-801 textarea,
#wpforms-801 select {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: block !important;
}

/* 送信ボタンの色と位置 */
div.wpforms-container-full .wpforms-form button[type=submit] {
    color: white !important;
    background: #ee7948 !important;
    border-color: #ee7948 !important;
}

div.wpforms-container-full .wpforms-form button[type=submit] {
    color: white !important;
    background: #ee7948 !important;
    border-color: #ee7948 !important;
    border-radius:5px;
}

/* ---------------------------------
  タイムライン用CSS
---------------------------------*/

/* ===== /timeline/ 専用スタイル ===== */
.ske-timeline h3 {
  margin: 1.2em 0 0.3em;
  padding-left: 0.4em;
  border-left: 4px solid #f6a500;
  font-size: 1.05em;
  font-weight: 600;
  line-height: 1.5;
}
.ske-timeline h3 strong {
  color: #e67e22;
  font-weight: 700;
}
.ske-timeline p {
  margin: 0 0 1em 0.8em;
  line-height: 1.6;
}
.ske-timeline a {
  color: #d27c00;
  text-decoration: underline;
}

/* ---------------------------------
  記事一覧のいいねボタン非表示
---------------------------------*/
dl.clearfix .wpulike {
  display: none !important;
}
/* 記事一覧（dl.clearfix内）およびスライダー（slick内）のいいねボタンを非表示 */
dl.clearfix .wpulike,
.slick-track .wpulike {
  display: none !important;
}

/* トップページ内のWP ULike（いいねボタン）を非表示にする */
.home .wpulike,
.home .wp_ulike_general_class,
.home .wpulike-default {
  display: none !important;
}


/* ---------------------------------
  記事一覧のいいねボタン非表示
---------------------------------*/
/*
 * 【汎用】アウトライン（線枠）ボタン スタイル
 * 目的: サイト内の「一覧へ」「もっと見る」などに軽快なデザインを適用する
 */
.outline-button {
  /* 基本設定: 全体的な配置と装飾 */
  display: block; 
  width: 60%; /* 幅を少し広げ、中央揃えしやすいように調整 */
  max-width: 300px; /* PCでの表示サイズを制限 */
  margin: 30px auto; /* 上下の余白と中央揃え */
  padding: 10px 20px;
  
  /* デザイン: 文字色と枠線 */
  background-color: transparent; /* 背景を透明にする */
  color: #333333; /* 文字色を濃いグレー（またはサイトのメインカラー）に設定 */
  border: 1px solid #333333; /* 枠線を文字色と同じ濃いグレーに設定 */
  border-radius: 5px; /* 角を少し丸くする */
  
  /* テキスト設定 */
  text-align: center;
  text-decoration: none; /* 下線を非表示にする */
  font-weight: bold;
  font-size: 16px; 
  
  /* アニメーション（ホバー時の変化を滑らかにする） */
  transition: all 0.3s ease; 
}

/* マウスオーバー時（ホバー時）のスタイル */
.outline-button:hover {
  background-color: #f0f0f0; /* ホバー時に薄いグレーの背景 */
  border-color: #555555; /* 枠線の色を少し濃くする */
  color: #555555;
  cursor: pointer;
}



/* プロフィールSNSアイコンのデザイン統一（丸形バージョン） */
.member-sns-links a {
    /* 丸形にするための基本スタイル */
    display: inline-block;
    width: 40px; 
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%; /* ✨【修正ポイント】ここを50%にすると完全な円になります */
    background-color: #f7f7f7; 
    border: 1px solid #ddd;
    margin-right: 10px !important;
}

/* アイコン自体の色とサイズ調整 */
.member-sns-links a i {
    font-size: 1.2em !important; 
    color: inherit;
    vertical-align: middle; 
}

/* ================================================= */
/* SKE48 PORTAL メンバープロフィール SNSリンク最終確定版 (テキスト統一) */
/* ================================================= */

/* ---------------------------------- */
/* 1. 全体設定：丸形、中央揃え、下線削除、横並び */
/* ---------------------------------- */
.member-sns-links { display: flex; flex-wrap: wrap; align-items: center; }

/* 各リンク（aタグ）の共通スタイル */
.member-sns-links a {
    display: flex !important;
    align-items: center !important; 
    justify-content: center !important; 
    width: 40px; 
    height: 40px;
    border-radius: 50%; /* 丸形 */
    
    /* 共通デザイン */
    background-color: #f7f7f7; border: 1px solid #ddd;
    margin-right: 10px !important; text-decoration: none;
}

/* ---------------------------------- */
/* 2. カラー上書き (すべて黒に統一) */
/* ---------------------------------- */

/* X、Instagram、TikTokを黒背景に統一 */
.member-sns-links a[title="X"],
.member-sns-links a[title="Instagram"],
.member-sns-links a[title="TikTok"] { 
    background-color: #000000 !important; 
    border-color: #000000 !important;
}

/* ---------------------------------- */
/* 3. テキスト（SNS名）のスタイル */
/* ---------------------------------- */
.st-sns-text-link {
    /* ✨【重要】テキスト表示の共通スタイル */
    font-size: 0.8em !important; 
    font-weight: bold !important;
    color: #ffffff !important; /* 文字色を白に */
    
    /* リンクのテキストが長くなるInstagramの調整 */
    padding: 0 2px;
    line-height: 1 !important;
    text-align: center !important;
    
    /* iタグのアイコンフォントの影響を完全に排除 */
    font-family: Arial, sans-serif !important;
    position: static !important;
    transform: none !important;
}

/* XとTikTokの文字を短くする調整 */
.member-sns-links a[title="X"] .st-sns-text-link {
    font-size: 1em !important; /* Xは文字が少ないので大きく */
}
.member-sns-links a[title="TikTok"] .st-sns-text-link {
    font-size: 0.75em !important; /* TikTokは文字が多めなので少し小さく */
}


/* プロフィールエリア全体の設定 */
.member-profile-box {
    display: flex; /* 横並びにする */
    align-items: center; /* 垂直方向の中央揃え */
    gap: 20px; /* 画像と情報の間にスペースを空ける */
    border: 1px solid #eee; /* 枠線 */
    padding: 15px; /* 内側の余白 */
    border-radius: 8px; /* 角を丸く */
}

/* プロフィール画像の調整 */
.member-profile-image {
    width: 100px; /* 画像の幅を固定 */
    height: 100px;
    object-fit: cover; /* 画像が歪まないように */
    border-radius: 50%; /* もし丸くしたいなら */
    flex-shrink: 0; /* 縮まないように */
}

/* プロフィール情報のリスト */
.member-data-list {
    list-style: none; /* 点を消す */
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

.member-data-list li {
    display: inline-block; /* 項目を横に並べる */
    margin-right: 15px; /* 項目間のスペース */
    font-size: 0.9em;
}


/* 【SKE48 PORTAL専用】更新マークの装飾（ステップ2） */
.ske48-update-label {
    /* SKE48のテーマカラー（オレンジ #F8B500）を背景に設定 */
    background-color: #F8B500; 
    color: #fff; /* 文字色を白に */
    font-size: 80%; /* 文字サイズを少し小さく */
    padding: 0.1em 0.5em; /* 上下の余白と左右の余白を設定 */
    border-radius: 3px; /* 角を少し丸くする */
    margin-left: 8px; /* ★修正ポイント: タイトルの後に表示されるため、左側にスペースを空ける */
    font-weight: bold; /* 文字を太字に */
    line-height: 1; /* 行の高さを調整して表示崩れを防ぐ */
    display: inline-block; /* タイトルと並べて表示させる */
}