/* ==================================================== */
/* CSSカスタムプロパティの定義 (デフォルト/ライトモード - セピア調) */
/* ==================================================== */
:root {
    --h1-size: clamp(12px, 2.5vw, 20px);
    --main-color: #4A4A4A;
}
*{
	-webkit-appearance: none;
	padding: 0;
	margin: 0;
	list-style-type: none;
	font-weight: normal;
	box-sizing: border-box;
}
html{
	height: 100%;
	overflow-x: hidden;
}
body{
	position: relative;
	height: 100%;
    --h1-size: clamp(12px, 2.5vw, 20px);
	margin: 0 auto;
	background: rgba(255,255,255,1) url('../image/wrapper_background.png') center;
	color: rgba(34,34,34,1);
	line-height: 1.5em;
}
b{
	font-weight: bold;
	color: rgba(0,0,0,1);
}
table{
	width: 100%;
	border-collapse: 0;
	border-spacing: 0;
}
img{
	width: 100%;
	height: auto;
}
img.contact_message{
	width: 75%;
	margin: 0 auto 2.5vw auto;
}
div.image{
	margin: 1em 0 0 0;
	text-align: center;
}
div.image div{
	display: inline-block;
	width: 30%;
	padding: 0.25em;
}
div.image img{
	border-radius: 50%;
	box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}
div.point,
div.center{
	border: 1px solid rgba(87,157,28,0.25);
	padding: 0.5em;
}
div.point{
	border: 1px solid rgba(239,90,136,0.25);
}
div.center{
	margin: 0 0 0.5em 0;
}
div.center p{
	text-align: center;
	margin: 0;
}
div.point p{
	position: relative;
	border-bottom: 1px dashed rgba(239,90,136,0.25);
	padding: 0.5em 0;
	font-weight: bold;
	margin: 0;
}
div.point p:last-of-type{
	border: none;
}
div.box_type1{
	box-shadow: 0 1px 3px rgba(0,0,0,0.25);
	padding: 2.5vw;
	background: rgba(0,0,0,0.025);
	overflow: hidden;
}
div.box_type2{
	box-shadow: 0 1px 3px rgba(0,0,0,0.25);
	padding: 2.5vw;
	background: rgba(0,0,0,0.01);
	overflow: hidden;
}
u{
	text-decoration: none;
	background: url('../image/underline.png') bottom repeat-x;
}
p{
	margin: 0 0 0.5em 0;
}
p.admission{
	position: relative;
	border: 3px solid rgba(239,90,136,1);
	padding: 0.5em 0 0.5em 4em;
	overflow: hiddden;
	margin: -1.5em 0 0.5em 0;
}
p.admission span{
	position: absolute;
	display: block;
	background: rgba(239,90,136,1);
	line-height: 2.5em;
	width: 3.5em;
	text-align: center;
	top: 0;
	left: 0;
	color: rgba(255,255,255,1);
}
p.caution,
p.small_step{
	position: relative;
	border: 1px solid rgba(87,157,28,0.25);
	color: rgba(87,157,28,1);
	padding: 0.5em 0.5em 0.5em 2em;
}
p.caution{
	padding-left: 0.5em;
}
div.point span.small_text{
	position: relative;
	display: block;
	font-size: 12px;
	line-height: 1em;
	margin: 0.25em 0 0 0;
	color: rgba(34,34,34,1);
}
p.caution span,
div.point span.point{
	position: absolute;
	left: 0.25em;
	top: 50%;
	margin: -3.5% 0 0 0;
	font-size: 1.5em;
}
div.point span.point{
	left: 0;
	color: rgba(239,90,136,1);
}
div.box_type1 p.caution,
div.box_type2 p.caution,
p.small_step{
	background: rgba(255,255,255,1);
	border: none;
}
div.box_type1 p:last-of-type,
div.box_type2 p:last-of-type{
	margin: 0;
}
p.cursor{
	text-align: center;
	color: rgba(87,157,28,0.1);
	margin: 0.25em 0;
}
p.big_step{
	position: relative;
	color: rgba(87,157,28,1);
	font-weight: bold;
	font-size: 5.25vw;
	background: url('../image/big_step.png') left top no-repeat;
	background-size: contain;
	margin: -2.5vw -2.5vw 2.5vw -2.5vw;
	padding: 2.5vw 0 2.5vw 10vw;
}
p.big_step span{
	position: absolute;
	left: 2.5vw;
	top: 0;
	color: rgba(255,255,255,1);
	font-size: 12px;
}
p.small_step:before{
	position: absolute;
	content: '●';
	font-size: 1.5em;
	left: 1vw;
	top: 50%;
	margin: -4% 0 0 0;
}
p.small_step span{
	position: absolute;
	left: 3vw;
	top: 50%;
	margin: -4.25% 0 0 0;
	color: rgba(255,255,255,1);
}

