@charset "UTF-8";
/* ============================================================
   投稿・アーカイブ（お知らせ等）用のCSSバンドル
   ------------------------------------------------------------
   これらのページはCocoonのテンプレートで表示するため、
   リセットCSS（destyle）は読み込まない。
   ・brand-base : ヘッダー／フッター範囲だけの最小リセット
   ・header / footer : サイト共通のヘッダー・フッターのデザイン
   ・cocoon-skin : Cocoon本文まわりをサイトのテイストに合わせる
   ※トップ・固定ページ用は style.css（別バンドル）
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Paytone+One&display=swap");
/* ============================================================
   出現アニメーション（fv以外で使用）
   ・transitionベースで実装し、hover時のtransformと競合させない
   ・上品で控えめな「ふわっと淡く浮かび上がる」fade-upに統一
   ・bounceの跳ね返り(scale)は廃止
   ・初期の非表示は html.js のときだけ適用（JS未動作でも内容は表示）
   ============================================================ */
/* 共通変数 */
.anim {
  --x: 0;
  --y: 0;
  --scale: 1;
  --blur: 0px;
  --dur: 0.9s;
  --delay: 0ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1); /* ゆったり減速・オーバーシュート無し */
  --dist: 28px;
}

/* 初期状態（淡くフェード）：JS有効時のみ隠す */
html.js .anim {
  opacity: 0;
  transition: opacity var(--dur) var(--ease) var(--delay), transform var(--dur) var(--ease) var(--delay), filter var(--dur) var(--ease) var(--delay);
  will-change: opacity, transform, filter;
}

/* 表示（共通） */
html.js .anim.is-inview {
  opacity: 1;
}

/* 方向・効果（初期状態のオフセットだけ付与） */
html.js .anim[data-anim*=fade-up] {
  transform: translateY(var(--dist));
}

html.js .anim[data-anim*=fade-down] {
  transform: translateY(calc(var(--dist) * -1));
}

html.js .anim[data-anim*=fade-left] {
  transform: translateX(var(--dist));
}

html.js .anim[data-anim*=fade-right] {
  transform: translateX(calc(var(--dist) * -1));
}

html.js .anim[data-anim*=zoom-in] {
  transform: scale(0.96);
}

html.js .anim[data-anim*=bounce] {
  transform: translateY(var(--dist)) scale(0.98);
  filter: blur(4px);
}

html.js .anim[data-anim*=bounce-big] {
  transform: translateY(calc(var(--dist) * 1.4)) scale(0.96);
  filter: blur(6px);
}

html.js .anim[data-anim*=blur-up] {
  filter: blur(8px);
}

/* 着地状態（移動系のみ transform / filter をリセット） */
html.js .anim.is-inview[data-anim*=fade-up],
html.js .anim.is-inview[data-anim*=fade-down],
html.js .anim.is-inview[data-anim*=fade-left],
html.js .anim.is-inview[data-anim*=fade-right],
html.js .anim.is-inview[data-anim*=zoom-in],
html.js .anim.is-inview[data-anim*=bounce] {
  transform: none;
}

html.js .anim.is-inview[data-anim*=bounce],
html.js .anim.is-inview[data-anim*=blur-up] {
  filter: none;
}

/* 見出し用：マスクから持ち上げる text-rise */
.anim[data-anim*=text-rise] {
  overflow: hidden;
}

html.js .anim[data-anim*=text-rise] {
  opacity: 1; /* 親自体はフェードさせない */
}

html.js .anim[data-anim*=text-rise] > .anim__inner {
  display: inline-block;
  margin-inline: auto;
  transform: translateY(1em);
  opacity: 0;
  transition: transform var(--dur) var(--ease) var(--delay), opacity var(--dur) var(--ease) var(--delay);
  will-change: transform, opacity;
}

html.js .anim.is-inview[data-anim*=text-rise] > .anim__inner {
  transform: none;
  opacity: 1;
}

/* カード群：opacityのみで順番に表示（transformはhover用に温存） */
html.js .anim[data-anim*=stagger] {
  opacity: 1;
}

html.js .anim[data-anim*=stagger] > *:not(.scroll-hint-icon-wrap) {
  opacity: 0;
}

html.js .anim.is-inview[data-anim*=stagger] > *:not(.scroll-hint-icon-wrap) {
  /* transform は hover 用に温存し、出現は独立した translate プロパティで動かす */
  animation: fadeInSoft 1.4s var(--ease) both;
}

html.js .anim.is-inview[data-anim*=stagger] > *:nth-child(1) {
  animation-delay: 0.08s;
}

