:root{
  --teal: #2f6f78;     /* TOP文字に近い青緑 */
  --line: #e7ecef;     /* 薄い罫線 */
  --muted: #6b7b7d;
  --content-w: 1100px;
}
.l-container{
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== Header ===== */
.site-header{
  background:#fff;
  border-bottom: 1px solid var(--line);
}
.site-header__inner{
  height: 72px;
  display:flex;
  align-items:center;
  justify-content:center; /* TOPのように中央寄せ */
}
.site-nav{
  display:flex;
  gap: 42px;
}
.site-nav a{
  color: var(--teal);
  text-decoration:none;
  font-size:14px;
  letter-spacing:.35em; /* Homeの “H o m e” 感 */
  font-weight:500;
}
.site-nav a:hover{ opacity:.75; }

/* ===== Footer ===== */
.site-footer{
  background:#fff;
  border-top: 1px solid var(--line);
  padding: 28px 0;
  text-align:center;
  color: var(--muted);
  font-size:13px;
}
.site-footer a{ color: var(--teal); text-decoration:none; }
.site-footer a:hover{ opacity:.75; }




/* page-id-752（新着記事一覧）だけ：アイキャッチ/画像の巨大化を抑える */
body.page-id-752 .wp-block-latest-posts__featured-image img,
body.page-id-752 .wp-block-post-featured-image img,
body.page-id-752 .wp-block-image img{
  width: 100%;
  max-width: 420px;  /* ←小さくしたければ 320〜360 / 大きくしたければ 480〜560 */
  height: auto;
  display: block;
}

/* 画像が中央寄せのほうが見栄え良ければ（任意） */
body.page-id-752 .wp-block-latest-posts__featured-image,
body.page-id-752 .wp-block-post-featured-image,
body.page-id-752 figure.wp-block-image{
  margin-left: auto;
  margin-right: auto;
}


/* ====== page-id-752（新着記事一覧）だけ：カード画像をサムネ化 ====== */
body.page-id-752 main img{
  max-width: 100%;
  height: auto;
}

/* Cocoon/カード系でよく使われるサムネ枠をまとめて制御 */
body.page-id-752 .entry-card-thumb,
body.page-id-752 .post-thumbnail,
body.page-id-752 figure,
body.page-id-752 .wp-block-post-featured-image{
  overflow: hidden;
}

/* 画像を「高さ固定＋中に収める」で巨大化を止める（ここが本命） */
body.page-id-752 .entry-card-thumb img,
body.page-id-752 .post-thumbnail img,
body.page-id-752 .wp-block-post-featured-image img,
body.page-id-752 .a-wrap img,
body.page-id-752 .new-entry-card img,
body.page-id-752 .entry-card img{
  width: 100%;
  height: 180px;          /* ←好みで 140〜220 */
  object-fit: contain;    /* ロゴみたいな画像でも切れずに収まる */
  display: block;
}




/* =========================
   Sea Beauty Heading Styles
   ========================= */
:root{
  --sb-teal:#2f6f78;
  --sb-teal2:#6fb8b6;   /* 淡い青緑（アクセント用） */
  --sb-line:#e7ecef;
  --sb-text:#1c2b2d;
}

/* 対象範囲（Cocoonでよく使われる本文領域をまとめて） */
body .entry-content h2,
body .entry-content h3,
body .entry-content h4{
  color: var(--sb-text);
  letter-spacing: .02em;
}

/* H2：左ライン＋下線（参考画像系） */
body .entry-content h2{
  margin: 2.2em 0 0.9em;
  padding: .35em 0 .35em 1em;
  border-left: 5px solid var(--sb-teal);
  border-bottom: 1px solid var(--sb-line);
  font-size: 1.45em;
  line-height: 1.35;
}

/* H2の“下線を少しだけ海っぽく”したい場合（任意でON） */
/*
body .entry-content h2{
  border-bottom: none;
  position: relative;
}
body .entry-content h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--sb-teal), var(--sb-teal2), transparent);
}
*/

/* H3：控えめに下線＋少しティール */
body .entry-content h3{
  margin: 1.8em 0 0.7em;
  padding-bottom: .25em;
  border-bottom: 1px solid var(--sb-line);
  font-size: 1.18em;
}
body .entry-content h3{
  color: #243c3f;
}

/* H4：色だけアクセント */
body .entry-content h4{
  margin: 1.4em 0 0.5em;
  font-size: 1.05em;
  color: var(--sb-teal);
}



/* 赤い縦線（border/outline系）を潰す */
.l-container{
  border-left: none !important;
  border-right: none !important;
  outline: none !important;
}
.l-container::before,
.l-container::after{
  display:none !important;
}