:root {
    --color-primary: #006e87;
    --color-text: #333333;
    --color-white: #ffffff;
    --font-family-base: 'Noto Sans JP', sans-serif;
    --font-family-serif: "Noto serif JP", serif; /* 明朝体 */
    --content-width: 85%;
}

/* =================================================================
   Webフォントの定義 (@font-face)
================================================================= */
/* --- Impact --- */
@font-face {
  font-family: 'Impact Custom';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/Impact.woff2') format('woff2');
  font-display: swap;
}

/* =================================================================
   基本設定・リセット
================================================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-family-base);
    font-style: normal;
    color: var(--color-text);
    background-color: var(--color-white);
    line-height: 1.7;
    font-size: 16px;
    letter-spacing: .1em;
    overflow-x: hidden;
}

img { width: 100%; height: auto; vertical-align: bottom; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }

section {
    position: relative;
}

/* =================================================================
   ヘッダー
================================================================= */
.p-header {
    background-color: #b1ccd4;
    position: sticky;
    top: 0;
    z-index: 200;
}

.p-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    position: relative;
}

.p-header__logo a {
    color: var(--color-primary);
    text-decoration: none;
    font-family: "Noto Sans JP",sans-serif;
    font-weight: 900;
}

.p-header__affiliation {
    display: block;
    font-size: 10px;
}

.p-header__name {
    display: block;
    font-size: 26px;
    font-weight: bold;
    line-height: 1.2;
        font-family: "Noto Sans JP",sans-serif;
    font-weight: 900;
    letter-spacing: normal;
}

.p-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    z-index: 201;
    padding: 10px;
}

.p-hamburger span {
    display: block;
    width: 30px;
    height: 4px;
    background-color: var(--color-primary);
    margin-bottom: 7px;
    transition: all 0.3s;
    border-radius: 2px;
}
.p-hamburger span:last-child {
    margin-bottom: 0;
}

/* --- グローバルナビゲーション（スマホ：全画面オーバーレイ） --- */
.p-global-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    background-color: var(--color-primary);
    color: #fff;
    padding: 0 5%;
    transform: translateX(100%);
    transition: transform 0.4s ease;
    z-index: 300;
    overflow-y: auto; /* コンテンツが多い場合にスクロールを許可 */
}

/* JSでbodyにクラスが付いたら表示 */
body.is-menu-open .p-global-nav {
    transform: translateX(0);
}

/* メニューが開いているときに背景を固定 */
body.is-menu-open {
    overflow: hidden;
    width: 100%;
    position: fixed;
}