html.js .anim.is-inview[data-anim*=stagger] > *:nth-child(2) {
  animation-delay: 0.22s;
}

html.js .anim.is-inview[data-anim*=stagger] > *:nth-child(3) {
  animation-delay: 0.36s;
}

html.js .anim.is-inview[data-anim*=stagger] > *:nth-child(4) {
  animation-delay: 0.5s;
}

html.js .anim.is-inview[data-anim*=stagger] > *:nth-child(5) {
  animation-delay: 0.64s;
}

html.js .anim.is-inview[data-anim*=stagger] > *:nth-child(6) {
  animation-delay: 0.78s;
}

html.js .anim.is-inview[data-anim*=stagger] > *:nth-child(7) {
  animation-delay: 0.92s;
}

html.js .anim.is-inview[data-anim*=stagger] > *:nth-child(8) {
  animation-delay: 1.06s;
}

html.js .anim.is-inview[data-anim*=stagger] > *:nth-child(9) {
  animation-delay: 1.2s;
}

html.js .anim.is-inview[data-anim*=stagger] > *:nth-child(10) {
  animation-delay: 1.34s;
}

html.js .anim.is-inview[data-anim*=stagger] > *:nth-child(11) {
  animation-delay: 1.48s;
}

html.js .anim.is-inview[data-anim*=stagger] > *:nth-child(12) {
  animation-delay: 1.62s;
}

