@charset "utf-8";
/*
Theme Name:Opinion-child
Text Domain:tcd-opinion
Version:4.12.0
/*---------------------------------------------*/
/* 記事タイトル装飾変更 */
/*---------------------------------------------*/
/* PC */
#single_title h1 {
  margin:0;
  font-size:16px;
  background:#0077B3;
  color:#fff;
  padding:10px 15px;
  line-height:180%;
}
/* SP */
@media (max-width: 767px){
  #single_title h1 {
    margin:0;
    height:auto;
    line-height:1.8;
    font-size:14px;
    background:#0077B3;
    color:#fff;
    padding:10px 20px;
  }
}
/*---------------------------------------------*/
/* chrome画像荒れ対策 */
/*---------------------------------------------*/
img {
	image-rendering: -webkit-optimize-contrast;
}
/*---------------------------------------------*/
/* メインスライダーアスペクト比崩れ対策 */
/*---------------------------------------------*/
	
#main_slider .item img {
    width: 100%;
    height: auto;
    aspect-ratio: 650 / 330;
    object-fit: cover;
}
#main_slider .item .image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 650 / 330;
    object-fit: cover;
    font-family: 'object-fit: cover;';
}
/*---------------------------------------------*/
/* フォント統一 */
/*---------------------------------------------*/
 body {
	font-family:
	  -apple-system, BlinkMacSystemFont, /* iOS / macOS Safari */
	  "Segoe UI", Roboto,                /* Windows / Android */
	  "Hiragino Kaku Gothic ProN",       /* macOS 日本語 */
	  "Noto Sans JP", "Yu Gothic",       /* Googleフォント / Windows */
  sans-serif!important;
	}
/*---------------------------------------------*/
/* SPヘッダー調整*/
/*---------------------------------------------*/
@media (max-width:768px){
	/* バナーは通常フロー */
	#mobile_banner_top{
		position: static !important;  /* fixed/absolute を打ち消す */
		z-index: auto !important;
		margin: 0; padding: 0;
	}
	/*  ハンバーガーボタンの当たり判定を固定（左右端のボタン） */
	#sp_menu_button,
	.sp_menu_button,
	.menu_button,
	.menu-toggle {
		width:  var(--bar-h);
		height: var(--bar-h);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	/* サイトタイトル：メニューと同じフォント＆1行中央寄せ */
	#logo_text, #logo, .site-title {
		font-family: inherit;
	}
	/* タイトルはみ出し防止 */
	#logo_text #logo.site-title,
	.site-title {
		margin: 1;
		display: block;
	}

	/* SNSアイコン・RSSアイコン表示位置変更 */
	#header_menu_area {
		position: absolute!important;   /* 絶対配置にする */
		top: 20px!important;            /* 上から20px下げる（調整可） */
		right: 0!important;             /* 右端にくっつける */
	}
	#header {
		position: relative!important;   /* 子要素の絶対配置の基準にする */
	}		
}
/*---------------------------------------------*/
/* SPパンくず幅設定*/
/*---------------------------------------------*/
@media screen and (max-width:768px){
  #bread_crumb{
    width:100% !important;
  }
}
/*---------------------------------------------*/
/* タグ（ターム一覧）の見た目*/
/*---------------------------------------------*/
/* 親：#left_col 幅で折り返す */
#left_col .post-terms {
  display: flex !important;
  flex-wrap: wrap !important;   /* 折り返し有効 */
  gap: .4rem .5rem;             /* チップ間の隙間 */
  overflow: visible !important;
  padding: .4rem 0;
}

/* dtは非表示 */
#left_col .post-terms dt { display:none; }

/* ddのブロック性を外してチップを直列に並べる */
#left_col .post-terms dd {
  display: contents;
  margin:0;
  padding:0;
}

