@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ===== CSS Variables ===== */

:root {
  --main: #0c3388;
  --main-light: #1a4db8;
  --main-pale: #e8edf8;
  --navy: #0c3388;
  --navy-dark: #071f55;
  --navy-mid: #1a4db0;
  --accent: #ff9f1c;
  --accent-dark: #e08800;
  --accent-light: #ffb84d;
  --base: #ffffff;
  --t-blue: #48b0d2;
  --text: #000000;
  --text-sub: #000000;
  --text-mid: #3a4468;
  --text-light: #6b7594;
  --border: #dde3ef;
  --bg-gray: #eef1f8;
  --bg-light: #f5f7fc;
  --radius: 8px;
  --shadow: 0 4px 24px rgba(12,51,136,.10);
  --shadow-md: 0 8px 40px rgba(12,51,136,.14);
  --shadow-lg: 0 8px 40px rgba(12,51,136,.16);
  --sidebar-w: 260px;
  --swl-fz-clamp: clamp(24px, 3.0vw, 35px);
  --fz-h2: clamp(22px, 2.4vw, 30px);
  --fz-h3: clamp(20px, 2.2vw, 25px);
  --fz-h4: clamp(18px, 2.0vw, 22px);
  --fz-h5: clamp(16px, 1.8vw, 20px);
}

/* =====================================================
   ヘッダー：2段レイアウト（PC / タブレット横：960px以上）
   1段目：ロゴ（左）＋ ユーティリティ（右）
   2段目：グローバルナビ（全幅・均等割り・中央揃え／#999の区切り線）
   ※中身はコンテンツ幅(1200px)内に配置
===================================================== */
@media screen and (min-width: 960px) {

  /* --- 全体を2段組みにし、コンテンツ幅内に収める --- */
  .l-header.-parallel .l-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 4px;
    max-width: calc(var(--container_size) + var(--swl-pad_container, 32px) * 2);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--swl-pad_container, 32px);
    padding-right: var(--swl-pad_container, 32px);
  }
	
  .l-fixHeader.-parallel .l-fixHeader__inner {
    max-width: calc(var(--container_size) + var(--swl-pad_container, 32px) * 2);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--swl-pad_container, 32px);
    padding-right: var(--swl-pad_container, 32px);
  }	

  /* 1段目・左：ロゴ（SWELL標準の中央寄せ・全幅を解除して左寄せに） */
  .l-header.-parallel .l-header__logo {
    order: 0;
    width: auto;
    text-align: left;
    margin-right: auto;
  }

  /* 1段目・右：ユーティリティ（受付時間・電話・メルマガ・検索） */
  .l-header.-parallel .w-header {
    order: 1;
    width: auto;
    margin: 0;
  }

  /* 2段目：ナビ（全幅で折り返し・均等割り・中央揃え） */
  .l-header.-parallel .l-header__gnav {
    order: 2;
    width: 100%;
  }
  .l-header.-parallel .l-header__gnav .c-gnav {
    width: 100%;
  }
  .l-header.-parallel .l-header__gnav .c-gnav > li {
    flex: 1;
  }
  .l-header.-parallel .l-header__gnav .c-gnav > li > a {
    justify-content: center;
    text-align: center;
  }

  /* --- ユーティリティ内の横並び --- */
  .head-utility {
    display: flex;
    align-items: center;
    gap: 18px;
  }

  /* 受付時間＋電話番号（縦2段・右寄せ） */
  .head-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.35;
  }
  .head-contact__time {
    font-size: 11px;
    color: #888888;
    letter-spacing: .02em;
  }
  .head-contact__tel {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 20px;
    font-weight: 700;
    color: var(--color_main);
    letter-spacing: .02em;
  }
  .head-contact__tel:hover {
    opacity: .8;
  }
  .head-contact__tel i {
    font-size: 0.72em;
  }

  /* メルマガ登録ボタン */
  .head-melmaga {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--color_main);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: opacity .3s ease;
  }
  .head-melmaga:hover {
    opacity: .85;
  }

  /* 検索ボタン（丸枠） */
  .head-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #ffffff;
    color: var(--color_main);
    border: 1px solid #e0e0e0;
    font-size: 16px;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease;
  }
  .head-search:hover {
    background: var(--color_main);
    color: #ffffff;
  }

/* --- ナビの区切り線（右端のみ・#000の縦線） --- */
  .c-gnav > li {
    position: relative;
  }
  .c-gnav > li::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
  }
  .c-gnav > li:last-child::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -18px;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: #000;
  }
  .c-gnav > li > a {
    padding: 16px 22px;
  }
	
}

  .-parallel-bottom .l-header__logo {
	padding-bottom: 5px !important;
}

/* ===== 追従ヘッダー：メニュー項目間の区切り線（縦線） ===== */
@media (min-width: 960px) {

  .l-fixHeader__gnav .c-gnav {
    align-items: center;
  }

  .l-fixHeader__gnav .c-gnav > li {
    position: relative;
  }

  .l-fixHeader__gnav .c-gnav > li > a {
    padding-left: 24px;
    padding-right: 24px;
  }

  .l-fixHeader__gnav .c-gnav > li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 20px;
    background: var(--color_main);
    transform: translateY(-50%);
  }

  .l-fixHeader__gnav .c-gnav > li:last-child::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 20px;
    background: var(--color_main);
    transform: translateY(-50%);
  }

}

/* =====================================================
   グローバルメニューの下線を、両サイドの縦線まで伸ばす
（通常＝縦線の1px手前で止めて隙間を作る／追従＝項目の端）
===================================================== */
@media (min-width: 960px) {

  /* リンクを項目いっぱいに（両ヘッダー共通） */
  .l-header.-parallel .l-header__gnav .c-gnav > li > a,
  .l-fixHeader__gnav .c-gnav > li > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 100%;
    box-sizing: border-box;
  }

  /* 通常ヘッダー：縦線が項目の18px外側 → 下線も18px外へ伸ばす */
  .l-header.-parallel .l-header__gnav .c-gnav > li > a::after {
    left: -17px !important;
    right: -17px !important;
    width: auto !important;
  }

  /* 追従ヘッダー：端から1px内側で止める（隙間 1px） */
  .l-fixHeader__gnav .c-gnav > li > a::after {
    left: 1px !important;
    right: 1px !important;
    width: auto !important;
  }

}

/* ==========================================
   カスタムリンクの現在ページにも下線を表示
   （PC・追従ヘッダー共通）
   ========================================== */
.c-gnav > .-current > a::after,
.c-gnav > .current-menu-item > a::after {
  transform: scaleX(1);
}

/* スマホメニューの現在ページ下線 */
.p-spHeadMenu .menu-item.-current,
.p-spHeadMenu .menu-item.current-menu-item {
  border-bottom-color: var(--color_main);
}

/* ==== グローバルメニューの設定はここまで ====*/

/* ==== トップビューのキャッチコピー ==== */
.p-mainVisual__slideTitle {
	font-size: clamp(20px,4vw,36px);
	font-weight: 900;
	font-family: 'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
}

.c-mvBtn__btn {
	background-color: var(--accent);
	transition: background-color 0.5s ease;
}

.c-mvBtn__btn:hover {
	background-color: var(--main);
}

.c-mvBtn__btn::before {
	background: var(--main) !important;
}

.p-mainVisual__slideText {
	font-size: 18px !important;
}

/* ==== カテゴリーの色指定 ==== */
.c-postThumb__cat {
	background-color: var(--t-blue) !important;
}

/* ===== h2 見出し ===== */
.entry-content h2,
.entry-content h2.wp-block-heading,
.post_content h2,
.post_content h2.wp-block-heading {
  border: none !important;
  /*border-bottom: 5px solid var(--accent) !important;*/
  padding: 10px 16px !important;
  font-size: var(--fz-h2) !important;
  font-weight: bold !important;
  letter-spacing: 0.05em !important;
  color: #fff !important;
  margin-top: 1.8em !important;
  margin-bottom: 0.8em !important;
}
.entry-content h2::before,
.entry-content h2.wp-block-heading::before,
.post_content h2::before,
.post_content h2.wp-block-heading::before {
  display: none !important;
  content: none !important;
}

/* ===== h3 見出し（斜線） ===== */
.entry-content h3,
.entry-content h3.wp-block-heading,
.post_content h3,
.post_content h3.wp-block-heading {
  border: none !important;
  background: none !important;
  padding: 0 0 6px !important;
  font-size: var(--fz-h3) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: #0c3388 !important;
  margin-top: 1.5em !important;
  margin-bottom: 0.8em !important;
}

/* SWELLの::before装飾を消す */
.entry-content h3::before,
.entry-content h3.wp-block-heading::before,
.post_content h3::before,
.post_content h3.wp-block-heading::before {
  display: none !important;
  content: none !important;
}

/* 文字下の斜線（ハッチング）*/
.entry-content h3::after,
.entry-content h3.wp-block-heading::after,
.post_content h3::after,
.post_content h3.wp-block-heading::after {
  content: "" !important;
  display: block !important;
  height: 12px !important;
  margin-top: 5px !important;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    #0c3388 1px,
    #0c3388 2px,
    transparent 3px,
    transparent 6px
  ) !important;
}

.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
  margin-left: 1px;
  margin-right: 1px;
}