.p-global-nav__sp-header {
    display: flex;
    align-items: center;
    height: 80px;
}
/* 閉じるボタン全体のスタイル */
.p-global-nav__close {
    background: none;
    border: none;
    color: #fff;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

/* 「×」を描画するためのキャンバス（span要素） */
.p-global-nav__close-icon {
    width: 28px;
    height: 28px;
    position: relative;
}

/* 「×」の2本の線の共通スタイル */
.p-global-nav__close-icon::before,
.p-global-nav__close-icon::after {
    content: '';
    display: block;
    background-color: #fff; /* 線の色 */
    width: 100%;
    height: 3px; /* 線の太さ */
    border-radius: 3px; /* 線の角を丸める */
    position: absolute;
    top: 50%;
    left: 50%;
}

/* 1本目の線（＼） */
.p-global-nav__close-icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

/* 2本目の線（／） */
.p-global-nav__close-icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* 「menu」テキストのスタイル */
.p-global-nav__close-text {
    display: block;
    font-size: 16px;
}

.p-global-nav__list {
    margin-top: 40px;
    display: grid;
    gap: 25px;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
}

.p-global-nav__list a {
    color: #fff;
    font-size: 20px;
    text-decoration: none;
}
.p-global-nav__list a:hover {
    transition: all .2s;
    color: #ccc;
}

/* スマホ用の「-」を追加 */
.p-global-nav__list a::before {
    content: '- ';
}

.p-global-nav__contact-button--sp {
    display: block;
    width: 80%;
    max-width: 300px;
    background-color: #333;
    color: #fff;
    border-radius: 50px;
    padding: 15px;
    text-align: center;
    margin: 60px auto 0;
}
.p-global-nav__contact-button--sp:hover {
    opacity: .8;
}
/* PC用のボタンはスマホでは非表示 */
.p-global-nav__contact-button--pc {
    display: none;
}

/* ラッパー内の各セクションの背景を透過させる */
.p-background-wrapper .p-topics,
.p-background-wrapper .p-philosophy,
.p-background-wrapper .p-links,
.p-background-wrapper .p-reports {
    background: transparent;
}

/* =================================================================
   メインビジュアル
================================================================= */
.p-hero-pc {
    display: none;
}

/* =================================================================
   TOPICS
================================================================= */
.p-topics { padding: 50px 0; }
.p-topics__inner { width: var(--content-width); margin: 0 auto; }
.p-topics__title { font-size: 24px; font-weight: bold;}
.p-topics__list { list-style: none; padding: 0; margin: 0; }
.p-topics__item { border-bottom: 1px solid #ddd; }
.p-topics__item a { display: flex; flex-wrap: wrap; align-items: center; padding: 20px 0; position: relative; justify-content: space-between; }
.p-topics__item a::after {
  content: '';
  display: block;
  width: 13px;
  height: 13px;
  border-top: 2px solid #888;
  border-right: 2px solid #888;
  transform: rotate(45deg);
  flex-shrink: 0;
  position: absolute;
  right: 10px;
  top: 50%;
}
.p-topics__item a:hover::after {
    right: 5px;
    transition: all .2s linear;    
}
.p-topics__meta { display: flex; align-items: center; width: 100%; margin-bottom: 8px; }
.p-topics__date { font-size: 13px; color: #555; margin-right: 15px; }
.p-topics__category { font-size: 12px; color: var(--color-white); border: 1px solid var(--color-primary); padding: 2px 8px; font-weight: bold; background-color: var(--color-primary); width: 75px; text-align: center; display: inline-block; line-height: 1;}
.p-topics__post-title { font-size: 14px; margin: 0; padding-right: 30px; line-height: 1.5; font-weight: 600;letter-spacing: normal;}
.p-topics__view-more {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1em;
    font-weight: bold;
    color: #333;
    white-space: nowrap;
    flex-shrink: 0;
    justify-content: flex-end;
    margin: 2em auto;
    width: var(--content-width);
    text-align: right;
}
.p-topics__view-more::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    flex-shrink: 0;
    position: absolute;
    right: 10px;
    margin-bottom: 1px;
    transition: all .2s linear;
}
.p-topics__view-more::after {
    content: '';
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-primary);
    color: #fff;
    font-size: 14px;
    width: 25px;
    height: 25px;
    border-radius: 50px;
}
.p-topics__view-more:hover {
    text-decoration: underline;
}

/* =================================================================
   共通コンポーネント
================================================================= */
.c-container {
    width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
}

.c-section-title {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin-bottom: .7em;
    line-height: 1.6;
    font-family: var(--font-family-serif);
}

.c-button-wrapper {
    margin-top: 40px;
    text-align: center;
}

.c-button {
    display: inline-block;
    background-color: #555;
    color: var(--color-white);
    padding: 10px;
    font-weight: 500;
    width: clamp(15.625rem, 12.324rem + 14.08vw, 25rem);
}
.c-button:hover {
    opacity: 0.8;
}

.c-button--arrow {
    position: relative;
}

.c-button-ghost::after,
.c-button.c-button--arrow::after {
    content: '';
    position: absolute;
    top: 45%;
    right: 13px;
    transform: translateY(-50%);
    width: 20px;
    height: 7px;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 29.83 10.05' xmlns='http://www.w3.org/2000/svg'%3e%3cpolyline points='0 9.55 28.93 9.55 23.22 0.26' fill='none' stroke='%23fff' stroke-width='2'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: right 0.3s ease;
}

.c-link-button {
    flex-direction: column; /* 変更: 縦並び */
    justify-content: center;
    background-color: var(--color-white);
    border: 1px solid #000; /* 変更: 黒い枠線 */
    box-shadow: none; /* 変更: box-shadowを削除 */
    text-align: center; /* 変更: 中央揃え */
    margin: 0 0 0 auto;
    width: 100%;
      display: inline-flex; /* テキストと矢印を横並びにする */
  align-items: center;  /* テキストと矢印を垂直中央に揃える */
  gap: 0.5em;           /* テキストと矢印の間隔 */
  position: relative;   /* 矢印の位置の基準点にする */
  padding: 10px 3px;
  text-decoration: none;
  color: #333;
}
.c-link-button:hover {
    background-color: #666;
    color: #fff;
    transition: all .3s;
}
.c-link-button:hover:hover .c-link-button__sub {
    color: #fff;
    transition: all .3s;
}
.c-link-button:hover:hover .c-link-button__arrow::before {
    background-color: #fff;
    transition: all .3s;
}

.c-link-button__main {
    display: block;
    font-weight: bold;
    font-size: clamp(0.688rem, 0.269rem + 1.79vw, 1.375rem);
}

.c-link-button__sub-wrapper {
    display: inline-flex; /* 変更: 中身を横並びにする */
    align-items: center;
    gap: 0.5em; /* 変更: テキストと矢印の間隔 */
}

.c-link-button__sub {
    display: block;
    font-size: clamp(0.563rem, 0.296rem + 1.14vw, 1rem);
    color: #333; /* 変更: 色を調整 */
    margin-top: 0; /* 変更: 上の余白をリセット */
    font-family: "Noto Sans JP",sans-serif;
}

.c-link-button__arrow-svg {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: clamp(20px, 3vw, 36px); /* clamp()でサイズを可変 */
  height: auto;
}

/* SVG内のpolyline要素の色と線の太さを指定 */
.c-link-button__arrow-svg polyline {
  stroke: #333; /* 線の色を指定（白の例） */
  stroke-width: 2;  /* 線の太さを指定 */
}
.c-link-button:hover .c-link-button__arrow-svg polyline {
  stroke: #fff; /* ホバー時に青色にする例 */
}

.arrow_wrap {
    position: absolute; /* 矢印の先端部分の位置の基準点になる */
  display: block;
    right: 10px;
  bottom: 10px;

}
/* 矢印の本体（横棒） */
.c-link-button__arrow {
  position: relative; /* 矢印の先端部分の位置の基準点になる */
  display: block;
  width: clamp(0.813rem, 0.546rem + 1.14vw, 1.25rem);
  height: 1px;
  background-color: #333; /* 線の色 */
}

/* 矢印の先端部分（共通スタイル） */
.c-link-button__arrow::before {
  content: '';
  position: absolute;
  right: 0.5px;
  width: clamp(0.375rem, 0.223rem + 0.65vw, 0.625rem); /* 矢印の先端の長さ */
  height: 1px; /* 線の太さ */
  background-color: #333; /* 線の色 */
  transform-origin: right center;
  transform: rotate(45deg);
}

.c-section-title--uppercase {
    text-transform: uppercase;
    font-family: var(--font-family-base); /* 明朝体ではなくゴシック体に戻す */
    font-size:52px;
    letter-spacing: 0.1em;
    font-family: "Noto Sans JP",sans-serif;
    font-weight: 900;
}
.c-section {
    padding: 60px 0;
}

.c-section__title {
    font-family: "Noto serif JP",serif; /* Adobe Fontを想定 */
    font-size: 32px;
    font-weight: bold;
    letter-spacing: .1em;
    color: #145E71; /* メインカラー */
}

.c-section--small {
    padding: 40px 0;
}

/* ページ上部のタイトル */
.c-page-title {
    background-image: url('../../assets/images/c-page-title-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 20px 0;
    text-align: center;
}

.c-page-title__text {
    font-family: "Noto sans jp", sans-serif; /* Adobe Fontを想定 */
    color: white;
    font-size: 36px;
    font-weight: bold;
    letter-spacing: .2em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* ボタンの矢印スタイル */
.c-button--arrow:hover::after {
    right: 5px;
}

.c-button-ghost {
    display: inline-block;
    background-color: transparent;
    border: 1px solid var(--color-white);
    color: var(--color-white);
    padding: 10px;
    line-height: 1.1;
    margin: 0 auto;
    font-weight: 500;
    width: 100%;
    position: relative;
}
.c-button-ghost:hover {
    background-color: #333333;
}

.c-button-ghost:hover::after {
    right: 5px;
}

.c-container--narrow {
    max-width: 1000px;
    width: 85%;
}
.c-button {
    display: inline-block;
    width: 100%;
    max-width: 400px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.3s;
    line-height: 1.1;
}
.c-button:hover {
    opacity: 0.8;
}
.c-button--download {
    background-color: #145E71;
    color: white;
}
.c-button--back {
    background-color: #fff;
    border-color: #ccc;
    color: #333;
}

/* ページタイトル */
/* h1タグ本体（後景の大きい文字） */
.c-page-title__text-bg {
    position: relative; /* 擬似要素を配置する基準 */
    font-family: "Noto sans jp", sans-serif;
    color: rgba(0, 0, 0, 0.2); /* 文字色と透明度 */
    font-size: 9vw; /* 画面幅に応じたサイズ */
    font-weight: 900;
    letter-spacing: .1em;
    white-space: nowrap; /* 折り返さない */
    text-align: center; 
    width: fit-content;
    margin: 0 auto;
}

/* 前景の小さい文字 (擬似要素) */
.c-page-title__text-bg::before {
    /* HTMLのdata-title属性の値を取得して表示 */
    content: attr(data-title);
    position: absolute;
    top: 30%;
    left: 12%;
    color: #333; /* 文字色 */
    font-size: 2.3vw; /* 小さい文字サイズ */
    letter-spacing: .1em;
    width: fit-content;
    display: block;
    border-bottom: 2px solid #333;
}

/* =================================================================
   理念・想い
================================================================= */
.p-about-area {
    padding: 230px 0 60px; 
    position: relative;
}

.p-about-area__links {
    width: 55%;
    margin-left: auto;
    display: grid;
    gap: 20px;
}

.p-philosophy p {
    text-align: left;
    line-height: 1.8;
    font-family: var(--font-family-base);
    font-weight: 500;
    max-width: 700px;
}
.p-philosophy h2 {
    font-size: 28px;
}

/* =================================================================
   プロフィール・政策リンク
================================================================= */
/* 複数セクションをまたぐ背景のコンテナ */
.p-multi-bg-container {
    position: relative; /* 背景を配置する基準点にする */
    z-index: 1; /* 重なり順の基準 */
}

/* 疑似要素を使って背景画像レイヤーを作成 */
.p-multi-bg-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/about_bg.webp');
    background-repeat: no-repeat;
    background-position: top left;
    background-size: contain;
    z-index: -1; /* コンテンツの背面に配置 */
}

/* 中に入るセクションの背景を透過させて、下の背景が見えるようにする */
.p-multi-bg-container > section {
    background: transparent !important;
}

/* 各セクションの余白を調整 */
.p-multi-bg-container .p-links {
    padding-top: 30%;
    padding-bottom: 60px;
}
.p-multi-bg-container .p-reports {
    padding-top: clamp(3.75rem, -5.381rem + 38.96vw, 18.75rem);
    padding-bottom: 60px;
}
.p-reports__item:hover {
    transform: translateY(-5px);
    transition: all .3s;
}

.p-links {
    position: relative;
    padding: 60px 0 80px;
}

.p-links__content {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 20px;
    width: 43%; 
    margin-left: auto;
    margin-right: 5%; /* 画面右端からの余白 */
}
/* =================================================================
   市政報告
================================================================= */
.p-reports {
    padding: 60px 0;
}

.p-reports__title {
    font-size: 21px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 30px;
}
.p-reports__title::before {
    content: '＼';
    margin-right: 0.2em;
}
.p-reports__title::after {
    content: '／';
    margin-left: 0.2em;
}

.p-reports__list {
    display: grid;
    gap: 40px;
}

.p-reports__images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px;
    margin: 15px auto;
    box-shadow: 3px 4px 15px #d0d1d3;
    background-color: var(--color-white);
    justify-items: center;
    width: fit-content;
}

.p-reports__meta {
    font-size: 13px;
    color: #555;
    font-weight: 500;
    margin-bottom: 8px;
}

.p-reports__post-title {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.6;
}

.p-report-detail__body-content {
    padding: 3rem 0;
}

/* WordPressが生成するファイルブロック全体 */
.p-report-detail__body-content .wp-block-file {
    padding: 0;
    margin: 2em 0;
    text-align: center; /* ボタンを中央揃えにする */
}

/* ファイル名と黒いダウンロードボタンを非表示にする */
.p-report-detail__body-content .wp-block-file .wp-block-file__button,
.p-report-detail__body-content .wp-block-file {
    display: none;
}

/* 元々ある青いボタンだけを表示する */
.p-report-detail__actions .c-button--download {
    display: inline-block; /* 表示を元に戻す */
}

/* =================================================================
   POLICY
================================================================= */
.p-policy {
    padding: 80px 0;
    background-color: #f0f0f0;
}
.p-policy__list {
    display: grid;
    gap: 30px;
}
.p-policy__list .p-policy__link:nth-of-type(1):hover .p-policy__item {
    background-color: #81A6B4;
    transition: all .3s;
}
.p-policy__list .p-policy__link:nth-of-type(2):hover .p-policy__item {
    background-color: #F3CABF;
    transition: all .3s;
}
.p-policy__list .p-policy__link:nth-of-type(3):hover .p-policy__item {
    background-color: #AAD8D2;
    transition: all .3s;
}

.p-policy__item {
    background-color: var(--color-white);
    border: 1px solid #ddd;
    padding: 30px 15px;
    text-align: center;
    margin-top: 30px;
}

.p-policy__icon {
    height: 100px;
    width: auto;
    margin: 0 auto 25px;
}

.p-policy__title {
    font-size: 22px;
    font-family: var(--font-family-serif);
    font-weight: 700;
    margin-bottom: 20px;
}

.p-policy__description {
    font-size: 14px;
    line-height: 2;
    color: #333;
    font-weight: 500;
}

.p-policy__link {
    /* displayをflexに変更し、縦方向に要素を並べる */
    display: flex;
    flex-direction: column;

    color: #333;
    font-size: 14px;
    font-weight: bold;
    position: relative;
    letter-spacing: normal;
    width: 100%;
    height: 100%; /* 親要素の高さを継承して全体をリンク領域にする */
}

/* 新しく追加するルール */
.p-policy__item {
    /* この要素が残りの全てのスペースを埋めるように設定 */
    flex-grow: 1; 
}

.pol-more {
    margin-right: 0;
    margin-left: auto;
    /* display: block; はFlexboxの子要素なので不要になります */
    position: relative;
    width: fit-content;
    padding-right: 2em;
    margin-top: 1em;
}

.pol-more::before {
    right: 0;
    top: 50%;
    content: '';
    position: absolute;
    transform: translateY(-50%);
    width: 20px;
    height: 7px;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 29.83 10.05' xmlns='http://www.w3.org/2000/svg'%3e%3cpolyline points='0 9.55 28.93 9.55 23.22 0.26' fill='none' stroke='currentColor' stroke-width='2'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: right 0.3s ease;
}

.p-policy__link:hover .pol-more::before {
    right: -5px; /* ホバー時に少し動かす */
    transition: all .2s;
}
.p-policy__link:hover .pol-more::after  {
    right: -6px; /* ホバー時に少し動かす */
    transition: all .2s;
}

/* =================================================================
   ギャラリー
================================================================= */
.p-gallery {
    line-height: 0;
    padding: 10px 0;
}
.p-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.p-gallery-pc {
    display: none;
}

/* ===================================
   プロフィールページ固有スタイル
   =================================== */
/* プロフィールセクション */
.parallelogram-image {
  height: 350px;
  object-fit: cover;
  clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
  object-position: center 30%;
  aspect-ratio: 1 / 1;
}
.p-profile.c-section {
    padding: 60px 0 0;
}
.p-profile .c-container {
    max-width: 600px;
}
.p-profile__main .p-footer__name-card {
    margin-bottom: 30px;
}
.p-profile__intro {
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.9;
        word-break: auto-phrase;
        font-weight: 500;
}
.p-profile__grid {
    display: flex;
    flex-direction: column-reverse;
    gap: 30px;
}
.p-profile__name {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
}

.p-profile__image-wrapper {
    margin: 0 auto 40px;
    max-width: 400px;
}

.p-profile__image-wrapper img {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.p-profile__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.p-profile__item {
    display: flex;
    font-size: 16px;
}

.p-profile__item dt {
    flex-shrink: 0;
    width: 130px;
    font-weight: bold;
}

.p-profile__item dd {
    flex-grow: 1;
    word-break: auto-phrase;
}

/* 経歴セクション */
.p-career {
    background-color: #fff;
    padding: 0 0 60px;
}

.p-career .c-container {
    max-width: 600px;
}

.p-career__timeline {
    position: relative;
    padding-left: 20px;
    border-left: 2px solid #145E71; /* タイムラインの縦線 */
    list-style: none; /* リストの点を消す */
}

.p-career__timeline-item {
    position: relative;
    padding-bottom: 30px;
    list-style: none;
    display: flex;
    flex-direction: row;
    gap: 30px;
    line-height: 1.2;
    font-weight: 500;
}

/* タイムラインの丸印 */
.p-career__timeline-item::before {
    content: '';
    position: absolute;
    left: -29px;
    top: 0;
    width: 16px;
    height: 16px;
    background-color: #145E71;
    border: 3px solid #f7f7f7; /* 背景色で塗りつぶして線を隠す */
    border-radius: 50%;
    box-sizing: border-box;
}

.p-career__year {
    font-family: "Noto sans JP", sans-serif; /* Adobe Fontを想定 */
    font-size: 16px;
    font-weight: bold;
    color: #145E71;
    letter-spacing: 0;
    margin-bottom: 8px;
}

.p-career__event {
    font-size: 16px;
    line-height: 1.2;
}

/* ===================================
   ポリシーページ固有スタイル
   =================================== */
.c-section.policy-wrap {
    padding: 60px 0 0;
}
.p-policy-nav__list {
    display: flex;
    flex-wrap: wrap; /* スマホで折り返す設定 */
    justify-content: center;
    gap: 24px;
}

.p-policy-nav__item {
    /* スマホでは横に2つ、最後の1つは中央に配置されるように調整 */
    width: calc(50% - 12px);
    max-width: 320px;
    border: 1px solid #ccc;
    background-color: #fff;
}
.p-policy-nav__list .p-policy-nav__item:nth-of-type(1):hover {
    background-color: #81A6B4;
        transition: all 0.3s;
}
.p-policy-nav__list .p-policy-nav__item:nth-of-type(2):hover {
    background-color: #F3CABF;
    transition: all 0.3s;
}
.p-policy-nav__list .p-policy-nav__item:nth-of-type(3):hover {
    background-color: #AAD8D2;
    transition: all 0.3s;
}
.p-policy-nav__item img {
    height: 84px;
    width: auto;
}
.p-policy-nav__item a {
    display: block;
    color: #333;
    text-decoration: none;
}

.p-policy-nav__image {
    padding: 20px 20px 0;
    text-align: center;
}

.p-policy-nav__text {
    padding: 15px 0;
    text-align: center;
}
.p-policy-nav__text .pol-more {
    font-size: 12px;
}
.p-policy-nav__text .pol-more::after{
    top: 2px;
}

.p-policy-nav__text h3 {
    font-size: 18px;
    font-weight: bold;
    font-family: "Noto serif JP",serif;
}

/* 政策セクション */
.p-policy-section {
    padding: 40px 0;
}
/* -- カラーテーマ設定 -- */
.p-policy-section--blue {
    --policy-color-main: #145E71;
    --policy-color-light: #E8F2F5;
}
.p-policy-section--orange {
    --policy-color-main: #D96D44;
    --policy-color-light: #FAEFEA;
}
.p-policy-section--green {
    --policy-color-main: #2E9C94;
    --policy-color-light: #EAF5F4;
}

/* セクションヘッダー */
#policy-1 .p-policy-section__header {
    background-color: #D5E2E6; /* 薄い青色 */
    padding: 10px 0;
}

#policy-2 .p-policy-section__header {
    background-color: #F3CABF; /* 薄い青色 */
    padding: 10px 0;
}
#policy-3 .p-policy-section__header {
    background-color: #AAD8D2; /* 薄い青色 */
    padding: 10px 0;
}

