@charset "utf-8";

/* =========================================================
   一片ギャラリー統合スタイルシート
   （ippen03.cssの可愛い配色＋gallery.cssの構造）
   ---------------------------------------------------------
   Designed for Tegalog Ver 4.5.5＋
   ========================================================= */

/* カラーテーマ変数 */
:root {
  --haikei-iro: #fafafa;       /* 背景の淡いピンク */
  --moji-iro: #242424;            /* 標準文字色 */
  --usu-mozi: #818181; /* 薄い文字色 */
  --link-iro: #e3a8bf;         /* リンク文字色 */
  --hover-iro: #dce3a8;        /* リンクホバー時 */
  --koi-iro: #c2879e;          /* 強調ピンク */
  --siro-mozi: #f5f5f5; /* 濃い背景に乗せる白文字色 */
  --waku-iro: #f4c9d8;         /* 枠線のピンク */
  --nure-iro: #fff0f6;         /* パーツ背景 */
  --sub-iro: #ffdeeb;          /* サブ領域背景 */
}

/* ===================== */
/* ■全体共通装飾        */
/* ===================== */
body  {
	font-size: 0.9rem;
	line-height: 1;
	font-family: "メイリオ",Meiryo,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
	margin: 0;
	padding: 0;
}

/* リンク装飾 */
a:link { color: var(--link-iro); text-decoration: none; }
a:hover { color: var(--hover-iro); text-decoration: underline; }

/* 画像 */
img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* ヘッダーからフッターを囲むエリア */
.bodyarea {
	margin: 0;
	padding: 0;
	background-color: var(--haikei-iro);
	color: var(--mozi-iro);
	display: grid;/* ↓4行 フッターを下部固定する */
	grid-template-rows: auto 1fr auto;
	grid-template-columns: 100%;
	min-height: 100svh;
}

/* ===================== */
/* ■ヘッダ領域          */
/* ===================== */
header {
	width: 100%;
	margin: 0;
	padding: 1.5rem;
	background-color: var(--koi-iro);
	text-align: center;
	line-height: 1.2;
	font-family: var(--titlefont);
	letter-spacing: 0.1rem;
}

.headtitle {
  display: table-cell;
  padding: 0.6em 1em;
  vertical-align: middle;
}

.maintitle {
	font-size: 1.6rem;
	font-weight: bold;
	margin-top: 1rem;
	/* text-wrap: balance; */ /* ←改行位置を調整する設定 お好みで使ってください */
}
.maintitlelink { color: var(--siro-mozi) !important;}

.subtitle {
  display: block;
  font-size: 0.8em;
  color: var(--sub-iro);
}

.headcontrol {
  display: table-cell;
  text-align: right;
  padding: 0.5em 1em;
}
.searcharea {
  background-color: var(--nure-iro);
  border-radius: 1em;
  padding: 0.5em;
}
.searchbox input[type="text"] {
  border: 2px solid var(--waku-iro);
  border-radius: 1em;
  padding: 0.3em 0.8em;
}
.submitbutton {
  background-color: var(--koi-iro);
  color: white;
  border: none;
  border-radius: 1em;
  padding: 0.3em 1em;
  font-weight: bold;
}
.submitbutton:hover {
  background-color: var(--hover-iro);
}

/* ===================== */
/* ■メイン領域          */
/* ===================== */
.mainarea  {
  width: min(100%,1000px) !important;
  margin: 1em auto;
  padding: 1em;
  max-width: 1000px;
  background-color: white;
  border-radius: 1.5em;
  box-shadow: 0 3px 10px rgba(230,160,190,0.3);
}


	/* ------------------------ */
	/* ページ内の画像群(大外枠) */
	/* ------------------------ */

/* ボタン部分を横並びに整える */
div.tegalogImages.forList .pictCtrlBox {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}

div.tegalogImages.forList .pictCtrlBox a {
  display: inline-block;
  font-size: 12px;
  text-decoration: none;
  background: #f0f0f0;
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 1.2;
}

/* ボタン部分 */
.tegalogImages.forList .pictCtrlBox {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
}