/* ===== h4 見出し ===== */
.entry-content h4,
.entry-content h4.wp-block-heading,
.post_content h4,
.post_content h4.wp-block-heading {
  border: none !important;
  border-bottom: 3px solid #0c3388 !important;
  padding: 10px 16px !important;
  font-size: var(--fz-h4) !important;
  font-weight: bold !important;
  letter-spacing: 0.05em !important;
  color: #0c3388 !important;
  margin-top: 1.8em !important;
  margin-bottom: 0.8em !important;
}
.entry-content h4::before,
.entry-content h4.wp-block-heading::before,
.post_content h4::before,
.post_content h4.wp-block-heading::before {
  display: none !important;
  content: none !important;
}

/* ========================================
         インタビューページ
======================================== */
.u-mt-40 {
  margin-top: 0 !important;
}

/* インタビュー記事ページのみ、コンテンツ上部の余白を削除 */
@media (min-width: 600px) {
  .single-interview .l-content {
    padding-top: 2em;
  }
}

/* === インタビューページ 上部バナー === */
.single-interview .l-topTitleArea {
  background-image: url("/association/wp-content/uploads/2026/06/interview-header.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.single-interview .c-pageTitle {
  font-size: clamp(24px, 2.5vw, 32px) !important;
}
.single-interview .l-topTitleArea__img { display: none; }

.single-interview .l-topTitleArea .c-pageTitle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
  font-weight: 700;
}
.single-interview .l-topTitleArea .c-pageTitle::before {
  content: "Interview";   /* ← Contactから変更 */
  order: 1;
  margin-top: 10px;
  padding-bottom: 12px;
  border-bottom: 3px solid #e0a82e;
  font-size: clamp(16px, 2vw, 24px);
  font-style: italic;
  font-weight: 400;
  color: #e0a82e;
}
.single-interview .ab-page-hero {
  display: none;
}

.fa-solid, .fas {
  padding-right: 3px;
}

@media (max-width: 959px) {
  .related-interviews__grid {
     grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599px) {
   .related-interviews__grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 1.2em .8em;
  }
}

/* === インタビューアーカイブのタイトルヘッダー === */

/* 背景画像 */
.post-type-archive-interview .l-topTitleArea {
  background-image: url("/association/wp-content/uploads/2026/06/interview-header.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* SWELLのグレー画像を消す */
.post-type-archive-interview .l-topTitleArea__img {
  display: none;
}

/* タイトルを縦並び・白文字に */
.post-type-archive-interview .l-topTitleArea .c-pageTitle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
  font-weight: 700;
}

/* 「Interview」＋金の下線をタイトル下に追加 */
.post-type-archive-interview .l-topTitleArea .c-pageTitle::before {
  content: "Interview";
  order: 1;
  margin-top: 10px;
  padding-bottom: 12px;
  border-bottom: 3px solid #e0a82e;
  font-size: clamp(16px, 2vw, 24px);
  font-style: italic;
  font-weight: 400;
  color: #e0a82e;
}

/* ① コンテンツ内の「インタビュー – archive –」を消す */
.post-type-archive-interview .l-mainContent__inner > .c-pageTitle {
  display: none;
}

/* ② 帯の中に日本語タイトルを出す */
.post-type-archive-interview .l-topTitleArea__body::before {
  content: "インタビュー記事";
  display: block;
  color: #fff;
  font-weight: 700;
  font-size: clamp(24px, 2.5vw, 32px);
}

/* ③ 「Interview」＋金の下線を下に出す */
.post-type-archive-interview .l-topTitleArea__body::after {
  content: "Interview";
  display: inline-block;
  margin-top: 10px;
  padding-bottom: 12px;
  border-bottom: 3px solid #e0a82e;
  color: #e0a82e;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 2vw, 24px);
}

/* アイキャッチ */
.interview-eyecatch {
  margin-bottom: 2rem;
}
.interview-eyecatch img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 8px;
}

/* ヘッダー */
.interview-header {
  margin-bottom: 2rem;
}
.interview-cat {
  display: inline-block;
  font-size: 12px;
  background: var(--t-blue);
  color: var(--base);
  border-radius: 4px;
  padding: 2px 10px;
  margin-right: 6px;
  text-decoration: none;
  transition: background-color .5s ease;
}
.interview-cat:hover {
  background: var(--main);
}
.interview-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  margin: 12px 0 8px;
}
.interview-date {
  font-size: 13px;
  color: #888;
}

/* インタビューリード文 */
.interview-lead {
  margin: 16px 0 24px;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

/* インタビュープロフィール（ACF連動・斜め背景文字入り） */
.interview-profile {
  position: relative;
  margin: 2em 0;
  background: #ffffff;
  border: 1px solid #eaeaea;
}

.interview-profile__inner {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  padding: 30px;
  align-items: center;
}

.interview-profile__img img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.interview-profile__body {
  position: relative;
  overflow: hidden;
  padding: 15px;
}

.interview-profile__bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-14deg);
  font-family: 'Oooh Baby', cursive;
  font-size: clamp(100px, 14vw, 150px);
  line-height: 1;
  color: #0c3388;
  opacity: 0.1;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

.interview-profile__body > *:not(.interview-profile__bg) {
  position: relative;
  z-index: 1;
}

.interview-profile__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 5px 14px;
  background: #0c3388;
  color: #fff;
  font-size: 12px;
  letter-spacing: 2px;
}

.interview-profile__name {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: bold;
  color: #666;
}

.interview-profile__title {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  font-weight: bold;
}

.interview-profile__desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
}

/* ▼ 2カラム：文字量に合わせて画像の高さを伸ばす（PC・タブレットのみ） */
@media screen and (min-width: 782px) {

  .interview-body .wp-block-columns {
    align-items: stretch;
  }

  .interview-body .wp-block-column {
    display: flex;
    flex-direction: column;
  }

  .interview-body .wp-block-column > figure.wp-block-image {
    height: 100%;
    margin: 0;
  }

  .interview-body .wp-block-column > figure.wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ▼ スマホ：縦積み時は必ず画像を先（上）に表示 */
@media screen and (max-width: 781px) {

  .interview-body .wp-block-columns {
    display: flex;
    flex-direction: column;
  }

  .interview-body .wp-block-column:has(figure.wp-block-image) {
    order: -1;
  }
}

@media screen and (max-width: 768px) {
  .interview-profile__inner {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 10px;
  }
  .interview-profile__img img {
    max-width: 260px;
    margin: 0 auto;
  }
}

/* カラムの余白 */
@media screen and (min-width: 767px) {
.wp-block-columns {
	margin-bottom: 6em !important;
}
}

/* ===== 関連カテゴリ（インタビュー） ===== */

.related-interviews {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 2px solid #eee;
  
}
.related-interviews__title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}
.related-interviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.related-interviews__item {
  display: block;
  text-decoration: none;
  color: inherit;
}
.related-interviews__thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: #f0f0f0;
}
.related-interviews__thumb img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  transition: transform .3s ease;
}
.related-interviews__item:hover .related-interviews__thumb img {
  transform: scale(1.05);
}
.related-interviews__name {
  font-size: 14px;
  line-height: 1.5;
  font-weight: bold;
  margin: .7em 0 .3em;
}
.related-interviews__date {
  font-size: .8em;
  color: #888;
}
.related-interviews__date::before {
  content: "\f017";              /* 時計アイコン */
  font-family: "Font Awesome 6 Free"; font-weight: 900;
  margin-right: .4em;
}

/* ブログ：カテゴリー群の前 */
.c-categoryList::before {
  content: "\f07b";
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  margin-right: 6px;
  color: var(--main);
}

/* ブログ：タグ群の前 */
.c-tagList::before {
  content: "\f02b";
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  margin-right: 6px;
  color: var(--main);
  margin-left: 16px;
}

/* スマホ表示 マージンを無しにする */
@media (max-width: 768px) {
  .c-tagList::before {
    margin-left: 0 !important;
    margin: 10px 0 0 0 !important;
  }
}

/* インタビュー：カテゴリー群の前（ブログと統一） */
.interview-meta::before {
  content: "\f07b";
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  margin-right: 6px;
  color: var(--main);
}

/* インタビュー：タグ群の前（ブログと統一） */
.interview-tags::before {
  content: "\f02b";
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  margin-right: 6px;
  color: var(--main);
}

/* インタビュー：タグにも背景＋ホバー */
.interview-tag {
  display: inline-block;
  font-size: 12px;
  background: var(--t-blue);
  color: var(--base);
  border-radius: 4px;
  padding: 2px 10px;
  margin-right: 6px;
  text-decoration: none;
  transition: background-color .5s ease;
}

.interview-tag:hover {
  background: var(--main);
}

/* カテゴリー・タグを囲む箱：ここに全幅の線と横並びをまとめる */
.interview-footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 2em;
  padding-top: 1.5em;
  border-top: 1px dashed var(--color_border);
}

/* カテゴリー */
.interview-meta {
  margin: 0;
}

/* タグ：中のタグを横並びに */
.interview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

/* ===== 投稿ページの目次の階層番号：H2=1,2,3… / H3=親番号-連番 ===== */

/* ① 親olでH2カウンターを初期化 */
.p-toc__list {
  counter-reset: toc-h2;
}

/* ② 標準の番号（list-style）を消す */
.p-toc__list,
.p-toc__childList {
  list-style: none !important;
}

/* ③ H2項目（親olの直下li）：+1／H3カウンターをリセット */
.p-toc__list > li {
  counter-increment: toc-h2;
  counter-reset: toc-h3;
}

/* ④ H2の番号を表示（｜はSWELL標準に任せる） */
.p-toc__list > li::before {
  content: counter(toc-h2) !important;
  margin-left: 4px;
  color: var(--color_main);
  font-weight: 700;
}

