@charset "UTF-8";
/* layout.css */
.l-content--wrap{
	display: flex;
	flex-direction: column;
	gap:var(--section-gap);
}
/* inner */
.l-inner{
  width: min(var(--container), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

/* section：セクション間の“ルール”をここで握る */
.l-section{
  padding:  var(--section-pa) 0;
}

/* 1つ目だけ詰めたい時 */
.l-section:first-of-type{
  margin-top: 0;
}

/* 背景色付きセクション用（必要な時だけ使う） */
.l-section--bg{
  padding-block: var(--section-gap);
}

/* section内の構造：見出し/本文/フッター */
.l-section__head{
  display: grid;
  gap: 0;
	margin-bottom: 24px
}



.l-section__foot{
  margin-top: 40px;
  display: flex;
  justify-content: center; /* 下のArchiveボタンみたいな時 */
}

/* 文章中心で少し狭めたいセクション（プロフィール文など） */
.l-section--narrow .l-inner{
  width: min(980px, 100% - (var(--gutter) * 2));
}

@media (max-width: 900px){
  .l-section__head{ margin-bottom: 24px; }
  .l-section__foot{ margin-top: 24px; }
}
/* 横並び（基本形） */
.l-row{
  display: flex;
  gap: 24px;
	flex-wrap:wrap;
}
@media (max-width:900px){
  .l-row{
    flex-direction: column;
    gap: 16px;
  }
}

/* 等分2カラム/3カラム（迷わない） */
.l-cols-2 > *{ flex: 0 0 calc((100% - 24px)/2); }
.l-cols-3 > *{  flex: 0 0 calc((100% - 24px*2)/3);}
.l-cols-4 > *{  flex: 0 0 calc((100% - 24px*3)/4);}

/* グリッドも最小だけ */
.l-grid{
  display: grid;
  gap: 24px;
}
.l-grid--2{ grid-template-columns: repeat(2, 1fr); }
.l-grid--3{ grid-template-columns: repeat(3, 1fr); }

@media (max-width:900px){
  .l-grid--2,
  .l-grid--3{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* 上下に積む（h2+本文+ボタンとかで便利） */
.l-stack{
  display: grid;
  gap: 16px;
}