@keyframes fadeInSoft {
  from {
    opacity: 0;
    translate: 0 36px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
/* 動きを控えたいユーザーへの配慮 */
@media (prefers-reduced-motion: reduce) {
  html.js .anim,
  html.js .anim[data-anim*=stagger] > *,
  html.js .anim[data-anim*=text-rise] > .anim__inner {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    filter: none !important;
    transition: none !important;
  }
  html.js .anim.is-inview[data-anim*=stagger] > * {
    animation: none !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}
/* ============================================================
   Cocoonページ用のベース
   ------------------------------------------------------------
   CocoonページではリセットCSS（destyle）を読み込まないため、
   共通ヘッダー／フッターが崩れないよう、その範囲だけに
   最低限のリセットと共通パーツのスタイルを当てる。
   ※Cocoonの記事内 <header class="article-header"> /
     <footer class="article-footer"> に当たらないよう、
     必ず .site-header / #footer で限定する
   ※要素セレクタへの指定は :where() で範囲を限定する。
     :where() は詳細度が0なので、固定ページ側（_common.scss の p{} li{} など）
     と同じ詳細度になり、_header.scss / _footer.scss のクラス指定が必ず勝つ。
     （`.header-menu p` のように書くと .header-menu__info などの
       BEMクラスより強くなり、文字色やサイズが上書きされてしまう）
   ============================================================ */
.site-header, .header-menu, .footer-upper, #footer {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 200%;
  letter-spacing: normal;
}

.site-header,
.footer-upper {
  color: #43453d;
}

/* ドロワーメニューとフッターは全面パープルなので既定は白文字
   （ここを #43453d にすると .header-menu p 等が
     .header-menu__name などのBEMクラスより優先されて黒くなる） */
.header-menu,
#footer {
  color: #fff;
}

:where(.site-header, .header-menu, .footer-upper, #footer) a {
  color: inherit;
  text-decoration: none;
  transition: 0.3s;
}

/* Cocoonの a:hover{color:#e53900}（詳細度0,1,1）を打ち消すため
   :hover も同じ詳細度で指定する（news.cssの方が後に読み込まれる） */
:where(.site-header, .header-menu, .footer-upper, #footer) a:hover {
  color: inherit;
  opacity: 0.7;
}

:where(.site-header, .header-menu, .footer-upper, #footer) p,
:where(.site-header, .header-menu, .footer-upper, #footer) li {
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  /* ※固定ページ側（_common.scss）と同じく「その要素のfont-size基準の200%」にする。
     inheritにすると親のpx値を受け継いでしまい、文字サイズを変えた箇所
     （フッター上部のボタンなど）で行間が詰まってしまう */
  line-height: 200%;
  color: inherit;
}

:where(.site-header, .header-menu, .footer-upper) ul,
:where(.site-header, .header-menu, .footer-upper) ol,
:where(#footer .footer__right) ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

:where(.site-header, .header-menu, .footer-upper) img,
:where(#footer .footer__left, #footer .footer__right) img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* ---------- 共通パーツ（_common.scss と同じ指定） ---------- */
.fixed-container {
  max-width: 1400px;
  width: 100%;
  margin-inline: auto;
  padding-inline: 4%;
}
@media screen and (max-width: 1520px) {
  .fixed-container {
    max-width: 1136px;
  }
}

.common-subtitle {
  color: #b04974;
  text-align: center;
  font-weight: 500;
  letter-spacing: 3.84px;
}
.common-subtitle--white {
  color: #fff;
}
@media screen and (min-width: 1520px) {
  .common-subtitle {
    font-size: 18px;
    letter-spacing: 4.32px;
  }
}

.btn-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80%;
  aspect-ratio: 1/1;
  padding: 4%;
  border-radius: 50%;
  background-color: #fff;
  object-fit: contain;
  margin-left: 3%;
  margin-right: 7%;
}
@media screen and (max-width: 599px) {
  .btn-icon {
    margin-right: 5%;
  }
}
.btn-icon img {
  height: 75%;
  width: auto;
}

/* サイト共通ヘッダー
   ※Cocoonの記事内 <header class="article-header"> に当たらないよう
     必ず .site-header で限定する */
header.site-header {
  background-color: #fff;
  width: 100%;
  z-index: 100000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: 4%;
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* アニメーション設定 */
  transform: translateY(0);
  transition: transform 0.5s ease;
  will-change: transform;
}
@media screen and (max-width: 599px) {
  header.site-header {
    padding-left: 2%;
  }
}
header.site-header {
  /* 隠れる状態 */
}
header.site-header.hide {
  transform: translateY(-100%);
}
header.site-header .header__logo {
  height: 85%;
}
@media screen and (max-width: 599px) {
  header.site-header .header__logo {
    height: 70%;
  }
}
header.site-header .header__logo img {
  width: auto;
  height: 100%;
}
header.site-header .header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 80%;
  height: 100%;
}
@media screen and (max-width: 1200px) {
  header.site-header .header__right {
    width: 40%;
  }
}
header.site-header .header__right ul {
  display: flex;
  column-gap: 6%;
  list-style-type: none;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
  margin-right: 6%;
}
@media screen and (max-width: 1200px) {
  header.site-header .header__right ul {
    display: none;
  }
}
header.site-header .header__right ul li a {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 16px;
  color: #43453d;
}
header.site-header .header__right__icon {
  display: block;
  width: 20px;
}
header.site-header .header__right__contact {
  background-color: #b04974;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 75%;
  border-radius: 100px;
  width: 280px;
}
header.site-header .header__right__contact:hover {
  background-color: #c25d8b;
  opacity: 1;
}
@media screen and (max-width: 1200px) {
  header.site-header .header__right__contact {
    display: none;
  }
}
header.site-header .header__right__contact p {
  color: #fff;
  font-weight: 700;
}
header.site-header .header__sp {
  display: none;
}
@media screen and (max-width: 1200px) {
  header.site-header .header__sp {
    display: block;
  }
}
header.site-header .header__sp__btn {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
header.site-header .header__sp__btn__hamburger {
  position: relative;
  width: 40px;
  height: 28px;
}
header.site-header .header__sp__btn__hamburger span {
  height: 3px;
  background-color: #b04974;
  position: absolute;
  left: 0;
  right: 0;
  transition: 0.3s;
  border-radius: 50px;
}
header.site-header .header__sp__btn__hamburger span:first-child {
  top: 0;
}
header.site-header .header__sp__btn__hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
header.site-header .header__sp__btn__hamburger span:last-child {
  bottom: 0;
}
header.site-header .header__sp__btn.open span {
  transition: 0.3s;
}
header.site-header .header__sp__btn.open span:first-child {
  top: calc(50% - 1px);
  transform: rotateZ(45deg);
}
header.site-header .header__sp__btn.open span:nth-child(2) {
  display: none;
}
header.site-header .header__sp__btn.open span:last-child {
  top: calc(50% - 1px);
  transform: rotateZ(-45deg);
}

.header-menu {
  z-index: 20;
  position: fixed;
  top: 0;
  right: -320px;
  width: 320px;
  height: 100%;
  background-color: #b04974;
  transition: 0.3s;
  z-index: 10000;
  overflow-y: auto;
  padding: 120px 4% 40px 4%;
}
.header-menu .common-subtitle {
  text-align: left;
  font-size: 14px;
  margin-bottom: 4px;
}
.header-menu ul {
  width: 100%;
  height: auto;
  list-style-type: none;
  padding-left: 0;
}
.header-menu ul li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 20px;
  padding-top: 20px;
}
.header-menu ul li:first-of-type {
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}
.header-menu ul li a {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 4.32px;
  padding-left: 4%;
}
@media screen and (max-width: 599px) {
  .header-menu ul li a {
    font-size: 16px;
  }
}
.header-menu__icon {
  display: block;
  margin-top: 24px;
  width: 24px;
  margin-left: 4%;
  margin-bottom: 56px;
}
.header-menu__logo {
  height: auto;
  width: 100%;
}
.header-menu__name {
  color: #fff;
  font-size: 16px;
  margin-top: 12px;
  font-weight: 700;
}
.header-menu__info {
  color: #fff;
  font-size: 14px;
}
.header-menu__info a {
  color: #fff;
  font-size: 14px;
}
.header-menu__info a:hover {
  opacity: 0.8;
}
.header-menu__char {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: 40px;
}
.header-menu__char img {
  width: 92px;
  height: auto;
}
.header-menu__char p {
  color: #fff;
  font-size: 10px;
  line-height: 140%;
  margin-bottom: 2.5px;
}
.header-menu.open {
  right: 0;
  transition: 0.3s;
}

.black-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
  cursor: pointer;
}
.black-bg.open {
  opacity: 0.3;
  visibility: visible;
}

.footer-upper {
  width: 100%;
  background-color: #b04974;
  padding-block: 102px 60px;
  border-radius: 300px 0 0 0;
}
@media screen and (max-width: 1200px) {
  .footer-upper {
    border-radius: 200px 0 0 0;
  }
}
@media screen and (max-width: 599px) {
  .footer-upper {
    border-radius: 40px 0 0 0;
    padding-block: 80px 40px;
  }
}
.footer-upper__btns {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 180px;
  column-gap: 4%;
}
@media screen and (max-width: 1200px) {
  .footer-upper__btns {
    column-gap: 2%;
  }
}
@media screen and (max-width: 768px) {
  .footer-upper__btns {
    flex-direction: column;
    height: auto;
    row-gap: 24px;
    height: auto;
  }
}
@media screen and (max-width: 599px) {
  .footer-upper__btns {
    row-gap: 20px;
  }
}
.footer-upper__btns a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 32px 28px;
  background-color: #fff;
  border-radius: 100px;
  width: 50%;
}
.footer-upper__btns a:hover {
  background-color: #fdf8f9;
}
.footer-upper__btns a:hover p {
  color: #b04974;
}
@media screen and (max-width: 1200px) {
  .footer-upper__btns a {
    padding: 40px 20px;
  }
}
@media screen and (max-width: 991px) {
  .footer-upper__btns a {
    padding: 28px 20px;
  }
}
@media screen and (max-width: 768px) {
  .footer-upper__btns a {
    width: 80%;
    height: 140px;
    padding-block: 0;
    padding-inline: 2px;
  }
}
@media screen and (max-width: 599px) {
  .footer-upper__btns a {
    width: 80%;
    height: 112px;
  }
}
@media screen and (max-width: 500px) {
  .footer-upper__btns a {
    width: 100%;
  }
}
.footer-upper__btns a .btn-icon {
  background-color: #b04974;
}
.footer-upper__btns a p {
  font-size: 24px;
}
.footer-upper__btns a p span {
  display: block;
  font-size: 16px;
  margin-top: -16px;
}