.p-policy-section__header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: relative;
}

.p-policy-section__header-text {
    width: 67%;
    display: inline-block;
    z-index: 2;
    font-family: "Noto serif JP",serif;
}

#policy-1 .p-policy-section__title {
    font-size: 22px;
    font-weight: bold;
    color: var(--policy-color-main);
    line-height: 1.4;
}
#policy-2 .p-policy-section__title {
    font-size: 22px;
    font-weight: bold;
    color: var(--policy-color-main);
    line-height: 1.4;
}
#policy-3 .p-policy-section__title {
    font-size: 22px;
    font-weight: bold;
    color: var(--policy-color-main);
    line-height: 1.4;
}

.p-policy-section__subtitle {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    line-height: 1.2;
}

.p-policy-section__header-illust {
    flex-shrink: 0; /* イラストが縮まないようにする */
    width: 120px;
    position: absolute;
    right: -10px;
}

/* セクションサマリー */
.p-policy-summary__box {
    background-color: var(--policy-color-main);
    color: white;
    padding: clamp(1.172rem, 0.934rem + 1.01vw, 1.563rem);
}

.p-policy-summary__box p {
    text-align: center;
    line-height: 2;
    font-size: clamp(0.75rem, 0.522rem + 0.97vw, 1.125rem);
    font-weight: 400;
    margin-bottom: 0;
}
.p-policy-summary__box p:nth-last-of-type(1) {
    margin-bottom: 0;
}

