@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');


#postindex{
	padding: 3em 0;
}



h2.sectitle{
	text-align: center;
	font-size: 2rem
}

h2.sectitle span{
	display: block;
	font-size: .6em;
	color: var(--color-point1);
	letter-spacing: .15em
}

@media screen and (max-width: 767px) {}	

@media print, screen and (min-width: 768px) {}	

@media print, screen and (min-width: 1024px) {
	#postindex{
		padding: 100px 0;
	}
}	



.postsingle{
	padding: 0 0 100px;
	width: min(90%, 800px);
	margin-inline: auto
}

.column-new{
	padding: 0 0 50px;
	width: min(90%, 800px);
	margin-inline: auto
}

.column-new h3{
	margin-bottom: 1em;
	font-size: 1.4rem
}

ul.column-new-arrival a{
	color: var(--color-point1);
	text-decoration: underline
}

/* ------------------------------
 #column
------------------------------ */


.column-list {
	margin: 3em auto 0;
}
.column-list > ul{
	display: flex;
	gap:30px;
	width: min(90%, 1200px);
	margin-inline: auto
}

.column-list > ul > li{
	flex: 1
}

.column-list > ul > li figure{
	position: relative
}

.new-circle {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 10;
    
    /* 丸いデザインの調整 */
    background-color: #ff4500;
    color: #ffffff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    
    /* 文字の中央揃え */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 文字の装飾 */
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}



.column-list > ul > li figure img{
	border-radius: 8px;
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4.5 / 3;
	-webkit-transition: all .3s;
	transition: all .3s;
	box-shadow: 0px 0px 8px #eee;s
}

.column-list > ul > li .column-title{
	padding: 1em .2em 0
}

.column-list > ul > li .column-title h3{
	font-size: 1.4rem
}

ul.meta{
	display: flex;
	gap:10px;
}

#column .page-link{
	margin: 3em 0 0
}


@media screen and (max-width: 667px) {
	#column{padding: 10% 0;}
	.column-list > ul{
		flex-direction: column
	}
}	

@media print, screen and (min-width: 768px) {}	

@media print, screen and (min-width: 1024px) {}