.tegalogImages.forList .pictCtrlBox a {
  background: #f0f0f0;
  border-radius: 4px;
  padding: 3px 6px;
  text-decoration: none;
  font-size: 12px;
  line-height: 1.2;
}

/* =============================== */
/* ■投稿ボックス(1画像)ごとの表示 */	/* ※この領域は、内側スキンで生成しているHTMLに対する装飾です。 */
/* =============================== */

	/* ―――――――――――――――――――――― */
	/* ■共通装飾（一覧表示時・画像単独表示時共通） */
	/* ―――――――――――――――――――――― */

	/* ▽画像ボックス(FIG付き) */
	.embeddedpictbox {
		margin: 0 auto;				/* 外側の余白を消す＋枠サイズより画像が小さい場合は中央に寄せる */
		padding: 0;					/* 内側の余白を消す */
		display: table;				/* テーブル化(キャプションの配置制御のため) */
		border-collapse: collapse;	/* displayをinline-tableにする場合に必要 */
		vertical-align: top;		/* 行内では上に寄せる */
	}
		/* キャプション */
		.embeddedpictbox figcaption {
			display: table-caption;		/* キャプションが画像幅から外に出ないようにする */
			caption-side: bottom;		/* キャプションの位置 */
			font-size: 0.85em;			/* 文字サイズ */
			text-align: center;			/* センタリング */
			background-color: var(--nure-iro);	/* 背景色 */
			padding: 0.5em 0;			/* 内側の余白量 */
			line-height: 1;
		}

		.embeddedpictbox figcaption:empty {
			display: none;		/* キャプションがない場合は、キャプション枠自体を非表示にする */
		}

		/* 画像ボックスに含まれる画像 */
		.embeddedpictbox img {
			vertical-align: middle;
		}

	/* ▽画像リンク */
	.imagelink {
		display: inline-block;
		line-height: 1;				/* 表示形態によっては画像の下に余計な空白が出るのを防ぐ対策 */
		vertical-align: inherit;	/* 同上 */
	}

	/* ▽画像そのもの */
	.embeddedimage {
		max-width: 100%;	/* 横方向にはみ出ないようにする */
		width: auto;	/* 横幅を固定したい場合は、ここではなく「一覧表示時」と「単独表示時」とで別個に指定する方が望ましいと思います。 */
		height: auto;	/* 高さを固定したい場合は、ここではなく「一覧表示時」と「単独表示時」とで別個に指定する方が望ましいと思います。 */
	}

	/* ▽NSFWフラグ付き画像用の装飾 */
	.imagelink.nsfw,
	figure.nsfw {
		overflow: hidden;	/* ぼかし領域がfigureのボックスからはみ出ないようにする */
	}
	img.nsfw {
		filter: blur(9px);	/* ぼかす */
	}

	/* ―――――― */
	/* ■一覧表示時 */
	/* ―――――― */

/* 各投稿（画像含む） */
.forList .box {
  overflow: hidden;
  border-radius: 8px;
}

