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

/* ======================================== */
/* タイトル：サムネのサイズ見直し
/* 用途　　：サムネのサイズを300px～100%に変更する
/* 備考　　：
/* ======================================== */
.p-articleThumb {
	text-align: center;
}

.p-articleThumb__img {
	width: auto !important;
	max-width: 100% !important;
	min-width: 300px !important;
	height: auto !important;
	display: block;
	margin: 0 auto;
}


/* ======================================== */
/* タイトル：画像がぼやけない
/* 用途　　：
/* 備考　　：
/* ======================================== */
img{
	image-rendering:pixelated;
	vertical-align:bottom;
}

/* ======================================== */
/* タイトル：カテゴリボタン
/* 用途　　：
/* 備考　　：
/* ======================================== */
.category-tag {
  display: inline-block;
  padding: 1px 3px;
  border-radius: 10px; /* 丸ボタン風 */

  text-decoration: none;
  margin: 3px 4px 3px 0;
  transition: 0.2s;
  border: 1px solid transparent;
}

/* Java版（青系） */
.category-tag.java {
  background: #2d6cdf;
  color: #fff;
}

/* Bedrock版（緑系） */
.category-tag.bedrock {
  background: #2fa84f;
  color: #fff;
}

/* ホバー時（押せる感） */
.category-tag:hover {
  transform: translateY(-2px);
  opacity: 0.9;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* ======================================== */
/* タイトル：コマンドボックス
/* 用途　　：
/* 備考　　：
/* ======================================== */
.mc-command-box {
  position: relative;
  background: #111;
  overflow: hidden;
  margin: 20px 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* タイトル */
.mc-command-title {
  position: relative;
  padding: 8px 50px 8px 8px;
  font-weight: bold;
  color: #fff;
  opacity: 0.9;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* </> アイコン */
.mc-command-title::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f121";
  margin-right: 4px;
}

/* pre */
.mc-command-box pre {
  margin: 0;
  padding: 8px;
  background: transparent;
  overflow-x: auto;
  line-height: 1.6;
}

/* code */
.mc-command-box code {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  font-family: Consolas, Monaco, "Courier New", monospace;
  color: #fff;
  white-space: pre-wrap;
}

/* コピーボタン */
.mc-command-box .mc-copy-btn {
  position: absolute;
  top: 6px;
  right: 6px;

  width: 38px;
  height: 30px;

  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);

  cursor: pointer;
  transition: 0.2s;
}

/* hover */
.mc-command-box .mc-copy-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* コピーアイコン */
.mc-command-box .mc-copy-btn::before {
	font-family: "Font Awesome 6 Free";
	content: "\f0c5" !important;
	font-weight: 400;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  font-size: 16px;
  color: #fff;

  border: none !important;
}

/* コピー成功時はアイコンを✓にする */
.mc-command-box .mc-copy-btn.copied::before {
	font-family: "Font Awesome 6 Free";
	content: "\f00c" !important;
	font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  font-size: 16px;
  color: #fff;

  border: none !important;
}
/* ======================================== */
/* タイトル：派生ブロック一覧
/* 用途　　：
/* 備考　　：
/* ======================================== */
.block-tree {
  line-height: 1.6;
  padding:0;
}

.block-tree li {
  list-style-type:none;
}

.block-tree ul {
  position:relative;
  padding:0;
  margin:0 0 0 1.5em;
}

/* ▼ 縦線（太く・灰色） */
.block-tree ul::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  height:100%;
  border-left: 2px solid #ccc;   /* ← 太さ2px、灰色(#ccc) */
}

/* ▼ 横線（太く・灰色） */
.block-tree ul li {
  list-style-type:none;
  position: relative;
  padding-left: 1.5em;
}

.block-tree ul li::before {
  content:"";
  position: absolute;
  top:0.7em;
  left:0;
  width: 1em;
  border-top: 2px solid #ccc;   /* ← 太さ2px、灰色(#ccc) */
}

/* ▼ 最初の子だけ余白 */
.block-tree ul li:first-child {
  padding: 0.1em 0 0 1.5em;
}

