/* --------- Base --------- */
:root{
  --brand: #0099cc;
  --brand-d: #0077a3;
  --accent:#ff8c1a;
  --bg1:#cce7f5; --bg2:#f4f8f5;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:auto;background:linear-gradient(var(--bg1),var(--bg2));color:#333;font-family:"Noto Sans JP", system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

/* --------- Header --------- */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 40px;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
header .logo{height:44px}
nav ul{display:flex; gap:26px; margin:0; padding:0; list-style:none}
nav a{background:var(--accent); color:#fff; padding:8px 16px; border-radius:999px; font-weight:700}
nav a:hover{background:#e67600}

/* --------- Main Visual (Fade Slider) --------- */
.main-visual {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 420px;
  background: #bde0f5;
}
.slide{position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease-in-out}
.slide.active{opacity:1; z-index:2}
.slide img{width:100%; height:100%; object-fit:cover}
.slide .text{
  position:absolute; left:50%; bottom:10%; transform:translateX(-50%); text-align:center;
  color:#fff; text-shadow:0 3px 8px rgba(0,0,0,.6);
  background:rgba(0,0,0,.35); padding:18px 24px; border-radius:16px; max-width:85%;
}
.slide .text h2{margin:0 0 8px; font-size:clamp(20px,3.4vw,30px)}
.slide .text p{margin:0; font-size:clamp(14px,2.4vw,18px)}

/* --------- Tags --------- */
.tags{
  background:linear-gradient(#eaf7f1,#d3f0e3); padding:56px 20px; text-align:center;
}
.tags h2{margin:0 0 26px; color:var(--brand-d)}
.tags-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:18px; max-width:1000px; margin:0 auto;
}
.tag{
  background:#fff; border:2px solid #bde0dc; border-radius:14px; padding:16px 10px;
  box-shadow:0 4px 10px rgba(0,0,0,.08); transition:transform .2s, border-color .2s;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.tag:hover{transform:translateY(-3px); border-color:var(--brand)}
.tag .ico{font-size:26px}
.tag p{margin:8px 0 0; color:var(--brand-d); font-weight:700}

/* --------- Articles --------- */
.articles{background:#fff; padding:60px 20px 90px; max-width:900px; margin:0 auto}
.articles h2{text-align:center; color:var(--brand-d); margin:0 0 34px}
.list{display:flex; flex-direction:column; gap:26px}
.card{
  background:#f8fdfd; border-radius:16px; overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.09); transition:box-shadow .18s, transform .18s;
}
.card:hover{transform:translateY(-2px); box-shadow:0 5px 12px rgba(0,0,0,.14)}
.card img{width:100%; height:240px; object-fit:cover}
.card .body{padding:18px 18px 20px}
.card .body h3{margin:0 0 8px; color:var(--accent); font-size:20px}
.card .body p{margin:0; color:#555; line-height:1.65; font-size:15px}

/* --------- Footer --------- */
footer{margin-top:40px; background:linear-gradient(180deg,var(--brand),var(--brand-d)); color:#fff; text-align:center; padding:22px 10px; font-size:14px}

/* --------- Utilities --------- */
.u-visually-hidden{
    position:absolute !important;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0);
    white-space:nowrap; border:0;
}

/* --- コンテンツブロック（背景柄） --- */
.content-area {
  align-items:center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 40px;
  row-gap: 12px;
  padding: 10px 20px;
  /* 背景画像設定 */
  background-image: url("images/grass_bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  border-top: 5px solid var(--brand);
  border-bottom: 5px solid var(--brand);
}

.content-area__title {
    flex: 0 0 100%;
    text-align: center;
    margin: 14px 0 0;
    color: #fff;
    font-size: clamp(22px, 4.2vw, 32px);
    font-weight: 800;
}

.category-area {
  flex: 0 1 420px;
  text-align: center;
  margin-left: auto; /* ← 調整追加 */
}

.quad-links{
  display:grid;
  grid-template-columns:repeat(2, minmax(140px, 1fr));
  grid-auto-rows: 1fr;
  gap:14px;
  max-width:420px;
  margin:18px auto 0;
}
.quad-item{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  justify-content:flex-center;
  aspect-ratio:4/3;
  background: transparent;
  border-radius:18px;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
  overflow:hidden;
  text-align:center;
  transition:transform .18s ease, box-shadow .18s ease;
}
.quad-item:hover{ transform: translateY(-3px); box-shadow:0 8px 16px rgba(0,0,0,.18); }
.quad-item img{
  width:auto; height:120px; object-fit:contain;
  margin: auto auto 8px;
}
.quad-item .label{
  width:85%;
  margin-bottom:10px;
  border-radius:14px;
  padding:6px 0 8px;
  color:#fff; font-weight:800; font-size:18px;
  box-shadow:0 3px 0 rgba(0,0,0,.15);
  position: relative;
  top: -50px; /* ← 画像が大きい時などに調整 */
}
.quad-item .sub{ display:block; font-size:12px; font-weight:normal; }
.quad-item.blue .label{ background: var(--brand); }
.quad-item.red  .label{ background: var(--accent); }

.profile {
  position: relative;
  text-align: center;
  padding: 10px 14px; /* ← 余白を微調整 */
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  backdrop-filter: blur(6px);
  max-width: 400px; /* ← 横幅をコンパクトに */
  margin: auto; /* ← 中央寄せ */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* ← 縦中央寄せ */
}

.profile h3 {
  color: var(--accent);
  font-size: 22px;
  margin: -10px 0 4px; /* ← 行間を詰める */
  position: relative;
  top: -15px; /* ← タイトル位置を上に調整。大きい時は適宜 */
}

.profile p {
  color: #444;
  margin: -10px 0 4px; /* ← 行間を詰める */
  font-size: 15px;
  top: -24px; /* ← 本文位置を上に調整。大きい時は適宜 */
}

.profile img {
  width: 240px;       /* ← 最大幅を指定 */
  height: 240px;      /* ← 最大高さを指定 */
  margin: 0 auto 8px; /* ← 画像の下余白12px→8pxなどに変更 */
}

/* --------- ハンバーガーメニュー --------- */
.menu-toggle {
  display: none;
  font-size: 28px;
  cursor: pointer;
  user-select: none;
}

@media (max-width: 660px) {
  nav ul {
    display: none;
    flex-direction: column;
    gap: 14px;
    background: rgba(255,255,255,0.95);
    position: absolute;
    top: 60px;
    right: 20px;
    padding: 14px 20px;
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  }

  nav.open ul {
    display: flex;
  }

  nav ul li {
    margin: 2px 0; /* ← ボタン間の余白を追加 */
  }

  .menu-toggle {
    display: block;
    font-size: 28px;
    cursor: pointer;
    user-select: none;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
}

@media (max-width: 768px) {
  .category-area { margin: 0 auto !important; }
}

/* --- Blogページ専用ヘッダー --- */
.blog-page .site-header--blog, .tag-page .site-header--blog {
  position: static;
  top: auto;
  z-index: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 10px 40px;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
}

.blog-page .site-header--blog .back-link, .tag-page .site-header--blog .back-link {
  color: #fff;
  background: var(--accent);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: background 0.3s ease;
}
/* --- Blogページでは固定を完全解除 --- */
.blog-page .site-header--blog, .tag-page .site-header--blog {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}
/* --- ブログタイトル追従解除 --- */
.blog-page .post__header,
.blog-page .post__title {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

.blog-page .site-header--blog .back-link:hover, .tag-page .site-header--blog .back-link:hover {
  background: #e67600;
}

.blog-page .site-header--blog .logo, .tag-page .site-header--blog .logo {
  height: 44px;
}
/* --- ブログ最上部アイキャッチを全幅で表示 --- */
.blog-page .post__hero {
  width: 100vw;              /* 画面幅いっぱい */
  max-width: 100%;           /* コンテナ制限を解除 */
  margin-left: 50%;          /* ↓ この2行で中央から左右へはみ出させる */
  transform: translateX(-50%);
  border-radius: 0 !important; /* 角丸を無効化 */
  box-shadow: none;            /* 影も消す（フラットに） */
  overflow: hidden;
}

/* 画像も枠いっぱいにフィットさせる */
.blog-page .post__hero img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0 !important;
  display: block;
}
/* --- アイキャッチとタイトルブロックを密着させる --- */
.blog-page .post__hero {
  margin-bottom: 0 !important; /* 下の余白をゼロに */
}

.blog-page .post__header {
  margin-top: 0 !important;    /* 上の余白をゼロに */
  padding-top: 0 !important;
}

/* --- タイトルブロックと本文の間に余白を追加 --- */
.blog-page .post__header {
  margin-bottom: 24px; /* ← ここでスペース量を調整（px値は好みで） */
}

/* 余白を統一したい場合は、本文上部のパディングも少し調整 */
.blog-page .post__body {
  margin-top: 0;
  padding-top:5px;
}


/* --- 本文内の画像：比率を維持して横幅にフィット --- */
.blog-page .post__body img {
  width: 100%;           /* 横幅いっぱいに広げる */
  height: auto !important; /* 高さは自動で比率維持 */
  object-fit: contain !important; /* 切り抜きではなく全体を表示 */
  display: block;
  margin: 16px auto;     /* 少し上下余白を追加 */
  border-radius: 12px;   /* 現状のデザイン維持（角丸） */
}



/* --------- Reveal (Blog/Post) --------- */
.js-reveal{opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease}
.is-visible{opacity:1; transform:none}

/* --------- Blog Post --------- */
.post{max-width:840px; margin:40px auto 70px; padding:0 20px}
.post__hero{aspect-ratio:16/9; background:#eef5f9; border-radius:16px; overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,.08); margin:8px 0 20px}
.post__hero img{width:100%; height:100%; object-fit:cover; display:block}
.post__header{
  display: flex;
  flex-direction: column; /* ← gridをやめて縦積み2段に */
  align-items: flex-start;   /* ← これで中央寄せを解除 */
  text-align: left;          /* ← 全テキスト左寄せに */
}

/* タイトル */
.post__title{
  margin: 0 0 6px;
  text-align: left;
  font-size: clamp(18px, 3.2vw, 26px);
}

/* 日付＋タグを横並びに */
.post__meta,
.post__tags-list{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: flex-start;  /* ← 横方向を左寄せ */
}

/* タグ見た目 */
.post__tag{
  font-size: .85rem;
  background: var(--accent); color: #fff;
  padding: .35rem .6rem; border-radius: 999px;
}

.post__body{background:#fff; border-radius:16px; box-shadow:0 2px 8px rgba(0,0,0,.08); padding:20px; line-height:1.85}
.post__body img{max-width:100%; border-radius:12px}
.post__nav{margin-top:24px; text-align:center}
.post__back{display:inline-block; background:var(--accent); color:#fff; padding:10px 16px; border-radius:999px; font-weight:700}

/* --------- Header state (scrolled) --------- */
.site-header.is-scrolled{background:rgba(255,255,255,0.9)}

/* --------- Reading Progress --------- */
.reading-progress{
    position:fixed;
    top:0; left:0; right:0;
    height:3px;
    z-index:2000;
    pointer-events:none;
}
.reading-progress__bar{
    display:block; height:100%; width:100%;
    background:linear-gradient(90deg,var(--accent),#ffc077);
    transform-origin:left center;
    transform:scaleX(0);
    transition:transform .15s linear;
}
@media (prefers-reduced-motion: reduce){
  .reading-progress__bar{transition:none}
}

/* --------- Blog Hero Overlay --------- */
.blog-page .post__hero{ position:relative }
.blog-page .post__hero::after{
    content:''; position:absolute; inset:0;
    /* 下部20%から白グラデ開始（最下部100%白） */
    background:linear-gradient(
      180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 80%,
      rgba(255,255,255,0.6) 90%,
      rgba(255,255,255,1) 100%
    );
    pointer-events:none;
}

/* --------- TOC --------- */
.post__toc{
    background:#fff;
    border-radius:14px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    padding:14px 16px;
    margin: 10px 0 18px;
}
.post__toc .toc-title{ font-weight:800; color:var(--brand-d); margin:0 0 8px }
.post__toc .toc-list{ list-style:none; margin:0; padding:0 }
.post__toc .toc-item{ margin:6px 0 }
.post__toc .toc-item a{ color:#046c8c; text-decoration:none }
.post__toc .toc-item a:hover{ text-decoration:underline }
.post__toc .toc-item--sub{ margin-left:14px; opacity:.9 }

/* --------- Share --------- */
.post__share{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:20px 0 0 }
.share-btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:10px 14px; border-radius:999px; font-weight:700;
    background:#eef5f9; color:#044a62; border:1px solid #cde3ec;
}
.share-btn--x{ background:#111; color:#fff; border-color:#111 }
.share-btn--line{ background:#06C755; color:#fff; border-color:#06C755 }
.share-btn--copy{ background:var(--accent); color:#fff; border-color:var(--accent) }
.share-btn:hover{ filter:brightness(1.05) }

/* --------- Post Typography --------- */
.post__body h2{ margin:24px 0 12px; padding-left:10px; border-left:4px solid var(--brand); color:#0a4663; font-size:clamp(18px, 3.2vw, 24px) }
.post__body h3{
    position: relative;
    margin: 18px 0 10px;
    color: #000;
    font-size: clamp(16px, 2.6vw, 20px);
}
.post__body h3::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    height: 3px;
    width: 33%;
    background: linear-gradient(90deg, var(--brand) 0%, rgba(0,153,204,0.0) 100%);
    border-radius: 2px;
}
.post__body p{ margin:0 0 1em }
.post__body ul, .post__body ol{ padding-left:1.2em; margin:0 0 1em }
.post__body blockquote{
    margin: 14px 0; padding:12px 14px;
    border-left:4px solid var(--brand);
    background:linear-gradient(90deg,#f5fbff,#ffffff);
    color:#244;
    border-radius:10px;
}
.post__body code{ background:#f4f7fa; padding:.15em .35em; border-radius:.35em; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace }
.post__body pre{ background:#0b1f2a; color:#e6edf3; padding:14px; border-radius:12px; overflow:auto }
.post__body pre code{ background:transparent; padding:0 }
.post__body figure{ margin: 1em 0 }
.post__body figcaption{ text-align:center; font-size:.9rem; color:#666; margin-top:6px }
.post__body h2, .post__body h3{ scroll-margin-top:80px }

/* --- Blog header: center only the logo --- */
.blog-page .site-header--blog, .tag-page .site-header--blog{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.blog-page .site-header--blog .back-link, .tag-page .site-header--blog .back-link{
  grid-column: 1;
  justify-self: start;
}
.blog-page .site-header--blog .logo, .tag-page .site-header--blog .logo{
  grid-column: 2;
  justify-self: center;
}

/* --- タイトルとタグ欄を白背景で横幅MAXに --- */
.blog-page .post__header {
  background: #fff;
  width: 100vw;                /* 画面幅いっぱい */
  max-width: 100%;             /* コンテナ制限を解除 */
  margin-left: 50%;            /* 中央から広げる */
  transform: translateX(-50%);
  border-radius: 0;            /* 角丸をなくす */
  box-shadow: none;            /* 影を消す */
  padding: 24px 20px 16px;     /* 内側の余白（タイトルやタグの上下） */
}

/* タイトルとタグを中央寄せにしたい場合（任意） */
.blog-page .post__header .post__title,
.blog-page .post__header .post__meta {
  text-align: center;
  justify-content: center;
  width: 100%;
}
/* --- タイトル＋タグ欄：白背景・横幅MAX・左揃え --- */
.blog-page .post__header {
  background: #fff;
  width: 100vw;               /* トップ画像と同じく画面幅いっぱい */
  max-width: 100%;
  margin-left: 50%;           /* センター基準で広げる */
  transform: translateX(-50%);
  border-radius: 0;           /* 角丸を消す */
  box-shadow: none;           /* 影を消す */
  padding: 24px 30px 16px;    /* 余白（お好みで調整） */
  text-align: left;           /* 左揃え */
}

/* タイトルとタグ部分を左寄せに統一 */
.blog-page .post__header .post__title,
.blog-page .post__header .post__meta {
  text-align: left;
  justify-content: flex-start;
  width: 100%;
}