/* Copyright (c) 2025 misala (https://codepen.io/p0waqqatsi/pen/OJYVgMK) */
/* ↑　コード配布している作者のMITライセンス表記。消さない！ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Serif+JP&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {
  background: #F9F9F9;
  font-weight: 400;
  font-style: normal;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 22px;
	color: #444444;

  /* ★追加：固定ヘッダーの高さ分、コンテンツが隠れないようにボディに余白を設定 */
  padding-top: 5px; /* ここはメニューバーの実際の高さに合わせて調整する */
}

p { font-size: 15px; }

/* 修正後：service-block img も除外するように変更 */
img:not(.parallax-hero-background):not(.parallax-hero-illustration):not(.service-block img) {
  width: auto;
  height: auto;
  max-width: 100%;
  display: block;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.content {
  position: relative;
  width: 100%;
  z-index: 1;
}
.intro {
  position: absolute;
  left: 0%;
  top: 0%;
  right: auto;
  bottom: auto;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #444444;
/*   margin: 0 auto; */
}

.intro h1 {
  font-size: 25px;
  font-family: 'Noto Serif JP', serif;
}
.intro p  {
    font-size: 60px;
    font-family: "Chelsea Market", system-ui;
    font-weight: bolder;
}

.content {
  overflow-x: hidden;
}

.content .section {
  width: 100%;
}

.content .section.hero {
	height: 100vh; /* ここだけ100vhの高さ固定する */
  background-image: url("img/TOP_01.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: opacity 0.5s ease;
}


.image-container {
  width: 100vw; /* ビューポート幅いっぱいに */
  height: 100vh; /* ビューポートの高さで表示 */
  overflow: hidden; /* はみ出た部分を隠す */
  position: relative; /* 内部の画像の絶対位置指定の基準にする */
  display: flex; /* 画像を中央に配置するために flexbox を利用 */
  justify-content: center;
  align-items: center;
}

/* イメージコンテナー　外した状態*/


/*　新しいイメージパララックス部分を追加ここから*/
/* TOP_01.png を背景とする最奥のレイヤー */
/* 背景画像（TOP_01） */
.parallax-hero-background {
	height: 100vh; /* ここだけ100vhの高さ固定する */
  background-image: url("img/TOP_01.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: opacity 0.5s ease;
}

/* 手前のイラスト画像（TOP_02） */
.parallax-hero-illustration {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; /* 親要素の幅いっぱいに */
  height: 100%; /* 親要素の高さいっぱいに */
  object-fit: cover; /* ここを追加：画像を要素にフィットさせ、必要に応じてトリミング */
  z-index: 2;
  pointer-events: none;
}

/* intro テキストレイヤー */
.intro {
  position: absolute;
  left: 0%;
  top: 0%; /* 初期位置 */
  right: auto;
  bottom: auto;
  z-index: 2; /* 最前面 (イラストより手前) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh; /* ビューポートの高さで表示、コンテンツに合わせて調整 */
  color: white; /* テキストが見えるように色を調整してください */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* テキストに影を追加して見やすく */
}
/*　新しいイメージパララックス部分を追加ここまで*/




/*お知らせ装飾ここから*/
/* お知らせセクションのスタイル */
/* ...既存のスタイル（body, .wrapper, .intro, #main-header など）... */

/* お知らせセクションのスタイル */
.news-section {
    width: 80%; /* 幅は維持 */
    max-width: 960px; /* 最大幅は維持 */
    margin: 40px auto 20px auto; /* 上下の余白を半分に縮小 */
    padding: 15px 20px; /* パディングを半分に縮小 */
    background-color: #fff; /* 背景色 */
    border-radius: 8px; /* 角を丸く */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 影を少し弱く */
    text-align: center; /* 中央寄せ */
    color: #444444; /* 文字色 */
    position: relative; /* ★追加: 内部の絶対配置要素の基準にする */
    overflow: hidden; /* 画像がはみ出さないように */
}


.news-section h2 {
    font-size: 26px; /* タイトルサイズを縮小 */
    font-family: 'Noto Serif JP', serif;
    color: #6ea924;
    margin-bottom: 15px; /* マージンを縮小 */
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px; /* パディングを縮小 */
    display: inline-block;
}

.news-item {
    margin-bottom: 10px; /* マージンを縮小 */
    padding-bottom: 10px; /* パディングを縮小 */
    border-bottom: 1px dashed #eee;
    text-align: left;
}

.news-item:last-of-type {
    border-bottom: none;
}

.news-date {
    font-size: 14px; /* 日付のフォントサイズを縮小 */
    color: #888;
    margin-bottom: 3px; /* マージンを縮小 */
}

.news-title {
    font-size: 18px; /* タイトルのフォントサイズを縮小 */
    font-weight: bold;
    margin-bottom: 5px; /* マージンを縮小 */
}

.news-link {
    display: inline-block;
    font-size: 14px; /* リンクのフォントサイズを縮小 */
    color: #1a73e8;
    text-decoration: none;
    margin-top: 3px; /* マージンを縮小 */
    transition: color 0.3s ease;
}

.news-link:hover {
    color: #0d47a1;
    text-decoration: underline;
}

.view-all-news {
    display: inline-block;
    margin-top: 20px; /* マージンを縮小 */
    padding: 8px 20px; /* パディングを縮小 */
    background-color: #6ea924;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px; /* フォントサイズを縮小 */
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.view-all-news:hover {
    background-color: #5a8a1c;
}

/* ★追加：お知らせセクションに配置する画像のスタイル */
.news-image-float {
    position: absolute; /* 親要素に対して絶対配置 */
    right: 80px; /* 右からの位置（調整してください） */
    top: 50%; /* 上下中央に配置（transformで微調整） */
    transform: translateY(-50%); /* 上下中央に配置するための調整 */
    width: 160px; /* 画像の幅 */
    height: auto; /* 高さは自動調整 */
    z-index: 1; /* 他のコンテンツの下に配置されるように */
    opacity: 0.8; /* 透明度を調整 */
    animation: floatAnimation 4s ease-in-out infinite; /* アニメーション適用 */
}

.news-image-float img {
    width: 100%;
    height: auto;
    display: block;
}

/* ★追加：ゆらゆら揺れるアニメーションの定義 */
@keyframes floatAnimation {
    0% { transform: translateY(-50%) translateX(0); } /* 開始位置 */
    50% { transform: translateY(-60%) translateX(0); } /* 上に少し移動 */
    100% { transform: translateY(-50%) translateX(0); } /* 元の位置に戻る */
}

/* ★レスポンシブ対応（画像の位置調整） */
@media (max-width: 1024px) {
    .news-image-float {
        width: 160px; /* タブレットでのサイズ調整 */
        right: -30px; /* タブレットでの位置調整 */
    }
}

@media (max-width: 768px) {
    .news-image-float {
        position: static; /* スマートフォンでは通常のフローに戻す */
        width: 160px; /* スマートフォンでのサイズ調整 */
        margin: 20px auto 0 auto; /* 中央に配置 */
        transform: none; /* アニメーションの変形をリセット */
        opacity: 1; /* スマートフォンでは透明度を戻す */
        animation: none; /* アニメーションを停止 */
    }
    .news-section {
        overflow: visible; /* 画像がはみ出しても大丈夫なように */
    }
}




/* .test スタイル */
.test {
  position: relative;
  color: white;
  top: -30px; /* 必要に応じて調整 */
  height: auto; /* */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  line-height: 45px;
  color: #ff9605c4;
}
/*お知らせ装飾ここまで*/



/* ★事業紹介セクションのスタイル */
.business-intro-section {
    width: 90%; /* 全体の幅を調整 */
    max-width: 1200px; /* 最大幅 */
    margin: 80px auto; /* 上下の余白と中央寄せ */
    padding: 30px;
    background-color: #F4F2C8; /* 背景色を少し変える */
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-align: center;
    color: #333;
}

.business-intro-title {
    font-size: 26px;
    font-family: 'Noto Serif JP', serif;
    color: #4a8c2f; /* 緑系の色 */
    margin-bottom: 15px;
    border-bottom: 2px solid #c8e6c9; /* 薄い緑の下線 */
    padding-bottom: 10px;
    display: inline-block;
}

.business-intro-subtitle {
    font-size: 20px;
    color: #666;
    margin-bottom: 40px;
}

.service-grid {
    display: grid;
    /* デスクトップ版: 4列 */
    grid-template-columns: repeat(4, 1fr);
    gap: 25px; /* ブロック間の余白 */
    justify-content: center;
    align-items: stretch;
}

.service-block {
    background-color: #ffffff;
    padding: 40px 20px 30px 20px; /* 上パディングを多めにしてスペースを確保 */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: visible; /* ★重要: 画像がボックスから突き出るために必要 */
}

.service-block:hover {
    transform: translateY(-5px); /* ホバーで少し浮き上がる */
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.service-block img {
    width: 140px; /* 固定サイズで画像を安定表示 */
    height: 140px;
    object-fit: contain;
    margin-top: -45px; /* 上に飛び出す調整 */
    margin-bottom: 15px; /* 下との余白を確保 */
    z-index: 2; /* テキストより手前に */
    position: relative; /* z-indexを有効にするため */
    border-radius: 50%; /* 円形にする場合 */
}

.service-block h3 {
    font-size: 22px;
    font-family: 'Noto Serif JP', serif;
    color: #3f6e2b; /* 濃い緑系の色 */
    margin-bottom: 10px;
    margin-top: 30px; /* 画像と見出しの間の調整 */
    font-weight: bold;
}

.service-block p {
    font-size: 15px;
    color: #444444;
    line-height: 1.6;
    text-align: left; /* 説明文は左寄せ */
    flex-grow: 1; /* 高さの異なるブロックでも揃うように */
}

/* ★レスポンシブ対応 */
@media (max-width: 1024px) {
    .service-grid {
        /* タブレット版: 2列 */
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .business-intro-title {
        font-size: 32px;
    }
    .business-intro-subtitle {
        font-size: 18px;
    }
    .service-block h3 {
        font-size: 20px;
    }
    .service-block p {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .business-intro-section {
        width: 95%;
        margin: 60px auto;
        padding: 20px;
    }
    .service-grid {
        /* スマートフォン版: 1列 */
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .business-intro-title {
        font-size: 28px;
    }
    .business-intro-subtitle {
        font-size: 16px;
    }
    .service-block {
        padding: 20px;
    }
    .service-block img {
        width: 140px; /* モバイルでの画像サイズ調整 */
        height: 140px;
        margin-top: -30px; /* モバイルでの飛び出し調整 */
    }
    .service-block h3 {
        font-size: 18px;
    }
    .service-block p {
        font-size: 14px;
    }
}


/* ★gradient-purpleセクションのz-indexを上げて、画像の上に表示されるようにします */
/* gradient-purple, gradient-blue の定義箇所に追記 */
.gradient-purple, .gradient-blue {
  position: relative; /* z-indexを有効にするため */
  z-index: 3; /* 画像(z-index:2)より上に表示 */
}

/* style.css に必ず入れる */
#loading-screen {
  position: fixed; inset:0;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
  opacity:1;
  transition: opacity 1.5s ease;
}


/* ★ここから固定メニューバーのスタイル */
#main-header {
    position: fixed;     /* 画面に固定 */
    top: 0;              /* 画面の上端に配置 */
    left: 0;             /* 画面の左端に配置 */
    width: 100%;         /* 横幅を画面いっぱいに */
    background-color: rgba(102,185,212,0.70); /* 背景色 */
    padding: 10px 0;     /* 上下の余白 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 下に影をつけて立体感を出す */
    z-index: 1000;       /* ★ローディング画面の下、他のコンテンツの上に表示 */
}

#main-header nav ul {
    list-style: none;    /* リストの点々を消す */
    padding: 0;          /* 余白を消す */
    margin: 0;           /* 外側の余白を消す */
    text-align: center;  /* メニュー項目を中央に配置 */
}

#main-header nav ul li {
    display: inline-block; /* 項目を横並びにする */
    margin: 0 15px;      /* 項目ごとの左右の余白 */
}

#main-header nav ul li a {
    color: #FFF;         /* リンクの文字色 */
    text-decoration: none; /* リンクの下線を消す */
    font-size: 18px;     /* フォントサイズ */
    font-weight: bold;   /* 文字を太くする */
    padding: 5px 10px;   /* クリックしやすいように余白を追加 */
    transition: background-color 0.3s ease; /* マウスオーバー時のアニメーション */
}

#main-header nav ul li a:hover {
    background-color: rgba(255,255,255,0.2); /* マウスを乗せた時の背景色 */
    border-radius: 5px;     /* 角を丸くする */
}

/* --- 労協センター事業団とはセクション --- */
.about-us-summary-section {
    padding: 80px 20px; /* 上下の余白 */
    background-color: #f8f8f8; /* 背景色を設定 */
    text-align: center;
}

.about-us-summary-section .section-title {
    font-size: 1em; /* 変更: 見出しサイズを約半分に */
    color: #333;
    margin-bottom: 60px;
    position: relative;
    display: inline-block;
}

.about-us-summary-section .section-title::after {
    content: '';
    display: block;
    width: 80%;
    height: 3px;
    background-color: #6EA924;
    margin: 10px auto 0;
}

.about-us-grid {
    display: grid;
    grid-template-columns: 1fr; /* これが768px未満の時の1カラムレイアウト */
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .about-us-grid {
        grid-template-columns: 1fr 1fr; /* これが768px以上の時の2カラムレイアウト */
    }
    .about-us-main-block {
        grid-column: 1 / 3;
    }
}
	
	
/*@media (min-width: 1024px) {
    .about-us-grid {
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-areas:
            "main sub1 sub2";
    }
    .about-us-main-block {
        grid-column: auto;
        grid-area: main;
    }
    .about-us-sub-block:nth-of-type(1) {
        grid-area: sub1;
    }
    .about-us-sub-block:nth-of-type(2) {
        grid-area: sub2;
    }
}*/

.about-us-main-block,
.about-us-sub-block {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    text-align: left;
}

.about-us-main-block h3 {
    font-size: 16pt; /* 変更: h3の見出しサイズを調整 */
    color: #2F6C2E;
    margin-bottom: 20px;
    line-height: 1.4;
}

.about-us-main-block p {
    font-size: 0.9em; /* 変更: 段落の文字サイズを調整 */
    line-height: 1.7;
    color: #555;
    margin-bottom: 15px;
}

.about-us-main-block .philosophy-excerpt {
    font-size: 0.8em; /* 変更: 引用部分の文字サイズを調整 */
    color: #666;
    border-left: 4px solid #6EA924;
    padding-left: 15px;
    margin-top: 30px;
    margin-bottom: 20px;
}

.about-us-sub-block h4 {
    font-size: 1.1em; /* 変更: サブブロックの見出しサイズを調整 */
    color: #2F6C2E;
    margin-bottom: 15px;
    border-bottom: 2px solid #66B9D4;
    padding-bottom: 5px;
    display: inline-block;
}

.about-us-sub-block ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 15px;
}

.about-us-sub-block ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 8px;
    line-height: 1.6;
    color: #555;
    font-size: 0.9em; /* 変更: リスト項目の文字サイズを調整 */
}