/* 個々のチップ */
#left_col .post-terms .term-chip,
#left_col .post-terms .term-chip--one {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;      /* 「タクソノミー｜ターム」を1行に */
  font-size: .85rem;        /* フォント小さめ */
  line-height: 1.3;
  padding: .18rem .55rem;
  border:1px solid #ddd;
  border-radius:999px;
  background:#fafafa;
  text-decoration:none;
  transition: background .15s ease, border-color .15s ease;
}
#left_col .post-terms .term-chip:hover {
  background:#f0f7ff;
  border-color:#bcd7ff;
}
/*---------------------------------------------*/
/* トラックバック非表示 */
/*---------------------------------------------*/
#trackback_closed {
  display: none !important;
}
/*---------------------------------------------*/
/* タームページ説明文表示 */
/*---------------------------------------------*/
/* 共通ボックス */
.term-description {
  margin: .4rem 0 1rem;
  padding: .8rem 1rem;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  line-height: 1.7;
  font-size: .80rem;
  color: #333;
}
.term-inline__title{ font-weight:700; }

/* デフォは段落の下マージンなし */
.term-description p { margin: 0; }

/* リンク行があるときだけ下を少し空ける */
.term-description--has-links p { margin: 0 0 .4rem; }

/* リッチテキスト用ボックス */
.term-richdesc {
  margin: .4rem 0 1rem;
  padding: .8rem 1rem;
  border: 1px solid #e0e0e0;
  line-height: 1.7;
  font-size: .80rem;
  color: #333;
}
.term-richdesc blockquote {
  margin:10px 10px 10px 10px;
  padding:10px 10px 10px 10px;
  border: 1px solid #e0e0e0;
  background: #f9f9f9;
}
.term-richdesc .quote {
 text-align: right;
}
/*---------------------------------------------*/
/* スマホメニューアコーディオン表示 */
/*---------------------------------------------*/

@media (max-width: 768px) {
  /* 全部閉じる */
  #global_menu .menu .sub-menu { display: none !important; }

  /* is-open の子だけ開く */
  #global_menu .menu li.menu-item-has-children.is-open > .sub-menu {
    display: block !important;
  }
}

/*---------------------------------------------*/
/* サブスライダー太字禁止 */
/*---------------------------------------------*/
#index_featured_post h4 {
  font-weight: normal !important;
}

/*---------------------------------------------*/
/*Footer: Twitter(X) をフォント→画像に切替 */
/*---------------------------------------------*/
/* フッターのXアイコン：通常時 */
#footer_social_link li.twitter a {
  background-image: url('/wp-content/themes/opinion_tcd018-child/img/common/icon_x.png');
  background-repeat: no-repeat;
  background-position: 0 0;   /* 上段を表示 */
  background-size: 22px auto; /* 高さ自動でスプライト全体を縮小 */
}

/* ホバー時：下段のアイコンを表示 */
#footer_social_link li.twitter a:hover {
  background-position: 0 -22px; /* 22px分下にずらして下段を表示 */
}