/* ⑤ H3項目（childList内のli）：+1 */
.p-toc__childList > li {
  counter-increment: toc-h3;
}

/* ⑥ H3の番号を「親番号-連番」で表示（例：2-1） */
.p-toc__childList > li::before {
  content: counter(toc-h2) "-" counter(toc-h3) !important;
  margin-left: 4px;
  color: var(--text);
  font-weight: 700;
  font-size: .9em;
}

/********************************************/
/*=============== 通常ブログ ===============*/
/********************************************/


/* ============================================
          ブログページデザイン
=============================================*/

/* ===== 記事タイトル下に線を引く ===== */
.c-postTitle__ttl {
	border-bottom: 1px dotted #000;
	padding-bottom: 10px;
	margin-bottom: 5px;
	font-size: var(--swl-fz-clamp);
}

/* ===== 目次 ===== */
/* コンテナ */
#main_content .p-toc {
	width: 100% !important;
}

#main_content .p-toc.-double {
  background: #ffffff;
  border: 1px solid #d4ddf0;
  box-shadow: 0 6px 20px rgba(12, 51, 136, 0.08);
  padding: 1.75em 1.75em 1.5em;
  max-width: 100%;
  margin: 3em auto;
}

/* タイトル「目次」 */
#main_content .p-toc.-double .p-toc__ttl {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 1.1em;
  padding: 0.45em 1.3em 0.45em 1.1em;
  background: #0c3388;
  color: #ffffff;
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: left;
}

#main_content .p-toc.-double .p-toc__ttl::before {
  color: #ffffff;
}

.cap_box_ttl {
	padding: 20px;
	font-weight: bold;
}

.p-toc__ttl::before {
	padding-top: 5px;
}

/* リスト全体 */
#main_content .p-toc.-double .p-toc__list {
  counter-reset: toc-h2;
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* 親項目（h2） */
#main_content .p-toc.-double .p-toc__list > li[data-level="2"] {
  counter-increment: toc-h2;
  position: relative;
  padding-left: 2.6em;
  margin: 0 0 0.9em;
  line-height: 1.6;
}

#main_content .p-toc.-double .p-toc__list > li[data-level="2"]::before {
  content: counter(toc-h2);
  position: absolute;
  left: 0;
  top: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8em;
  height: 1.8em;
  background: #0c3388;
  color: #ffffff;
  font-size: 0.85em;
  font-weight: 700;
  border-radius: 50%;
  line-height: 1;
}

#main_content .p-toc.-double .p-toc__list > li[data-level="2"] > .p-toc__link {
  font-weight: 700;
  font-size: 1.02em;
  color: #1a2a4a;
}

/* 子項目（h3） */
#main_content .p-toc.-double .p-toc__childList {
  counter-reset: toc-h3;
  list-style: none;
  padding-left: 0.2em;
  margin-top: 0.7em;
}

#main_content .p-toc.-double .p-toc__childList > li[data-level="3"] {
  counter-increment: toc-h3;
  position: relative;
  padding-left: 2.2em;
  margin: 0 0 0.5em;
  line-height: 1.6;
}

#main_content .p-toc.-double .p-toc__childList > li[data-level="3"]::before {
  content: counter(toc-h2) "-" counter(toc-h3);
  position: absolute;
  left: 0;
  top: 0.15em;
  display: inline-flex;
  align-items: center;
  padding: 0.15em 0.5em;
  background: #eaf1fb;
  color: #0c3388;
  font-size: 0.72em;
  font-weight: 700;
  border-radius: 3px;
  line-height: 1;
}

#main_content .p-toc.-double .p-toc__childList > li[data-level="3"] > .p-toc__link {
  font-weight: 500;
  color: #4a5568;
}

/* リンク共通 */
#main_content .p-toc.-double .p-toc__link {
  text-decoration: none;
  transition: color 0.25s ease;
}

#main_content .p-toc.-double .p-toc__link:hover {
  color: #48b0d2;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* スマホ対応 */
@media screen and (max-width: 599px) {
  #main_content .p-toc.-double {
    padding: 1.3em 1.1em 1.1em;
    margin: 2em auto;
  }

  #main_content .p-toc.-double .p-toc__ttl {
    font-size: 1em;
    padding: 0.4em 1.1em 0.4em 0.9em;
  }

  #main_content .p-toc.-double .p-toc__list > li[data-level="2"] {
    padding-left: 2.3em;
  }

  #main_content .p-toc.-double .p-toc__list > li[data-level="2"]::before {
    width: 1.7em;
    height: 1.7em;
    font-size: 0.8em;
  }

  #main_content .p-toc.-double .p-toc__childList > li[data-level="3"] {
    padding-left: 2em;
  }
}

/* 次の記事・前の記事ボタンを消す */
/*
.p-pnLinks {
	display: none;
}
*/

/* 前後記事リンク：ホバー時の共通設定 */
.p-pnLinks__link {
  position: relative;
}

.p-pnLinks__title {
  position: relative;
  left: 0;
  display: inline-block;
  transition: left 0.25s;
}

/* 前ボタン：色帯＋矢印とテキストの余白 */
.p-pnLinks .-prev .p-pnLinks__link {
  border-left: 1.25em solid var(--color_main);
  padding-left: 1.75em;
}

/* 次ボタン：色帯＋矢印とテキストの余白 */
.p-pnLinks .-next .p-pnLinks__link {
  border-right: 1.25em solid var(--color_main);
  padding-right: 1.75em;
}

/* ホバー時のシャドウを消す */
.p-pnLinks .-prev .p-pnLinks__link:hover,
.p-pnLinks .-next .p-pnLinks__link:hover {
  box-shadow: none;
}

/* 下線アニメーションの土台（色帯を除いた本体エリア） */
.p-pnLinks .-prev .p-pnLinks__link::after,
.p-pnLinks .-next .p-pnLinks__link::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--color_main);
  transition: width 0.3s ease;
}

/* 左ボタン：色帯から少し離して左端に固定 → 右へ伸びる */
.p-pnLinks .-prev .p-pnLinks__link::after {
  left: 8px;
}

/* 右ボタン：色帯から少し離して右端に固定 → 左へ伸びる */
.p-pnLinks .-next .p-pnLinks__link::after {
  right: 8px;
}

/* ホバーで下線を伸ばす（両端に隙間を残す） */
.p-pnLinks .-prev .p-pnLinks__link:hover::after,
.p-pnLinks .-next .p-pnLinks__link:hover::after {
  width: calc(100% - 16px);
}

/* ホバー時の文字の横移動（そのまま維持） */
.p-pnLinks .-prev > .p-pnLinks__link:hover .p-pnLinks__title {
  transform: none !important;
  left: 4px;
}

.p-pnLinks .-next > .p-pnLinks__link:hover .p-pnLinks__title {
  transform: none !important;
  left: -4px;
}

/* ページ送り：中央に縦線を入れる */
.p-pnLinks {
    position: relative;
}

.p-pnLinks:has(.-prev):has(.-next)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: #ccc;
    transform: translateX(-50%);
}

/* === マウスホバー ===*/
.hov-flash-up {
  transition: background .5s ease;
}
.hov-flash-up:hover {
  background-color:var(--navy);
  animation: none;
  box-shadow: none;
}
/* === ブログページカスタマイズ ===*/
.c-secTitle {
  color: #000;
  padding:10px 10px 10px 20px;
  border: 0;
  border-left: 5px solid var(--navy);
} 

/* ===== カテゴリー・タグを全ページ統一（強化版） ===== */
.c-categoryList .c-categoryList__link,
.c-tagList .c-tagList__link,
.interview-meta .interview-cat,
.interview-tags .interview-tag {
  display: inline-block !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  background: var(--t-blue) !important;
  color: var(--base) !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 4px 10px !important;
  margin-right: 6px !important;
  text-decoration: none !important;
  box-shadow: none !important;       /* ニュースに付いている影も消す */
  transition: background-color .5s ease !important;
}
.c-categoryList .c-categoryList__link:hover,
.c-tagList .c-tagList__link:hover,
.interview-meta .interview-cat:hover,
.interview-tags .interview-tag:hover {
  background: var(--main) !important;
  color: var(--base) !important;
}
/* ===== カテゴリー・タグのアイコンサイズを統一 ===== */
.c-categoryList::before,
.c-tagList::before,
.interview-meta::before,
.interview-tags::before {
  font-size: 18px !important;   /* ← アイコンの大きさはここで調整 */
  vertical-align: middle;
}

:root{
  --ac-main:   #0c3388;   /* メインカラー */
  --ac-accent: #3a6fd8;   /* アクセント */
  --ac-line:   #eef0f5;   /* 枠線 */
}

/* カード本体 */
.-author .p-authorBox{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: 0;
  padding: 34px 36px 38px;
  background: #fff;
  border: 1px solid var(--ac-line);
  box-shadow: 0 18px 20px -20px rgba(12,51,136,.25);
  overflow: hidden;
}

/* 上段：アバター(左) ＋ 〔肩書き→名前〕(右) をグリッドで配置 */
.-author .p-authorBox__l{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "avatar position"
    "avatar name";
  align-items: center;
  column-gap: 26px;
  width: 100%;
  margin: 0;
  text-align: left;
}
.-author .p-authorBox__l .avatar{
  grid-area: avatar;
  width: 96px;
  height: 96px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 0 0 2px var(--ac-main);   /* 紺リングのみ（ドロップシャドウなし） */
}
/* ★ 肩書き（名前の上・小さめ）＝SWELLの役職欄をそのまま表示 */
.-author .p-authorBox__position{
  grid-area: position;
  align-self: end;
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.3;
  color: var(--ac-main);
}
/* 名前 */
.-author .p-authorBox__name{
  grid-area: name;
  align-self: start;
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
  color: #1a1a1a;
}