p.title{
	position: relative;
	text-align: center;
	color: rgba(250,110,129,1);
	font-size: 16px;
	margin: 1.5em 0;
}
p.title:after{
	position: absolute;
	display: block;
	border-top: 1px solid rgba(239,90,136,0.25);
	width: 100%;
	top: 50%;
	height: 1px;
	content: '';
}
p.title span{
	position: relative;
	background: rgba(255,255,255,1);
	padding: 0 0.25em;
	z-index: 1;
	font-weight: bold;
}
p.title.small{
	margin: 1em 0;
}
p.title.small:after{
	border-top: 1px solid rgba(23,164,148,1);
}
p.title.small span{
	display: block;
	font-size: 12px;
	position: relative;
	color: rgba(255,255,255,1);
	background: rgba(23,164,148,1);
	padding: 0 0.25em;
	z-index: 1;
	font-weight: bold;
	padding: 0.5em;
	width: 60%;
	margin: 0 auto;
}
div.center p.title.small span{
	color: rgba(87,157,28,1);
}
div.center p.title.small:after{
	border-top: 1px solid rgba(87,157,28,0.25);
}
p.big_title{
	padding: 1.5em 0 0 0;
}
ul.double li{
	float: left;
	width: 50%;
}
table.payment{
	margin: 0 0 0.5em 0;
	font-size: 5vw;
}
table.payment tr td:first-of-type{
	width: 60px;
	height: 60px;
	text-align: center;
	border-radius: 50%;
	color: rgba(255,255,255,1);
	text-align: center;
}
ul.double li:nth-child(1) table.payment tr td:first-of-type,
ul.double li:nth-child(4) table.payment tr td:first-of-type{
	background: rgba(239,90,136,0.5);
}
table.payment:nth-child(2n+1) tr td:first-of-type{
	background: rgba(239,90,136,0.25);
}
table.payment tr td:first-of-type span{
	font-size: 4vw;
}
table.payment tr td:last-of-type{
	position: relative;
	text-align: right;
	color: rgba(239,90,136,1);
	padding: 0.5em 0 0 0;
}
table.payment p.yen:after{
	position: absolute;
	display: block;
	width: 100%;
	height: 1px;
	border-top: 1px dashed rgba(239,90,136,0.25);
	content: '';
	right: 0;
	top: 0;
	margin: 1.6em 0 0 0;
}
table.payment tr td:last-of-type span{
	position: relative;
	background: rgba(255,255,255,1);
	z-index: 1;
}
table.payment tr td:last-of-type span.plus{
	display: inline-block;
	font-size: 4vw;
	width: 2em;
	text-align: left;
}
div#wrapper{
	display: block;
	background: rgba(255,255,255,1) url('../image/wrapper_background.png') center;
	position: relative;
	box-shadow: 0 0 7px rgba(0,0,0,0.25);
	z-index: 1;
	padding-top: 10vw;
}
div.accent{
	margin: 0 0 0.5em 0;
}
div.accent img{
	border-radius: 50%;
	margin: 0 auto;
	width: 50%;
	box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}