.about-us-sub-block ul li::before {
    content: '▶';
    color: #FF9605;
    position: absolute;
    left: 0;
    font-size: 0.9em;
    top: 50%;
    transform: translateY(-50%);
}

.about-us-sub-block p {
    font-size: 0.9em; /* 変更: サブブロックの段落文字サイズを調整 */
    line-height: 1.6;
    color: #555;
}

.btn-detail {
    display: inline-block;
    background-color: #6EA924;
    color: white;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
    transition: background-color 0.3s ease;
    font-size: 0.9em; /* 変更: ボタンの文字サイズを調整 */
}

.btn-detail:hover {
    background-color: #5a8726;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
	}




.heading-36 {
    position: relative;
    padding: .7em 1.3em;
    color: #333333;
	font-size: 20pt;
	margin-bottom: 10px;
}

.heading-36::before,
.heading-36::after {
    display: inline-block;
    position: absolute;
    width: 1em;
    height: 1em;
    content: '';
}

.heading-36::before {
    top: 0;
    left: 0;
    border-top: 3px solid #6ea924;
    border-left: 3px solid #6ea924;
}

.heading-36::after {
    bottom: 0;
    right: 0;
    border-bottom: 3px solid #6ea924;
    border-right: 3px solid #6ea924;
}


.heading-9 {
    position: relative;
    padding: .5em 1.5em;
    border-radius: 2020px;
    background-color:#8FCADD;
    color: #fff;
	font-size: 18px;
}