/* サイト共通フッター
   ・固定ページ／トップ ＝ footer.site-footer
   ・Cocoonページ       ＝ footer#footer（中身は template/footer_temp）
   ※Cocoonの記事内 <footer class="article-footer"> に当たらないよう限定する */
footer.site-footer,
footer#footer.footer {
  background-color: #b04974;
  padding-top: 60px;
  padding-bottom: 20px;
}
@media screen and (max-width: 599px) {
  footer.site-footer,
  footer#footer.footer {
    padding-top: 40px;
  }
}
footer.site-footer .fixed-container,
footer#footer.footer .fixed-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 768px) {
  footer.site-footer .fixed-container,
  footer#footer.footer .fixed-container {
    flex-direction: column;
    align-items: flex-start;
  }
}
footer.site-footer .footer__left__logo,
footer#footer.footer .footer__left__logo {
  height: 45px;
  width: auto;
}
@media screen and (max-width: 599px) {
  footer.site-footer .footer__left__logo,
  footer#footer.footer .footer__left__logo {
    width: 100%;
    height: auto;
  }
}
footer.site-footer .footer__left__name,
footer#footer.footer .footer__left__name {
  color: #fff;
  font-size: 24px;
  margin-top: 36px;
  font-weight: 700;
}
@media screen and (max-width: 599px) {
  footer.site-footer .footer__left__name,
  footer#footer.footer .footer__left__name {
    margin-top: 12px;
    font-size: 20px;
  }
}
footer.site-footer .footer__left__info,
footer#footer.footer .footer__left__info {
  color: #fff;
}
footer.site-footer .footer__left__info a,
footer#footer.footer .footer__left__info a {
  color: #fff;
  font-size: 16px;
}
footer.site-footer .footer__left__info a:hover,
footer#footer.footer .footer__left__info a:hover {
  opacity: 0.8;
}
footer.site-footer .footer__right,
footer#footer.footer .footer__right {
  width: 200px;
}
@media screen and (max-width: 768px) {
  footer.site-footer .footer__right,
  footer#footer.footer .footer__right {
    margin-top: 40px;
  }
}
footer.site-footer .footer__right .common-subtitle,
footer#footer.footer .footer__right .common-subtitle {
  text-align: left;
}
footer.site-footer .footer__right ul,
footer#footer.footer .footer__right ul {
  list-style-type: none;
  padding-left: 4%;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  margin-top: 10px;
  padding-top: 20px;
}
footer.site-footer .footer__right ul li,
footer#footer.footer .footer__right ul li {
  margin-top: 20px;
}
footer.site-footer .footer__right ul li:first-of-type,
footer#footer.footer .footer__right ul li:first-of-type {
  margin-top: 0;
}
footer.site-footer .footer__right ul li a,
footer#footer.footer .footer__right ul li a {
  color: #fff;
  font-size: 16px;
}
footer.site-footer .footer__right__icon,
footer#footer.footer .footer__right__icon {
  display: block;
  margin-top: 28px;
  margin-left: 4%;
  width: 24px;
}
footer.site-footer .copyright,
footer#footer.footer .copyright {
  margin-top: 80px;
  color: #fff;
  font-size: 14px;
  text-align: center;
}