div.contents{
	position: relative;
	padding: 5vw;
}
div.contents.photo img{
	border: 2.5vw solid rgba(255,255,255,1);
	box-shadow: 0 1vw 1vw rgba(0,0,0,0.1);
	margin: 0 0 2.5vw 0;
}
div.contents_full{
	position: relative;
	padding: 5vw 0 0 0;
}
div.recruit{
	position: relative;
	background: rgba(255,255,255,1);
	padding: 4vw;
	margin-bottom: 2.5vw;
	border: 1vw solid rgba(214,202,184,1);
	text-align: center;
}
div.recruit p:last-of-type{
	margin-bottom: 0;
}
label{
	display: block;
	position: relative;
	background: rgba(214,202,184,1);
	padding: 1vw 4vw;
	margin: 0 -4vw 2.5vw -4vw;
	color: rgba(255,255,255,1);
}
label span{
	padding-left: 0.5em;
	font-size: 11px;
}
input,
textarea{
	width: 100%;
	font-size: 16px;
	padding: 0.5em;
	border: 1vw solid rgba(214,202,184,1);
	margin-bottom: 1em;
}
textarea{
	margin: 0;
}
::placeholder {
	color: rgba(214,202,184,0.5);
	font-size: 13px;
	font-widht: 100;
}
input[type="submit"]{
	border: none;
	background: none;
	color: rgba(239,90,136,1);
	font-weight: bold;
	line-height: 32px;
	padding: 0;
	margin: 0;
}
p#submit,
p#submit2{
	display: block;
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=rgba(255,255,255,1), endcolorstr=rgba(248,248,248,1)));
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=rgba(255,255,255,1), endcolorstr=rgba(248,248,248,1)))";
	background: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(248,248,248,1));
	background: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(248,248,248,1));
	background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(248,248,248,1));
	padding: 2.5vw;
	box-shadow: 0 1vw 1vw rgba(0,0,0,0.1);
	border: 1px solid rgba(0,0,0,0.05);
	width: 50%;
	margin: 0 auto;
	color: rgba(0,0,0,0.1);
	font-weight: bold;
	text-align: center;
	line-height: 32px;
}