.heading-9::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 30px;
    width: 0;
    height: 0;
    border: 11px solid transparent;
    border-top: 11px solid #8FCADD;
}

.mini-font {
	font-size: 13pt;
	line-height: 30px;
}
.middle-font{
	font-size: 16pt;
	line-height: 34px;
}




/*新しい理念ブロックセクション (Philosophy Block Section)*/
.philosophy-block-section {
padding: 80px 20px; 
background-color: #ffffff; 
text-align: center; 
overflow: hidden;
}
.philosophy-block-wrapper {
display: flex;
flex-direction: column; /*モバイルでは縦並び*/
align-items: center; /*縦並び時の中央揃え*/
justify-content: center;
max-width: 1000px; /*セクション全体のコンテンツの最大幅*/
margin: 0 auto; /*中央寄せ*/
gap: 40px; /*テキストブロックと画像の間の隙間*/
}

.philosophy-block-text {
flex: 1; /* 利用可能なスペースを占有 */
text-align: left; /* テキストブロック内のテキストは左寄せ */
}

.philosophy-block-text h2 {
font-size: 2em; /* 見出しサイズ */
color: #2F6C2E;
margin-bottom: 25px;
line-height: 1.4;
}

.philosophy-block-text p {
font-size: 1.1em; /* 段落の文字サイズ */
line-height: 1.8;
color: #444;
margin-bottom: 15px;
}