/* ============================================================
   Cocoonテンプレート用スキン
   ------------------------------------------------------------
   投稿ページ・アーカイブ（お知らせ等）はCocoonのテンプレートを
   そのまま使い（Cocoon設定・ウィジェットをそのまま活かせる）、
   このCSSでサイト全体のテイスト（配色・書体・角丸）に寄せる。
   ※固定ページ／トップページはオリジナルデザイン（style.css）
   ============================================================ */
/* ---------- Cocoonの基本設定（CSS変数）をサイトの値に置き換え ---------- */
:root {
  --cocoon-default-font: Zen Maru Gothic, sans-serif;
  --cocoon-text-color: #43453d;
  --cocoon-basic-border-color: rgba(176, 73, 116, 0.2);
  --cocoon-basic-border-radius: 16px;
}

/* ---------- ベース ---------- */
/* Cocoonの body.ff-*, body.fz-*px より強く当てる必要があるため body[class] */
body[class],
.body,
input,
textarea,
select,
button {
  font-family: "Zen Maru Gothic", sans-serif;
  color: #43453d;
}

body[class] {
  background-color: #fff;
  font-size: 16px;
}

/* ※ .article a まで広げるとSNSシェアボタンやカテゴリーラベルの文字色まで
   紫になってしまう（背景色付きのため読めなくなる）ので本文内に限定する */
.entry-content a {
  color: #b04974;
  transition: 0.3s;
}
.entry-content a:hover {
  color: #c25d8b;
}

/* ---------- レイアウト ---------- */
/* ヘッダーは position:fixed（高さ80px）なので本文を押し下げる */
#container {
  padding-top: 80px;
}
@media screen and (max-width: 599px) {
  #container {
    padding-top: 70px;
  }
}

.main {
  border-radius: 20px;
}
@media screen and (max-width: 599px) {
  .main {
    border-radius: 12px;
  }
}

.sidebar {
  border-radius: 20px;
}
@media screen and (max-width: 599px) {
  .sidebar {
    border-radius: 12px;
  }
}

/* ---------- パンくずリスト ---------- */
.breadcrumb {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 13px;
  color: #8a857f;
}
.breadcrumb a {
  color: #8a857f;
}
.breadcrumb a:hover {
  color: #b04974;
}

/* ---------- 一覧タイトル（アーカイブ見出し） ---------- */
.archive-title,
.list-title,
.category-title,
.tag-title,
.author-title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  color: #b04974;
  letter-spacing: 2.4px;
  border-bottom: 1px solid rgba(176, 73, 116, 0.2);
  padding-bottom: 12px;
  /* フォルダアイコンは使わない（サイトの見出し表現に合わせる） */
}
.archive-title .fa,
.list-title .fa,
.category-title .fa,
.tag-title .fa,
.author-title .fa {
  display: none;
}