/*---------------------------------------------*/
/* 引用iframe表示設定*/
/*---------------------------------------------*/
/* oEmbed iframe を親幅にフィットさせる */
iframe.wp-embedded-content,
.wp-block-embed__wrapper iframe,
.wp-block-embed__wrapper > .wp-embedded-content {
  display:block;
  width:100% !important;
  max-width:100% !important;
  border:0;
}
/* 埋め込みを囲む figure や blockquote もはみ出さないように */
figure, blockquote {
  box-sizing: border-box;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
/* スマホで oEmbed 抜粋を2行までに制限 */
@media (max-width: 768px){
  .wp-embed-excerpt p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

	
/*---------------------------------------------*/
/* discord埋め込み
/*---------------------------------------------*/
	.discord-invite-box {
  width: 268px;
  background-color: #2b2d31; /* Discordダークモードの背景色 */
  border-radius: 8px;
  padding: 20px 16px;
  color: #ffffff;
  font-family: sans-serif;
  box-sizing: border-box;
  text-align: center;
}

.server-info {
  margin-bottom: 20px;
}

.server-icon {
  width: 60px; /* 少し大きめに調整 */
  height: 60px;
  border-radius: 18px;
  background-color: #313338;
  margin-bottom: 10px;
  object-fit: cover;
}

.server-name {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.2;
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn {
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 10px;
  border-radius: 3px;
  transition: background-color 0.2s;
}

.btn-blue {
  background-color: #5865f2;
  color: white;
}

.btn-blue:hover {
  background-color: #4752c4;
}

.btn-gray {
  background-color: #4e5058;
  color: white;
}

.btn-gray:hover {
  background-color: #6d6f78;
}
/*---------------------------------------------*/
/* アーカイブページ 追加検索アコーディオン
/*---------------------------------------------*/

/* 1. 外枠とメイン開閉バー */
.extra-search-wrapper {
    margin: 20px 0;
    clear: both;
}

.extra-search-trigger {
    display: block !important;
    padding: 12px 20px !important;
    background: #f8f9fa !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    font-size: 14px !important;
    color: #333 !important;
    text-align: left !important;
    list-style: none !important;
    transition: background 0.2s;
}

.extra-search-trigger::-webkit-details-marker { display: none; }
.extra-search-trigger:hover { background: #eee !important; }

/* 開いている時のバーの形状 */
.extra-search-accordion[open] .extra-search-trigger {
    border-bottom: 1px solid transparent !important;
    border-radius: 4px 4px 0 0 !important;
    background: #fff !important;
}

/* 2. フォーム内コンテンツエリア（入れ物） */
.extra-search-content {
    padding: 20px !important;
    border: 1px solid #ddd !important;
    border-top: none !important;
    background: #fff !important;
    border-radius: 0 0 4px 4px !important;
}

.extra-search-content .searchandfilter ul {
    display: block !important; /* JSで中身を分割するためblockにする */
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. グリッドレイアウト（PC3列） */
.extra-search-content .sf-stage-visible,
.extra-search-content .sf-stage-inner {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px 20px !important;
    margin-bottom: 0 !important;
}

/* 4. TCDテーマのli干渉を完全に排除 */
.extra-search-content .searchandfilter li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    position: static !important;
}

/* 5. 項目名（h4）と入力UIのタイト設定 */
.extra-search-content .searchandfilter h4 {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #555 !important;
    margin: 0 0 3px 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em;
    border: none !important;
}

.extra-search-content .searchandfilter select,
.extra-search-content .searchandfilter input[type="text"] {
    width: 100% !important;
    height: 36px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    background: #fdfdfd !important;
    font-size: 13px !important;
    color: #333 !important;
}

/* 6. 入れ子（多段階）アコーディオンの「さらに表示」ボタン */
.extra-search-content .sf-stage-details {
    grid-column: 1 / -1 !important;
    margin: 10px 0 !important;
}

.extra-search-content .sf-stage-details summary {
    background: #f0f0f0 !important;
    border: 1px solid #ddd !important;
    padding: 10px !important;
    text-align: center !important;
    font-size: 12px !important;
    color: #666 !important;
    cursor: pointer !important;
    list-style: none !important;
    border-radius: 4px;
    margin-bottom: 15px !important;
}

.extra-search-content .sf-stage-details summary:hover {
    background: #e8e8e8 !important;
    color: #333 !important;
}

/* 7. 検索ボタン（100%幅・グレー・フラット） */
/* JSで付与する .custom-submit-row クラスをターゲットにします */
.extra-search-content .searchandfilter .custom-submit-row {
    display: block !important;
    width: 100% !important;
    grid-column: 1 / -1 !important;
    float: none !important;
    clear: both !important;
    margin: 30px 0 10px 0 !important;
    padding: 0 !important;
}

.extra-search-content .searchandfilter .custom-submit-row input[type="submit"] {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    background: #eeeeee !important; /* 明るいグレー */
    color: #333333 !important;      /* 濃いグレーの文字 */
    font-size: 16px !important;
    font-weight: bold !important;
    border: 1px solid #cccccc !important; /* 薄い境界線 */
    border-radius: 4px !important;
    cursor: pointer !important;
    box-shadow: none !important;    /* フラットにするため影を削除 */
    transition: background 0.2s !important;
    -webkit-appearance: none;
}

.extra-search-content .searchandfilter .custom-submit-row input[type="submit"]:hover {
    background: #e2e2e2 !important;
    border-color: #bbbbbb !important;
}

/* 8. スマホレスポンシブ（1列） */
@media (max-width: 768px) {
    .extra-search-content .sf-stage-visible,
    .extra-search-content .sf-stage-inner {
        grid-template-columns: 1fr !important;
        gap: 15px 0 !important;
    }
}
/*---------------------------------------------*/
/* オーディオスライダーのスタイル */
/*---------------------------------------------*/
/* コンテナ */
.audio-sliders-container {
    display: flex;
    flex-direction: column;
    padding: 15px;
    background-color: #fcfcfc;
    border: 1px solid #eef0f2;
    border-radius: 8px;
    margin-bottom: 20px !important;
}

/* 各行 */
.audio-slider-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.audio-slider-row:last-child {
    border-bottom: none;
}

/* ラベル：改行を許可し、中央揃えに設定 */
.slider-label {
    width: 100px;
    font-size: clamp(8px, 2.8vw, 13px);
    font-weight: 600;
    color: #444;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    display: block;
    text-align: center; /* 改行後も中央揃えにする */
}

.slider-label--left {
    margin-right: 12px;
}

.slider-label--right {
    margin-left: 12px;
}

/* トラック */
.slider-track {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    height: 24px;
    max-width: 260px;
}

.slider-track::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 3px;
    background-color: #e0e0e0;
    transform: translateY(-50%);
    border-radius: 2px;
    z-index: 1;
}

/* ドット */
.slider-dot {
    width: 12px;
    height: 12px;
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    transition: all 0.2s ease;
}

/* アクティブドット：オレンジ、サイズを拡大、濃い縁取り */
.slider-dot.is-active {
    background-color: #e67e22;
    border: 2px solid #8b4513;
    box-shadow: 0 0 8px rgba(230, 126, 34, 0.4);
    transform: scale(1.1);
}

/* モバイル対応 */
@media screen and (max-width: 480px) {
    .slider-label {
        width: 80px;
    }
    .slider-label--left { margin-right: 8px; }
    .slider-label--right { margin-left: 8px; }
    .slider-track { max-width: 180px; }
}
/*---------------------------------------------*/
/* 目次ウィジェット内の見出しだけマージン調整 */
/*---------------------------------------------*/
#ez-toc-widget-container h3.side_headline {
  margin: 0 0 8px !important;
  padding: 6px 10px !important;
  line-height: 1.4 !important;
}
ul.ez-toc-list.ez-toc-list-level-1 {
  border: 1px solid #ccc;
  background-color: #fff;
  padding: 10px;
  border-radius: 4px;
}
/*---------------------------------------------*/
/* 自動投稿される記事画像を非表示 */
/*---------------------------------------------*/
.post.clearfix .post_image {
  display: none;
}
/* スマホ専用グローバルメニュー */
#sp_menu { display: none; }

@media (max-width: 768px){
  #global_menu { display: none; }
  #sp_menu { display: block; }
}
/* デフォルト（PCなど）では非表示 */
.mobile-table-of-contents {
  display: none;
}
/*---------------------------------------------*/
/* スマホ専用・記事の目次 */
/* 768px以下のときだけ表示 */
/*---------------------------------------------*/
@media (max-width: 768px) {
  .mobile-table-of-contents {
    display: block;
  }
}
/*---------------------------------------------*/
/* インプレ項目 */
/*---------------------------------------------*/
/* txt-box */
.txt-box{
  position: 5
		relative;
  border: 2px solid #b0e0e6;	
  border-radius: 2px;
	padding: 12px 10px 10px 12px;
  margin: 2px 2px 25px 8px;
}

/* txt-title*/
.txt-title{
  font-size: 14px;
  line-height: 1.2;
  color: #003366; 
  margin: 8px 2px 1px 3px;
	font-weight: bold;
  display: inline-block;
  background: #e6f0ff;
	border-radius: 3px;
  padding: 3px 12px;
  border-radius: 2px;
}

/* txt-inner */
.txt-box .txt-inner{
  position: relative;
  background: #f9ffff;
  border-radius: 2px;
  padding: 6px 6px 3px 12px;
	margin: 0px 0px 0px 15px;
	line-height: 1.8 !important;
  font-size: 16px;
	border: 1px solid #cce7e7;
  border-left: 4px solid #0069ff;
}
/* txt-paragraph */
.txt-box .txt-paragraph{
  position: relative;
  background: #f9ffff;
  border-radius: 2px;
  padding: 2px 5px 5px 3px;
	margin: 0px 0px 0px 0px;
	line-height: 1.7 !important;
  font-size: 16px;
	letter-spacing: 0.01em;
}
.post.clearfix h2 {
  margin: 0 0 0 5px !important;
  border-bottom: 4px solid #ff9933;
  position: relative;
  padding-left: 28px; /* アイコン分スペース */
}

.post.clearfix h2::before {
  content: "✅";       /* チェックマーク */
  position: absolute;
  left: 0;
  top: 0;
  font-size: 18px;
  color: #ff9933;
}
/*---------------------------------------------*/
/* ヘッダーメニュー表示位置変更 */
/*---------------------------------------------*/
#header_menu_area {
	padding:35px 15px 0px 0px;
}
/*---------------------------------------------*/
/* #side_col 内 Search & Filter */
/* メインエリアの3列グリッド設定がサイドバーに波及するのを防ぐ */
/*---------------------------------------------*/
#side_col form.searchandfilter ul {
  display: block !important; /* グリッドを解除 */
  margin: 0;
  padding: 0;
  list-style: none;
}