.philosophy-block-image {
flex: 1; /* 利用可能なスペースを占有 */
width: 90%; /* モバイルでの画像の初期幅 */
max-width: 400px; /* 画像の最大幅 */
text-align: right; /* 画像を中央寄せ */
margin-top: 0; /* 画像が上に飛び出すのを防ぐための調整 */
}

.philosophy-block-image img {
width: 45%;
height: auto;
display: block; /* 余分な下マージンを消す */
}

/* PC向け (768px以上) */
@media (min-width: 768px) {
.philosophy-block-wrapper {
flex-direction: row; /* 横並び */
align-items: center; /* 要素を垂直方向の中央に配置 */
text-align: left; /* flexコンテナ内のテキストアライメントをリセット */
}

    .philosophy-block-text {
        /* flex-basis: 60%; */ /* 必要であれば幅を明示的に指定 */
        text-align: left; /* PCでのテキストアライメント */
        margin-right: 80px; /* テキストと画像の間に右マージン */
    }
    
    .philosophy-block-text h2 {
        font-size: 2.5em; /* PCでの見出しサイズ */
    }

    .philosophy-block-text p {
        font-size: 15px; /* PCでの段落の文字サイズ */
    }

    .philosophy-block-image {
    margin-left: 0; /* PCでは左マージンをリセット */
    text-align: right; /* 画像を右寄せ */
}
}

