/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 22 2026 | 02:39:14 */
  /* ==========================================================================
     お知らせトップ
     ========================================================================== */
  .p-news__wrapper {
    align-items: flex-start;
    max-width: 1200px;
    margin-inline: auto;
  }

	@media (max-width: 1024px) {
		.p-news__wrapper {
			padding-inline: 4%;
		}
	}

	@media (max-width: 600px) {
		.p-news__wrapper {
			padding-inline: 0;
		}
	}

  .p-news__wrapper .p-news-list {
    padding-block: clamp(80px, 8vw + 20px, 120px);
    width: 100%;
    max-width: initial;
  }

  .p-news__wrapper .p-news-list .wp-block-post {
    background-color: #ebf9ff !important;
  }

  .p-news__wrapper .p-news__date {
    background-color: #b0e1ff !important;
  }

  .p-news__wrapper .p-news__title {
    background-color: #ebf9ff !important;
  }

	.p-news__more {
    margin-top: 0;
  }

  .p-news__wrapper .p-btn-more {
    color: #2c96ff !important;
    border-bottom-color: #2c96ff !important;
    border-left-color: #2c96ff !important;
  }

  .p-news__wrapper .p-btn-more__icon path {
    stroke: #2c96FF !important;
  }


  @media (max-width: 767px) {
    #news {
      width: 100%;
      padding-inline: 4%;
    }

    .p-news__wrapper {
      flex-direction: column;
    }

    .p-news__wrapper .p-vertical-heading{
      padding-left: clamp(20px, 4vw, 40px);
    }

    .p-news__wrapper .p-news-list .wp-block-post {
      flex-direction: row;
      align-items: stretch;
      padding-bottom: 0;
    }

    .p-news__wrapper .p-news-list .wp-block-post::after {
      display: none;
    }

    .p-news__wrapper .p-news-list .wp-block-post-date,
    .p-news__wrapper .p-news-list .wp-block-post-title {
      width: auto;
    }

    .p-news__wrapper .p-news-list .wp-block-post-title {
      padding-right: 16px;
    }
  }


  /* ==========================================================================
     お知らせ一覧（クエリーループ用レイアウト）
     ========================================================================== */
  .p-news-list {
    margin-bottom: clamp(80px, 8vw + 20px, 120px);
  }

	@media (max-width: 1024px) {
	  .p-news-list {
		padding-inline: 4%;
	  }
	}

  /* クエリーループが吐き出すulタグのラッパー */
  .p-news-list .wp-block-post-template {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1vw + 4px, 16px); /* 行と行の隙間 */
  }

  /* 各投稿（liタグ） */
  .p-news-list .wp-block-post {
    position: relative;
    display: flex;
    align-items: stretch; /* 子要素の高さを揃える */
    background-color: #f9f9f9; /* タイトル側のベース背景色 */
    border-bottom: 2px solid #e0e0e0; /* 下に少しだけ重みを持たせる立体感 */
    text-decoration: none;
    margin-top: 0;
    margin-bottom: 0;
    /* ホバー時の心地よいアニメーション */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }

  /* 行全体をクリックした時のMicro Interaction */
  .p-news-list .wp-block-post:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #d9d9d9;
  }

  /* 投稿日ブロック */
  .p-news-list .wp-block-post-date {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(120px, 15vw, 180px);
    flex-shrink: 0;
    background-color: #f4f4f4; /* 日付部分だけ少し濃いグレーに */
    padding: clamp(16px, 1.5vw + 8px, 24px) 16px;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: clamp(16px, 1vw + 10px, 17px);
    color: #000;
    margin: 0;
    /* 日付とタイトルの間の白い区切り線 */
    border-right: 2px solid #ffffff; 
  }

  /* 投稿タイトルブロック */
  .p-news-list .wp-block-post-title {
    display: flex;
    align-items: center;
    flex: 1;
    margin: 0;
    padding: clamp(16px, 1.5vw + 8px, 24px) clamp(16px, 2vw + 10px, 32px);
    font-size: clamp(16px, 0.5vw + 12px, 17px);
    font-weight: 700; /* 画像に合わせて少し太めに */
    color: #3e3e3e;
    line-height: 1.6;
  }

  .p-news-list .wp-block-post-title a {
    color: inherit;
    text-decoration: none;
  }

  /* タイトルのリンク(aタグ)を広げて、行全体をクリッカブルにする魔法 */
  .p-news-list .wp-block-post-title a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  /* 右側の矢印（提供いただいたSVGをData URIに変換して適用） */
  .p-news-list .wp-block-post::after {
    content: "";
    display: block;
    align-self: center; /* 縦の中央に配置 */
    width: clamp(36px, 4vw, 54px);
    height: 11px;
    margin-right: clamp(24px, 3vw + 10px, 40px);
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='54' height='11' viewBox='0 0 54 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline y1='-0.5' x2='53.4011' y2='-0.5' transform='matrix(1 0 0 -1 0 9.28223)' stroke='%23989898'/%3E%3Cline y1='-0.5' x2='12.616' y2='-0.5' transform='matrix(0.677252 0.735751 0.677252 -0.735751 44.8574 3.05176e-05)' stroke='%23989898'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 2; /* リンクの上に配置 */
  }

  /* ホバー時に矢印がスッと右に動く */
  .p-news-list .wp-block-post:hover::after {
    transform: translateX(4px);
  }

  /* ==========================================================================
     Media Queries (スマホ用上書き)
     ========================================================================== */
  @media (max-width: 767px) {
    .p-news-list .wp-block-post {
      flex-direction: column;
      align-items: flex-start;
      padding-bottom: 16px;
    }

    .p-news-list .wp-block-post-date {
      width: 100%;
      justify-content: flex-start;
      padding: 12px 16px;
      border-right: none;
      border-bottom: 2px solid #ffffff; /* スマホ時は下線で区切る */
    }

    .p-news-list .wp-block-post-title {
      padding-top: 16px;
      padding-right: 60px; /* 右下の矢印とテキストが被らないように */
    }

    /* スマホ時は矢印を右下に絶対配置 */
    .p-news-list .wp-block-post::after {
      position: absolute;
      right: 0;
      bottom: 24px;
      margin-right: 24px;
    }
  }