/* ===================================
   政策リスト
   =================================== */

.p-policy-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
}

.p-policy-card {
    padding: 20px 15px 15px;
    border: 1px solid var(--policy-color-main);
    margin-bottom: 30px;
}
.p-policy-card__body li:last-child {
    padding-bottom: 10px; /* 下の余白を調整 */
}

.p-policy-card__header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.p-policy-card__number {
    font-size: 28px;
    font-weight: bold;
    color: var(--policy-color-main, #145E71); /* 親セクションの色を継承 */
    line-height: 1.2;
    font-family: 'Impact Custom',sans-serif!important;
}

.p-policy-card__title {
    flex: 1;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.6;
    color: var(--policy-color-main);
}

.p-policy-card__body {
    margin-top: 16px;
}

.p-policy-card__body ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.p-policy-card__body li {
    padding-left: 1.2em;
    position: relative;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    letter-spacing: normal;
}

.p-policy-card__body li::before {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    border-radius: 50%;
    left: 0;
    top: 9px;
    background-color: var(--policy-color-main, #145E71); /* 親セクションの色を継承 */
}

.p-policy-card__illust {
    text-align: center;
    margin-top: 24px;
}
.p-policy-card__illust img {
    max-width: 200px;
}

/* スライダー */
.slide {
    overflow: hidden;
}
.slide-wrap ul,
.slide-wrap li {
  list-style: none;
}

.slide-wrap {
  display: flex;
}

.slide-wrap.bottom {
  margin-top: 10px;
  justify-content: flex-end;
}

.slide-wrap ul {
  display: flex;
}

.slide-wrap.top ul:first-child {
  animation: slideTop 100s -50s linear infinite;
}

.slide-wrap.top ul:last-child {
  animation: slideTop2 100s linear infinite;
}

.slide-wrap.bottom ul:first-child {
  animation: slideBottom 100s linear infinite;
}

.slide-wrap.bottom ul:last-child {
  animation: slideBottom2 100s -50s linear infinite;
}

.slide-wrap li {
    width: 256px;
    height: 157px;
}

.slide-wrap.top li {
  margin-right: 10px;
}

.slide-wrap.bottom li {
  margin-left: 10px;
}

@keyframes slideTop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slideTop2 {
  0% {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-200%);
  }
}

@keyframes slideBottom {
  0% {
    transform: translateX(0%);
  }
  to {
    transform: translateX(200%);
  }
}

@keyframes slideBottom2 {
  0% {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

/* ===================================
   レポート一覧ページ固有スタイル
   =================================== */
.p-report-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 24px;
}

.p-report-card__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 400 / 560; /* 画像の比率を維持 */
    object-fit: cover;
}

.p-report-card__body {
    padding: 16px;
}

.p-report-card__date {
    display: block;
    font-size: 13px;
    color: #888;
    margin-bottom: 8px;
}

.p-report-card__title {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.6;
}

/* ページネーション */
.c-pagination {
    margin-top: 50px;
}
.c-pagination ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 12px;
}
.c-pagination a,
.c-pagination span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #145E71;
    border-radius: 5px;
    color: #145E71;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}