div.recruit.contact{
	z-index: 1;
}
div.recruit.else{
	background: none;
}
div.recruit.else h3,
div.recruit.else h4{
	color: rgba(202,133,73,1);
	border-bottom: 1px solid rgba(202,133,73,1);
}
div.recruit.type1,
div.recruit.type2,
div.recruit.type3{
	text-align: center;
}
div.recruit.type1 img,
div.recruit.type2 img,
div.recruit.type3 img{
	margin: 2.5vw auto;
}
div.recruit.type1,
div.recruit.type1 h3{
	color: rgba(202,133,73,1);
}
div.recruit.type1 h3{
	border-bottom: 1vw solid rgba(202,133,73,1);
}
div.recruit.type2,
div.recruit.type2 h3{
	color: rgba(132,181,73,1);
}
div.recruit.type2 h3{
	border-bottom: 1vw solid rgba(132,181,73,1);
}
div.recruit.type3,
div.recruit.type3 h3{
	color: rgba(47,154,122,1);
}
div.recruit.type3 h3{
	border-bottom: 1vw solid rgba(47,154,122,1);
}
img.banner{
	margin-bottom: 2.5vw;
}
div.recruit div{
	position: relative;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	padding: 1vw 0 1vw 3em;
}
div.recruit div span{
	position: absolute;
	top: 1vw;
	left: 0;
	font-weight: bold;
}
div.recruit div:last-of-type{
//	border: none;
}
p#offer_open{
	position: relative;
	display: block;
	width: 50%;
	z-index: 2;
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=rgba(166,149,130,1), endcolorstr=rgba(137,118,98,1)));
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=rgba(166,149,130,1), endcolorstr=rgba(137,118,98,1)))";
	background: -moz-linear-gradient(top, rgba(166,149,130,1), rgba(137,118,98,1));
	background: -webkit-linear-gradient(top, rgba(166,149,130,1), rgba(137,118,98,1));
	background: linear-gradient(to bottom, rgba(141,104,39,1), rgba(109,73,22,1));
	padding: 2.5vw;
	margin: 2.5vw auto 0 auto;
	text-align: center;
	color: rgba(255,255,255,1);
	line-height: 36px;
}
img{
	display: block;
}
.FloatEnd{
	clear: both;
	display: block;
	height: 1px;
}
div#wrapper div.link_line{
	animation: button 0.9s ease 0s infinite alternate;
	transform-origin: center;
	margin-bottom: 2.5vw;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 1vw 1vw rgba(0,0,0,0.1);
}
div#wrapper div.link_mail{
	padding: 1vw;
	animation: button 0.9s ease 0s infinite alternate;
	transform-origin:center;
	margin-bottom: 2.5vw;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 1vw 1vw rgba(0,0,0,0.1);
}
div#wrapper div.link_tel{
	animation: button 0.9s ease 0s infinite alternate;
	transform-origin:center;
	margin-bottom: 2.5vw;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 1vw 1vw rgba(0,0,0,0.1);
}
div#wrapper div.link_line a img{
	width: 100%;
	height: auto;
}
header{
	position: relative;
	overflow: hidden;
	z-index: 0;
}
header table{
	position: relative;
	z-index: 1;
	height: 100%;
	vertical-align: bottom;
	text-align: center;
	color: rgba(255,255,255,1);
}
header table tr:first-of-type{
	vertical-align: top;
//	height: 100px;
}
footer{
	padding: 2.5vw;
	text-align: center;
	font-size: 12px;
	line-height: 1.5em;
}
div.question p{
	background: rgba(211,191,96,1);
	color: rgba(255,255,255,1);
	padding: 2.5vw 2.5vw 2.5vw 2.5em;
	margin: 0;
}
div.question p:before{
	position: absolute;
	display: block;
	background: rgba(255,255,255,1);
	color: rgba(211,191,96,1);
	content: 'Q';
	left: 1.5em;
	width: 1.5em;
	line-height: 1.5em;
	text-align: center;
	border-radius: 50%;
	font-weight: bold;
}
div.answer{
	position: relative;
	padding: 2.5vw;
}
#contact_area{
	position: relative;
	width: 100%;
	bottom: 0;
	z-index: 100;
	padding: 2.5vw;
	background: rgba(255,255,255,1);
	box-shadow: 0 0 7px rgba(0,0,0,0.25);
}
#contact_area td:first-of-type{
	width: 79px;
}
#contact_area img{
	height: 20px;
	width: auto;
}
#contact_area a{
	display: block;
	width: 100%;
	font-size: 16px;
	background: rgba(87,157,28,1) url('../image/body_background.png');
	text-align: center;
	text-decoration: none;
	color: rgba(255,255,255,1);
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
	line-height: 32px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.25);
	padding: 7px;
	border-bottom: 3.5px solid rgba(0,0,0,0.1);
}
footer img{
	width: 25%;
	margin: 0.5em auto;
}
footer hr{
	margin: 0.5em 0;
	border: none;
	border-top: 1px solid rgba(0,0,0,0.1);
	border-bottom: 1px solid rgba(255,255,255,0.15);
}
table#head_menu{
	position: fixed;
	bottom: 0;
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=rgba(255,255,255,1), endcolorstr=rgba(248,248,248,1)));
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=rgba(255,255,255,1), endcolorstr=rgba(248,248,248,1)))";
	background: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(248,248,248,1));
	background: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(248,248,248,1));
	background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(248,248,248,1));
	box-shadow: 0 0 7px rgba(0,0,0,0.25);
	z-index: 1000;
	padding-left: 2.5px;
}
table#head_menu td{
	width: 20%;
	border-right: 1px solid rgba(255,255,255,0.25);
	border-left: 1px solid rgba(0,0,0,0.05);
	text-align: center;
	padding: 2.5px 2.5px 2.5px 0;
}
table#head_menu td:first-of-type{
	border-left: none;
}
table#head_menu td:last-of-type{
	border-right: none;
}
table#head_menu a{
	display: block;
	overflow: hidden;
	border-radius: 1vw;
	box-shadow: 0 0.25em 0.25em rgba(0,0,0,0.25);
	filter: drop-shadow(0 0 3.5px rgba(255,255,255,1));
}