/* 下段：自己紹介文 ＋ SNS */
.-author .p-authorBox__r{
  width: 100%;
  margin-top: 20px;
  border: none;          /* SWELL標準の縦区切り線を消す */
  padding-left: 0;
}
.-author .p-authorBox__r::before{
  content: none;
  display: none;
}
.-author .p-authorBox__desc{
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.9;
  color: #555;
}

/* SNS・リンクアイコン */
.-author .p-authorBox__iconList{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
}
.-author .p-authorBox__iconList .c-iconList__item{ margin: 0; }
.-author .p-authorBox__iconList .c-iconList__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--ac-main);
  background: #fff;
  border: 1.5px solid #d8deea;
  border-radius: 50%;
  transition: transform .25s ease, background .25s ease,
              color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.-author .p-authorBox__iconList .c-iconList__link:hover{
  color: #fff;
  background: var(--ac-main);
  border-color: var(--ac-main);
  transform: translateY(-3px);
  box-shadow: 0 8px 16px -6px rgba(12,51,136,.5);
}

.p-authorBox__position {
  font-style: normal;  /* 肩書をノーマル表示へ */
}

/* スマホ微調整 */
@media (max-width: 599px){
  .-author .p-authorBox{ padding: 28px 20px 30px; }
  .-author .p-authorBox__l{ column-gap: 18px; }
  .-author .p-authorBox__l .avatar{ width: 84px; height: 84px; }
  .-author .p-authorBox__name{ font-size: 17px; }
}

/* ============================================================
   著者ボックス（記事ページ＋著者ページ 共通 / CSSのみ / SWELL）
   ・HTML構造はそのまま、外観→カスタマイズ→追加CSS に貼るだけ
   ・:is(.single, .author) … 記事ページと著者ページの両方を対象にする指定
============================================================ */

:root{
  --ac-main:   #0c3388;   /* メインカラー */
  --ac-accent: #3a6fd8;   /* アクセント */
  --ac-line:   #eef0f5;   /* 枠線 */
}

/* カード本体 */
:is(.single, .author) .p-authorBox{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: 0;
  margin-right: auto;
  padding: 34px 36px 38px;
  background: #fff;
  border: 1px solid var(--ac-line);
  box-shadow: 0 18px 20px -20px rgba(12,51,136,.25);
  overflow: hidden;
}
/* カード下のアクセント線 */
:is(.single, .author) .p-authorBox::before{
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ac-main), var(--ac-accent));
}

/* 上段：アバター(左) ＋ 〔肩書き→名前〕(右) をグリッドで配置 */
:is(.single, .author) .p-authorBox__l{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "avatar position"
    "avatar name";
  align-items: center;
  column-gap: 26px;
  width: 100%;
  margin: 0;
  text-align: left;
}
:is(.single, .author) .p-authorBox__l .avatar{
  grid-area: avatar;
  width: 96px;
  height: 96px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 0 0 2px var(--ac-main);   /* 紺リングのみ */
}
/* 肩書き（名前の上・小さめ）＝SWELLの役職欄をそのまま表示 */
:is(.single, .author) .p-authorBox__position{
  grid-area: position;
  align-self: end;
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.3;
  color: var(--ac-main);
}
/* 名前 */
:is(.single, .author) .p-authorBox__name{
  grid-area: name;
  align-self: start;
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
  color: #1a1a1a;
}

/* 下段：自己紹介文 ＋ SNS */
:is(.single, .author) .p-authorBox__r{
  width: 100%;
  margin-top: 20px;
  border: none;           /* SWELL標準の縦区切り線を消す */
  padding-left: 0;
}
:is(.single, .author) .p-authorBox__r::before{
  content: none;
  display: none;
}
:is(.single, .author) .p-authorBox__desc{
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.9;
  color: #555;
}

/* SNS・リンクアイコン */
:is(.single, .author) .p-authorBox__iconList{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
}
:is(.single, .author) .p-authorBox__iconList .c-iconList__item{ margin: 0; }
:is(.single, .author) .p-authorBox__iconList .c-iconList__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--ac-main);
  background: #fff;
  border: 1.5px solid #d8deea;
  border-radius: 50%;
  transition: transform .25s ease, background .25s ease,
              color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
:is(.single, .author) .p-authorBox__iconList .c-iconList__link:hover{
  color: #fff;
  background: var(--ac-main);
  border-color: var(--ac-main);
  transform: translateY(-3px);
  box-shadow: 0 8px 16px -6px rgba(12,51,136,.5);
}

/* スマホ微調整 */
@media (max-width: 599px){
  :is(.single, .author) .p-authorBox{ padding: 28px 20px 30px; }
  :is(.single, .author) .p-authorBox__l{ column-gap: 18px; }
  :is(.single, .author) .p-authorBox__l .avatar{ width: 84px; height: 84px; }
  :is(.single, .author) .p-authorBox__name{ font-size: 17px; }
}

/* ===== メルマガCTAボタン：色・影・ホバー演出（完成版） ===== */
.post_content .swell-block-button.is-style-btn_normal .swell-block-button__link {
  position: relative;
  overflow: hidden;
  background: var(--accent);
  padding: 1.1em 2.4em;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
  will-change: transform;
}

.post_content .swell-block-button.is-style-btn_normal .swell-block-button__link::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
}

.post_content .swell-block-button.is-style-btn_normal .swell-block-button__link:hover {
  background: var(--t-blue);
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(12, 51, 136, 0.35) !important;
  filter: brightness(1.05);
}

.post_content .swell-block-button.is-style-btn_normal .swell-block-button__link:hover::after {
  animation: melmaga-shine 0.9s ease forwards;
}

@keyframes melmaga-shine {
  0% {
    left: -120%;
  }
  100% {
    left: 130%;
  }
}

/* タッチ端末では浮き上がりを無効化（スマホ・タブレット対応） */
@media (hover: none) {
  .post_content .swell-block-button.is-style-btn_normal .swell-block-button__link:hover {
    background: var(--accent);
    transform: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    filter: none;
  }
}

/* ===================================
    通常ブログのデザインここまで 
=================================== */

/* ===================================
    サイドバーのデザイン 
=================================== */

/* ===== サイドバー全体（sticky） ===== */
.page-sidebar {
  position: sticky;
  top: 72px; /* ヘッダー高さに合わせて調整 */
  align-self: start;
}

.w-fixSide {
	margin-top: 0px !important;  /* サイドバーのトップの余白 */
	padding-bottom: 30px; /* サイドバーのアンダーの余白 */
}

/* ===== ウィジェット共通 ===== */
.sw {
  background: var(--base);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.sw:last-child {
  margin-bottom: 0;
}
.sw li {
	font-size:14px;
	padding: 5px 0;
}
.sw li:not(:last-child) {
	border-bottom: 1px dotted #333;
}
/* ウィジェットヘッダー */
.sw-head {
  background: var(--t-blue) !important;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
  letter-spacing: .06em;
}
/* ウィジェット本文 */
.sw-body {
  padding: 14px 16px;
}
.sw-body p {
  font-size: 14px;
  color: var(--text-sub);
  line-height: 1.7;
}
.sw-body.mail-qr p {
  font-size: 14px;
  color: var(--text-sub);
  line-height: 1.7;
  text-align: center;
}
/* ===== メニューリスト ===== */
.sw-menu li a {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text);
  transition: color .2s;
}
.sw-menu li:last-child a {
  border-bottom: none;
}
.sw-menu li a:hover {
  color: var(--main);
}
.sw-menu li a svg {
  color: var(--main);
  flex-shrink: 0;
}
.sw-body p img {
  width: 70%;
  height: 70%;
}

/* ===== イベントリスト ===== */
.ev-item {
  border-bottom: 1px solid var(--border);
  padding: 9px 0;
  font-size: 12px;
}
.ev-item:last-child {
  border-bottom: none;
}
.ev-date {
  font-size: 11px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 2px;
}

/* ===== SNSボタン ===== */
.sns-row {
  display: flex;
  gap: 8px;
}
.sns-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--main-pale);
  border-radius: 4px;
  padding: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--main);
  text-decoration: none;
  transition: background .2s;
}
.sns-btn:hover {
  background: var(--main);
  color: #fff;
}