.block-tree ul li:first-child::before {
  top:0.7em;
  padding-top: 1em;
}

/* ▼ 最後の子は縦線を途中で止める（背景で消す） */
.block-tree ul li:last-child::before {
  height:100%;
  background-color: #FFF; /* ← 必要に応じて背景色に変更 */
}

/* ▼ aタグ全体を横並び＆クリック範囲を拡大 */
.block-tree a {
  display: inline-flex;          /* アイコン＋テキストを横並び */
  align-items: center;           /* 垂直中央揃え */
  gap: 0.35em;                   /* アイコンと文字の間隔 */
  padding: 0.2em 0.4em;          /* クリックしやすい余白 */
  border-radius: 4px;            /* 少し丸み */
  text-decoration: none;         /* 下線なし */
  color: #333;                   /* テキスト色 */
  background: #fafafa;           /* 軽い背景（視認性UP） */
}

/* ▼ ホバー時の背景 */
.block-tree a:hover {
  background: #f0f0f0;
}

/* ▼ アイコン画像（ドットを保つ） */
.block-tree img {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
}

/* ▼ 現在ページのノードを強調 */
.block-tree a.current-node {
  background: #e8f4ff;
  border: 1px solid #bcdfff;
  font-weight: bold;
}

/* ▼ 薄い赤 */
.block-tree li.tree-color-red > a {
  background: #ffeaea;
  color: #5a0000;
}
.block-tree li.tree-color-red > a:hover {
  background: #ffd6d6;
}

/* ▼ 薄い青 */
.block-tree li.tree-color-blue > a {
  background: #eaf4ff;
  color: #003a66;
}
.block-tree li.tree-color-blue > a:hover {
  background: #d6ebff;
}

/* ▼ 薄い緑 */
.block-tree li.tree-color-green > a {
  background: #eaffea;
  color: #0d4a0d;
}
.block-tree li.tree-color-green > a:hover {
  background: #d6ffd6;
}

/* ▼ 薄い黄色 */
.block-tree li.tree-color-yellow > a {
  background: #fff9d6;
  color: #5a4300;
}
.block-tree li.tree-color-yellow > a:hover {
  background: #fff0a8;
}

/* ▼ 薄い灰色 */
.block-tree li.tree-color-gray > a {
  background: #f0f0f0;
  color: #333;
}
.block-tree li.tree-color-gray > a:hover {
  background: #e0e0e0;
}

/* ▼ 薄い紫 */
.block-tree li.tree-color-purple > a {
  background: #f3e8ff;
  color: #3f005a;
}
.block-tree li.tree-color-purple > a:hover {
  background: #e7d1ff;
}

/* ▼ 薄いオレンジ */
.block-tree li.tree-color-orange > a {
  background: #fff0df;
  color: #5a2f00;
}
.block-tree li.tree-color-orange > a:hover {
  background: #ffdcb8;
}

/* ▼ 薄い水色 */
.block-tree li.tree-color-cyan > a {
  background: #e6fbff;
  color: #004c5a;
}
.block-tree li.tree-color-cyan > a:hover {
  background: #c8f3ff;
}

/* ▼ 薄い茶色 */
.block-tree li.tree-color-brown > a {
  background: #f5eee6;
  color: #4a2d12;
}
.block-tree li.tree-color-brown > a:hover {
  background: #e9ddcf;
}

/* ======================================== */
/* タイトル：ツールチップ
/* 用途　　：
/* 備考　　：
/* ======================================== */
/* ツールチップ本体のスタイル */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* ツールチップの内容（非表示時） */
.tooltip .tooltip-content {
  display: none;
  position: absolute;
  top: 130%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 10px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 9999;
  max-width: 90vw;
  overflow-wrap: break-word;
  box-sizing: border-box;
  text-align: left;
}

/* ツールチップの内容（表示時） */
.tooltip.active .tooltip-content {
  display: block;
}

/* リンクごとのスタイル */
.tooltip .tooltip-content a {
  display: block;
  color: #fff;
  text-decoration: none;
  margin: 4px 0;
}