/* ---------- 記事一覧（エントリーカード） ---------- */
/* サムネイルは使用しないため非表示（Cocoon設定側でも変更可能） */
.entry-card-thumb,
.related-entry-card-thumb,
.widget-entry-card-thumb,
.carousel-entry-card-thumb {
  display: none;
}

.entry-card-content,
.related-entry-card-content,
.widget-entry-card-content {
  margin-left: 0;
}

/* 抜粋（本文）は表示しない：日付＋タイトルのみ */
.entry-card-snippet,
.related-entry-card-snippet {
  display: none;
}

/* 一覧の枠（トップページのお知らせと同じ見た目） */
.entry-card-wrap {
  border-radius: 16px;
  border-bottom: 1px solid rgba(176, 73, 116, 0.2);
  transition: background-color 0.3s ease, transform 0.3s ease;
  padding: 24px;
}
.entry-card-wrap:hover {
  background-color: rgba(176, 73, 116, 0.08);
  transform: translateX(4px);
}
@media screen and (max-width: 768px) {
  .entry-card-wrap {
    padding: 20px 16px;
  }
}

/* トップページのお知らせと同じ「日付＋カテゴリー｜タイトル」の並び */
.entry-card-content {
  display: flex;
  align-items: center;
  column-gap: 32px;
  padding-bottom: 0;
}
@media screen and (max-width: 768px) {
  .entry-card-content {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 6px;
  }
}

/* Cocoon既定では position:absolute で右下に置かれているため通常配置に戻す */
.entry-card .entry-card-meta {
  position: static;
  bottom: auto;
  right: auto;
  text-align: left;
  line-height: 1;
  order: -1;
  flex-shrink: 0;
  margin: 0;
  display: flex;
  align-items: center;
  column-gap: 16px;
}

.entry-card .entry-card-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
}
.entry-card .entry-card-info > * {
  font-size: 15px;
  padding: 0;
  margin-right: 0;
}
.entry-card .entry-card-info {
  /* 時計アイコンは使わない（トップページの表記に合わせる） */
}
.entry-card .entry-card-info .fa {
  display: none;
}

/* カテゴリーはCocoon既定で非表示のため、ピル表示で復活させる */
.entry-card .entry-card-meta .entry-card-categorys {
  display: block;
}

/* ただしカテゴリーページ（そのカテゴリーの記事しか並ばない）では
   同じラベルが並ぶだけなので表示しない */
body.category .entry-card .entry-card-meta .entry-card-categorys {
  display: none;
}

.entry-card-categorys .entry-category {
  display: inline-block;
  background-color: #b04974;
  color: #fff;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.44px;
  line-height: 100%;
  border-radius: 100px;
  padding: 7px 18px;
  white-space: nowrap;
}

.entry-card .entry-card-title {
  /* Cocoon既定の -webkit-box（3行クランプ）を解除して1行の並びに使う */
  display: block;
  overflow: hidden;
  font-size: 17px;
  margin: 0;
  flex: 1;
}
@media screen and (max-width: 599px) {
  .entry-card .entry-card-title {
    font-size: 16px;
  }
}

.entry-card-title,
.related-entry-card-title,
.widget-entry-card-title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  color: #43453d;
  line-height: 170%;
}

.entry-card-wrap:hover .entry-card-title {
  color: #b04974;
}

.entry-card-meta,
.related-entry-card-meta,
.widget-entry-card-meta {
  color: #8a857f;
}
.entry-card-meta .post-date,
.entry-card-meta .post-update,
.related-entry-card-meta .post-date,
.related-entry-card-meta .post-update,
.widget-entry-card-meta .post-date,
.widget-entry-card-meta .post-update {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1.2px;
  line-height: 100%;
  white-space: nowrap;
}

/* カテゴリー・タグのリンク（記事下など） */
a.cat-link,
a.tag-link {
  background-color: #b04974;
  border-color: #b04974;
  color: #fff;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 12px;
  letter-spacing: 1.2px;
  border-radius: 100px;
  padding: 4px 14px;
  transition: 0.3s;
}
a.cat-link:hover,
a.tag-link:hover {
  background-color: #c25d8b;
  border-color: #c25d8b;
  color: #fff;
}

/* 記事下の投稿者情報 */
.article .footer-meta {
  color: #8a857f;
  font-size: 13px;
}
.article .footer-meta a {
  color: #8a857f;
  text-decoration: none;
  transition: 0.3s;
}
.article .footer-meta a:hover {
  color: #b04974;
}

