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


/* 2025/12/02 tableau風 */
/* ======================================================
    Tableau 計算フィールド 風デザイン
    ====================================================== */
pre.language-tableau {
    position: relative !important;
    padding-top: 60px !important;    /* 上のフィールド名エリア */
    padding-bottom: 64px !important; /* 下のボタン領域 */
    color: #fff !important;
    border-radius: 6px !important;
    border: 1px solid #444 !important;
	
	
	/* ★ 修正: 横方向のスクロールを有効化 (長すぎるコード用) */
	  /* 折り返しの基本 */
	  white-space: pre-wrap !important;       /* 改行は保持しつつ折り返す */
	  overflow-wrap: anywhere !important;     /* 折り返しを許可（最新ブラウザ向け） */
	  word-wrap: break-word !important;       /* 互換用 */
	  word-break: break-word !important;      /* ブラウザ依存の挙動を補う */
	  word-break: break-all !important;       /* 必要なら有効化（英数字もバラバラに切る） */

	  /* 横はスクロール可／もしくは自動にして安全に */
	  overflow-x: auto !important;            /* auto なら必要な時だけ横スクロール */
	  overflow-y: visible !important;
	
/*     font-family: Menlo, Consolas, "Hiragino Sans", Meiryo, monospace !important; */
    font-size: 14px !important;
}


pre.language-tableau::after {
    content: "計算フィールド名" !important;
    position: absolute !important;
    top: 7px !important;
    left: 16px !important;
    width: 35% !important;
    height: 28px !important;
    border: 1px solid #777 !important;
    border-radius: 1px !important;
    display: flex !important;
    align-items: center !important;
    padding-left: 8px !important;
    color: #555 !important;
    font-size: 12px !important;
    background: #fff !important;
    z-index: 10 !important; 
}

/* ======================================================
    ▼▼ JavaScriptで追加したUI要素のスタイル ▼▼
    ====================================================== */

/* --- 区切り線 --- */
pre.language-tableau .separator-line {
    position: absolute !important;
    top: 42px !important; 
	left: 1% !important; /* ★ 修正点: 左端から5% */
    right: 1% !important; /* ★ 修正点: 右端から5% */
    height: 1px !important;
    background: #CFCFCF !important; 
    z-index: 15 !important; 
}


/* --- 下部ボタン領域 (フッター) --- */
pre.language-tableau .tableau-footer {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 64px !important; 
    background: transparent !important; /* ★ 修正: 背景色を透明に */
    border-top: none !important; /* ★ 修正: 上部の境界線を削除 */
    display: flex !important;
    justify-content: flex-end !important; 
    align-items: center !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    z-index: 20 !important; 
}

/* --- 下部ボタン（適用/OK） (サイズを拡大) --- */
pre.language-tableau .tf-btn {
    margin-left: 12px !important; /* 間隔を少し広げる */
    padding: 8px 30px !important; /* ★ 修正: 上下左右のパディングを増やす */
    border-radius: 2px !important; /* 角を少し丸める */
    font-size: 14px !important; /* ★ 修正: フォントサイズを大きくする */
    cursor: pointer !important;
    font-weight: bold !important;
/*     background-color: #555 !important; */
    color: #fff !important;
    transition: background-color 0.2s !important;
    line-height: 1.2 !important; /* テキストの縦位置調整 */
	text-shadow: none !important;
}

/* 適用ボタン (最初のボタン) - 黒枠・白背景 */
pre.language-tableau .tableau-footer .tf-btn:first-child {
    color: #333 !important;
	border: 1px solid #CFCFCF !important;
}

pre.language-tableau .tableau-footer .tf-btn:first-child:hover {
    background-color: #f0f0f0 !important;
}


/* OKボタン (最後のボタン) - 緑枠・緑背景 */
pre.language-tableau .tableau-footer .tf-btn:last-child {
    background-color: #56C587 !important; /* 濃い緑 */
    color: #fff !important;
    border-color: #56C587 !important; /* 緑枠 */
}

pre.language-tableau .tableau-footer .tf-btn:last-child:hover {
    background-color: #009900 !important;
    border-color: #009900 !important;
}


/* ======================================================
    ▼▼ Prism JS 関連の修正 (コピーボタン位置調整) ▼▼
    ====================================================== */

.hcb_wrap pre.language-tableau ~ .hcb-clipboard {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    top: 7px !important;
    right: 10px !important;
}

.hcb_wrap:hover pre.language-tableau ~ .hcb-clipboard {
    opacity: 1 !important;
    visibility: visible !important;
}



/* ======================================================
    ▼▼ Prism JS カラー設定（後で変更可能） ▼▼
    ====================================================== */
/* こちらはカラーなので !important は必須ではありませんが、念のため追加 */
.token.comment {
    color: #999 !important;
}
.token.string {
    color: #5E5E5E !important;
}
.token.number {
    color: #000000 !important;
}
.token.keyword {
    color: #3A75AA !important;
    font-weight: bold !important;
}
.token.field {
    color: #E07829 !important;
}
.token.operator {
    color: #000000 !important;
}
.token.punctuation {
    color: #D4D4D4 !important;
}












/* ======================================================
    マーカーをインラインコード風
   ====================================================== */
/* SWELLマーカー共通：インラインコード風 */
.swl-marker {
  background: none;                 /* 元のマーカー無効 */
  padding: 0.15em 0.45em;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.95em;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid rgba(0,0,0,0.08);
}

.mark_green {
  background-color: #e9f7ef;
  color: #1e7f4f;
  border-color: #bfe6d1;
}

.mark_blue {
  background-color: #e8f2ff;
  color: #1a4fa3;
  border-color: #c9ddff;
}