/* ツールチップ内アイコン画像 */
.tooltip .tooltip-content a img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 6px;
}

/* オプション：ツールチップの最低幅設定 */
.tooltip-content {
  white-space: nowrap;
  min-width: 300px;
}

/* オプション：リンク設定 */
.tooltip .tooltip-content a {
  display: block;
  color: #00ccff; /* お好みの色に変更できます */
  text-decoration: underline; /* 下線を表示 */
  margin: 4px 0;
  font-weight: bold; /* もし少し太くしたい場合 */
}

/* ======================================== */
/* タイトル：スマホの余白無くす
/* 用途　　：
/* 備考　　：
/* ======================================== */
@media screen and (max-width: 959px) {
	.l-content {
		padding-right: 0!important;
		padding-left: 0!important;
	}
	.l-mainContent {
		padding-right: 1vw!important;
		padding-left: 1vw!important;
	}
} 

/* ================================================================================ */
/* タイトル：テーブル一覧（横スクロール）
/* 用途　　：
/* 備考　　：すべてのテーブルで使用したい
/* ================================================================================ */
@media (min-width:1024px){
 	.table-multiple-columns.list{
		width:70%;
	}
}
.table-multiple-columns table{
	width:auto;
}
.table-multiple-columns th{
	width:auto;
	height:33px;
	border:solid 1px #000000!important;
	background: #2271b1!important;
	color:#ffffff;
	text-align:center;
	color:white!important;
	padding: .0 .4em;
	font-size:.9em;
}
.table-multiple-columns td{
	width:auto;
	height:33px;
	border:solid 1px #000000!important;
	padding: .0 .4em;
	font-size:.9em;
}
.table-note {
    color: gray;
	margin: 0;
    position: relative;
}

/* 横スクロールを有効にするテーブル用クラス
	 テーブルが親要素幅を超えるときに横スクロールさせる */
.h-scroll-table{
	display: block; /* 親の幅を無視して横に伸ばせるようにする */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	width: 100%;
}
.h-scroll-table caption{caption-side:top}

.h-scroll-table th{ white-space:nowrap }

/* データセルは折り返し禁止（nowrap）に戻す */
.table-multiple-columns.h-scroll-table td{ white-space:nowrap }

/* テーブルの自然幅を尊重して必要なときだけ横スクロールを発生させる */
.table-multiple-columns.h-scroll-table table{ min-width: max-content }

/* 画像をアイコンサイズで固定し、テキストは右側で折り返さず横スクロールで処理する */
.table-multiple-columns.h-scroll-table td a{ display:inline-block; align-items:middle; white-space:nowrap;}
/* Make image a fixed, non-shrinking flex item so it contributes to cell min-width */
.table-multiple-columns.h-scroll-table td a img{
	display:inline-block; width:24px; height:24px; object-fit:contain; margin:0;
	flex: 0 0 24px; /* do not shrink or grow; reserve 32px space */
	-webkit-flex: 0 0 32px; /* iOS Safari fallback */
	min-width:24px; max-width:24px; /* strictly reserve 32px so it can't overflow */
	vertical-align:bottom;
}
.table-multiple-columns.h-scroll-table td img:not(a img){
	/* fallback for img outside links */
	width:24px; height:24px; object-fit:contain; display:inline-block; margin:0;
}

/* 小画面でテーブルが横スクロール可能であることを示す左側のヒント */
@media (max-width:720px){
	/* ヒントは .h-scroll-table が付いているテーブルのときだけ表示 */
	.table-multiple-columns.h-scroll-table{position:relative}
	.table-multiple-columns.h-scroll-table::before{
		content: '← 横にスクロール →';
		position:absolute; left:8px; top:8px;
		background: rgba(0,0,0,0.6); color:#fff; font-size:12px;
		padding:6px 10px; border-radius:999px; pointer-events:none; z-index:30;
		box-shadow:0 2px 6px rgba(0,0,0,0.12);
		opacity:0.95;
	}
}

/* 画像設定 */
.table-multiple-columns td:has(img) img {
	vertical-align: middle;
}