/* カテゴリーラベル */
.cat-label {
  background-color: #b04974;
  border-color: #b04974;
  color: #fff;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 12px;
  letter-spacing: 1.2px;
  border-radius: 100px;
  padding: 4px 14px;
}

/* ---------- 投稿ページ ---------- */
.article h1.entry-title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  color: #b04974;
  line-height: 160%;
  letter-spacing: 1.6px;
  border-bottom: 1px solid rgba(176, 73, 116, 0.2);
  padding-bottom: 20px;
}
.article .date-tags {
  color: #8a857f;
}
.article .date-tags .post-date,
.article .date-tags .post-update {
  font-family: "Zen Maru Gothic", sans-serif;
  letter-spacing: 1.2px;
}

.entry-content {
  font-family: "Zen Maru Gothic", sans-serif;
  line-height: 200%;
}
.entry-content h2 {
  background-color: #b04974;
  color: #fff;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  letter-spacing: 2.4px;
  border: none;
  border-radius: 10px;
  padding: 16px 24px;
}
@media screen and (max-width: 599px) {
  .entry-content h2 {
    padding: 14px 18px;
  }
}
.entry-content h3 {
  color: #b04974;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  letter-spacing: 1.92px;
  border: none;
  border-left: 5px solid #b04974;
  background-color: transparent;
  padding: 4px 0 4px 16px;
}
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  color: #43453d;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  border-color: rgba(176, 73, 116, 0.2);
}
.entry-content a {
  color: #b04974;
  text-decoration: underline;
}
.entry-content blockquote {
  background-color: rgba(176, 73, 116, 0.08);
  border-radius: 16px;
  border-left: 4px solid #b04974;
}
.entry-content img {
  border-radius: 16px;
}
.entry-content ul li::marker,
.entry-content ol li::marker {
  color: #b04974;
}

/* ---------- 著者リンクは非表示 ---------- */
.author-info {
  display: none;
}

/* ---------- ページ送り・ページネーション ---------- */
.pagination .page-numbers,
.page-links .page-numbers {
  font-family: "Zen Maru Gothic", sans-serif;
  border-radius: 100px;
  border-color: rgba(176, 73, 116, 0.2);
  color: #b04974;
  transition: 0.3s;
}
.pagination .page-numbers:hover,
.page-links .page-numbers:hover {
  background-color: rgba(176, 73, 116, 0.08);
  border-color: #b04974;
  color: #b04974;
}
.pagination .page-numbers.current,
.page-links .page-numbers.current {
  background-color: #b04974;
  border-color: #b04974;
  color: #fff;
}
.pagination .page-numbers.current:hover,
.page-links .page-numbers.current:hover {
  background-color: #c25d8b;
}

.pager-post-navi a,
.pager-links a {
  font-family: "Zen Maru Gothic", sans-serif;
}
.pager-post-navi a:hover,
.pager-links a:hover {
  background-color: rgba(176, 73, 116, 0.08);
}

/* ---------- 見出し（コメント・サイドバー） ---------- */
.comment-title,
.widget-sidebar-title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  color: #b04974;
  letter-spacing: 2.4px;
  border-bottom: 1px solid rgba(176, 73, 116, 0.2);
  padding-bottom: 10px;
}

/* ---------- 関連記事 ---------- */
/* Cocoon既定はカード内の余白（padding-bottom / margin）が大きく、
   サムネイル非表示だとホバー範囲だけが間延びして見えるため、
   サイドバーと同じ小さめの文字にして、ひとつの枠にまとめる */
#related-entries.related-entries {
  background-color: #fff;
  border: 1px solid rgba(176, 73, 116, 0.2);
  border-radius: 16px;
  padding: 24px 28px;
}
@media screen and (max-width: 599px) {
  #related-entries.related-entries {
    padding: 20px 16px;
  }
}
#related-entries.related-entries .related-entry-heading {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #b04974;
  letter-spacing: 2.4px;
  line-height: 100%;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(176, 73, 116, 0.2);
  margin: 0 0 8px;
  padding: 0 0 12px;
}
#related-entries.related-entries .related-list {
  row-gap: 0;
  margin-bottom: 0;
}
#related-entries.related-entries .related-entry-card {
  height: auto;
}
#related-entries.related-entries .related-entry-card-wrap {
  display: block;
  border-radius: 12px;
  padding: 12px;
  transition: background-color 0.3s ease;
}
#related-entries.related-entries .related-entry-card-wrap + .related-entry-card-wrap {
  border-top: 1px solid rgba(176, 73, 116, 0.2);
}
#related-entries.related-entries .related-entry-card-wrap:hover {
  background-color: rgba(176, 73, 116, 0.08);
}
#related-entries.related-entries .related-entry-card-wrap:hover .related-entry-card-title {
  color: #b04974;
}
#related-entries.related-entries .related-entry-card-content {
  margin-left: 0;
  padding-bottom: 0;
}
#related-entries.related-entries .related-entry-card-title {
  display: block;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 180%;
  color: #43453d;
  margin: 0;
  transition: color 0.3s ease;
}

