@charset "UTF-8";
/* 記事詳細（お知らせ詳細・事例詳細で共通）
   見出し: section.pageHead.-article > img + h1.pageHead-ttl(span=英字ラベル) ※ .-photo は事例（ぼかし写真＋右に写真カード）
   本文: article.article > .articleBody（WP の the_content。h2 / p / figure）・.articleTtl（本文外の見出し）・p.articleBack > a（一覧へ戻る） */

/* ===== 見出し（記事タイトル） ===== */
.pageHead.-article::after { content: none; }
.pageHead.-article .pageHead-ttl { right: calc(73 / var(--screen-w) * 100vw); bottom: calc(136 / var(--screen-w) * 100vw); font-family: var(--ff); font-size: calc(46 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.5; }
.pageHead.-article .pageHead-ttl span { margin-bottom: 0; font-family: var(--en); font-size: calc(27 / var(--fs-w) * 100vw); font-weight: 400; line-height: 1.2; }
/* 事例: 背景＝アイキャッチをぼかし＋青グラデ、右に同じ写真をカードで */
.pageHead.-photo { overflow: hidden; border-radius: calc(32 / var(--screen-w) * 100vw); }
.pageHead.-photo > img { border-radius: 0; filter: blur(calc(2 / var(--screen-w) * 100vw)); transform: scale(1.02); }
.pageHead.-photo::after { content: ""; border-radius: 0; background: linear-gradient(to top, rgba(0, 59, 119, .9) 9%, rgba(29, 80, 132, .77) 33%, rgba(57, 101, 146, .65) 57%, rgba(99, 132, 166, .488) 67.75%, rgba(142, 164, 186, .325) 78.5%, rgba(184, 195, 206, .163) 89.25%, rgba(226, 226, 226, 0)); -webkit-backdrop-filter: blur(calc(16 / var(--screen-w) * 100vw)); backdrop-filter: blur(calc(16 / var(--screen-w) * 100vw)); }
.pageHead-photo { position: absolute; top: calc(70 / var(--screen-w) * 100vw); right: calc(60 / var(--screen-w) * 100vw); z-index: 1; width: calc(691 / var(--screen-w) * 100vw); height: calc(400 / var(--screen-w) * 100vw); overflow: hidden; border-radius: calc(31 / var(--screen-w) * 100vw); }
.pageHead-photo img { width: 100%; height: 100%; object-fit: cover; }
.pageHead.-photo .pageHead-ttl { right: calc(840 / var(--screen-w) * 100vw); }

/* ===== 本文 ===== */
.article { width: calc(1000 / var(--screen-w) * 100vw); margin: calc(106 / var(--screen-w) * 100vw) auto 0; padding-bottom: calc(235 / var(--screen-w) * 100vw); }
.articleSec + .articleSec { margin-top: calc(39 / var(--screen-w) * 100vw); }
.articleTtl, .articleBody h2 { padding: calc(4 / var(--screen-w) * 100vw) calc(10 / var(--screen-w) * 100vw) calc(3 / var(--screen-w) * 100vw) calc(17 / var(--screen-w) * 100vw); border-left: calc(8 / var(--screen-w) * 100vw) solid var(--btn); background: #f7f8fa; color: #323232; font-size: calc(24 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.5; }
.articleTtl + *, .articleBody h2 + * { margin-top: calc(28 / var(--screen-w) * 100vw); }
.articleBody > * + h2 { margin-top: calc(39 / var(--screen-w) * 100vw); }
.articleBody > figure + h2, .articleBody + .articleTtl { margin-top: calc(57 / var(--screen-w) * 100vw); }
.articleBody p { font-size: calc(16 / var(--fs-w) * 100vw); line-height: 2.31; }
.articleBody p + p { margin-top: calc(37 / var(--screen-w) * 100vw); }
.articleBody a { color: var(--btn); text-decoration: underline; }
.articleBody figure, .articleBody > img { margin-top: calc(15 / var(--screen-w) * 100vw); }
.articleBody img { width: 100%; }
.article .-ph { background: #d9d9d9; }
.articleBody .-ph { aspect-ratio: 1000 / 592; }

/* ===== Information（イベント情報） ===== */
.articleInfo { margin-top: calc(66 / var(--screen-w) * 100vw); }
.articleInfo-ttl { color: var(--btn); font-family: var(--en); font-size: calc(20 / var(--fs-w) * 100vw); font-weight: 400; line-height: 1.2; }
.articleInfo-list { margin-top: calc(15 / var(--screen-w) * 100vw); border: 1px solid #cecece; border-radius: calc(6 / var(--screen-w) * 100vw); color: #323232; font-size: calc(16 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.5; }
.articleInfo-list div { display: grid; grid-template-columns: calc(125 / var(--screen-w) * 100vw) 1fr; padding: calc(16 / var(--screen-w) * 100vw) calc(30 / var(--screen-w) * 100vw); }
.articleInfo-list div + div { border-top: 1px solid #dedede; }
.articleInfo-list dt { font-weight: 500; }
.articleInfo-btn { display: grid; place-items: center; min-height: calc(55 / var(--screen-w) * 100vw); margin-top: calc(23 / var(--screen-w) * 100vw); padding: calc(8 / var(--screen-w) * 100vw) calc(20 / var(--screen-w) * 100vw); border-radius: calc(6 / var(--screen-w) * 100vw); background: var(--btn); color: #fff; font-size: calc(16 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.5; text-align: center; }

/* ===== 一覧へ戻る ===== */
.articleBack { margin-top: calc(152 / var(--screen-w) * 100vw); text-align: center; }
.articleBack a { display: inline-flex; align-items: center; justify-content: center; gap: calc(9 / var(--screen-w) * 100vw); width: calc(493 / var(--screen-w) * 100vw); min-height: calc(102 / var(--screen-w) * 100vw); background: #f3f3f3; color: #323232; font-size: calc(16 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.5; }
.articleBack a::before { content: ""; flex-shrink: 0; width: calc(31 / var(--screen-w) * 100vw); height: calc(31 / var(--screen-w) * 100vw); border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 15' fill='%23323232'%3E%3Cpath d='M0 0h4v4H0zM5 0h4v4H5zM10 0h4v4h-4zM0 5h4v4H0zM5 5h4v4H5zM10 5h4v4h-4zM0 11h4v4H0zM5 11h4v4H5zM10 11h4v4h-4z'/%3E%3C/svg%3E") center / calc(14 / var(--screen-w) * 100vw) auto no-repeat; }

/* ===== SP ===== */
@media (max-width: 900px) {
  .pageHead.-article > img { object-position: 70% center; }
  .pageHead.-article .pageHead-ttl { right: calc(20 / var(--screen-w) * 100vw); bottom: calc(20 / var(--screen-w) * 100vw); font-size: calc(22 / var(--fs-w) * 100vw); }
  .pageHead.-article .pageHead-ttl span { margin-bottom: calc(2 / var(--screen-w) * 100vw); font-size: calc(14 / var(--fs-w) * 100vw); }
  .pageHead.-photo { border-radius: calc(16 / var(--screen-w) * 100vw); }
  .pageHead.-photo::after { -webkit-backdrop-filter: blur(calc(8 / var(--screen-w) * 100vw)); backdrop-filter: blur(calc(8 / var(--screen-w) * 100vw)); }
  .pageHead-photo { top: calc(16 / var(--screen-w) * 100vw); right: calc(16 / var(--screen-w) * 100vw); width: calc(150 / var(--screen-w) * 100vw); height: calc(87 / var(--screen-w) * 100vw); border-radius: calc(10 / var(--screen-w) * 100vw); }
  .article { width: auto; margin-top: calc(32 / var(--screen-w) * 100vw); padding: 0 calc(20 / var(--screen-w) * 100vw) calc(80 / var(--screen-w) * 100vw); }
  .articleSec + .articleSec { margin-top: calc(32 / var(--screen-w) * 100vw); }
  .articleTtl, .articleBody h2 { padding: calc(6 / var(--screen-w) * 100vw) calc(8 / var(--screen-w) * 100vw) calc(6 / var(--screen-w) * 100vw) calc(12 / var(--screen-w) * 100vw); border-left-width: calc(5 / var(--screen-w) * 100vw); font-size: calc(18 / var(--fs-w) * 100vw); }
  .articleTtl + *, .articleBody h2 + * { margin-top: calc(16 / var(--screen-w) * 100vw); }
  .articleBody > * + h2 { margin-top: calc(32 / var(--screen-w) * 100vw); }
  .articleBody > figure + h2, .articleBody + .articleTtl { margin-top: calc(40 / var(--screen-w) * 100vw); }
  .articleBody p { font-size: calc(14 / var(--fs-w) * 100vw); line-height: 2; }
  .articleBody p + p { margin-top: calc(20 / var(--screen-w) * 100vw); }
  .articleBody figure, .articleBody > img { margin-top: calc(16 / var(--screen-w) * 100vw); }
  .articleInfo { margin-top: calc(40 / var(--screen-w) * 100vw); }
  .articleInfo-ttl { font-size: calc(18 / var(--fs-w) * 100vw); }
  .articleInfo-list { margin-top: calc(10 / var(--screen-w) * 100vw); font-size: calc(14 / var(--fs-w) * 100vw); }
  .articleInfo-list div { grid-template-columns: calc(80 / var(--screen-w) * 100vw) 1fr; padding: calc(12 / var(--screen-w) * 100vw) calc(14 / var(--screen-w) * 100vw); }
  .articleInfo-btn { min-height: calc(52 / var(--screen-w) * 100vw); margin-top: calc(16 / var(--screen-w) * 100vw); font-size: calc(15 / var(--fs-w) * 100vw); }
  .articleBack { margin-top: calc(56 / var(--screen-w) * 100vw); }
  .articleBack a { gap: calc(8 / var(--screen-w) * 100vw); width: calc(280 / var(--screen-w) * 100vw); min-height: calc(64 / var(--screen-w) * 100vw); font-size: calc(14 / var(--fs-w) * 100vw); }
  .articleBack a::before { width: calc(28 / var(--screen-w) * 100vw); height: calc(28 / var(--screen-w) * 100vw); background-size: calc(12 / var(--screen-w) * 100vw) auto; }
}