/* ========================================
   フォント
======================================== */

@font-face {
  font-family: "NotoSans";
  src: url("/fonts/Noto_Sans_JP/static/NotoSansJP-Regular.ttf")
    format("truetype");
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "NotoSans";
  src: url("/fonts/Noto_Sans_JP/static/NotoSansJP-SemiBold.ttf")
    format("truetype");
  font-weight: 600;
  font-display: block;
}

@font-face {
  font-family: "NotoSans";
  src: url("/fonts/Noto_Sans_JP/static/NotoSansJP-Bold.ttf")
    format("truetype");
  font-weight: 700;
  font-display: block;
}

@font-face {
  font-family: "M PLUS";
  src: url("/fonts/M_PLUS_Rounded_1c/MPLUSRounded1c-Regular.ttf")
    format("truetype");
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "M PLUS";
  src: url("/fonts/M_PLUS_Rounded_1c/MPLUSRounded1c-Bold.ttf")
    format("truetype");
  font-weight: 700;
  font-display: block;
}


/* ========================================
   共通設定
======================================== */
html {
  min-height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0 400px;
  color: #353A3D;
  background: #FFFFFF;
  font-family: "NotoSans";
  min-height: 100vh;
  min-height: 100dvh;

  display: flex;
  flex-direction: column;
}
body > main {
  flex: 1;
}

@media (max-width: 2000px) {
    body {
        margin: 0 150px;
    }
}

@media (max-width: 1600px) {
    body {
        margin: 0 100px;
    }
}
@media (max-width: 1400px) {
    body {
        margin: 0;
    }
}


main {
  margin: 20px;
}

section {
  margin: 0;
  padding: 0;
}


/* ========================================
   ヘッダー
======================================== */

header {
  display: flex;
  align-items: center;
  height: 50px;
  margin: 0 20px;
  border-bottom: 1px solid #B4B8BA;

  font-family: "M PLUS";
  font-weight: 700;
}

header div {
  font-size: 22pt;
  margin-left: 5px;
}
a{
  color:#353A3D;
  text-decoration:none;
}
a:link{
  color:#353A3D;
  text-decoration:none;
}
a:visited{
  color:#353A3D;
  text-decoration:none;
}
a:hover{
  color:#353A3D;
  text-decoration:none;
}
a:active{
  color:#353A3D;
  text-decoration:none;
}

/* ========================================
   トップページ：ヒーロー
======================================== */

.sub-bg {
  padding: 15px 15px 20px 15px;
  border-radius: 5px;
  background-color: #F7FAF8;
}

.sub-bg .tag {
  display: flex;
  align-items: center;

  width: fit-content;
  height: 30px;
  padding: 0 15px;

  border-radius: 15px;
  background-color: #DAFDE6;

  color: #229652;
  font-size: 11pt;
  font-weight: 700;
}

.sub-bg .catchcopy {
  padding: 5px;
  font-size: 18pt;
  font-weight: 600;
}

.sub-bg .subcopy {
  padding: 0 5px 15px 5px;
  font-size: 12pt;
}

.sub-bg a{
    padding: 5px 15px;
    margin: 5px;
    background-color: #55585b;
    color: #F1F6F3;
    border-radius: 5px;
}



.article{
  display: flex;
  align-items: center;
  margin: 10px 0;
  font-weight: 700;
}

.article div{
  font-size: 20pt;
}

.article a{
  color:#229652;
  text-decoration:none;
  margin-left: auto;
  font-size: 13pt;
}
.article a:link{
  color:#229652;
  text-decoration:none;
}
.article a:visited{
  color:#229652;
  text-decoration:none;
}
.article a:hover{
  color:#0d6431;
  text-decoration:none;
}
.article a:active{
  color:#0d6431;
  text-decoration:none;
}


/* ========================================
   トップページ：最新記事
======================================== */

.latest-articles {
  margin: auto;
  padding: 0 10px;
}