.c-pagination a:hover {
    background-color: #E8F2F5;
}
.c-pagination .is-current {
    background-color: #145E71;
    color: #fff;
}

/* ===================================
   レポート詳細ページ固有スタイル
   =================================== */
.p-report-detail {
    background-color: #fff;
}

.p-report-detail__header {
    text-align: left;
    margin-bottom: 40px;
}

.p-report-detail__meta {
    font-size: 14px;
    color: #555;
    margin-bottom: 8px;
}

.p-report-detail__title {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.7;
    color: #333;
}

.p-report-detail__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.p-report-detail__content img {
    width: 100%;
    height: auto;
}

.p-report-detail__actions {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* ===================================
   ブログ一覧ページ固有スタイル
   =================================== */

/* カテゴリナビゲーション */
.p-blog-category-nav {
    padding-bottom: 20px;
    margin-bottom: 40px;
    border-bottom: 1px solid #e0e0e0;
}
.p-blog-category-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    gap: 16px;
}
.p-blog-category-nav li {
    position: relative;
}
.p-blog-category-nav li:not(:first-child)::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 2em;
    background-color: #ccc;
}
.p-blog-category-nav a {
    font-size: clamp(0.875rem, 0.787rem + 0.38vw, 1.125rem);
    color: #555;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s;
}
.p-blog-category-nav a:hover {
    color: #145E71;
}
.p-blog-category-nav a.is-active {
    color: #145E71;
    font-weight: bold;
}

/* ブログカードリスト */
.p-blog-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr; /* スマホでは1カラム */
    gap: 80px;
}

.p-blog-card {
    background-color: #fff;
    transition: box-shadow 0.3s, transform 0.3s;
}
.p-blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.p-blog-card a {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: #333;
    text-decoration: none;
}

.p-blog-card__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 400 / 250;
    object-fit: cover;
}

.p-blog-card__body {
    padding: 16px;
}

.p-blog-card__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.p-blog-card__date {
    font-size: 13px;
    color: #888;
}

.p-blog-card__category {
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    color: #555;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.p-blog-card__title {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.6;
}

/* ===================================
   ページネーション (WordPress対応版)
   =================================== */
.pagination {
    margin-top: 50px;
}
.pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.pagination .page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #145E71;
    border-radius: 5px;
    color: #145E71;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

/* ホバー時のスタイル */
.pagination .page-numbers:hover {
    background-color: #E8F2F5;
    color: #145E71; /* ホバー時に色が白にならないように再指定 */
}

.pagination .page-numbers.current {
    background-color: #145E71;
    color: #fff;
}
/* フィルタリングされる記事の基本スタイルとトランジション */
.p-blog-list .js-blog-item {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 非表示の状態（JavaScriptで display: none が付与される前の準備） */
.p-blog-list .js-blog-item.is-hidden {
    transform: scale(0.9);
    opacity: 0;
    pointer-events: none;
}
/* ===================================
   ブログ詳細ページ固有スタイル
   =================================== */
.p-blog-detail__header {
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e0e0e0;
}

.p-blog-detail__title {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.6;
    margin-bottom: 16px;
}

.p-blog-detail__date {
    font-size: 14px;
    color: #555;
}

.p-blog-detail__body p {
    font-size: 16px;
    line-height: 2;
}
.p-blog-detail__body p:not(:last-child) {
    margin-bottom: 1.8em;
}

.p-blog-detail__actions {
    margin-top: 160px;
    padding-top: 30px;
    text-align: center;
}

.c-button-text-link {
    display: inline-block;
    color: #333;
    font-weight: bold;
    text-decoration: none;
    padding: 8px 16px;
    border-bottom: 1px solid #333;
    transition: color 0.3s, border-color 0.3s;
}

.c-button-text-link:hover {
    color: #145E71;
    border-color: #145E71;
}

/* ===================================
   お問い合わせページ固有スタイル
   =================================== */
.p-contact__intro {
    line-height: 1.8;
    margin-bottom: 40px;
    color: #000;
}

/* フォーム */
.p-form__item {
    margin-bottom: 24px;
}
.p-form__label {
    display: inline-block; /* ラベルとタグを横並びにするため */
    font-weight: bold;
    margin-bottom: 8px;
    color: #000;
}
.c-form-tag {
    display: inline-block;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 3px;
    color: white;
    margin-left: 8px;
    vertical-align: middle;
}
.c-form-tag--required {
    background-color: #C1272D;
}

.p-form__input,
.p-form__textarea,
.p-form__select {
    display: block;
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    margin-top: 8px;
}
.p-form__textarea {
    min-height: 160px;
    resize: vertical;
}

.p-form__select-wrapper {
    position: relative;
}
.p-form__select-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #888;
    pointer-events: none;
}
.p-form__select {
    appearance: none;
}
.p-form__select:required:invalid {
    color: #888; /* 未選択時のテキスト色 */
}