/* ドロップテーブル用 */
/* th 上に重ねるラベル（中央オーバーレイ）。th にクラスを付けずに適用 */
.table-multiple-columns th { position: relative; }
.table-multiple-columns th > div:first-child{
	display:flex;
	align-items:center;
	justify-content:center;
 	box-sizing:border-box;
}
.table-multiple-columns th > div:first-child img{
 	object-fit:contain;
	display:inline-block;
}
.table-multiple-columns th > .th-overlay{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	background: transparent; /* 背景なし */
	color: #ffffff; /* 白文字 */
	border-radius:4px;
	white-space:nowrap; /* 改行を防ぐ */
	pointer-events:none; /* ラベルにマウスイベントを通さない */
}

/* レシピカード */
.table-multiple-columns.recipe th{
	width:auto;
	height:30px;
	border:solid 1px #000000!important;
	background: #2271b1!important;
	color:#ffffff;
	text-align:center;
	color:white!important;
	padding: .0 .5em;
}
.table-multiple-columns.recipe td{
	width:auto;
	height:30px;
	border:solid 1px #000000!important;
	padding: .0 .5em;
}
/* ================================================================================ */
/* タイトル：レシピカード
/* 用途　　：
/* 備考　　：
/* ================================================================================ */
/* 全体 */
.recipe-card {
	border: 1px solid black;
	padding: 1px;
	max-width: 400px;
}

/* 連続する .recipe-card 同士だけ margin を打ち消す */
.recipe-card + .recipe-card {
	margin-top: -29px;
}

/* 列 */
.recipe-card-header{
	
}
.recipe-card-header,.recipe-card-label,.recipe-card-body {
	display:flex;
	width:100%;
	margin-bottom:1px;
}

/* ヘッダー - イメージ */
.recipe-card-header-img {
	float: left;
	margin-right:1px;
	height:48px;
	width:48px;
	background-color: #f5f5f5;
}
.recipe-card-header-img img{
	width:100%;
}

/* ヘッダー - タイトル */
.recipe-card-header-title {
	width:calc(100% - 49px);
	font-size:120%;
	font-weight:bold;
	background-color: #f5f5f5;
	line-height:normal;
}

/* ヘッダー - ラベル */
.recipe-card-label {
	
}
.recipe-card-label img {
	width: 24px;
	height: 24px;
}

/* ================================================================================ */
/* タイトル：ブロック一覧
/* 用途　　：
/* 備考　　：
/* ================================================================================ */
table.blockID-table{
	width:100%;
}
.blockID-table tbody{

}
.blockID-table td{
	font-size: 16px;
	border-top:solid 1px gray!important;
	border-bottom:solid 1px gray!important;
	border-left:none!important;
	border-right:none!important;
	padding-left:0!important;
	padding-right:0!important;
}

div.blockID-image{
	float: left;
	width: 15%;
}
div.blockID-data{
	float: left;
	width: 85%;
}
div.blockID-name{
	font-weight:bold;
	width: 85%;
}
div.blockID-item{
	float: left;
	width: 11%;
}
div.blockID-separator{
	float: left;
}
div.clear{
	clear:both;
}
@media screen and (max-width: 480px){
	div.blockID-image{
		float: left;
		width: 15%;
		height: 80px;
	}
	div.blockID-name{
		font-weight:bold;
		width: 100%;
	}
	div.blockID-item{
		width: 17%;
		font-size:11px;
		float: left;
	}
	div.blockID-separator{
		width: 3%;
		font-size:11px;
		float: left;
	}
	div.blockID-data{
		width: 80%;
		font-size:11px;
		float: left;
	}
}

/* 入力ボタン */
input[type="button"].blockID-button{
	position: relative;
	width: 100px;
	padding: 0.8em;
	text-align: center;
	text-decoration: none;
	color: #1B1B1B;
	background: #fff;
	border:1px solid #1B1B1B;
	margin:3px 2px;
}	
input[type="button"].blockID-button:hover{
	background: #1B1B1B;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
}
/* 入力エリア */
input[type="text"].blockID-text{
	border-radius:	0;
	font-size:		18px;
	min-height: 18px;
}