/* ========================================
   記事グリッド：共通
======================================== */

.article-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}


/* ========================================
   トップページ：表示件数
   5列 10件 / 4列 8件 / 3列 6件
   2列 6件 / 1列 4件
======================================== */

/* 4列：8件 */
@media (max-width: 2200px) {
  .article-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .latest-articles .article-grid > :nth-child(n + 9) {
    display: none;
  }
}

/* 3列：6件 */
@media (max-width: 1600px) {
  .article-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .latest-articles .article-grid > :nth-child(n + 7) {
    display: none;
  }
}

/* 2列：6件 */
@media (max-width: 1000px) {
  .article-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 1列：4件 */
@media (max-width: 750px) {
  .article-grid {
    grid-template-columns: 1fr;
  }

  .latest-articles .article-grid > :nth-child(n + 4) {
    display: none;
  }
}


/* ========================================
   記事一覧ページ
======================================== */

.blog-page {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 60px 20px;
}

.blog-page h1 {
  margin: 0 0 32px;
  color: #353A3D;
}


/* ========================================
   記事カード
======================================== */

.article-card {
  display: block;
  overflow: hidden;

  border: 1px solid #E5E7EB;
  border-radius: 12px;

  color: #353A3D;
  text-decoration: none;
}

.article-card .banner {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #F4F7F5;
}

.article-card .banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ========================================
   記事カード：画像なしの場合
======================================== */

.default-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;

  width: 100%;
  height: 100%;
  padding: 24px;

  background: #F1F6F3;
  text-align: center;
}

.banner-category {
  color: #35B96B;
  font-size: 13px;
  font-weight: 700;
}

.banner-title {
  color: #353A3D;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.banner-line {
  width: 56px;
  height: 4px;
  border-radius: 4px;
  background: #35B96B;
}


/* ========================================
   記事カード：記事情報
======================================== */

.article-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
}

.article-info .category {
  color: #35B96B;
  font-size: 12px;
  font-weight: 700;
}

.article-info .title,
.article-info h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
}

.article-info time {
  color: #888888;
  font-size: 12px;
}


/* ========================================
   ページ送り
======================================== */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 48px;
}

.page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.page-button,
.page-number {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  min-width: 42px;
  height: 42px;
  padding: 0 12px;

  border: 1px solid #DDE5DF;
  border-radius: 8px;

  color: #353A3D;
  text-decoration: none;

  transition:
    border-color 0.2s,
    color 0.2s,
    background-color 0.2s;
}

.page-button:hover,
.page-number:hover {
  border-color: #35B96B;
  color: #35B96B;
}

.page-number.active {
  background: #35B96B;
  border-color: #35B96B;
  color: #FFFFFF;
  font-weight: 700;
}

.page-button.disabled {
  opacity: 0.35;
  pointer-events: none;
}


/* ========================================
   フッター
======================================== */

.site-footer {
  padding: 32px 20px;
  border-top: 1px solid #E5E7EB;
  color: #64716A;
  text-align: center;
  font-size: 13px;
}

.site-footer p {
  margin: 0;
}

/* ========================================
   記事本文ページ
======================================== */




/* ========================================
   記事本文：ヘッダー
======================================== */

.article-page .article-header {
  display: block;
  height: auto;
  margin: 0 0 36px;
  padding: 0 0 28px;

  border-bottom: 1px solid #E5E7EB;

  font-family: "NotoSans";
  font-weight: 400;
}

.article-page .back-link,
.article-page .back-link:link,
.article-page .back-link:visited {
  display: inline-block;
  margin-bottom: 28px;

  color: #229652;
  font-size: 14px;
  text-decoration: none;
}

.article-page .back-link:hover {
  color: #0D6431;
  text-decoration: underline;
}

.article-page .article-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.article-page .article-meta .category {
  color: #229652;
  font-size: 13px;
  font-weight: 700;
}