canvas {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}
#send{
	position: fixed;
	height: 100%;
	width: 100%;
	background: rgba(255,255,255,0.9);
	z-index: 10000;
}
#send td{
	padding: 2.5vw;
}
#send td div{
	background: rgba(255,255,255,1);
	text-align: center;
	padding: 2.5vw;
	box-shadow: 0 1vw 1vw rgba(0,0,0,0.1);
}
p.close{;
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=rgba(255,255,255,1), endcolorstr=rgba(248,248,248,1)));
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=rgba(255,255,255,1), endcolorstr=rgba(248,248,248,1)))";
	background: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(248,248,248,1));
	background: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(248,248,248,1));
	background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(248,248,248,1));
	padding: 2.5vw;
	box-shadow: 0 1vw 1vw rgba(0,0,0,0.1);
	border: 1px solid rgba(0,0,0,0.05);
	width: 50%;
	margin: 0 auto;
}
div.fandq{
	background: rgba(0,0,0,0.01);
}

/*font*/
*{
}

@keyframes button{
	from {
		transform: scale(0.98,0.98);
	}
	to {
		transform: scale(1,1);
	}
}
@-webkit-keyframes button{
	from {
		transform: scale(0.98,0.98);
	}
	to {
		transform: scale(1,1);
	}
}
@keyframes scroll{
	from {
		transform: scale(1,1);
	}
	to {
		transform: scale(1.4,1.4);
	}
}
@-webkit-keyframes scroll{
	from {
		transform: scale(1,1);
	}
	to {
		transform: scale(1.4,1.4);
	}
}


body {
    font-family: 'Sawarabi Mincho', sans-serif, 'メイリオ', Meiryo, 'Sawarabi Mincho','YuGothic', '游ゴシック体', 'Yu Gothic', '游ゴシック', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', Helvetica, Arial, Verdana;
}
			table.diary{
				overflow: hidden;
				position: relative;
				filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=rgba(255,255,255,0.5), endcolorstr=rgba(248,248,248,0.5)));
				-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=rgba(255,255,255,0.5), endcolorstr=rgba(248,248,248,0.5)))";
				background: -moz-linear-gradient(top, rgba(255,255,255,0.5), rgba(248,248,248,0.5));
				background: -webkit-linear-gradient(top, rgba(255,255,255,0.5), rgba(248,248,248,0.5));
				background: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(248,248,248,0.5));
				border-bottom: 1px solid rgba(0,0,0,0.05);
			}
			table.diary:after{
				position: absolute;
				content: "▲";
				top: 50%;
				right: 0;
				transform: rotate(90deg);
				color: rgba(0,0,0,0.1);
				margin-top: -0.75em;
			}
			div.diary table.diary:first-of-type{
				border-top: 1px solid rgba(0,0,0,0.05);
			}
			div.point p.point_title{
				position: relative;
				padding: 0.5em 1em;
				margin: -0.5em -0.5em 0.5em -0.5em;
				background: rgba(239,92,136,1);
				text-align: center;
				color: rgba(255,255,255,1);
				border-radius: 2.5px 2.5px 0 0;
			}

#header{
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 1;
	background: linear-gradient(rgba(255,255,255,1),rgba(248,248,248,1));
	padding: 0 1em;
	box-shadow: 0 0 0.5rem rgba(0,0,0,0.1);
}
h1{
    font-size: calc(var(--h1-size, 48px) * 2); 
	text-align: center;
	line-height: 2rem;
    color: rgba(208,176,55,1);
    margin-bottom: 1rem;
}
h1 span{
	display: block;
	font-size: 0.75rem;
	line-height: 1em;
}
h2{
	font-size: var(--h1-size);
    color: rgba(208,176,55,1);
	text-align: center;
	line-height: 2em;
}
main{
	positon: relative;
	margin-top: 2rem;
	color: var(--main-color);
	line-height: 1.75em;
	padding: 1rem;
}
footer{
    color: rgba(208,176,55,1);
	background: linear-gradient(rgba(255,255,255,1),rgba(248,248,248,1));
	box-shadow: 0 0 0.5rem rgba(0,0,0,0.1);
}