/* ===== レスポンシブ ===== */
/* タブレット */
@media (max-width: 1024px) {
  :root { --sidebar-w: 220px; }
}
/* スマホ横・中型タブレット */
@media (max-width: 840px) {
  .page-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .sw { margin-bottom: 0; }
}
/* スマホ縦 */
@media (max-width: 600px) {
  .page-sidebar {
    grid-template-columns: 1fr;
  }
}
/* 最近の投稿ウィジェット（最新のイベント） - SWELL対応 */
#recent-posts-2.c-widget,
#recent-posts-3.c-widget,
.widget_recent_entries {
  background: #ffffff !important;
  border: 1px solid #dde3ef !important;
  /* border-radius: 8px !important; */
  overflow: visible !important;
  margin-bottom: 0px !important;
  box-shadow: 0 4px 24px rgba(12,51,136,.10) !important;
  flex: 0 0 auto !important;
}
/* タイトル */
#recent-posts-2 .c-widget__title,
#recent-posts-3 .c-widget__title,
.widget_recent_entries .c-widget__title {
  display: block !important;
  background: var(--t-blue) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 10px 16px !important;
  letter-spacing: .06em !important;
  margin: 0 !important;
  border: none !important;
  overflow: visible !important;
  /* border-radius: 8px 8px 0 0 !important; */
}
/* タイトルのSWELL装飾（下線）を非表示 */
#recent-posts-2 .c-widget__title::before,
#recent-posts-2 .c-widget__title::after,
#recent-posts-3 .c-widget__title::before,
#recent-posts-3 .c-widget__title::after,
.widget_recent_entries .c-widget__title::before,
.widget_recent_entries .c-widget__title::after {
  display: none !important;
  content: none !important;
}
/* リスト */
#recent-posts-2 ul,
#recent-posts-3 ul,
.widget_recent_entries ul {
  display: block !important;
  padding: 8px 16px !important;
  margin: 0 !important;
  list-style: none !important;
}
#recent-posts-2 ul li,
#recent-posts-3 ul li,
.widget_recent_entries ul li {
  border-bottom: 1px solid #dde3ef !important;
  padding: 8px 0 !important;
  display: list-item !important;
}
#recent-posts-2 ul li:last-child,
#recent-posts-3 ul li:last-child,
.widget_recent_entries ul li:last-child {
  border-bottom: none !important;
}
#recent-posts-2 ul li a,
#recent-posts-3 ul li a,
.widget_recent_entries ul li a {
  font-size: 14px !important;
  color: #1a1a1a !important;
  text-decoration: none !important;
  line-height: 1.5 !important;
  display: block !important;
}
#recent-posts-2 ul li a:hover,
#recent-posts-3 ul li a:hover,
.widget_recent_entries ul li a:hover {
  color: #0c3388 !important;
}

/* ==========================================================================
   SWELLサイドバー（レスポンシブ共通）
   ========================================================================== */

/* 1. ウィジェット全体の箱（白いボックス、枠線、角丸、影） */
#sidebar .w-box,
#sidebar-sp .w-box,
aside#sidebar .widget {
  background-color: #ffffff !important;
  border: 1px solid #dde3ef !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 24px rgba(12, 51, 136, 0.10) !important;
  margin-bottom: 24px !important;
  overflow: hidden !important; /* これでタイトルの上側の角丸を整えます */
  padding: 0 !important; /* 内側の余白を一度リセット */
}

/* 2. ウィジェットタイトル（青背景、白文字、SWELL標準の線をリセット） */
#sidebar .w-box .widget-title,
#sidebar-sp .w-box .widget-title,
aside#sidebar .widget-title,
.l-sidebar .widget-title {
  background-color: #0c3388 !important; /* メインの青 */
  color: #ffffff !important;            /* 文字は白 */
  padding: 12px 16px !important;       /* 内側の余白 */
  font-size: 14px !important;          /* 文字サイズ */
  font-weight: 700 !important;
  margin: 0 0 16px 0 !important;       /* 下側の中身との間にだけ16pxの余白を作る */
  letter-spacing: 0.06em !important;
  border: none !important;             /* 標準の枠線を消す */
  position: relative !important;
}

/* SWELL標準のタイトルの装飾（2色線、下線、アイコンなど）を完全に非表示 */
#sidebar .w-box .widget-title::before,
#sidebar .w-box .widget-title::after,
#sidebar-sp .w-box .widget-title::before,
#sidebar-sp .w-box .widget-title::after,
aside#sidebar .widget-title::before,
aside#sidebar .widget-title::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* 3. 中身のテキストやテキストウィジェットの調整（白紙化を防ぐ） */
#sidebar .w-box p,
#sidebar-sp .w-box p,
aside#sidebar .widget p {
  font-size: 13px !important;
  color: #555555 !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  padding: 0 16px 16px 16px !important; /* 左右と下側にだけ余白を割り振る */
}

/* ============================================================
  サイドバーのサイズ調整・メインコンテンツの横幅調整
   ============================================================ */

@media (min-width: 960px) {
  .-sidebar-on #sidebar {
    width: 250px !important;
    margin-left: 50px; /* 好みで調整 */
  }
  .-sidebar-on .l-mainContent {
    flex: 1;
  }
}

/* ============================================================
   アニメーションタイムライン 専用CSS
   貼り場所：外観 → カスタマイズ → 追加CSS
   ============================================================ */

/* ── 2カラムグリッド ── */
.my-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin: 60px 0;
}

/* ── タイムライン外枠 ── */
.my-timeline {
  position: relative;
  padding-left: 36px;
}

/* ── グレーのトラック（背景の薄い縦線） ── */
.my-tl-track {
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: #dce8f5;
  border-radius: 1px;
}

/* ── 伸びる色付きライン（JSでheightを更新） ── */
.my-tl-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  border-radius: 1px;
  background: linear-gradient(
    to bottom,
    #dce8f5  0%,
    #B5D4F4 20%,
    #85B7EB 45%,
    #378ADD 70%,
    #185FA5 88%,
    #0C447C 100%
  );
  transition: height 0.08s linear;
}

/* ── 各年代アイテム ── */
.my-tl-item {
  position: relative;
  padding-bottom: 40px;
}

.my-tl-item:last-child {
  padding-bottom: 0;
}

/* ── ドット（初期は scale(0)） ── */
.my-tl-dot {
  position: absolute;
  left: -36px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2.5px solid;
  background: #fff;
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 3;
}

/* ドットが画面内に入ったらポップ */
.my-tl-dot.pop {
  transform: scale(1);
}