/* 同意チェックボックス */
.p-form__privacy {
    text-align: center;
    margin: 40px 0;
}
.p-form__checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.p-form__checkbox {
    width: 20px;
    height: 20px;
    accent-color: #145E71; /* チェック時の色 */
}
.p-form__checkbox-label a {
    text-decoration: underline;
}
.p-form__checkbox-label a:hover {
    color: #145E71;
}

/* 送信ボタン */
.p-form__submit {
    text-align: center;
}

/* プライバシーポリシー */
.p-privacy-policy.c-section {
background-color: #fff;
    padding: 80px 0 80px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 30px;
}

.p-privacy-policy__title {
    background-color: #D5E2E6; /* 薄い青色 */
    font-size: 18px;
    font-weight: bold;
    padding: 16px 20px;
}
.p-privacy-policy__body {
    padding-top: 30px;
}
.p-privacy-policy__body h3 {
    font-size: 16px;
    font-weight: bold;
    margin: 30px 0 15px;
}
.p-privacy-policy__body p {
    line-height: 1.9;
    font-size: 15px;
    color: #333;
}
.p-privacy-policy__body p:not(:last-of-type) {
    margin-bottom: 1em;
}

/* =================================================================
   CONTACT
================================================================= */
.p-contact {
    padding: 60px 0;
    background-color: #1D6C85;
    color: #fff;
}

.p-contact__title {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 40px;
    position: relative;
    display: inline-block; /* 下線の幅を文字幅に合わせる */
    z-index: 1;
    width: fit-content;
    border-bottom: 1px solid #fff;
}

/* 背景の大きな文字の装飾 */
.p-contact__title::before {
    content: 'CONTACT';
    position: absolute;
    font-family: 'Noto Sans JP', sans-serif;
    top: -30px;
    left: 0;
    font-size: 3.5em;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.1);
    white-space: nowrap;
    letter-spacing: 8px;
    z-index: -1;
}

.p-contact__text {
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: normal;
}

/* ボタンラッパーは汎用クラスを流用 */
.p-contact .c-button-wrapper {
    margin-top: 30px;
    text-align: center;
}

.wpcf7-spinner {display:none!important;}
/* Contact Form 7が生成するラッパー */
.p-form__select-wrapper .wpcf7-form-control-wrap {
    display: block;
    position: relative; /* カスタム矢印を配置するための基準点 */
}

/* セレクトボックス自体のスタイルを再定義 */
.p-form__select {
    /* ▼ 大きさと文字サイズの問題を修正 ▼ */
    width: 100%;
    height: 50px; /* 高さを他の入力欄と合わせる（必要に応じて調整）*/
    padding: 0 15px; /* 内側の余白 */
    font-size: 16px; /* 文字サイズを標準に */
    border: 1px solid #ccc; /* 枠線を他の入力欄と合わせる */
    border-radius: 5px;
    background-color: #fff;

    /* ▼ ブラウザ標準の見た目（デフォルトの矢印など）を強制的にリセット ▼ */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ▼ リセットで消えた矢印を、CSSで自作して追加 ▼ */
.p-form__select-wrapper .wpcf7-form-control-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 12px;
    height: 8px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%208%22%3E%3Cpath%20d%3D%22M6%208L0%200h12L6%208z%22%20fill%3D%22%23333%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    pointer-events: none; /* 矢印自体はクリックできないようにする */
}

/* Contact Form 7 送信成功時のメッセージを非表示にする */
.wpcf7-form.sent .wpcf7-response-output {
    display: none;
}

/* =================================================================
   フッター
================================================================= */
.p-footer {
    padding: 50px 0 30px;
    background-color: var(--color-white);
    color: #333;
    text-align: center;
    background-color: #fff;
    color: #000;
}
.p-footer__info {
    text-align: left;
}
.p-footer__affiliation {
    font-size: 14px;
    font-weight: 600;
}
.p-footer__name {
    font-size: 36px;
    letter-spacing: normal;
    line-height: 1;
    font-family: "Noto Sans JP",sans-serif;
    font-weight: 900;
}
.p-footer__contact-list {
    margin-top: 25px;
    text-align: left;
    font-size: 14px;
    display: grid;
    gap: 10px;
}
.p-footer__contact-list li {
    display: flex;
    align-items: flex-start;
}
.p-footer__icon {
    margin-right: 0.5em;
    width: 16px;
    height: 16px;
    margin-top: 3px;
}

.p-footer__nav-area {
    padding: 30px 0;
    margin: 30px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.p-footer__social {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px;
}
.p-footer__social img {
    width: 24px;
    height: 24px;
}
.p-footer__nav ul {
    display: grid;
    gap: 15px;
    text-align: left;
}
.p-footer__nav a {
    font-weight: bold;
}
.p-footer__nav a:hover {
    color: #6b6b6b;
    transition: all .2s;
}

.p-footer__logos {
    display: grid;
    gap: 20px;
    justify-items: center;
    margin-bottom: 30px;
    margin-top: 50px;
}
.p-footer__logos img {
    height: auto;
    width: 233px;
}

.p-footer__copyright {
    text-align: center;
    font-size: 12px;
    color: #777;
}
.p-footer__contact-list li {
    display: flex; /* 修正: flexboxを適用 */
    align-items: flex-start; /* 修正: 上揃え */
}

.p-footer__social li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* アイコンとテキストの隙間 */
}
.p-footer__social li a:hover {
    color: #006e87;
}

.p-footer__social img {
    width: 28px;
    height: 28px;
}

.p-footer__social span {
    font-size: 12px;
    font-weight: bold;
}

/* =================================================================
   タブレット以上
================================================================= */
/* 画面幅が768px以上の場合に適用 */
@media (min-width: 768px) {

    /* PC表示のときだけ、指定したクラスの<br>タグを無効化する */
    .br-sp {
        display: none;
    }
    .c-container {
        width: 95%;
        max-width: 1040px;
        margin: 0 auto;
    }

}