#side_col form.searchandfilter li {
  display: block !important;
  width: 100% !important;
  margin-bottom: 0.8rem !important;
  padding: 0 !important;
  position: static !important;
  background: none !important;
}

#side_col form.searchandfilter h4 {
  font-size: .85rem;
  font-weight: 600;
  margin: 0 0 .3rem;
  line-height: 1.2;
  border: none !important; /* メインエリア用の下線を消す */
  padding-bottom: 0 !important;
}

/* 入力 UI 共通デザイン */
#side_col form.searchandfilter select,
#side_col form.searchandfilter input[type="text"] {
  width: 100%; /* サイドバーの幅に追従 */
  max-width: 160px; /* 必要に応じて最大幅を調整 */
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: .85rem;
  box-sizing: border-box;
  background: #fff;
}

/* 検索ボタン */
#side_col form.searchandfilter input[type="submit"],
#side_col form.searchandfilter button[type="submit"] {
  display: block;
  width: 100%;
  max-width: 160px;
  margin-top: .8rem;
  padding: 8px 0;
  font-size: .85rem;
  background: #0073aa;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  -webkit-appearance: none;
}

#side_col form.searchandfilter input[type="submit"]:hover {
  background: #006198;
}

/*---------------------------------------------*/
/* スマホ画像スライダーレイアウトシフト防止 */
/*---------------------------------------------*/
/* スライダー初期化前（.slick-initializedが付く前）の設定 */
#main_slider:not(.slick-initialized) {
  position: relative;
  overflow: hidden;
  aspect-ratio: 650 / 330; /* 画像の比率に合わせて高さを確保 */
}

/* 1枚目のアイテムのみ表示し、それ以外は非表示 */
#main_slider:not(.slick-initialized) .item {
  display: none;
}

#main_slider:not(.slick-initialized) .item:first-child {
  display: block;
}

/* 1枚目の画像を枠いっぱいに広げる */
#main_slider:not(.slick-initialized) .item:first-child a.image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/*---------------------------------------------*/
/* トップページlogo直後のh1非表示 */
/*---------------------------------------------*/
	.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/*---------------------------------------------*/
/* トップページだけS&Fウィジェットをブロックごと非表示にする */
/*---------------------------------------------*/
.home #custom_html-5,
.front-page #custom_html-5 {
display: none !important;
}
/*---------------------------------------------*/
/* 次の項目名
/*---------------------------------------------*/