/* ドット色（年代別） */
.my-tl-dot.age10 { border-color: #B5D4F4; background: #E6F1FB; }
.my-tl-dot.age20 { border-color: #85B7EB; background: #dce8f5; }
.my-tl-dot.age30 { border-color: #378ADD; background: #B5D4F4; }
.my-tl-dot.age40 { border-color: #185FA5; background: #85B7EB; }
.my-tl-dot.age50 { border-color: #0C447C; background: #378ADD; }
.my-tl-dot.age60 { border-color: #042C53; background: #185FA5; }

/* ドット出現時のリップルエフェクト */
.my-tl-dot.pulse::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  animation: my-tl-ripple 0.6s ease-out forwards;
}

@keyframes my-tl-ripple {
  0%   { opacity: 0.6; transform: scale(0.8); }
  100% { opacity: 0;   transform: scale(1.9); }
}

/* ── コンテンツ（初期は非表示、スクロールで出現） ── */
.my-tl-content {
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.my-tl-content.show {
  opacity: 1;
  transform: translateX(0);
}

/* ── 年代ラベル ── */
.my-tl-age {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #888;
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* ── テキストプレースホルダーエリア ── */
.my-tl-text-area {
  background: #f0f5fb;
  border: 1px solid #dce8f5;
  border-left: 3px solid #85B7EB;
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #4a4a4a;
  line-height: 1.8;
}

/* ── 吹き出し ── */
.my-tl-bubble {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0 8px 8px 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: #4a4a4a;
  line-height: 1.7;
  margin-bottom: 8px;
  position: relative;
}

.my-tl-bubble::before {
  content: '';
  position: absolute;
  left: 0;
  top: -8px;
  border: 4px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

/* ── ステータスバッジ ── */
.my-tl-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 2px;
  letter-spacing: 0.04em;
}

.my-tl-status.green { background: #EAF3DE; color: #3B6D11; }
.my-tl-status.amber { background: #FAEEDA; color: #854F0B; }
.my-tl-status.red   { background: #FCEBEB; color: #A32D2D; }

/* ── グラフ（sticky） ── */
.my-graph {
  position: sticky;
  top: 80px;
}

.my-graph-inner {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.my-graph-title {
  font-size: 13px;
  font-weight: 600;
  color: #1a2e42;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.my-graph-legend {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.my-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #4a4a4a;
}

.my-legend-line {
  display: inline-block;
  width: 20px;
  height: 2px;
  border-radius: 1px;
}

.my-legend-line.blue { background: #B5D4F4; }
.my-legend-line.red  { background: #F5C4B3; }

.my-graph-wrap {
  position: relative;
  height: 220px;
  margin: 0 0 10px 20px;
}

.my-graph-axis-y {
  position: absolute;
  left: 0; top: 0; bottom: 24px;
  width: 1px;
  background: rgba(0, 0, 0, 0.15);
}

.my-graph-axis-x {
  position: absolute;
  left: 0; right: 0; bottom: 24px;
  height: 1px;
  background: rgba(0, 0, 0, 0.15);
}

.my-graph-svg {
  position: absolute;
  left: 1px; top: 0;
  right: 0; bottom: 24px;
  width: calc(100% - 1px);
  height: calc(100% - 24px);
}

.my-graph-x-labels {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #888;
}

.my-data-notes {
  background: #f9f7f3;
  border-left: 3px solid #b8944a;
  padding: 10px 12px;
  margin-top: 14px;
}

.my-data-notes p {
  font-size: 10px;
  color: #888;
  line-height: 1.7;
  margin: 0;
}

.my-data-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.my-data-badge {
  font-size: 10px;
  padding: 3px 10px;
  background: #0d1b2a;
  color: #f0deb4;
  border-radius: 2px;
  letter-spacing: 0.04em;
}

/* ── スマホ対応 ── */
@media (max-width: 768px) {
  .my-section-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .my-graph {
    position: static;
  }
}

/* 電話番号メニュー項目のスタイル調整 */
.c-gnav > .menu-item > a[href^="tel"]::after {
  display: none !important;
}

.c-gnav > .menu-item > a[href^="tel"] span {
  font-size: 20px !important;
  font-weight: 700 !important;
}

/* グローバルメニュー全体を中央寄せ */
.l-header__gnav .c-gnav {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* メニュー項目 */
.l-header__gnav .c-gnav > li {
  position: relative;
  margin: 0 18px;
}

/* 縦線 */
.l-header__gnav .c-gnav > li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: #000;
}

/* 先頭メニューの左側にも縦線 */
.l-header__gnav .c-gnav > li:first-child::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: #000;
}

/* リンク文字 */
.l-header__gnav .c-gnav > li > a {
  padding: 18px 0;
  font-size: 14px;
  font-weight: 500;
}

/* ==================================================================

  お問い合わせフォームの確認画面デザイン（確認画面（Confirm Plus））
  Contact Form 7を使用。
  
================================================================== */
/* 全体をセンター寄せ */
#wpcf7cpcnf {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* 確認テーブル全体をカード化 */
#wpcf7cpcnf table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 28px;
  text-align: left;
}

/* 1項目＝1行として区切り線を入れる */
#wpcf7cpcnf table tr {
  border-bottom: 1px solid var(--border);
}

#wpcf7cpcnf table tr:last-child {
  border-bottom: none;
}

/* 項目名（左） */
#wpcf7cpcnf table th {
  width: 32%;
  padding: 18px 20px;
  background: var(--bg-light);
  border-right: 1px solid var(--border);
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  vertical-align: top;
}

/* 入力値（右） */
#wpcf7cpcnf table td {
  padding: 18px 20px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
  text-align: left;
  vertical-align: top;
}

/* th/td 内の p の余白リセット */
#wpcf7cpcnf table th p,
#wpcf7cpcnf table td p {
  margin: 0;
}

/* ===== ボタン（パソコン）===== */

/* ボタン並びをセンター寄せ */
#wpcf7cpcnf .wpcf7cp-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

/* 修正・送信を完全に同じ大きさに固定（強い指定で確実に上書き） */
#wpcf7cpcnf .wpcf7cp-btns button.wpcf7cp-cfm-edit-btn,
#wpcf7cpcnf .wpcf7cp-btns button.wpcf7cp-cfm-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 210px;
  min-width: 0;
  height: 54px;
  padding: 0 20px;
  border-style: solid;
  border-width: 1.5px;
  border-radius: 50px;
  box-sizing: border-box;
  font-family: inherit;
  color: var(--base);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}

/* 修正ボタン（白地＋枠線） */
#wpcf7cpcnf .wpcf7cp-cfm-edit-btn {
  background: var(--base) !important;
  border-color: var(--navy) !important;
  color: var(--text) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}

#wpcf7cpcnf .wpcf7cp-cfm-edit-btn:hover {
  background: var(--navy) !important;
  color: var(--base) !important;
  transform: translateY(-2px);
}

/* この内容で送信（accentのメインボタン） */
#wpcf7cpcnf .wpcf7cp-cfm-submit-btn {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--base) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

#wpcf7cpcnf .wpcf7cp-cfm-submit-btn:hover {
  background: var(--t-blue) !important;
  border-color: var(--t-blue) !important;
  color: var(--base) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
/* ===== スマホ対応（767px以下）===== */
@media (max-width: 767px) {

  /* 確認全体：余白は最小限・左寄せに */
  #wpcf7cpcnf {
    padding: 0;
    text-align: left;
  }

  /* 表まわりの線・枠・影・背景・余白をリセット */
  #wpcf7cpcnf table,
  #wpcf7cpcnf table tbody,
  #wpcf7cpcnf table tr,
  #wpcf7cpcnf table th,
  #wpcf7cpcnf table td {
    display: block;
    width: auto;
    margin: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    box-sizing: border-box;
    text-align: left;
  }

  #wpcf7cpcnf table {
    border-radius: 0;
    overflow: visible;
    margin-bottom: 24px;
  }

  /* 項目どうしは余白で区切る */
  #wpcf7cpcnf table tr {
    margin-bottom: 16px;
  }

  #wpcf7cpcnf table tr:last-child {
    margin-bottom: 0;
  }

  /* 項目名：文字ぶんだけの帯を左端に置く */
  #wpcf7cpcnf table th {
    width: fit-content;
    max-width: 100%;
    margin: 0 0 6px;
    padding: 5px 12px;
    background: var(--bg-light);
    color: var(--navy);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
  }

  /* 入力値：帯の左端とそろえる */
  #wpcf7cpcnf table td {
    padding: 0;
    color: var(--text);
    font-size: 15px;
    line-height: 1.7;
  }

  /* th/td 内の p の余白をリセット（名前が下気味になる対策） */
  #wpcf7cpcnf table th p,
  #wpcf7cpcnf table td p {
    margin: 0;
    padding: 0;
    line-height: inherit;
    font-size: var(--swl-fz--content);
  }

  /* ボタン：縦並び・中央 */
  #wpcf7cpcnf .wpcf7cp-btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
  }

  /* 修正・送信を完全に同じ大きさに固定 */
  #wpcf7cpcnf .wpcf7cp-btns button.wpcf7cp-cfm-edit-btn,
  #wpcf7cpcnf .wpcf7cp-btns button.wpcf7cp-cfm-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    min-width: 0;
    height: 54px;
    padding: 0 16px;
    border-style: solid;
    border-width: 1.5px;
    border-radius: 50px;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  /* th/td を縦積みにする */
  #wpcf7cpcnf table tr {
    display: block;
  }

  #wpcf7cpcnf table th,
  #wpcf7cpcnf table td {
    display: block;
    width: 100%;
    border-right: none;
  }

  #wpcf7cpcnf table th {
    padding: 15px 0px 15px 15px;
    line-height: 1;
  }

  #wpcf7cpcnf table td {
    padding: 6px 16px 16px;
  }

  /* ボタンを縦並び＋全幅に */
  #wpcf7cpcnf .wpcf7cp-btns {
    flex-direction: column;
    gap: 12px;
  }

  #wpcf7cpcnf .wpcf7cp-btns button {
    width: 100%;
    padding: 16px 0;
  }
}

/* チェックボックスのfieldset（入力フォーム側） */
.cf7-field .cf7-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.cf7-field .cf7-legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 10px;
  font-size: inherit;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .02em;
}

/* 送信ボタンを中央に固定：スピナーを場所取りから外す */
.cf7-submit-wrap {
  position: relative;
}

.cf7-submit-wrap .wpcf7-spinner {
  position: absolute;
  margin: 0;
}

/****************************************************/
/*========= お問い合わせフォーム　ここまで =========*/
/****************************************************/

/********************************************/
/*========= フッターのデザイン指定 =========*/
/********************************************/

.swell-block-button a {
    box-shadow: none !important;
    text-shadow: none !important;
}

.l-footer {
	background: #0c3388;
	color: #FFF;
	font-size: 12px;
}

.l-footer .bold {
	font-weight: bold;
	padding-bottom:10px;
}

/* ===== 上部に戻るボタン ===== */
@media (min-width: 960px) {
  .hov-bg-main:hover {
    background-color:#48b0d2 !important;
  }
}

.c-fixBtn {
	border: 1px solid #48b0d2 !important;
}
/********************************************/
/*============ フッターのここまで ============*/
/********************************************/

/* =====================================================
   ここからパララックス
===================================================== */

/* =====================================================
   MAIN VISUAL（構造・演出・テキスト すべてここに集約）
   ※ 子テーマ style.css の MAIN VISUAL 部分は削除すること
===================================================== */

#main_visual {
  /* ヘッダーの高さ（JSが自動で入れる） */
  --mv-headh: 72px;

  /* MVの高さ：画面いっぱい − ヘッダー分 */
  --mvh: calc(100vh - var(--mv-headh));

  /* 最初の2行を中央に置くための余白（JSが自動で入れる） */
  --mv-group-pad: calc(var(--mvh) * 0.4);

  /* 画像の拡大率（JSの IMG_SCALE と必ず同じ値に） */
  --mv-img-scale: 1.10;

  /* 最初の2行の上下位置（＋で下へ、−で上へ） */
  --mv-catch-shift: 0px;

  /* 最後の3行の上下位置（＋で下へ、−で上へ） */
  --mv-last-shift: 0px;

  /* スワイプ画像の速さ */
  --mv-veil-dur-in: 1.2s;
  --mv-veil-dur-out: 0.8s;
  --mv-veil-ease: cubic-bezier(.22, 1, .36, 1);

  /* テキストのフェードイン */
  --mv-text-dur: 1.2s;
  --mv-text-ease: cubic-bezier(.16, .84, .44, 1);

  position: relative;
  overflow: hidden;
}

/* タブレット・スマホ */
@media screen and (max-width: 959px) {
  #main_visual {
    --mv-headh: 60px;
    --mvh: calc(100vh - var(--mv-headh));
    --mvh: calc(100dvh - var(--mv-headh));
  }
}

@media screen and (max-width: 959px) {
  #main_visual .p-mainVisual__img {
    object-position: center 30%;
  }
}

/* -----------------------------------------
   ② 土台
----------------------------------------- */
#main_visual .p-mainVisual__inner {
  position: relative;
  overflow: hidden;
  height: var(--mvh);
}

#main_visual .p-mainVisual__imgLayer,
#main_visual .p-mainVisual__img {
  pointer-events: none;
}

