.column{
	font-size: 1rem;
	color: #666;
}
.column h1,
.column h2,
.column h3{
	text-align: left;
}
.column h1{
	margin: 2rem auto;
	padding: 1rem;
	line-height: 1.5;
	letter-spacing: 2px;
	color: #333;
	border-top: 1px dotted #666;
}
.column h1 span{
	display: block;
	font-size:0.85rem;
	color:#666;
}
.column h2{
}
.column h3{
	margin: 2rem 0 1rem;
	font-size: 1.2rem;
}
.column .column-head{
	border-bottom: 1px dotted #666;
}
.column .column-head .column-author{
	display:flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	width:100%;
	padding: 1rem;
	margin:0;
	font-size: 0.9rem;
	line-height:1.4rem;
	color: #333;
}
.column .column-author .author-image,
.column .column-author .store-image{
	margin: 10px;
}
.column .column-author .author-image img{
	width: 100px;
	height: auto;
	border-radius: 50%;
}
.column .column-menu .author-image img{
	max-width: 50px;
}
.column .store{
	display:flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	width:100%;
	padding: 1rem;
	margin:0;
	font-size: 0.8rem;
	line-height:1.4rem;
}
.column .store a{
	display: block;
	margin: 0.4rem;
	padding: 0.4rem;
	text-align: center;
	border: 1px solid;
}
.column .store .store-image{
	width: 30%;
}
.column .store .store-text {
	width: 35%;
}
.column .store .store-image,
.column .store .store-text {
	margin:1%;
}
.column .store .store-image img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}
.column .column-author .author-profile{
	display: inline-block;
	margin: 10px;
	text-align: left;
	color: #666;
}
.column .column-image.head{
	object-fit: cover;
	width:100%;
	height: 40vh;
}
.column .column-body{
	padding:1rem;
}
.column .column-side{
	position: relative;
	padding:1rem;
	font-size: 0.8rem;
	line-height:2rem;
	background: #fff;
	z-index: 1001;
}
#backnumber{
	background: #f1ebeb;
}
#blog{
}
.column .column-side h2{
	margin: 0 0 1rem 0;
	padding: 1rem;
	font-size: 1.2rem;
	line-height: 1.5rem;
	text-align: left;
	color: #fff;
	background: #847474;
}
.column .column-side #backnumber h2{
	position: sticky;
	top: 0;
}
.column .column-menu .column-card{
	padding: 0.8rem;
	border-right: 1px dotted #666;
}
.column .column-side .column-card{
	padding: 0.4rem;
}
.column .column-side .column-card,
.column .column-side .blog-card{
	margin-bottom: 1rem;
	color: #333;
	border-bottom: 1px dotted #666;
}
.column .column-menu .card-wrapper,
.column .column-side .card-wrapper{
	display:flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
	color: #333;
}
.column .column-menu .card-wrapper{
	font-size: 0.75rem;
}
.column .column-side .card-wrapper{
	font-size: 0.9rem;
}
.column .column-menu .card-image,
.column .column-side .card-image{
	width:33.33%;
	margin: 0;
}
.column .column-menu .card-image img,
.column .column-side .card-image img{
	object-fit:cover;
	width:120px;
	max-width:100%;
}
.column .column-menu .column-card .card-image img,
.column .column-side .column-card .card-image img{
	height:80px;
}
.column .column-menu .blog-card .card-image img,
.column .column-side .blog-card .card-image img{
	height:60px;
}
.column .column-menu .card-title,
.column .column-side .card-title{
	width:66.66%;
	margin: 0;
	padding: 0 1rem 0 0;
	line-height: 1.2rem;
}
.column .column-menu .card-title{
	font-size:0.75rem
}
.column .column-menu .card-title span,
.column .column-side .card-title span{
	margin-right:0.4rem;
	font-size:0.8rem;
	font-weight: normal;
}
.column .column-menu .card-title span{
	font-size:0.75rem
}
.column .column-menu .column-card .card-title,
.column .column-side .column-card .card-title{
	font-size:1rem;
	font-weight:bold;
}
.column .column-menu .blog-card .card-title,
.column .column-side .blog-card .card-title{
	font-size: 0.8rem;
}
.column .column-menu .column-author,
.column .column-side .column-author{
	display: flex;
	padding: 0;
	font-size:0.7rem;
}
.column .column-menu .column-author .author-image,
.column .column-side .column-author .author-image{
	width:40px;
	margin: 2px;
}
.to-backnumber{
	display: block;
	text-align: right;
	font-size: 0.8rem
}
.to-backnumber a{
	display: block;
	padding:0.5rem;
}
h3.backnumber{
	margin: auto;
	padding:0.4rem 1rem;
	font-size:0.8rem;
	text-align:right;
}
@media screen and (min-width: 480px) {
.column .column-image.head{
	height: 50vh;
}
.column .column-side .card-image img{
	width:200px;
}
.column .column-side .column-card .card-image img{
	height:100px;
}
.column .column-side .blog-card .card-image img{
	height:80px;
}
}
@media screen and (min-width: 768px) {
.to-backnumber{
	display: none;
}
.column h1{
	padding: 2em 1rem;
}
.column-head{
	display:flex;
	flex-direction: row;
	justify-content:space-around;
	align-items: center;
}
.column .column-head .column-author{
	width:40%;
	padding: 1rem 0;
}
.column .column-head .store{
	width:60%;
}
.column .column-author .author-image img{
	width: 150px;
}
.column-wrapper{
	padding:1rem;
}
.column-wrapper{
	display: flex;
	flex-direction: row;
}
.column .column-body{
	width:66.66%;
}
.column .column-body .column-image:not(.head){
	max-width: 50%;
}
.column .column-side{
	width:33.33%;
	font-size: 0.8rem;
}
.column .column-menu .card-image img,
.column .column-side .card-image img{
	width:120px;
}
.column .column-menu .column-card .card-image img,
.column .column-side .column-card .card-image img{
	height:80px;
}
.column .column-menu .blog-card .card-image img,
.column .column-side .blog-card .card-image img{
	height:60px;
}
}
.column blockquote{
	margin:1em auto;
	padding:1.6em;
	font-style: italic;
	line-height:2;
	border: 1px dotted;
	border-radius:20px;
}
#overlay{
	display: none;
	z-index: 1003;
	position:fixed;
	top:0; left:0;
	right:0; bottom:0;
	background:rgba(0,0,0,0.75);
}
#overlay img.overlayimg{
	position:fixed;
	top:0; left:0;
	right:0; bottom:0;
	margin:auto;
	max-width:100%;
	max-height:100%;
	transition: 0.2s;
}
#overlay img.close,
#ytO img.close{
	position:fixed;
	bottom:4em;
	right:2em;
	max-width:24px;
	cursor: pointer;
}
.floatimage{
	cursor: pointer;
	opacity: 1;
	transition: .3s;
}
.floatimage:hover{
	filter: brightness(1.1);
	opacity: 0.7;
	transition: .3s;
}
:root{
	--card-width: 260px;		 /* 1カードの基本幅（スマホ） */
	--card-gap: 8px;				/* カード間の余白 */
	--card-radius: 12px;
	--title-lines: 2;				/* タイトルを何行で省略するか */
	--shadow: 0 6px 16px rgba(0,0,0,.08);
	--accent: #0a66ff;
	--fg: #222;
	--muted: #666;
	--bg: #fff;
	--rail-padding: 16px;		/* レール左右の内側余白 */
}