.forList:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

		/* ………………… */
		/* ▼画像掲載部分 */
		/* ………………… */
		.imagebox {
  border: none;
  padding: 0;
}

		/* ………………………… */
		/* ▼画像直下リンク部分 */
		/* ………………………… */
		.pictCtrlBox {
			display: flex;				/* 中身を横並びにする */
			gap: 1em;					/* 間隔 */
			justify-content: center;	/* 全体を中央寄せ */
			margin: 0.5em 0 0 0;		/* 外側の余白量 */
		}

			/* 画像番号リンク枠 */
			.pictNum {
				font-size: 0.75em;
			}
				.pictNum a:link {    color: green; }
				.pictNum a:visited { color: darkgreen; }
				.pictNum a:hover {   color: blue; }

			/* 画像検索リンク(ボタン)枠 */
			.pictSearch {
				font-size: 0.6em;
			}
				a.pictSearchBtn {
					display: inline-block;
					line-height: 1;
					text-decoration: none;		/* リンクの下線を消す */
					border: 1px solid #ccc;		/* 枠線 */
					background-color: #eee;		/* 背景色 */
					color: gray;				/* 文字色 */
					border-radius: 0.25em;		/* 角丸 */
					padding: 0.25em 0.5em;		/* 内側の余白量 */
				}
				a.pictSearchBtn:hover {
					border-color: royalblue;
					color: darkblue;
					background-color: #ccf;
				}

	/* ―――――― */
	/* ■単独表示時 */
	/* ―――――― */
	.forOnePict {
	}

		/* 画像タイトル */
		.pictTitle {
			text-align: left;
			font-weight: bold;
			word-break: break-all;
			border-bottom: 3px double green;
			padding: 0 0.25em;
			width: fit-content;
		}

		/* ………………… */
		/* ▼画像掲載部分 */
		/* ………………… */
		.onePictBox {
			border:1px solid #eee;
			border-radius: 5px;
			padding: 5px;
			width: fit-content;
			margin: auto;
		}

			/* ▼画像そのものが大きくなりすぎるのを防ぐ */
			.forOnePict .embeddedimage {
				max-height: 100vh;	/* 大きくなりすぎないようにする */
			}

		/* ………………… */
		/* ▼画像情報部分 */
		/* ………………… */
		.onePictMeta {
			margin: 2em auto;
			padding: 1em;
			max-width: 750px;
			background-color: #eee;
			text-align: left;
		}
			/* 情報リスト */
			.onePictMeta ul {
				margin: 0;
				padding: 0;
				list-style-type: none;
				font-size: 0.95em;
			}

				/* 項目見出し */
				.onePictMeta small {
					background-color: #aaa;
					color: white;
					display: inline-block;
					min-width: 6em;
					line-height: 1;
					padding: 2px 0.75em;
					border-radius: 1em;
					vertical-align: middle;
				}

				/* NEW表示 */
				.newflag {
					font-size: 0.75em;
					color: red;
					vertical-align: top;
					position: relative;
					top: -0.25em;
				}

				/* ユーザリンク */
				.pictOwner a {
					text-decoration: none;		/* 下線を消す */
				}
				.pictOwner a:hover {
					text-decoration: underline;	/* 下線を引く */
				}
				.usericon {
					width: 16px;
					height: 16px;
					vertical-align: -6%;
				}

				/* 使用投稿検索 */
				.onePictSearch {
					margin: 0.5em 0 0;
					text-align: right;
					font-size: 0.9em;
				}


/* ===================== */
/* ■投稿ボックス         */
/* ===================== */
.onelogbox {
  display: inline-block;
  vertical-align: top;
  width: 230px;
  margin: 0.5em;
  padding: 0.6em;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}
.onelogbox:hover {
  transform: translateY(-3px);
}

/* 画像部分 */
.embeddedimage {
  max-width: 100%;
  border-radius: 10px;
  margin-bottom: 0.5em;
}

/* ===================== */
/* ■ページナビ           */
/* ===================== */
/* ページナビ全体 */
.pagenavi {
  display: flex;
  justify-content: center;
  padding: 1.5rem 1.8rem; 
  gap: 0;
}

.pagelinks {
  display: flex;
  justify-content: center;
  gap: 0;              /* ← スキマ完全ゼロ */
}

/* 通常ページ */
.pagenumlink {
  display: grid;
  place-items: center;
  min-width: 35px;
  height: 35px;
  border: 1px solid var(--waku-iro);
  background: white;
  color: var(--usu-mozi) !important;
  text-decoration: none;
}

/* 現在ページ */
.pagenumhere {
  display: grid;
  place-items: center;
  min-width: 35px;
  height: 35px;
  background: var(--link-iro) ;
  color: var(--siro-mozi) !important;
}

/* hover */
.pagenumlink:hover {
  background: var(--link-iro);
  color: var(--siro-mozi);
  text-decoration: none;

}

.prevlink{
  display: inline-flex;
  place-items: center;
  padding: 0.6em 0.9em;
  min-width: 35px;
  height: 35px;
  background: white;
  color: var(--usu-mozi) !important;
  border: 1px solid var(--waku-iro);
}