/* ---------- サイドバー（ウィジェット） ---------- */
/* 本文より少し小さめの文字にして、サイト全体のテイストに合わせる */
#sidebar.sidebar {
  font-size: 14px;
}
#sidebar.sidebar ul li,
#sidebar.sidebar p,
#sidebar.sidebar a {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 14px;
  line-height: 180%;
}
#sidebar.sidebar {
  /* ウィジェット見出し（クラシック／ブロックエディター両対応）
     ※Cocoon既定のグレー背景をやめ、フッターのMENU見出しと同じ表現に */
}
#sidebar.sidebar h2,
#sidebar.sidebar h3,
#sidebar.sidebar .widget-sidebar-title,
#sidebar.sidebar .wp-block-heading {
  background-color: transparent;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #b04974;
  letter-spacing: 2.4px;
  border-radius: 0;
  border-bottom: 1px solid rgba(176, 73, 116, 0.2);
  padding: 0 0 10px;
  margin: 0 0 12px;
}
#sidebar.sidebar .widget-sidebar {
  margin-bottom: 40px;
}
#sidebar.sidebar ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
#sidebar.sidebar ul li {
  border-bottom: 1px solid rgba(176, 73, 116, 0.2);
  padding-block: 6px;
}
#sidebar.sidebar ul li:last-child {
  border-bottom: none;
}
#sidebar.sidebar a {
  color: #43453d;
  text-decoration: none;
  transition: 0.3s;
}
#sidebar.sidebar a:hover {
  color: #b04974;
}
#sidebar.sidebar {
  /* 検索フォーム */
}
#sidebar.sidebar .wp-block-search__label {
  font-size: 14px;
  font-weight: 700;
  color: #b04974;
  letter-spacing: 2.4px;
}
#sidebar.sidebar .wp-block-search__input,
#sidebar.sidebar .search-edit input {
  border: 1px solid rgba(176, 73, 116, 0.2);
  border-radius: 100px;
  padding: 6px 16px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 14px;
}
#sidebar.sidebar .wp-block-search__button {
  background-color: #b04974;
  border: none;
  border-radius: 100px;
  color: #fff;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 14px;
  padding: 6px 20px;
  margin-left: 8px;
  transition: 0.3s;
}
#sidebar.sidebar .wp-block-search__button:hover {
  background-color: #c25d8b;
}
#sidebar.sidebar {
  /* 記事カード型ウィジェット */
}
#sidebar.sidebar .widget-entry-cards .widget-entry-card-title {
  font-size: 14px;
  line-height: 170%;
}

/* ---------- フッター（Cocoonの枠をサイトのフッターに合わせる） ---------- */
/* 背景色・余白は _footer.scss（サイト共通フッター）で指定。
   ここではCocoon側の余白リセットと横幅制限の解除だけを行う */
#footer.footer {
  margin-top: 0;
  border-radius: 0;
}

#footer-in.footer-in {
  width: 100%;
  max-width: none;
  padding: 0;
}

/* フッターウィジェット（Cocoon設定で追加した場合）もパープル背景に合わせる */
.footer-widgets,
.footer-widgets-mobile {
  color: #fff;
  margin-bottom: 40px;
}
.footer-widgets a,
.footer-widgets-mobile a {
  color: #fff;
}
.footer-widgets .widget-footer-title,
.footer-widgets-mobile .widget-footer-title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  color: #fff;
  letter-spacing: 2.4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 10px;
}

/* ---------- ボタン類 ---------- */
.btn,
.btn-wrap > a,
input[type=submit],
button[type=submit] {
  background-color: #b04974;
  border-color: #b04974;
  border-radius: 100px;
  font-family: "Zen Maru Gothic", sans-serif;
  color: #fff;
  transition: 0.3s;
}
.btn:hover,
.btn-wrap > a:hover,
input[type=submit]:hover,
button[type=submit]:hover {
  background-color: #c25d8b;
  border-color: #c25d8b;
  color: #fff;
}

/* ---------- 検索フォーム ---------- */
.search-edit,
.search-submit {
  border-radius: 100px;
}

.search-submit {
  color: #b04974;
}/*# sourceMappingURL=news.css.map */