/* さらに大きな画面での調整（必要であれば） */
@media (min-width: 1024px) {
    .philosophy-block-wrapper {
        gap: 80px; /* さらに大きな画面での隙間 */
    }
    .philosophy-block-text h2 {
        font-size: 2.8em;
    }
    .philosophy-block-text p {
        font-size: 15px;
    }
}





/* 私たちが大切にする3つの協同セクション */
.cooperation-principles-section {
    padding: 60px 20px;
    background-color: #F9F9F9; /* 背景色 */
    text-align: center;
}

.cooperation-principles-section .section-title {
    font-size: 26px;
    font-family: 'Noto Serif JP', serif;
    color: #444444;
    margin-bottom: 20px;
}

.cooperation-principles-section .cooperation-intro {
    font-size: 15px;
    color: #444444;
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cooperation-image-top {
    width: 100%; /* 親要素の幅いっぱいに広げる */
    max-width: 650px; /* 画像の最大幅を設定（元の画像サイズに近い値） */
    height: auto; /* 高さは自動調整 */
    margin: 0 auto 40px auto; /* 中央寄せと下の余白 */
    overflow: hidden; /* ★重要: 画像がはみ出さないように親要素で隠す */
}

.cooperation-image-top img {
    width: 100%;
    height: 100%;            /* ←幅だけでなく高さも指定 */
    object-fit: contain;     /* 全体を見せつつ縦横比を保持 */
    object-position: center; /* 真ん中寄せ */
    display: block;
    margin: 0;
}

.cooperation-blocks-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* 必要に応じて折り返し */
    gap: 30px; /* 各ブロック間の隙間 */
    max-width: 1000px; /* 全体の最大幅 */
    margin: 0 auto;
}

.cooperation-block {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: left;
    width: calc(33.333% - 20px); /* 3列表示（gap考慮） */
    min-width: 280px; /* 最小幅を設定して狭くなりすぎないように */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}

.cooperation-block .block-number {
    position: absolute;
    top: -15px; /* ブロックの少し上に配置 */
    left: 50%;
    transform: translateX(-50%);
    background-color: #6EA924; /* 緑色の丸 */
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    z-index: 1; /* 内容より手前に表示 */
}

.cooperation-block p {
    font-size: 15px;
    color: #444444;
    line-height: 1.7;
    margin-top: 20px; /* 番号との間にスペースを設ける */
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
    .cooperation-image-top {
        width: 80%; /* タブレットでの画像の幅 */
        height: auto; 
    }
    .cooperation-blocks-wrapper {
        gap: 20px;
    }
    .cooperation-block {
        width: calc(50% - 15px); /* 2列表示 */
    }
}