/* 背景画像とスワイプ画像：拡大して動く“のりしろ”を確保 */
#main_visual .p-mainVisual__img,
#main_visual .mv-veil__img {
  transform: scale(var(--mv-img-scale));
  transform-origin: center;
  will-change: transform;
  backface-visibility: hidden;
}

/* -----------------------------------------
   ③ 文字レイヤー＝MV高さで固定した「スクロール窓」
----------------------------------------- */
#main_visual .p-mainVisual__textLayer {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--container_size, 1200px);
  height: 100%;
  box-sizing: border-box;
  display: block;
  align-items: initial;
  justify-content: initial;
  flex-direction: initial;
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: auto;
  scrollbar-width: none;
  z-index: 5;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 28px), transparent 100%);
}

#main_visual .p-mainVisual__textLayer::-webkit-scrollbar {
  display: none;
}

/* ③-2 MV読了後：MVは操作を受け取らない＝ページ本体が動く */
#main_visual.is-mvDone .p-mainVisual__textLayer {
  pointer-events: none;
}

/* リンク・ボタンだけは押せるように戻す */
#main_visual.is-mvDone .p-mainVisual__textLayer a,
#main_visual.is-mvDone .p-mainVisual__textLayer button {
  pointer-events: auto;
}

/* SWELL標準の「Scroll」ボタンを最前面へ（確実な脱出口として） */
#main_visual .p-mainVisual__scroll {
  z-index: 20;
  pointer-events: auto;
}

/* -----------------------------------------
   ④ スワイプ画像レイヤー
   きっかけ＝スクロール位置／動き＝時間
----------------------------------------- */
#main_visual .mv-veil {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  will-change: clip-path;
  transition-property: clip-path, -webkit-clip-path;
  transition-timing-function: var(--mv-veil-ease);
  transition-duration: var(--mv-veil-dur-out);
}

#main_visual .mv-veil__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 初期状態：左→右に開く */
#main_visual .mv-veil--ltr {
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
}

/* 初期状態：右→左に開く */
#main_visual .mv-veil--rtl {
  clip-path: inset(0 0 0 100%);
  -webkit-clip-path: inset(0 0 0 100%);
}

/* 発火後：全面表示（出るときはゆったり） */
#main_visual .mv-veil.is-show {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
  transition-duration: var(--mv-veil-dur-in);
}

/* -----------------------------------------
   ⑤ 1行目＋2行目を「ひとかたまり」で上下中央に
----------------------------------------- */
#main_visual .p-mainVisual__slideTitle {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
  margin: 0;
  padding-top: calc(var(--mv-group-pad) + var(--mv-catch-shift));
}

#main_visual .mv-catch {
  font-size: clamp(22px, 3.4vw, 44px);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.4;
  margin: 0;
}

/* ⑥ 2行目：中央のすぐ下 */
#main_visual .mv-name {
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.6;
  margin: 18px 0 0;
}

/* ⑦ フェードイン（1行目・2行目 共通） */
@keyframes mvFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#main_visual .mv-catch,
#main_visual .mv-name {
  opacity: 0;
  animation: mvFadeIn var(--mv-text-dur) var(--mv-text-ease) forwards;
}

#main_visual .mv-catch {
  animation-delay: .3s;
}

#main_visual .mv-name {
  animation-delay: .9s;
}

/* -----------------------------------------
   ⑧ 3行のテキストを順に表示
----------------------------------------- */
#main_visual .mv-lead1 .mv-line {
  display: block;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
}

#main_visual .mv-lead1 .mv-line.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* -----------------------------------------
   ⑨ 各ブロックの余白・文字サイズ
----------------------------------------- */
#main_visual .mv-lead1 {
  margin-top: calc(var(--mvh) * 0.5 - -250px);
}

#main_visual .mv-lead1,
#main_visual .mv-lead2,
#main_visual .mv-lead3,
#main_visual .mv-lead4 {
  padding-bottom: 500px;
}

#main_visual .mv-lead3, .mv-lead4 {
	line-height: 3.5;
}

#main_visual .mv-lead5 {
  padding-bottom: 300px;
}

#main_visual .mv-lead2 {
  font-size: clamp(18px, 2vw, 32px);
}

#main_visual .mv-lead2-big {
  font-weight: bold;
  font-size: clamp(24px, 3.4vw, 46px);
}


/* -----------------------------------------
   ⑩ 最終ブロック（.mv-lead6）を上下中央に
----------------------------------------- */
#main_visual .mv-lead6 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: var(--mvh);
  margin: 0;
  padding: 0 5%;
  padding-bottom: 0;
  box-sizing: border-box;
  text-align: center;
  transform: translateY(var(--mv-last-shift));
}

/* 先頭の空 br を無効化（上下ズレ防止） */
#main_visual .mv-lead6 > br:first-child {
  display: none;
}

@media screen and (max-width: 959px) {
  #main_visual .mv-lead6 {
    padding: 0 6%;
    padding-bottom: 0;
  }
}

@media screen and (max-width: 599px) {
  #main_visual .mv-lead6 {
    padding: 0 7%;
    padding-bottom: 0;
    line-height: 2;
  }
}

/* -----------------------------------------
   ⑪ ボタンが横に伸びないように
----------------------------------------- */
#main_visual .p-mainVisual__textLayer .c-mvBtn {
  display: flex;
  justify-content: center;
}

#main_visual .p-mainVisual__textLayer .c-mvBtn__btn {
  display: inline-flex;
  width: auto;
  max-width: 100%;
}

/* -----------------------------------------
   ⑫ アニメーション苦手設定の人への配慮（全部まとめて）
----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #main_visual .mv-catch,
  #main_visual .mv-name {
    opacity: 1;
    animation: none;
  }

  #main_visual .mv-lead1 .mv-line {
    opacity: 1;
    transform: none;
    transition: none;
  }

  #main_visual .mv-veil {
    transition: none;
  }

  #main_visual .mv-veil--ltr,
  #main_visual .mv-veil--rtl {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
  }
}

/* =====================================================
   .mv-lead5（MISSION / 見出し / 本文3行）
   ※ JSが各行に .js-fade を付けたときだけ非表示になる
===================================================== */

/* ▼ 調整用の変数 ------------------------------------ */
.mv-lead5 {
  --l5-lh: 0.4;        /* 本文の行間（小さいほど詰まる） */
  --l5-gap: 0em;       /* 行と行のあいだの追加余白 */
  --l5-dur: 1.1s;      /* フェードにかかる時間（大きいほどゆっくり） */
  --l5-delay: 0s;      /* 発火してから出るまでのタメ */
  --l5-move: 30px;     /* 下からの移動量 */
}
/* --------------------------------------------------- */

/* --- MISSION（ラベル）＋ 前後の線 --- */
.mv-lead5 .mv-cap5 {
  /* 調整用 */
  --cap5-line-w: 20px;   /* 線の長さ（PC） */
  --cap5-line-h: 2px;    /* 線の太さ */
  --cap5-gap: 12px;      /* 文字と線のすき間 */

  display: flex;
  align-items: center;
  justify-content: center;  /* 中央寄せにしたい場合は center */
  gap: var(--cap5-gap);
  letter-spacing: 0.2em;
  font-size: clamp(12px, 1.2vw, 14px);
  opacity: 0.85;
  line-height: 1.4;
}

.mv-lead5 .mv-cap5::before,
.mv-lead5 .mv-cap5::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: var(--cap5-line-w);
  height: var(--cap5-line-h);
  background: #FFF;
  border-radius: 1px;
}

/* --- 見出し行 --- */
.mv-lead5 .mv-head5 {
  display: block;
  font-weight: bold;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.5;
  margin-top: 0.6em;
}

/* --- 本文の各行 --- */
.mv-lead5 .mv-l5 {
  display: block;
  line-height: var(--l5-lh);
}

/* 見出しの直後にくる本文1行目だけ、上に余白 */
.mv-lead5 .mv-head5 + .mv-l5 {
  margin-top: 1.6em;
}

/* 2行目以降の行間の追加余白 */
.mv-lead5 .mv-l5 + .mv-l5 {
  margin-top: var(--l5-gap);
}

/* --- フェードイン（各行を個別に制御） --- */
.mv-lead5 .mv-l5.js-fade {
  opacity: 0;
  transform: translateY(var(--l5-move));
  transition:
    opacity var(--l5-dur) cubic-bezier(.22, 1, .36, 1),
    transform var(--l5-dur) cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--l5-delay);
  will-change: opacity, transform;
}

.mv-lead5 .mv-l5.js-fade.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* --- スマホ --- */
@media screen and (max-width: 599px) {
  .mv-lead5 {
    --l5-lh: 1.6;
    --l5-move: 18px;
  }

  .mv-lead5 .mv-head5 {
    line-height: 1.45;
  }

  .mv-lead5 .mv-head5 + .mv-l5 {
    margin-top: 1.2em;
  }
}

/* =====================================================
   MV最終ブロック（.mv-lead6）
   ブラウザ間の余白差を修正＋改行はspanで制御
===================================================== */
.mv-lead6 {
  /* ▼ 調整用 */
  --l6-gap: 0.6em;    /* 本文の行と行のすき間 */
  --l6-head-gap: 30px; /* 見出しと本文のすき間 */

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: var(--mvh);
  margin: 0;
  padding: 0 5%;
  padding-bottom: 300px;
  box-sizing: border-box;
  text-align: center;
}

