/*
================================================================
	page_index.css	2024/10/30	Zumi
	ﾍﾟｰｼﾞｲﾝﾃﾞｯｸｽ用HTML作成ｸﾗｽ ｽﾀｲﾙｼｰﾄ
================================================================
*/
/* ｶｽﾀﾑﾌﾟﾛﾊﾟﾃｨ */
:root {
	--rem_pc_px: 	100px;		/* PCは 1rem = 100px として定義 */
	--rem_pc: 		100;
	--rem_mb_px: 	50px;		/* mobileは 1rem = 50px として定義 */
	--rem_mb: 		50;
}
@media all {
	.page_index {
/*		border: 			1px solid black;		/* DEBUG用 */
		display: 			flex;
		align-items: 		center;
/*		justify-content: 	space-between;*/
		margin: 			0;
		padding:			0;
		width:				auto;
	}
	.page_index .rec_num {
		margin: 			0 1.3rem 0 0rem;
		padding: 			0;
		width: 				2.1rem;
	}
	.page_index .index {
/*		border: 			1px solid black;		/* DEBUG用 */
		display: 			flex;
		align-items: 		center;
		margin: 			0;
		padding: 			0;
	}
	.page_index .index span,
	.page_index .index a {
		display: 			inline-block;
		border-style:		solid;
		border-width:		0.01rem;
		border-color:		grey;
		border-right: 		none;
		background-color: 	white;
		color: 				black;
		margin: 			0;
		padding: 			0.05rem 0;
		text-align: 		center;
		width: 				0.30rem;
		font-size: 			0.12rem;
	}
	.page_index .index a {
		transition: 		all 0.2s ease;
		opacity: 			1;
	}
	.page_index .index .btn a,
	.page_index .index .btn span {
		border-right: 		none;
		position: 			relative;
		color: 				black;
		font-weight: 		500;
		width: 				0.52rem;
		padding-right:		0.05rem;
		padding-left:		0.05rem;
	}
	.page_index .index a:hover,
	.page_index .index .btn a:hover,
	.page_index .index span.sel {
		background-color: 	purple;
		color: 				white;
	}
	.page_index .index .btn.last a,
	.page_index .index .btn.last span {
		border-right:  		0.01rem solid grey;
	}
	.page_index .index .btn.first a, 
	.page_index .index .btn.last a,
	.page_index .index .btn.first span, 
	.page_index .index .btn.last span {
		width: 				0.3rem;
	}
	.page_index .index .btn.prev a,
	.page_index .index .btn.prev span {
		text-align: 		right;
	}
	.page_index .index .btn.next a, 
	.page_index .index .btn.next span {
		text-align: 		left;
	}
	.page_index .index .btn.prev a::after,
	.page_index .index .btn.prev span::after {
		content: 			'Prev';
	}
	.page_index .index .btn.next a::before,
	.page_index .index .btn.next span::before {
		content: 			'Next';
	}
	.page_index .index .btn.first a:before,
	.page_index .index .btn.last a:after,
	.page_index .index .btn.first span:before,
	.page_index .index .btn.last span:after {
		content: 			'';
		width: 				0.11rem;
		height: 			0.11rem;
		transform: 			rotate(45deg) translateY(-50%);
		position: 			absolute;
		top: 				50%;
		border-radius: 		0.01rem;
	}
	.page_index .index .btn.first a:before,
	.page_index .index .btn.first span:before {
		border-bottom: 		0.04rem double black;
		border-left: 		0.04rem double black;
		left: 				0.06rem;
	}
	.page_index .index .btn.last a:after,
	.page_index .index .btn.last span:after {
		border-top: 		0.04rem double black;
		border-right: 		0.04rem double black;
		right: 				0.16rem;
	}
	.page_index .index .btn.prev a:before,
	.page_index .index .btn.next a:after,
	.page_index .index .btn.prev span:before,
	.page_index .index .btn.next span:after {
		content: 			'';
		width: 				0.08rem;
		height: 			0.08rem;
		transform: 			rotate(45deg) translateY(-50%);
		position: 			absolute;
		top: 				50%;
		border-radius: 		0;
	}
	.page_index .index .btn.prev a:before,
	.page_index .index .btn.prev span:before {
		border-bottom: 		0.01rem solid black;
		border-left: 		0.01rem solid black;
		left: 				0.04rem;
	}
	.page_index .index .btn.next a:after,
	.page_index .index .btn.next span:after {
		border-top: 		0.01rem solid black;
		border-right: 		0.01rem solid black;
		right: 				0.10rem;
	}
	.page_index .index .btn a:hover:after, 
	.page_index .index .btn a:hover:before {
		border-color: 		white;
	}
	.page_index .index .fix span {
		background-color: 	silver;
	}
	/*------------------------------------*/
	/*	ｵｰﾊﾞｰﾗｲﾄﾞ用ｸﾗｽ 
	/*	ｸﾗｽ名pgix_dfを別名定義して使用
	/*	以下のﾌﾟﾛﾊﾟﾃｨのみｵｰﾊﾞｰﾗｲﾄﾞ可
	/*	変更不要時は指定不要
	/*------------------------------------*/
	.pgix_df {
		margin: 			0.02rem 0.2rem 0.02rem 0.05rem;
		padding:			0;
	}
	.pgix_df .index a,
	.pgix_df .index span {
		border-color:		grey;
		background-color: 	white;
		color: 				black;
		padding: 			0.05rem 0;
		width: 				0.30rem;
		font-size: 			0.12rem;
	}
	.pgix_df .index a:hover,
	.pgix_df .index .btn a:hover,
	.pgix_df .index span.sel {
		background-color: 	purple;
		color: 				white;
	}
	.pgix_df .index .btn a,
	.pgix_df .index .btn span {
		color: 				black;
		width: 				0.52rem;
	}
	.pgix_df .index .btn.last a,
	.pgix_df .index .btn.last span {
		border-right:  		0.01rem solid grey;
	}
	.pgix_df .index .btn.first a, 
	.pgix_df .index .btn.last a,
	.pgix_df .index .btn.first span, 
	.pgix_df .index .btn.last span {
		width: 				0.3rem;
	}
	.pgix_df .index .btn.prev a::after,
	.pgix_df .index .btn.prev span::after {
		content: 			'Prev';
	}
	.pgix_df .index .btn.next a::before,
	.pgix_df .index .btn.next span::before {
		content: 			'Next';
	}
	.pgix_df .index .btn.first a:before,
	.pgix_df .index .btn.last a:after,
	.pgix_df .index .btn.first span:before,
	.pgix_df .index .btn.last span:after {
		width: 				0.11rem;
		height: 			0.11rem;
	}
	.pgix_df .index .btn.first a:before,
	.pgix_df .index .btn.first span:before {
		border-bottom: 		0.04rem double black;
		border-left: 		0.04rem double black;
		left: 				0.06rem;
	}
	.pgix_df .index .btn.last a:after,
	.pgix_df .index .btn.last span:after {
		border-top: 		0.04rem double black;
		border-right: 		0.04rem double black;
		right: 				0.16rem;
	}
	.pgix_df .index .btn.prev a:before,
	.pgix_df .index .btn.next a:after,
	.pgix_df .index .btn.prev span:before,
	.pgix_df .index .btn.next span:after {
		width: 				0.08rem;
		height: 			0.08rem;
	}
	.pgix_df .index .btn.prev a:before,
	.pgix_df .index .btn.prev span:before {
		border-bottom: 		0.01rem solid black;
		border-left: 		0.01rem solid black;
		left: 				0.04rem;
	}
	.pgix_df .index .btn.next a:after,
	.pgix_df .index .btn.next span:after {
		border-top: 		0.01rem solid black;
		border-right: 		0.01rem solid black;
		right: 				0.10rem;
	}	
	.pgix_df .index .btn a:hover:after, 
	.pgix_df .index .btn a:hover:before {
		border-color: 		white;
	}
	.pgix_df .index .fix span {
		background-color: 	silver;
	}
	/*------------------------------------*/
	/* 日記画面用 ﾍﾟｰｼﾞｲﾝﾃﾞｯｸｽ
	/*------------------------------------*/
	.pgix_dr {
		margin: 			0.1rem 0.15rem 0.15rem 0.05rem;
		padding:			0;
	}
	.pgix_dr .rec_num {
		margin: 			0 1.0rem 0 0rem;
		padding: 			0;
		width: 				2.1rem;
	}
	.pgix_dr .index a:hover,
	.pgix_dr .index .btn a:hover,
	.pgix_dr .index span.sel {
		background-color: 	darkviolet;
		color: 				white;
	}
	.pgix_dr .index .btn a,
	.pgix_dr .index .btn span {
		color: 				teal;
	}
	.pgix_dr .index .btn.first a:before,
	.pgix_dr .index .btn.first span:before {
		border-bottom: 		0.04rem double dimgray;
		border-left: 		0.04rem double dimgray
	}
	.pgix_dr .index .btn.last a:after,
	.pgix_dr .index .btn.last span:after {
		border-top: 		0.04rem double dimgray;
		border-right: 		0.04rem double dimgray;
	}
	.pgix_dr .index .btn.prev a:before,
	.pgix_dr .index .btn.prev span:before {
		border-bottom: 		0.01rem solid dimgray;
		border-left: 		0.01rem solid dimgray;
	}
	.pgix_dr .index .btn.next a:after,
	.pgix_dr .index .btn.next span:after {
		border-top: 		0.01rem solid dimgray;
		border-right: 		0.01rem solid dimgray;
	}	
	.pgix_dr .index .btn a:hover:after, 
	.pgix_dr .index .btn a:hover:before {
		border-color: 		white;
	}
	.pgix_dr .index .fix span {
		background-color: 	silver;
	}
}
@media (max-width: 750px) {
	.page_index .rec_num {
		font-size: 			calc((0.14rem * var(--rem_pc) / var(--rem_mb) ) * 0.8);
		width: 				calc((2.1rem * var(--rem_pc) / var(--rem_mb) ) * 0.8);
	}
	.page_index .index span,
	.page_index .index a {
		padding: 			calc((0.05rem * var(--rem_pc) / var(--rem_mb) ) * 0.8) 0;
		width: 				calc((0.30rem * var(--rem_pc) / var(--rem_mb) ) * 0.85);
		font-size: 			calc((0.12rem * var(--rem_pc) / var(--rem_mb) ) * 0.85);
	}
	.page_index .index .btn a,
	.page_index .index .btn span {
		width: 				calc((0.52rem * var(--rem_pc) / var(--rem_mb) ) * 0.85);
		padding-right:		calc((0.05rem * var(--rem_pc) / var(--rem_mb) ) * 0.85);
		padding-left:		calc((0.05rem * var(--rem_pc) / var(--rem_mb) ) * 0.85);
	}
	.page_index .index .btn.first a, 
	.page_index .index .btn.last a,
	.page_index .index .btn.first span, 
	.page_index .index .btn.last span {
		width: 				calc((0.3rem * var(--rem_pc) / var(--rem_mb) ) * 0.85);
	}
	.page_index .index .btn.first a:before,
	.page_index .index .btn.last a:after,
	.page_index .index .btn.first span:before,
	.page_index .index .btn.last span:after {
		width: 				calc((0.11rem * var(--rem_pc) / var(--rem_mb) ) * 0.85);
		height: 			calc((0.11rem * var(--rem_pc) / var(--rem_mb) ) * 0.85);
		top: 				50%;
	}
	.page_index .index .btn.first a:before,
	.page_index .index .btn.first span:before {
		border-bottom: 		calc((0.04rem * var(--rem_pc) / var(--rem_mb) ) * 0.85) double black;
		border-left: 		calc((0.04rem * var(--rem_pc) / var(--rem_mb) ) * 0.85) double black;
		left: 				calc((0.06rem * var(--rem_pc) / var(--rem_mb) ) * 0.85);
	}
	.page_index .index .btn.last a:after,
	.page_index .index .btn.last span:after {
		border-top: 		calc((0.04rem * var(--rem_pc) / var(--rem_mb) ) * 0.85) double black;
		border-right: 		calc((0.04rem * var(--rem_pc) / var(--rem_mb) ) * 0.85) double black;
		right: 				calc((0.16rem * var(--rem_pc) / var(--rem_mb) ) * 0.85);
	}
	.page_index .index .btn.prev a:before,
	.page_index .index .btn.next a:after,
	.page_index .index .btn.prev span:before,
	.page_index .index .btn.next span:after {
		width: 				calc((0.08rem * var(--rem_pc) / var(--rem_mb) ) * 0.85);
		height: 			calc((0.08rem * var(--rem_pc) / var(--rem_mb) ) * 0.85);
		top: 				50%;
	}
	.page_index .index .btn.prev a:before,
	.page_index .index .btn.prev span:before {
		border-bottom: 		calc((0.01rem * var(--rem_pc) / var(--rem_mb) ) * 0.85) double black;
		border-left: 		calc((0.01rem * var(--rem_pc) / var(--rem_mb) ) * 0.85) double black;
		left: 				calc((0.04rem * var(--rem_pc) / var(--rem_mb) ) * 0.85);
	}
	.page_index .index .btn.next a:after,
	.page_index .index .btn.next span:after {
		border-top: 		0.01rem solid black;
		border-right: 		0.01rem solid black;
		right: 				calc((0.1rem * var(--rem_pc) / var(--rem_mb) ) * 0.85);
	}
	/*------------------------------------*/
	/* 日記画面用 ﾍﾟｰｼﾞｲﾝﾃﾞｯｸｽ
	/*------------------------------------*/
	.pgix_dr {
		margin: 			0.05rem 0.05rem 0.2rem 0.18rem;
		padding:			0;
	}
}