/* =================================================================
   PC向けスタイル (992px以上)
================================================================= */
@media (min-width: 992px) {

    /* ---------------------------------------------------------------
     * ヘッダー
     * --------------------------------------------------------------- */
    .p-header__inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 10px 40px;
    }

    /* スマホ用のハンバーガーボタンは非表示 */
    .p-hamburger {
        display: none;
    }

    /* --- グローバルナビゲーション（PC：ヘッダー内横並び） --- */
    .p-global-nav {
        /* スマホ用スタイルをリセット */
        position: static;
        transform: none;
        background: none;
        color: inherit;
        width: auto;
        height: auto;
        padding: 0;
        display: flex;
        align-items: center;
    }
    .p-global-nav__list a:hover {
    transition: all .2s;
    color: #6b6b6b;
}

    /* スマホ用のヘッダーやボタンは非表示 */
    .p-global-nav__sp-header,
    .p-global-nav__contact-button--sp {
        display: none;
    }

    .p-global-nav__list {
        display: flex; /* 横並びにする */
        gap: 30px;
        margin-top: 0; /* リセット */
        font-family: var(--font-family-serif);
    }

    .p-global-nav__list a {
        font-size: 15px;
        color: #000;
        font-weight: bold;
    }

    /* PCでは「-」を非表示に */
    .p-global-nav__list a::before {
        display: none;
    }

    /* PC用お問い合わせボタンを表示・装飾 */
    .p-global-nav__contact-button--pc {
        display: block;
        background-color: #333;
        color: #fff;
        padding: 10px 20px;
        font-size: 14px;
        font-weight: bold;
        margin-left: 30px;
        border-radius: 5px;
        white-space: nowrap; /* 「お問い合わせ」が改行されないように */
    }
    .p-global-nav__contact-button--pc:hover {
        opacity: .8;
        transition: all .3s;
    }

.c-section-title--underline {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    padding-bottom: 15px;
    margin-bottom: 30px;
    border-bottom: 2px solid #145E71;
    position: relative;
}
.c-section-title--underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 20%;
    height: 2px;
    background-color: #145E71;
}

/* ページ上部のタイトル */
.c-page-title {
    background-image: url('../../assets/images/c-page-title-bg.png');
    background-size: cover;
    background-position: center;
    padding: 50px 0;
    text-align: center;
}

.c-page-title__text {
    font-family: "Noto Sans Jp", sans-serif; /* Adobe Fontを想定 */
    color: white;
    font-size: 36px;
    font-weight: bold;
    letter-spacing: .2em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* ---------------------------------------------------------------
 * メインビジュアル
 * --------------------------------------------------------------- */
    .p-hero-pc {
        display: block;
    }
    .p-hero-sp {
        display: none;
    }

/* ---------------------------------------------------------------
 * 複数セクションにまたがる背景
 * --------------------------------------------------------------- */
 .p-links__bg {
    display: none;
}
.p-background-wrapper {
    position: relative; /* 背景を配置する基準点 */
    z-index: 1;
}
.p-multi-bg-container::before {
    display: none;
}
.p-background-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../../assets/images/about_bg-pc.webp');
    background-repeat: no-repeat;
    background-position: 25% top;
    background-size: cover;
    z-index: -1; /* コンテンツの背面に配置 */
}
/* ---------------------------------------------------------------
 * TOPICS (PC)
 * --------------------------------------------------------------- */
.p-topics {
    padding: 50px 0;
    background: var(--color-white);
    position: relative;
    z-index: auto;
    max-width: 920px;
    margin: 0 auto;
}

.p-topics__inner {
    display: flex;
    align-items: center; /* 垂直方向中央揃え */
    gap: 60px; /* 各要素間の余白 */
}

.p-topics__title {
    /* --- 左カラム：「TOPICS」タイトル --- */
    writing-mode: initial; /* 念のため横書きを再指定 */
    border: none;
    padding: 0;
    font-size: 32px;
    font-weight: 500;
    color: #555;
    flex-shrink: 0; /* タイトルが縮まないように */
}

.p-topics__main-content {
    /* --- 中央カラム：リスト部分 --- */
    flex-grow: 1; /* 可変幅で残りのスペースを全て使用 */
    width: 100%;
}

.p-topics__list {
    border-top: 1px solid #eee; /* 上下の線 */
}

.p-topics__item {
    border-bottom: 1px solid #eee; /* 各アイテムの下線 */
}

.p-topics__item a {
    display: flex; /* 矢印を右端に配置するため */
    justify-content: space-between;
    align-items: center;
    padding: 1em 0; /* 上下の余白 */
}
.p-topics__item a::after {
    top: initial;
}
.p-topics__item-content {
    /* --- 日付とタイトルのラッパー --- */
    display: flex;
    align-items: center;
}

.p-topics__date {
    font-size: 15px;
    color: #555;
    white-space: nowrap; /* 日付が改行されないように */
}

.p-topics__post-title {
    font-size: 15px;
    margin-left: 1em;
    writing-mode: initial; /* 念のため横書きを再指定 */
    line-height: 1;
}

/* ---------------------------------------------------------------
 * 理念 (PC)
 * --------------------------------------------------------------- */
.p-philosophy {
    background: var(--color-white);
margin-left: 530px;
}

.p-philosophy__inner {
    display: flex;
    align-items: center;
    gap: 60px;
}

.p-philosophy__image {
    flex: 0 0 40%; /* 左カラムの幅を40%に固定 */
}

.p-philosophy__text {
    flex: 1; /* 右カラムが残りの幅を全て使う */
}

.p-philosophy .c-section-title {
    text-align: left; /* 左揃えに */
    font-size: 33px;
}

/* ---------------------------------------------------------------
 * リンク (PC)
 * --------------------------------------------------------------- */
.p-links {
    padding: 120px 0;
}
.p-links__bg {
    background-image: url('../../assets/images/about_bg-pc.webp');
    background-size: contain;
}
.p-multi-bg-container .p-links {
    padding-top: 60px;
}

.p-links__content {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 100px;
    padding: 0 15px;
    margin: 0 auto;
}

.p-links__content > .c-link-button {
    width: 50%; /* ボタンの幅を指定 */
    max-width: 450px;
    margin: 0;
    padding: 15px 3px;
}

.c-link-button__arrow-svg {
    bottom: 50%;
    right: 25px;
}

/* ---------------------------------------------------------------
 * 市政報告 (PC)
 * --------------------------------------------------------------- */
.p-reports {
    padding: 100px 0; /* PC用の余白を調整 */
}
.p-reports__title {
    font-size: 24px;
}
.p-multi-bg-container .p-reports {
    padding-top: 60px;
}
.p-reports__list {
    /* --- レイアウトの要：CSS Grid を使用 --- */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3つのカラムを均等な幅で作成 */
    gap: 30px; /* カラム間の余白 */
}

/* ---------------------------------------------------------------
 * POLICY (PC)
 * --------------------------------------------------------------- */
.p-policy__list {
    /* --- レイアウトの要：CSS Grid を使用 --- */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3つのカラムを均等な幅で作成 */
    gap: 40px; /* カラム間の余白 */
}