.prevlink:hover{
  background: var(--link-iro);
  color: var(--siro-mozi);
  text-decoration: none;
}

.nextlink{
  display: inline-flex;
  place-items: center;
  padding: 0.6em 0.9em;
  min-width: 35px;
  height: 35px;
  background: white;
  color: var(--usu-mozi) !important;
  border: 1px solid var(--waku-iro);
}

.nextlink:hover{
  background: var(--link-iro);
  color: var(--siro-mozi);
  text-decoration: none;
}


/* ===================== */
/* ■サブ領域             */
/* ===================== */
.subarea {
  margin: 1em auto;
  padding: 1em;
  background-color: var(--sub-iro);
  border-radius: 1em;
  max-width: 1000px;
}
.cornertitle {
  font-weight: bold;
  color: var(--koi-iro);
  text-shadow: 1px 1px 1px white;
}

/* ===================== */
/* ■フッタ               */
/* ===================== */
footer {
	background-color: var(--koi-iro);
	color: var(--siro-mozi);
	padding: 1rem 4rem 1rem 1rem;
	text-align: right;
}
footer .kanri { font-size: 20px; margin-right: 0.5rem; vertical-align: middle;}
footer .kanri:hover { text-decoration: none;}

/* ===================== */
/* ■レスポンシブ対応     */
/* ===================== */


/* ボタン部分 */
.tegalogImages.forList .pictCtrlBox {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
}

.tegalogImages.forList .pictCtrlBox a {
  background: #f0f0f0;
  border-radius: 4px;
  padding: 3px 6px;
  text-decoration: none;
  font-size: 12px;
  line-height: 1.2;
}

@media all and (max-width: 480px) {
  header { display: block; text-align: center; }
  .headtitle, .headcontrol { display: block; padding: 0.5em; }
  .onelogbox { width: 100%; }
}


/* ---------------------------
   強制：一覧サムネを中央トリミングで1:1に揃える
   ※ このブロックを CSS の一番最後に置いてください
   --------------------------- */

.tegalogImages.forList,
.tegalogImages.forList > * {
  box-sizing: border-box;
}

/* 親の子要素（投稿枠）の中にある imagebox を正方形化する */
.tegalogImages.forList .imagebox {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 8px !important;
}

/* 見え高さを幅と同じにするダミー要素（正方形を作る） */
.tegalogImages.forList .imagebox::before {
  content: "" !important;
  display: block !important;
  padding-top: 100% !important; /* これで縦横比を1:1に固定 */
}


/* 画像を絶対配置して中央をトリミング表示する（これが肝） */
.tegalogImages.forList .imagebox img,
.tegalogImages.forList .imagebox > img {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 100% !important;
  height: 100% !important;
  transform: translate(-50%, -50%) !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 8px !important;
}


/* safety: 汎用な .tegalogImages.forList img セレクタより優先されるように
   specificity を高くしてある（.imagebox img を使）。 */

/* pictCtrlBox（ボタン）が残っている場合は非表示にしたいなら */
.tegalogImages.forList .pictCtrlBox {
  display: none !important;
}

/* ===============================
   ギャラリーモード：最終確定版
   =============================== */

/* ギャラリー一覧（全ページ共通） */
.tegalogImages.forList {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important; /* ←6列固定 */
  gap: 6px !important;
}

/* 1投稿（※ 内側にある .forList） */
.tegalogImages.forList > .forList {
  width: 100%;
  box-sizing: border-box;
}

/* 正方形トリミング担当は imagebox のみ */
.tegalogImages.forList .imagebox {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* 正方形を作る */
.tegalogImages.forList .imagebox::before {
  content: "";
  display: block;
  padding-top: 100%;
}
/* 中央トリミング */
.tegalogImages.forList .imagebox img {
  position: absolute !important;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

/* ボタン類は非表示（必要なら） */
.tegalogImages.forList .pictCtrlBox {
  display: none;
}

a:hover { color: var(--hover-iro) !important; text-decoration: underline; }