.article-page .article-meta time {
  color: #888888;
  font-size: 13px;
}

.article-page .article-header h1 {
  margin: 0 0 16px;

  font-size: 20pt;
  font-weight: 700;
  line-height: 1.5;
}

.article-page .description {
  margin: 0 2px;
  color: #64716A;
  font-size: 15px;
  line-height: 1.8;
}



/* ========================================
   記事本文：Markdown
======================================== */

.article-content{

    flex: 1;
}


.article-content h1{
    font-size: 18pt;
    padding: 5px 10px;
    border-bottom: 3px solid #229652;
    background-color: #f6f6f6;
    margin: 40px 0 20px;
}

.article-content h2{
    font-size: 16pt;
    padding: 5px 5px 5px 10px;
    border-left: 5px solid #229652;
    line-height: 1;
    background-color: #f6f6f6;
    margin: 40px 0 20px;
}

.article-content h3{
    font-size: 16pt;
    padding: 5px 5px 5px 10px;
    border-left: 5px solid #229652;
    line-height: 1;
    margin: 40px 0 20px;
}
.article-content h4{
    font-size: 16pt;
    padding: 5px 5px 5px 10px;
    border-left: 3px solid #229652;
    line-height: 1;
    margin: 40px 0 20px;
}

.article-content h5{
    font-size: 14pt;
    margin: 20px 0 10px;

}

.article-content h5::before{
    content: "■";
    color: #229652;
    padding: 0 5px 0 0;
}
.article-content p{
    margin: 5px 0;
}


.table-of-contents{
    background-color: #ecf9fa;
    max-width: 350px;
    counter-reset: toc-h2 toc-h3;
    border: 2px solid #0f263a;
}
.table-of-contents div{
    background-color: #1e5766;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    color: #FFF;
}

.table-of-contents ul{
    list-style: none;
    padding: 10px;
    margin: 0;
}


/* H2：大項目 */
.table-of-contents li:not(.toc-sub) {
  counter-increment: toc-h2;
  counter-reset: toc-h3;
  padding: 5px;
}

/* H3：小項目 */
.table-of-contents li.toc-sub {
  counter-increment: toc-h3;
  margin-left: 20px;
  padding: 5px;
}

/* H3の番号 */
.table-of-contents li.toc-sub a::before {
  content: counter(toc-h2) "." counter(toc-h3);
  background-color: #cbf2ff;
  border: 1px solid #759dc6;
  padding: 0 5px;
  margin-right: 5px;
  border-radius: 2px;
}
/* H2の番号 */
.table-of-contents li:not(.toc-sub) a::before {
  content: counter(toc-h2);
  background-color: #22486d;
  border: 1px solid #071828;
  color: #FFF;
  padding: 0 5px;
  margin-right: 5px;
  border-radius: 2px;
}

.astro-code{
  min-width: 400px;
  padding: 10px;
  border-radius: 5px;
  border: 2px dashed #9e9e9e;
  width: fit-content;

}


@media (min-width: 1200px) {
    .articleflex{
        display: flex;
        flex-direction: row-reverse;
        justify-content:flex-end; 
    }
    .table-of-contents{
        margin-left: 50px;
    }

}







.code-wrapper {
    width: fit-content;
    max-width: 100%;
    margin: 20px 0;
    border: 2px dashed #9e9e9e;
    border-radius: 5px;
    overflow: hidden;
    background: #1b1c1e;
}

.code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 5px 10px 5px 10px;
}

.code-language {
    font-size: 12px;
    font-weight: bold;
    color: #aaa;
}

.code-wrapper .astro-code {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 10px;
    border: none;
    border-radius: 0;
    overflow-x: auto;
}

.code-copy {
    padding: 2px 8px;
    border: 1px solid #555;
    border-radius: 5px;
    background: #333333;
    color: white;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
}

.code-copy:hover {
    background: #505050;
}