/* flex内のbrはChrome/Edgeで高さを持つので全部無効化 */
.mv-lead6 br {
  display: none;
}

/* 見出し行 */
.mv-lead6 .mv-head6 {
  display: block;
  font-weight: 900;
  font-size: clamp(22px, 3.4vw, 44px);
  line-height: 1.5;
  margin: 0 0 var(--l6-head-gap);
  padding-bottom: 0;
  letter-spacing: .04em;
  font-family: 'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
}

/* 本文の各行（★これが改行の役割） */
.mv-lead6 .mv-l6 {
  display: block;
  line-height: 1.9;
}

/* 2行目以降のすき間 */
.mv-lead6 .mv-l6 + .mv-l6 {
  margin-top: var(--l6-gap);
}

/* タブレット */
@media screen and (max-width: 959px) {
  .mv-lead6 {
    --l6-head-gap: 24px;

    padding: 0 6%;
    padding-bottom: 300px;
  }
}

/* スマホ */
@media screen and (max-width: 599px) {
  .mv-lead6 {
    --l6-gap: 0.8em;
    --l6-head-gap: 20px;

    padding: 0 7%;
    padding-bottom: 300px;
  }

  .mv-lead6 .mv-l6 {
    line-height: 2;
  }
}

/* --- アニメーション苦手設定の人には動かさない --- */
@media (prefers-reduced-motion: reduce) {
  .mv-lead5 .mv-l5.js-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =====================================================
   「私たちについて」 全画面MV（TOP流の内側スクロール＋mvx演出）
   ・テキストは“中身として”縦に流れる（途中で切れない）
   ・写真A→B・明度はスクロール進行度で制御
   ・最後のメッセージだけ中央固定（下から登場）→ コンテンツへ受け渡し
   ※ JSが body に .mvx-on を付けたときだけ有効
===================================================== */

/* --- 調整ノブ --- */
body.mvx-on {
  --mvx-headh: 72px;
  --mvx-scale: 1.10;

  /* スワイプ（写真B出現）の速さ＝時間ベース */
  --mvx-veil-dur-in: 1.2s;
  --mvx-veil-dur-out: 0.8s;
  --mvx-veil-ease: cubic-bezier(.22, 1, .36, 1);

  /* テキストのフェードイン */
  --mvx-text-dur: 1.1s;
  --mvx-text-ease: cubic-bezier(.16, .84, .44, 1);

  /* 段落まわりの余白（gapで均等に） */
  --mvx-para-gap: 1.6em;
  --mvx-em-extra: 0.7em;

  /* 最後のメッセージ用の行間（★詰め） */
  --mvx-last-gap: 0.6em;

  /* 各テキストブロックの前後余白（＝流れてくる間隔） */
  --mvx-block-space: 60vh;
}

/* --- MV中は上部バナー（タイトル帯）を隠す --- */
body.mvx-on #top_title_area {
  display: none;
}

/* --- MVステージ：ヘッダー以下を全画面（ここは動かない） --- */
body.mvx-on .mvx {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--mvx-headh));
  overflow: hidden;
  background: #000;
  z-index: 0;
}

/* --- 写真レイヤー共通 --- */
body.mvx-on .mvx__layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* --- 実際の画像（拡大しておき、余白でパララックス） --- */
body.mvx-on .mvx__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(var(--mvx-scale));
  transform-origin: center;
  will-change: transform, filter;
  backface-visibility: hidden;
}

/* 写真A（下） */
body.mvx-on .mvx__layer--a {
  z-index: 1;
}

/* 写真B（上）：時間ベースでスワイプ表示 */
body.mvx-on .mvx__layer--b {
  z-index: 2;
  will-change: clip-path;
  transition-property: clip-path, -webkit-clip-path;
  transition-timing-function: var(--mvx-veil-ease);
  transition-duration: var(--mvx-veil-dur-out);
}

body.mvx-on .mvx__layer--b.mvx--ltr {
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
}

body.mvx-on .mvx__layer--b.mvx--rtl {
  clip-path: inset(0 0 0 100%);
  -webkit-clip-path: inset(0 0 0 100%);
}

body.mvx-on .mvx__layer--b.is-show {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
  transition-duration: var(--mvx-veil-dur-in);
}

/* =====================================================
   内側スクロールの窓（TOP流）＝この中身が縦に流れる
   ★ overscroll-behavior:auto ＝下端でページ本体へ自然に渡す
===================================================== */
body.mvx-on .mvx__scroll {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

body.mvx-on .mvx__scroll::-webkit-scrollbar {
  display: none;
}

/* 流れる中身の各ブロック（画面中央に置きつつ、前後に余白で間隔） */
body.mvx-on .mvx__block {
  min-height: calc(100vh - var(--mvx-headh));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--mvx-block-space) 6%;
  box-sizing: border-box;
  row-gap: var(--mvx-para-gap);
}

/* ★ 1つ目（キャッチ）だけ：上下パディングを0にして完全中央に */
body.mvx-on .mvx__block--catch {
  padding-top: 0;
  padding-bottom: 0;
}

/* 最後のメッセージぶんの“送り”を作る空白（中央停止の余白確保） */
body.mvx-on .mvx__tail {
  height: calc((100vh - var(--mvx-headh)) * 1.2);
  pointer-events: none;
}

/* =====================================================
   最後のメッセージ：流れる列とは別の“固定レイヤー”で中央表示
   （下から登場／行間つめ）
===================================================== */
body.mvx-on .mvx__fixmsg {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6%;
  box-sizing: border-box;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
  row-gap: var(--mvx-last-gap);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

body.mvx-on .mvx__fixmsg .mvx__approach {
  line-height: 1.6;
}

body.mvx-on .mvx__fixmsg .mvx__approach--em {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.5;
}

/* 各行は改行の役目 */
body.mvx-on .mvx__line {
  display: block;
}

/* =====================================================
   キャッチ（1枚目・中央）
===================================================== */
body.mvx-on .mvx__catch {
  margin: 0;
  font-size: clamp(22px, 3.4vw, 44px);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.4;
}

body.mvx-on .mvx__lead {
  margin: 0;
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 2;
}

/* キャッチの初回フェードイン（TOP同様、最初だけ演出） */
@keyframes mvxFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.mvx-on .mvx__catch,
body.mvx-on .mvx__lead {
  opacity: 0;
  animation: mvxFadeUp var(--mvx-text-dur) var(--mvx-text-ease) forwards;
}

body.mvx-on .mvx__catch { animation-delay: .4s; }
body.mvx-on .mvx__lead  { animation-delay: 1.1s; }

/* =====================================================
   ラベル（横線）＋本文＋強調（APPROACH / PHILOSOPHY / 最後）
===================================================== */
body.mvx-on .mvx__cap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  letter-spacing: .2em;
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 600;
  opacity: .9;
  line-height: 1.4;
}

body.mvx-on .mvx__cap::before,
body.mvx-on .mvx__cap::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}

body.mvx-on .mvx__approach {
  margin: 0;
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 2.5;
}

body.mvx-on .mvx__approach--em {
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.7;
  margin-top: var(--mvx-em-extra);
  margin-bottom: var(--mvx-em-extra);
}

/* =====================================================
   各ブロックのフェードイン（TOP流：窓を基準にIntersectionObserver）
===================================================== */
body.mvx-on .mvx__block.js-fade {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--mvx-text-dur) var(--mvx-text-ease),
    transform var(--mvx-text-dur) var(--mvx-text-ease);
}

body.mvx-on .mvx__block.js-fade.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* キャッチのブロックはフェード制御しない（初回アニメを使う） */
body.mvx-on .mvx__block--catch.js-fade {
  opacity: 1;
  transform: none;
}

/* --- タブレット --- */
@media screen and (max-width: 959px) {
  body.mvx-on {
    --mvx-headh: 60px;
    --mvx-block-space: 48vh;
  }
}

/* --- スマホ --- */
@media screen and (max-width: 599px) {
  body.mvx-on {
    --mvx-headh: 56px;
    --mvx-block-space: 40vh;
    --mvx-para-gap: 1.3em;
    --mvx-em-extra: 0.5em;
    --mvx-last-gap: 0.5em;
  }

  body.mvx-on .mvx__approach {
    line-height: 1.9;
  }

  body.mvx-on .mvx__fixmsg .mvx__approach {
    line-height: 1.5;
  }
}

/* --- 動きを減らす設定の人への配慮 --- */
@media (prefers-reduced-motion: reduce) {
  body.mvx-on .mvx__catch,
  body.mvx-on .mvx__lead {
    opacity: 1;
    animation: none;
    transform: none;
  }

  body.mvx-on .mvx__block.js-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }

  body.mvx-on .mvx__layer--b {
    transition: none;
  }
}

/* ==========================================================
   aboutページ: MV構築前のちらつき（FOUC）を隠す目隠しカバー
   ※ page-id-12 は #body_wrap 側、mvx-on は body 側に付くため分けて指定
   ========================================================== */

/* 最初の描画から画面全体を覆う（カバーは #body_wrap 側） */
#body_wrap.page-id-12::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #071f55;
  pointer-events: none;
  /* JSが動かなくても必ず消えるよう、時間で自動フェードアウト（保険） */
  animation: mvxCoverOut 0.5s ease 0.4s forwards;
}

/* MV構築完了(mvx-on は body 側)後はカバーを消す */
body.mvx-on #body_wrap.page-id-12::before {
  animation: none;
  opacity: 0;
  visibility: hidden;
}

@keyframes mvxCoverOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}