.p-gallery-sp {
    display: none;
}
.p-gallery-pc {
    display: block;
}
    .c-page-title { padding: 80px 0; }
    .c-page-title__text { font-size: 48px; }
    .c-section { padding: 80px 0; }
    .c-section-title--underline { font-size: 28px; }

    /* プロフィールセクション (2カラムレイアウト) */
    .p-profile .c-container {
        max-width: 1000px; /* PCではコンテナ幅を広げる */
    }

    .p-profile__grid {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 60px;
    }

    .p-profile__image-wrapper {
        order: 1; /* 画像を左に */
        flex: 0 0 40%;
        max-width: 400px;
        margin-bottom: 0;
    }

    .p-profile__main {
        order: 2; /* テキストを右に */
        flex: 1;
    }
    
    .p-profile__name {
        text-align: left;
    }

    /* 経歴セクション */
    .p-career .c-container {
        max-width: 800px; /* PCではコンテナ幅を広げる */
    }
    
    .p-career__timeline {
        padding-left: 40px;
                width: 600px;
        margin: 0 auto;
    }

    .p-career__timeline-item::before {
        left: -48px; /* (16px / 2) + 40px + (2px / 2) = 49px 若干調整 */
    }

/* ===================================
   ポリシーページ固有スタイル
   =================================== */
    .p-policy-nav__list {
        flex-wrap: nowrap; /* PCでは折り返さない */
        justify-content: space-between;
    }
    #policy-1 .p-policy-section__title,
    #policy-2 .p-policy-section__title,
    #policy-3 .p-policy-section__title {
        font-size: 48px;
    }
    .p-policy-section__subtitle {
        font-size: 28px;
    }
    #policy-1 .p-policy-section__header{
        margin-top: 30px;
    }
    #policy-1 .p-policy-section__header,
    #policy-2 .p-policy-section__header,
    #policy-3 .p-policy-section__header {
        padding: 30px 10px;
    }
    .p-policy-section__header-text {
        width: 100%;
    }
    .p-policy-section__header-illust {
        width: 210px;
    }
.p-policy-summary__box {
    padding: 30px 10px;
}
    .p-policy-nav__item {
        width: 266px
    }
    .p-policy-nav__item img {
    height: 106px;
    width: auto;
}
.p-policy-nav__text {
    padding: 20px;
}
    .p-policy-nav__text h3 {
        font-size: 20px;
    }

    /* セクションヘッダー */
.p-policy-list {
        padding: 0;
    }
    .p-policy-card {
        padding: 30px;
    }
    .p-policy-card__number{
        font-size: 50px;
    }
    .p-policy-card__title {
        font-size: 30px;
    }
    .p-policy-card__header {
        align-items: center;
    }

    .p-policy-card__body {
        padding-left: 48px;
    }
    .p-policy-card__body li {
        font-size: 16px;
    }

    /* イラスト付きのカードのレイアウト変更 */
    .p-policy-card--with-illust {
        display: flex;
        align-items: flex-start;
        gap: 40px;
    }
    
    #policy-3 .p-policy-list li.p-policy-card:nth-of-type(1) img {
        max-width: 250px;
        margin-top: 10px;
    }
    .p-policy-card__body li:last-child {
        padding-bottom: 10px;
    }

    .p-policy-card--with-illust .p-policy-card__text-content {
        flex: 1;
    }
    .p-policy-card--with-illust .p-policy-card__illust {
        flex: 0 0 320px;
        margin-top: 0;
    }
    .p-policy-card--with-illust .p-policy-card__illust img {
        max-width: 200px;
    }
    #policy-3 .p-policy-list .p-policy-card:nth-child(4) .p-policy-card__illust img {
        width: 150px;
    }

    .p-policy-card__body ul {
        gap: 12px;
    }
    

/* ===================================
   レポート一覧ページ固有スタイル
   =================================== */
    .p-report-list {
        grid-template-columns: repeat(3, 1fr); /* PCでは3カラム */
        gap: 32px;
    }

    /* レポート個別ページ */
    .p-report-detail__content {
        /* Flexboxを使い、画像を横並びにする */
        display: flex;
        justify-content: center; /* 中央揃え */
        gap: 24px; /* 画像間の余白 */
        flex-direction: row;
    }

    .p-report-detail__content img {
        /* 各画像がコンテナの幅の半分弱を占めるように調整 */
        width: calc(50% - 12px); 
    }

/* ===================================
   ブログ一覧
=================================== */
        .p-blog-list {
        grid-template-columns: repeat(3, 1fr); /* PCでは3カラム */
    }
/* ブログ記事詳細ページ */
    .p-blog-detail__title {
        font-size: 28px;
    }

/* ===================================
   コンタクトページ
=================================== */
    .p-contact__intro {
        text-align: left;
    }
    .c-page-title {
        padding: 80px 0;
    }
    .p-privacy-policy__title {
        font-size: 20px;
    }

/* ---------------------------------------------------------------
 * CONTACT (PC)
 * --------------------------------------------------------------- */
.p-contact {
        padding: 100px 0;
    }

    /* Flexboxを使って2カラムレイアウトを実現 */
    .p-contact__inner {
        display: flex;
        align-items: flex-start;
        max-width: 1000px;
        gap: 40%;
    }

    /* 左カラム：タイトル */
    .p-contact__title {
        margin-bottom: 0;
    }

    /* 右カラム：テキストとボタン */
    .p-contact__body {
        flex: 1; /* 残りの幅を全て使用 */
    }
    
    .p-contact .c-button-wrapper {
        margin-top: 40px;
    }
/* スライダー */
.slide-wrap li {
    width: 400px;
    height: 250px;
}

    /* ---------------------------------------------------------------
 * フッター (PC)
 * --------------------------------------------------------------- */
.p-footer {
    padding: 60px 0;
    text-align: left; /* 全体を左揃えに */
}

.p-footer__top {
    display: flex; /* 左右カラムを横並びに */
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 40px;
    margin-bottom: 40px;
}

.p-footer__left {
    flex: 1; /* 左カラムが可変幅 */
}
.p-footer__right {
    flex: 0 0 50%; /* 右カラムの幅を50%に固定 */
}

.p-footer__contact-list {
    margin-top: 20px;
}

.p-footer__social {
    justify-content: flex-start; /* 左揃えに */
    margin-top: 30px;
    margin-bottom: 0;
}

.p-footer__social li a {
    gap: 10px;
}

.p-footer__nav {
    height: 100%;
}

.p-footer__nav ul {
    /* ナビゲーションを2列にする */
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, auto); /* 5行分の高さを自動調整 */
    grid-auto-flow: column; /* 要素を列方向に流し込む */
    gap: 15px 30px;
    height: 100%;
}

/* PCでは「-」を非表示に */
.p-footer__nav a::before {
    content: '';
}

.p-footer__logos {
    display: flex; /* 横並びにする */
    justify-content: center;
    align-items: center;
    gap: 40px;
}

}