@media (max-width: 768px) {
    .cooperation-principles-section {
        padding: 40px 15px;
    }
    .cooperation-principles-section .section-title {
        font-size: 22px;
    }
    .cooperation-principles-section .cooperation-intro {
        font-size: 14px;
        margin-bottom: 30px;
    }
    .cooperation-image-top {
        width: 100%; /* モバイルでの画像の幅 */
        height: auto; /* ★ここを `auto` に修正してください！ */
        margin-bottom: 30px;
    }
    .cooperation-blocks-wrapper {
        flex-direction: column; /* 縦並び */
        align-items: center; /* 中央寄せ */
        gap: 20px;
    }
    .cooperation-block {
        width: 90%; /* 各ブロックの幅をほぼ100%に */
        max-width: 400px; /* モバイルでの最大幅 */
        padding: 25px;
        text-align: left; /* モバイルではテキストを中央寄せ */
        align-items: center; /* モバイルでは内容を中央寄せ */
    }
    .cooperation-block .block-number {
        position: static; /* モバイルでは静的な位置に戻す */
        transform: none; /* 変形をリセット */
        margin-bottom: 10px; /* 下に余白 */
    }
    .cooperation-block p {
        margin-top: 0; /* 番号が静的なのでマージンをリセット */
    }
}

/* 事業形態のリストのところ */
.list-9 {
    list-style-type: disc;
    list-style-position: inside;
    padding: 1em;
    border: 2px solid #2589d0;
}

.list-9 li {
    padding: .5em;
}

.list-9 li:not(:last-child) {
    border-bottom: 1px dashed #2589d0;
}

.list-9 li::marker {
    color: #2589d0;
    font-size: 1.1em;
}

/* 年表 */
.timeline {
  list-style: none;
}
.timeline > li {
  margin-bottom: 60px;
}

.timeline p {
  font-size: 12pt; 
}

.timeline h3 {
  font-size: 12pt; 
	margin-bottom: 3px;
}

/* for Desktop */
@media ( min-width : 640px ){
  .timeline > li {
    overflow: hidden;
    margin: 0;
    position: relative;
  }
  .timeline-date {
    width: 110px;
    float: left;
    margin-top: 20px;
  }
  .timeline-content {
    width: 75%;
    float: left;
    border-left: 3px #e5e5d1 solid;
    padding-left: 30px;
  }
.timeline-content:before {
  content: "";
  width: 12px;
  height: 12px;
  background: #6fc173;
  position: absolute;
  left: 106px;
  top: 24px;
  border-radius: 100%;
}
}



/* --- フッター (Footer) --- */
.site-footer {
    background-color: #333; /* 暗めの背景色 */
    color: #fff; /* 文字色 */
    padding: 60px 20px 30px; /* 上下左右のパディング */
    font-size: 14px; /* 基本フォントサイズ */
}

.site-footer .container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap; /* 小さい画面で折り返す */
    justify-content: space-between; /* 要素間にスペースを均等に配置 */
    gap: 30px; /* 要素間の隙間 */
}

.footer-about,
.footer-nav,
.footer-links {
    flex: 1 1 250px; /* 各ブロックが柔軟に幅を取り、最小幅250pxで折り返す */
    margin-bottom: 20px; /* モバイル時のブロック間の下マージン */
}

.site-footer h3 {
    font-size: 1.2em;
    color: #66B9D4; /* 見出し色 */
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 区切り線 */
    padding-bottom: 10px;
}

.site-footer p {
    margin-bottom: 10px;
    line-height: 1.6;
}

.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer ul li {
    margin-bottom: 8px;
}

.site-footer ul li a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-footer ul li a:hover {
    color: #66B9D4; /* ホバー時の色 */
}

.footer-bottom {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* 上に区切り線 */
}

.footer-bottom p {
    margin: 0;
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.7);
}

/* モバイル向け調整 */
@media (max-width: 767px) {
    .site-footer .container {
        flex-direction: column; /* 縦並び */
        align-items: center; /* 中央寄せ */
        text-align: center;
    }
    .footer-about,
    .footer-nav,
    .footer-links {
        width: 100%; /* フル幅に */
        max-width: 300px; /* スマホでの最大幅 */
    }
    .site-footer h3 {
        text-align: center;
    }
    .site-footer ul {
        margin-bottom: 20px;
    }
}