.button {
    display: block;          /* 幅いっぱいに表示 */
    width: 100%;             /* 親要素の幅に合わせる */
    padding: 15px;           /* 内側の余白 */
    text-align: center;      /* 文字を中央揃え */
    background-color: #C51B7D; /* ボタンの背景色: テラコッタ */
    color: #FFFFFF;          /* ボタンの文字色: 白 */
    text-decoration: none;   /* 下線を非表示 */
    border-radius: 50px;     /* 角丸を強くして、女性らしい優しい形に */
    font-weight: bold;       /* 文字を太字に */
    margin-top: 20px;        /* 上部の余白 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* わずかな影で立体感を出す */
    transition: background-color 0.3s; /* ホバー時の色の変化を滑らかに */
}

.button:hover {
	opacity: 0.75;
}


/* --- 各記事カードのスタイル --- */
.article-card {
    background-color: #FFFFFF;
    border-radius: 8px; /* 角丸で柔らかく */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* 上品な影 */
    overflow: hidden; 
    transition: transform 0.3s;
    margin-bottom: 1rem;
    background: linear-gradieng(rgba(255,255,255,1),rgba(250,250,250,1));
}

.article-card:hover {
    transform: translateY(-5px); 
}

.card-link {
    display: flex; /* ★これ重要！子要素（画像とコンテンツ）を横並びにする */
    text-decoration: none; /* リンクの下線を消す */
    color: inherit; /* 親要素の文字色を引き継ぐ */
}

.card-image-container {
    /* 画像コンテナの幅を固定 */
    flex-basis: 100px; 
    flex-shrink: 0; /* 幅を固定したまま縮小しないようにする */
}

.card-image-container img {
    width: 100%;
    height: 100px; /* 高さを固定（画像が歪む場合は object-fit: cover; を追加） */
    display: block;
    object-fit: cover; /* 画像の縦横比を維持しつつコンテナに収める */
}

.card-content {
    padding: 0.75rem; /* テキスト側の余白 */
    padding-bottom: 0;
    flex-grow: 1; /* 残りのスペースを全て埋めるように拡張 */
    display: flex;
    flex-direction: column; /* 中の要素（タイトルなど）は縦並びにする */
    justify-content: center; /* タイトルを垂直方向の中央に配置 */
}

.card-title {
    font-size: 1rem;
    color: #4A4A4A; 
    margin: 0; /* デフォルトのマージンをリセット */
}
.card-meta{
	font-size: 0.6rem;
	margin: 0;
	bottom: 0;
}
/* CSSファイル (diary.css) で制御 */
.card-image-container {
    width: 60px;  /* ここでサイズを指定 */
    height: 80px; /* ここでサイズを指定 */
    flex-shrink: 0;
}

.card-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像がはみ出すことなく、指定サイズに収まる */
}
/* 他の .card-link や .card-content のスタイルは前回の通り */
.pagination-container {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee; /* 上部に薄い線を入れて清潔感を強調 */
}

.page-link {
    display: inline-block;
    padding: 10px 15px;
    margin: 0 5px;
    background-color: #f9f9f9; /* 薄いグレー */
    color: #4A4A4A; /* ダークグレー */
    text-decoration: none;
    border-radius: 5px; /* 角丸 */
    transition: background-color 0.3s;
    border: 1px solid #eee;
}

.page-link:hover {
    background-color: #eee;
}

/* 現在のページを示すアクティブなリンク */
.page-link.active {
    background-color: #C51B7D; /* 提案した濃いピンク系 */
    color: #FFFFFF;
    font-weight: bold;
    border-color: #C51B7D;
}

/* 前後ボタンのスタイル調整 */
.page-link.prev-next {
    padding: 10px 20px;
}