body{
}

.section{
	max-width: 1200px;
	margin: 32px auto;
	padding: 0 16px;
}

.header{
	display:flex;
	align-items:baseline;
	gap:12px;
	margin-bottom: 12px;
}
.header h2{
	font-size: clamp(18px, 2vw, 22px);
	margin:0;
}
.header .count{
	color: var(--muted);
	font-size: 13px;
}

.rail-wrap{
	position: relative;
}

/* ナビボタン（任意） */
.nav-btn{
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	z-index: 2;
	width: 38px; height: 38px;
	border-radius: 999px;
	border: 1px solid #e6e8ef;
	background: #fff;
	display: grid; place-items: center;
	box-shadow: var(--shadow);
	cursor: pointer;
	color: #333;
	user-select: none;
}
.nav-btn[disabled]{ opacity:.35; cursor: default; }
.nav-prev{ left: 6px; }
.nav-next{ right: 6px; }

/* スクロールレール */
.rail{
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--card-width);
	gap: var(--card-gap);
	overflow-x: auto;
	overflow-y: hidden;
	/*padding: 10px var(--rail-padding) 18px;*/
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--rail-padding);
	-webkit-overflow-scrolling: touch; /* iOS慣性スクロール */
	scrollbar-gutter: stable; /* スクロールバー分のレイアウト安定（対応ブラウザで） */
	background: #f1ebeb;
}

/* PCでスクロールバー表示を素直に活かす（カスタムは最小限） */
.rail::-webkit-scrollbar{ height: 10px; }
.rail::-webkit-scrollbar-track{ background: #eef1f6; border-radius: 999px; }
.rail::-webkit-scrollbar-thumb{
	background: #c4bbbb;
	border-radius: 999px;
	border: 2px solid #eef1f6;
}


/* カード */
.card{
	scroll-snap-align: start;
	background: var(--bg);
	border-radius: var(--card-radius);
	overflow: hidden;
	display: grid;
	grid-template-rows: auto 1fr;
	text-decoration: none;
	color: inherit;
	border: 1px solid #eef1f6;
	box-shadow: var(--shadow);
	transition: transform .18s ease, box-shadow .18s ease;
	outline: none;
}
.card:focus-visible{
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, white);
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,.10); }

.thumb{
	aspect-ratio: 16 / 9;
	width: 100%;
	object-fit: cover;
	display: block;
	background: #dde3ee;
}

.meta{
	padding: 10px 12px 12px;
	display: grid;
	align-content: start;
	gap: 6px;
}

.title{
	font-size: 14.5px;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--title-lines);
	overflow: hidden;
	min-height: calc(1em * 1.35 * var(--title-lines));
	font-weight: bold;
}

.sub{
	font-size: 12px;
	color: var(--muted);
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* レスポンシブ：広い画面はカード幅を拡大 */
@media (min-width: 600px){
	:root{ --card-width: 290px; }
}
@media (min-width: 960px){
	:root{ --card-width: 330px; }
}