@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
body{
	background-color:#fff;
	font-family: "Kosugi", sans-serif;
}

/************************************
**　　グローバルナビメニュー 
************************************/

/*マウスオーバーでアンダーライン*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 10px;/*線の位置*/
bottom: 10px;/*線の位置*/
height: 3px;/*線の高さ*/
width: 84%;/*線の幅*/
background: #005CD3;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
}

@media screen and (max-width: 1755px) {
.wrap {width: auto; overflow: hidden!important;}
}

/* ======================================================
   市長メッセージ（カラム）の調整
   ====================================================== */

/* カラム全体の幅を絞って中央寄せ */
.mayor-message-area {
    max-width: 1200px !important; /* 全体の横幅を制限 */
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    gap: 30px !important; /* 画像と文章の間の隙間 */
}

/* 左側の画像カラムを文章側に寄せる */
.mayor-message-area > .wp-block-column:first-child {
    display: flex !important;
    justify-content: flex-end !important;
}

/* スマホでは縦並びに戻す */
@media screen and (max-width: 781px) {
    .mayor-message-area {
        flex-direction: column !important;
        gap: 20px !important;
    }
    .mayor-message-area > .wp-block-column:first-child {
        justify-content: center !important;
    }
}

/* ================================================================
   1343px以下：モバイル表示への切り替え
   ================================================================ */
@media screen and (max-width: 1343px) {
    /* --- PCヘッダー・メニューを非表示 --- */
    .header-container, 
    .navi-in .menu-pc,
    #navi .navi-in .menu-header {
        display: none !important;
    }

    /* --- モバイルヘッダー・ボタンを表示 --- */
    #mobile-header,
    .mobile-menu-buttons,
    .mobile-header-menu-buttons {
        display: flex !important;
    }

    .mobile-header-menu-buttons {
        top: 0;
        bottom: auto;
        justify-content: space-between;
        min-width: 46px;
        box-shadow: 0 0 5px darkgrey;
    }

    /* --- レイアウト調整 --- */
    .navi-footer, .copyright, .footer-widgets > div, .content-in, main.main, div.sidebar {
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 10px 0;
    }

    .navi-footer-in > ul, .navi-footer-in > .menu-footer {
        justify-content: center;
        padding: 1em;
    }

    .footer-bottom-logo, .footer-bottom-content {
        float: none;
        text-align: center;
    }

    .footer-bottom-logo { line-height: 1; position: relative; bottom: auto; }
    .logo-footer { margin: 8px auto; }
    .logo-menu-button { flex-grow: 1; }

    .fb-like-message { font-size: 0.8em; line-height: 1.4; }
    .sidebar-scroll { position: static; }

    /* 背景固定の解除 */
    .ba-fixed.header, .ba-fixed.appeal {
        background-attachment: scroll !important;
        background-position: top center !important;
    }
    .header, .appeal { background-size: cover !important; }

    /* モバイルメニュー（中身）の調整 */
    #navi .navi-in > .menu-mobile {
        display: flex !important;
    }
    #navi .navi-in > .menu-mobile li {
        width: 50% !important;
        height: 40px;
        line-height: 40px;
    }
    #navi .navi-in > .menu-mobile li a { font-size: 14px; }

 /* --- モバイル表示時の余白確保（修正版） --- */

/* bodyに特定のクラスがついている時の指定 */
.mblt-header-mobile-buttons, 
.mblt-header-and-footer-mobile-buttons {
    margin-top: 50px !important;
}

/* 管理バーがある時の調整 */
.admin-bar.mblt-header-mobile-buttons, 
.admin-bar.mblt-header-and-footer-mobile-buttons {
    margin-top: calc(50px - var(--wp-admin--admin-bar--height)) !important;
}
}


/* --- 1344px以上（PC）ではモバイル版を確実に隠す --- */
@media screen and (min-width: 1344px) {
    #mobile-header {
        display: none !important;
    }
}

/* --- トップページ：PCでの重なり防止（前回の追加分） --- */
@media screen and (min-width: 1344px) {
    .home #content {
        margin-top: 90px !important; /* ヘッダーの高さ分、スライダーを下げる */
    }
}

#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}

.current-menu-item > a,
.current_page_item > a {
 color: #005CD3;
}

.header-container-in.hlt-top-menu {
  margin-top: 5px;
  margin-bottom: 5px;
}
.article h2 {
	background-color:#f5f6f700; 
}
h2[data-en] {
  position: relative;
  text-align: center;
}

h2[data-en]::after {
  content: attr(data-en);
  display: block;
  font-size: 0.8em;
  color: #003CAA;
  font-weight: 600;
  margin-top: 0.5rem; /* 見出しとの間隔を確保 */
}
.main {
  padding: 0px 29px;
}
.content {
  margin-top: 0px;
}
/*トップアイキャッチ*/
/* 1) カバーをコンテンツ幅の制限から外してフルブリードに */
.entry-content .wp-block-cover.alignwide,
.wp-block-cover.alignwide {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important; /* 左右の余白を打ち消して中央 */
}

/* 2) カバーの固定高さを無効化して、アスペクト比で高さを決める */
.wp-block-cover.alignwide {
  /* 画像の縦横比を指定（例：1024x630 → 1024/630）*/
  aspect-ratio: 1024 / 630 !important;
  min-height: unset !important;
  max-height: none !important;
}

/* 3) 背景画像が切れないように contain に変更 */
.wp-block-cover .wp-block-cover__image-background {
  object-fit: contain !important;      /* ★ここがポイント */
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
}

/* 4) 透過オーバーレイは 0（既に0ですが念のため） */
.wp-block-cover__background.has-background-dim {
  opacity: 0 !important;
}
/*トップアイキャッチ矢印*/
div#n2-ss-3 .nextend-arrow img {
    background-color: #003caa;
}
/* Smart Slider 3をゆっくりフェードイン（4秒＋0.5秒ディレイ） */
#n2-ss-3 {
  opacity: 0;
  filter: blur(8px);
  animation: ss3-fade-in 2s ease-out 0.5s both;
 will-change: auto; /* 一旦 will-change を無効化して様子を見る */
    backface-visibility: hidden; /* チラつき防止 */	
}

/* アニメーション定義 */
@keyframes ss3-fade-in {
  from { opacity: 0; filter: blur(8px); }
  to   { opacity: 1; filter: blur(0); }
}

/* アニメーション無効化（アクセシビリティ考慮） */
@media (prefers-reduced-motion: reduce) {
  #n2-ss-1 {
    animation: none;
    opacity: 1;
    filter: none;
  }
}

/* 16:9でレスポンシブに */
.oembed-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.oembed-responsive iframe,
.oembed-responsive object,
.oembed-responsive embed {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
/*トップページレイアウト*/
.top-flex{
	margin-top: 50px;
    margin-bottom: 50px !important;
	display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}
.top-text-01{
	display: flex;
    flex-direction: column;
}
.top-text{
	width:70%;
}
@media (max-width: 768px) {
.top-text{
	width:85%;
}
}

.top-img_left{
	margin:0 !important;
	max-width:680px;
    position: relative;
    left: -30px;
}
img.wp-image-410{
	width: 70%;
	display: inline;
}
.top-img_right{
	margin:0 !important;
	max-width: 680px;
    position: relative;
    right: -30px;
}
.img-button a{
	transition: opacity 0.3s ease; /* フェードの滑らかさ */
}
.img-button a:hover{
	opacity: 0.7; /* 透ける度合い（0～1） */
}
.kigyo-colum{
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}

img.wp-image-962, img.wp-image-627 {
    border-radius: 0!important;
}

.full-wide-img{
width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
}
.top-message{
	gap: 1.5rem;
	display: flex;
    justify-content: center;
}
@media (min-width: 768px) {
	.miryoku-img-tablet{
		display:none;
	}
}
@media (max-width: 768px) {
  .top-flex {
    margin-top: 50px;
    margin-bottom: 50px !important;
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
}
.top-img_left{
	margin:0 !important;
	max-width:680px;
    position: relative;
    left: 0px;
}
.top-img_right{
	margin:0 !important;
	max-width: 680px;
    position: relative;
    right: 0px;
}
.top-text{
	margin-top: 50px;
	}

/*top寄付企業紹介タブレット*/
.wp-block-columns {
  display: flex; /* 子要素を横並びにする */
　flex-direction: column;
  flex-direction: row; /* 横並び（デフォルト） */
  gap: 0px; /* 画像とテキストの間に隙間を作る */
}
	.entry-content .wp-block-cover.alignwide, .wp-block-cover.alignwide{
		display:none;
	}
.miryoku-img-tablet{
	width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
}

.miryoku-img-tablet img {border-radius: 0;}
	
.miryoku-img-tablet p{padding: 1em;}
}

/*ボタン装飾*/
.top-page-button a.wp-block-button__link{
    width: 100%;
	color:#000;
	border-radius: 100px;
    height: auto;
    line-height: 1.3;
    padding: calc(1em + 2px) calc(5em + 2px) calc(1em + 2px) calc(1em + 4px);
	background-color:#f6f5ed;
	position: relative;
    display: inline-block;
    font-size: clamp(0.75rem, -0.012rem + 3.81vw, 1rem);
}
.top-page-button a.wp-block-button__link:hover{
	color:#fff;
	background-color:#543522;
}
.wp-block-buttons .wp-block-button__link span{
	position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
}
.top-company-button a{
	color:#fff;
}
.top-company-button a:hover{
	color:#92E9FF;
}

/* --- 1. 動画コンテナ自体の制限を解除して中央へ --- */
.video-container, 
.instagram-container, 
.facebook-container {
    max-width: 800px !important; /* 動画の最大サイズ。お好みで 100% に変更可 */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
}

/* --- 2. 内部のビデオ要素の設定 --- */
.video-container .video {
    position: relative !important;
    padding-bottom: 56.25% !important; /* 16:9を維持 */
    height: 0 !important;
    overflow: hidden !important;
}

.video-container .video iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* --- 3. WordPressのブロックエディタ(YouTubeブロック)の中央寄せ --- */
.wp-block-embed.is-type-video {
    display: flex !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.wp-block-embed__wrapper {
    width: 100% !important;
    max-width: 800px !important; /* ここを調整すると動画の大きさが変わります */
    margin: 0 auto !important;
}

/* お知らせ一覧へ戻るボタンのデザイン */
.back-to-news-container {
  text-align: center;
  margin: 60px 0 40px;
  clear: both;
}

.back-to-news-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 40px;
  background-color: #003CAA; /* メインカラー */
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 5px;
  font-weight: bold;
  font-size: 16px;
  transition: all 0.3s ease;
  border: 2px solid #003CAA; /* ボーダー色 */
}

/* 左矢印の作成 */
.back-arrow {
  position: relative;
  width: 20px;
  height: 2px;
  background: #fff;
  margin-right: 15px;
  transition: all 0.3s ease;
}

.back-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
}

/* マウスを乗せた時：白背景に青文字/青矢印 */
.back-to-news-button:hover {
  background-color: #fff;
  color: #003CAA !important;
}

.back-to-news-button:hover .back-arrow {
  background: #003CAA;
}

.back-to-news-button:hover .back-arrow::before {
  border-color: #003CAA;
}

/* スマホ表示の調整 */
@media screen and (max-width: 480px) {
  .back-to-news-button {
    width: 85%;
    padding: 12px 10px;
    font-size: 15px;
  }
}

/*パンくず*/
.breadcrumb {
  margin: 1em 0.4em;
  color: #000;
  font-size: 13px;
}

.breadcrumb a {
  text-decoration: underline;
  color: #000;
}

.breadcrumb a:hover {
  text-decoration: none;
}


.breadcrumb.pbp-main-before, .breadcrumb.pbp-footer-before {
    padding: 0.6em 3em;
}

/*共創事業ページ*/
.kyoso-img img {
    width: 100%; 
    height: auto; 
    object-fit: unset !important;
    border-radius: 10px 10px 0 0;
}

.kyoso-block {
    background-color: #F7F5ED;
    padding-bottom: 20px;
    border-radius: 10px;
    overflow: hidden; /* 画像の角丸をはみ出させないため */
}

.kyoso-block p{
	margin: 15px 30px;
}
.page-id-16 .wp-block-button{
	width:80%;
}

.btn-bottom-list .wp-block-button__link{
	width: 100%;
	height:auto;
	text-align:left;
	line-height: 1.3;
    padding: calc(1em + 2px) calc(5em + 2px) calc(1em + 2px) calc(1em + 4px);
    background-color: #003caa;
    position: relative;
    display: inline-block;
    font-size: clamp(0.75rem, -0.012rem + 3.81vw, 1rem);
}
.btn-bottom-list .wp-block-button__link:hover{
	color:#92E9FF;
}
.btn-bottom-list .kyoso-button-text span{
	font-size: 18px;
    position: absolute;
    right: 25px;
	top: 50%;
    transform: translateY(-50%);
}
.btn-bottom-list .saikaihatu-button-text svg{
	font-size: 18px;
    position: absolute;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    right: 10%;
}

/*環境系事業アーカイブ*/
.archive-environment h1{
	position: relative;
    background-color: #f6f5ed;
    padding: 1.5rem 1.5rem 1.5rem 3.5rem;
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
    line-height: 1.4;
    border-radius: 10px;
}

.archive-environment h1::before{
	content: '';
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.75rem;
    height: 0.75rem;
    background-color: #003CAA;
    border-radius: 50%;
}

.archive-environment .n2_clear{
	margin-top:40px;
}

.kyoso-text h2{
	margin-top: 2em;
    margin-bottom: 1em;
    border-bottom: double 8px #8FC31F;
}

.archive-company-img{
	display: flex;
    align-items: center;
    justify-content: space-around;
}

.environments-grid{
	background-color: #F6F5ED;
    padding: 20px 30px 20px 30px;
    margin: 0 calc((100% - 100vw) / 2);
    margin-bottom: 25px;
}

.environments-grid .past-business{
	position: relative;
    padding-left: 1.2em;
    margin-bottom: 1em;
}

.environment-title{
	margin-left:30px;
}


.environments-grid .past-business::before{
	content: '';
    display: block;
    width: 0.3em;
    height: 100%;
    background-color: #003CAA;
    position: absolute;
    left: 0;
    top: 0;
}

.environment-link-card{
	width: auto;
    max-width: 640px;
	background-color: #fff;
    padding: 30px;
    display: inline-block;
    border-radius: 10px;
	box-shadow: 5px 5px 5px #00000029;
}

.environment-link-card-link{
	display: flex;
    align-items: center;
    flex-wrap: nowrap;
	text-decoration: none;
    color: #000;
}

/*カスタム投稿ページ*/
.eyecatch, .welfare .eyecatch, .disaster-resistant .eyecatch{
	text-align:center;
	margin-top:  1em;
}
.eyecatch img, .welfare .eyecatch img, .disaster-resistant .eyecatch img{
	width:90%;
}

.value-red-text {
    /* 外枠の設定 */
    text-align: center;
    border: solid 1px #c90000;
    color: #c90000;
    font-size: clamp(1.125rem, 1.089rem + 0.18vw, 1.25rem);
    padding: 20px; 
}

.value-red-text p {
    display: inline-block;
    text-align: left; 
    margin: 0; 
    line-height: 1.8; 
}

.wp-caption {
    border: none !important;
    background-color: transparent !important;
}



.company-value-flex{
	display: flex;
    align-items: center;
    justify-content: space-around;
}
.company-value-flex img{
	max-width: 470px;
}

.future-developments-flex{
	display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
}
.future-developments-flex img{
	max-width: 470px;
}

/* 通常はflexレイアウト */
.company-value-flex,
.future-developments-flex,
.company-message-flex {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: nowrap;
}

/* 画像が無いとき(no-image)だけflexを解除 */
.company-value-flex.no-image,
.future-developments-flex.no-image,
.company-message-flex.no-image {
  display: block!important; /* 必要に応じて none でもOK */
}

/* --------------------------------------
 * 企業メッセージ/連携事例 共通の基本設定
 * -------------------------------------- */
.company-message-flex {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start; /* 上端揃えを基本とする */
    flex-wrap: nowrap;
}

/* 企業メッセージのテキストコンテンツ部分 */
.company-message-contents {
    flex-grow: 1; /* 残りのスペースを埋める */
    /* 既存の width: 55%; は、メディアクエリ内で画像がある時のみ適用するのが望ましい */
}

/* 企業メッセージの画像部分 */
.company-message-img {
    flex-shrink: 0; /* 画像が縮まないようにする */
}


/* --------------------------------------
 * PC向けスタイル（768px以上）
 * -------------------------------------- */
@media (min-width: 768px) {
    /* **画像がある場合** のレイアウト（キーマンメッセージに合わせた比率） */
    .company-message-flex:not(.no-image) .company-message-img {
        width: 40%; /* 画像の幅を40%に固定 */
    }
    
    .company-message-flex:not(.no-image) .company-message-contents {
        /* flex-grow: 1; で残りの60%を使用 */
        width: auto; 
    }
    
    /* **画像がない場合（no-imageクラスが付いている時）** のレイアウト */
    .company-message-flex.no-image {
        display: block !important; /* flexを解除 */
    }
	
	.company-message-flex.no-image .company-message-contents img {
        display: block; /* ロゴをブロック要素にして、次の要素を下に配置 */
        max-width: 100%; /* ロゴ自体のサイズは親要素の幅を超えないように */
        height: auto;
    }
	
	.company-message-flex.no-image .company-button {
       width: 60%;
    }

    .company-message-flex.no-image .company-message-contents {
        width: 100%; /* 全幅に広げる */
        /* もし、既存で中央寄せのスタイルがあれば解除 */
        align-items: flex-start; 
    }
}


/* 連携事例・企業メッセージのボタン（〇〇株式会社様） */
.company-message-flex .company-button {
    width: 100%;
    height: auto;
    text-align: left;
    line-height: 1.3;
    padding: calc(1em + 2px) calc(2.5em + 2px) calc(1em + 2px) calc(1em + 4px);
    background-color: #003caa;
    position: relative;
    display: inline-block;
	margin-top: 1.5rem;
}

.company-button a {
    display: block;
    width: 100%;
    font-size: clamp(0.75rem, -0.012rem + 3.81vw, 1.2rem);
    color: #fff;
    text-decoration: none;
    padding: calc(0.9em + 2px) calc(2.5em + 2px) calc(0.9em + 2px) calc(1em + 4px);
    box-sizing: border-box;
}

.company-button i {
    position: absolute;
    top: 50%; 
    transform: translateY(-50%); 
    right: 15px; 
    font-size: 1.5rem;
    color: #fff;
	transition: color 0.2s ease; 
}

.company-button:hover {
    /* 元の色 #003CAA よりわずかに明るい青を設定します */
    background-color: #0047C4; /* 例: アクセシビリティを維持しつつわずかに薄い青 */
    cursor: pointer; /* ポインターアイコンを表示 */
}

.co-creation-business-buttons .business-button-link{
	height: 5rem;
	display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background-color: #f6f5ed; /* ベージュの背景色 */
    border: 1px solid #ddd;
    border-radius: 50px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    margin-bottom: 1em; /* モバイルでの間隔 */
}
/*PC以下のサイズ*/
@media screen and (max-width: 768px){
.company-value-flex,
.future-developments-flex,
.company-message-flex {
	display: flex;
    gap: 1.5rem;
    align-items: center;
   	flex-wrap: nowrap;
    flex-direction: column;
}
	
.company-value-flex p{
	order:2;
	}
.company-value-flex img{
	order:1;
	width:100%;
	}
.future-developments-flex img{
		width:100%;
	}

.company-message-flex img{
	margin: 0;
}
.company-message-contents{
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;	
	}
.company-message-flex .company-message-contents{
		order:2;
	}
	.company-message-flex .company-message-img{
		order:1;
	}
}

/* ホバー時のスタイル */
.business-button-link:hover {
    background-color: #f5f0e8;
}

/* SVGアイコン（右側の矢印）のスタイル */
.business-button-link::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg>');
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    margin-left: 1rem;
}
*, *:before, *:after {
    box-sizing: border-box;
}
.co-creation-business-buttons{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.co-creation-business-buttons > *{
    width: calc( 33.33333% - 8px ) ;
    margin-right: 12px;
    margin-bottom: 12px;
}
@media (max-width: 1023px){
.co-creation-business-buttons > *{
    width: calc( 50% - 5px ) ;
    margin-right: 5px;
    margin-bottom: 12px;
}
}
.co-creation-business-buttons > *:nth-child(3n){
    margin-right: auto;
}

/* =========================================== */
/* スマホ向け最終調整 (画面幅767px以下) */
/* =========================================== */
@media (max-width: 767px) {
    /* -------------------------------------- */
    /* 1. 連携事例エリア全体 (company-message-contents) の幅調整 */
    /* -------------------------------------- */
    
    /* PCで設定されている width: 55% を !important で強制的に 100% に上書き */
    .company-message-contents {
        width: 100% !important; 
        /* 左右のパディングやマージンをリセットし、親要素との余白をなくす */
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        
        /* 中央寄せを維持しつつ、幅いっぱいに広げる */
        align-items: center; 
        box-sizing: border-box; 
    }

    /* 2. 青いボタン (.company-button) の幅調整 */
    .company-button {
        width: 100% !important; 
        /* ボタン内の左右の余白を画面端に寄せすぎないように調整 */
        padding-left: 15px !important;
        padding-right: 25px;
		font-size:1rem
    }
    
    /* -------------------------------------- */
    /* 3. 共創事業リスト (co-creation-business-buttons) の調整 */
    /* -------------------------------------- */
    
    /* リストコンテナ全体の調整 */
    .co-creation-business-buttons {
        display: block; /* 複数の列になるのを防ぐ */
        padding: 0;
        margin-left: 0; 
        margin-right: 0;
    }

    /* 各ボタン（aタグ）の幅を100%に */
    .co-creation-business-buttons .business-button-link {
        display: flex;             
        align-items: center;       
        width: 100%;               
        margin-bottom: 10px;       
        /* 左右の余白を狭くし、ボタンを画面いっぱいに広げる */
        padding: 12px 15px; 
        box-sizing: border-box; 
    }

    /* 矢印（iタグなど）を右端に配置 */
    .co-creation-business-buttons .business-button-link i,
    .co-creation-business-buttons .business-button-link svg {
        margin-left: auto; /* テキストを左、アイコンを右に寄せる */
        flex-shrink: 0;    
        padding-left: 0;
        margin-right: -5px; /* 矢印をさらに右端に寄せる */
    }
	
	.value-red-text{
		padding: 0.5em;
	text-align: left;
}
}

/* カード内のボタンを下端に配置（Cocoon/Gutenberg対応） */
.btn-bottom-list > .wp-block-column {
  display: flex;
  flex-direction: column;
}

/* 直接カラム直下にボタンがある場合 */
.btn-bottom-list > .wp-block-column > .wp-block-buttons {
  margin-top: auto;          /* これでボタンを一番下へ押し下げる */
}

/* 中身をグループで包んでいるケースに対応 */
.btn-bottom-list > .wp-block-column > .wp-block-group {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.btn-bottom-list > .wp-block-column > .wp-block-group > .wp-block-buttons {
  margin-top: auto;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1264px以下*/
@media screen and (max-width: 1264px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	.about-dhisplay{
	widows:auto;
	display:flex;
	flex-direction: column;
}
.pr-flex{
	display:flex;
	flex-direction: column;
}
	
 
}

@media screen and (max-width: 700px){
	.content {
        margin-top: 0px;
    }
}

/************************************
** 三次階層の見出し（H1）
************************************/
.single-company h1, .page-id-43 h1, .page-id-629 h1, .page-id-3 h1, .page-id-601 h1, .page-id-603 h1, .page-id-676 h1 {
    position: relative;
    background-color: #f6f5ed;
    padding: 1.5rem 1.5rem 1.5rem 3.5rem;
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
    line-height: 1.4;
    border-radius: 10px;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    box-sizing: border-box; /* はみ出し防止 */
}

/* H1見出しの青い丸装飾 */
.single-company h1::before, .page-id-43 h1::before, .page-id-629 h1::before, .page-id-3 h1::before, .page-id-601 h1::before, .page-id-603 h1::before, .page-id-676 h1::before {
    content: '';
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.75rem;
    height: 0.75rem;
    background-color: #003CAA;
    border-radius: 50%;
}

/* モバイル対応（H1） */
@media (max-width: 767px) {
    .single-company h1, .page-id-43 h1, .page-id-629 h1, .page-id-3 h1, .page-id-601 h1, .page-id-603 h1, .page-id-676 h1 {
        font-size: 1.5rem;
        padding: 1rem 1rem 1rem 3rem;
        line-height: 1.4;
        border-radius: 8px;
    }

    .single-company h1::before, .page-id-43 h1::before, .page-id-629 h1::before, .page-id-3 h1::before, .page-id-601 h1::before, .page-id-603 h1::before, .page-id-676 h1::before {
        left: 1rem;
        width: 0.6rem;
        height: 0.6rem;
        /* 1行目のテキスト中央に配置 */
        top: calc(1rem + (1.5rem * 1.4 / 2) - (0.6rem / 2)); 
        transform: none;
    }
}

/************************************
** 三次階層および年別見出し（H2）
************************************/
.single-company h2, .page-id-43 h2, .page-id-629 h2, .page-id-3 h2, .page-id-601 h2, .page-id-603 h2, .year-heading {
    position: relative;
    padding: 0 0 0 1.2em;
    line-height: 1.8em;
    margin-top: 2em;
    margin-bottom: 1em;
    font-size: 1.5em;
}

/* H2見出しの左側の青い縦棒装飾 */
.single-company h2::before, .page-id-43 h2::before, .page-id-629 h2::before, .page-id-3 h2::before, .page-id-601 h2::before, .page-id-603 h2::before, .year-heading::before {
    content: '';
    display: block;
    width: 0.3em; 
    height: 100%; 
    background-color: #003CAA; 
    position: absolute;
    left: 0;
    top: 0;
}

.single-company h2 + p,
.single-company h2 + div, .page-id-43 h2 + p, .page-id-629 h2 + p, .page-id-3 h2 + p, .page-id-601 h2 + p, .page-id-603 h2 + p, .page-id-43 h2 + div, .page-id-629 h2  + div, .page-id-3 h2 + div, .page-id-601 h2 + div, .page-id-603 h2 + div .year-heading + div{
    margin-top: -0.5em; /* 上の要素との間隔を調整 */
}

.single-company hr{margin-bottom: 1em;}





/* キーマンメッセージ全体をflexboxコンテナに設定 */
.keyman-message-flex {
    display: flex;
    flex-direction: column-reverse; /* モバイルでは画像を下に配置 */
    gap: 2rem;
    align-items: flex-start;
}

/* キーマン画像とテキストのスタイル */
.keyman-image img {
    width: 100%; /* モバイルで画像を幅いっぱいにする */
    height: auto;
    display: block;
}

.keyman-text-content {
    flex-grow: 1; /* テキストコンテンツが余白を埋めるようにする */
}

/* ハイライトテキストのスタイル */
.keyman-text-content .highlight-text, .company-message-text{
    color: #c90000; /* 赤色 */
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 1em;
}
.keyman-text-content .name-and-title, .company-name, .company-url-link,
body:not(.single-company) .contents-company-name {
	text-align: right;
	font-size: 0.9rem;
	margin-bottom: 1em;
}



/* --------------------------------------
 * PC向けスタイル（768px以上）
 * -------------------------------------- */
@media (min-width: 768px) {
    .keyman-message-flex {
        flex-direction: row-reverse;
        align-items: flex-start;
    }

    .keyman-image {
        flex-shrink: 0; /* 画像が縮まないようにする */
        width: 40%; /* 画像の幅を調整 */
    }

    .keyman-text-content {
        flex-grow: 1;
    }
}

/* モバイルでは画像を上に、テキストを下に配置 */
@media (max-width: 767px) {
    .keyman-message-flex {
        display: flex;
        flex-direction: column; /* HTMLの記述順通りに表示 */
        gap: 1.5rem;
    }
}

/* 事業へのリンク */
.related-projects {
    background-color: #CFEEFB;
    padding: 1.5em;
	margin-top: 2em;
}

.related-projects h2{padding-top:0!important; margin-top:0!important; padding-left:0;}
.related-projects h2::before{ background:none;}

.projects-buttons {
    display: flex;
    gap: 20px; /* ボタン同士の間隔 */
    flex-wrap: wrap; /* 画面が狭いときは折り返す設定 */
}

/* 個別ボタン：既存のものを少し調整 */
.project-button {
    flex: 1; /* 横幅を均等に広げる（お好みで） */
    min-width: 300px; /* 折り返しの基準となる最小幅 */
    
    /* 以下は現在の設定を維持 */
    width: auto;
    max-width: 640px;
    background-color: #fff;
    padding: 20px;
    display: flex;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #00000029;
    align-items: center;
    flex-wrap: nowrap;
    text-decoration: none;
    color: #000;
    border: 1px solid #ddd;
    position: relative;
    padding-right: 50px;
}

/* 画像とテキストの間に余白を作る */
.project-button img {
    margin-right: 20px;
    border-radius: 5px; /* 角を少し丸くすると馴染みます */
}


/* ================================== */
/* Font Awesome 矢印の追加 */
/* ================================== */

.project-button::after {
    /* Font Awesome 5 Free "arrow-right" (→) のコード */
    content: '\f061'; 
    font-family: 'Font Awesome 5 Free'; /* Font Awesomeのフォントを指定 */
    font-weight: 900; /* Solidアイコンの場合のウェイト */
    
    /* 絶対配置で右端に寄せる */
    position: absolute;
    right: 20px; /* カードの右端からの距離 (padding-rightの内側) */
    top: 50%;
    transform: translateY(-50%); /* 垂直方向の中央揃え */
    
    font-size: 16px; /* 矢印のサイズ調整 */
    color: #333; /* 矢印の色 */
}

/* ================================== */
/* 内部要素の調整 */
/* ================================== */

/* 画像とテキストの間に少しスペースを空ける */
.project-button img {
    margin-right: 20px; 
    flex-shrink: 0;
}

/* テキスト（事業名）の文字サイズを大きくする */
.project-button span {
    flex-grow: 1;
    font-size: 20px; 
    font-weight: bold;
}

/* ================================== */
/* 内部要素の調整 */
/* ================================== */

/* 画像とテキストの間に少しスペースを空ける */
.project-button img {
    margin-right: 20px; 
    flex-shrink: 0; /* 画像が縮まないように */
}

/* テキストを調整 */
.project-button span {
    flex-grow: 1;
}


@media (max-width: 768px) {
	.related-projects {
    padding: 1em 0.5em;
}
    /* ----------------------------- */
    /* 1. カード全体のパディング調整 */
    /* ----------------------------- */
    .project-button {
        /* スマホでカードの幅を調整 */
        max-width: 100%; 
        /* 左右の余白を減らす、または外側の要素で調整 */
        padding: 10px; /* パディングを少し減らす */
        /* 矢印分の右側パディングも調整 */
        padding-right: 40px; 
    }

    /* ----------------------------- */
    /* 2. 画像サイズの縮小 */
    /* ----------------------------- */
    .project-button img {
        /* 画像の幅と高さを小さくする (例: 150pxから80pxへ) */
        width: 80px;
        height: 80px;
        /* 右側のマージンも調整 */
        margin-right: 15px; 
    }

    /* ----------------------------- */
    /* 3. テキストの調整 */
    /* ----------------------------- */
    .project-button span {
        /* フォントサイズをスマホ向けに調整（必要であれば） */
        font-size: 16px; 
        /* 垂直方向の中央揃えを維持 */
        align-self: center; 
    }

    /* ----------------------------- */
    /* 4. 矢印の位置調整 */
    /* ----------------------------- */
    .project-button::after {
        /* カードのパディング変更に合わせて右端からの位置を再調整 */
        right: 10px; 
    }
}

/* --------------------------------------
 * ページ下部のボタンのスタイル
 * -------------------------------------- */

.common-buttons {
    margin-top: 3em;
    margin-bottom: 3em;
}

.button-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background-color: #f6f5ed; /* ベージュの背景色 */
    border: 1px solid #ddd;
    border-radius: 50px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    margin-bottom: 1em; /* モバイルでの間隔 */
}

/* ホバー時のスタイル */
.button-link:hover {
    background-color: #f5f0e8;
}

/* SVGアイコン（右側の矢印）のスタイル */
.button-link::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg>');
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    margin-left: 1rem;
}

/* --------------------------------------
 * PC向けスタイル（768px以上）
 * -------------------------------------- */
@media (min-width: 768px) {
    .common-buttons {
        display: flex;
        gap: 2rem;
    }

    .button-link {
        flex: 1; /* ボタンを均等な幅にする */
        margin-bottom: 0; /* PCではマージンをリセット */
    }
}

/* PC向け：コンテンツの最大幅を1300pxに設定し、中央に配置 */
@media (min-width: 769px) {
    .single-company-content-wrapper {
        max-width: 1300px;
        margin: 0 auto;
        padding: 0 20px; /* 左右に余白を追加 */
        box-sizing: border-box;
    }
	
	.single-company-content-wrapper p, .company-website{padding: 1em;}
}

/* スマホ向け：余白を確保し、幅いっぱいに広げる */
@media (max-width: 768px) {
    .single-company-content-wrapper {
        width: 100%;
        padding: 0 16px; /* 左右に16pxの余白を追加 */
        box-sizing: border-box;
    }
}


/* 寄附企業紹介のタイトルエリアのスタイル */
.page-header-archive-company h1.entry-title::after {
    content: 'DONORS & CO-CREATION PROJECTS'; /* 英語タイトルを「寄附企業紹介」用に変更 */
    display: block;
    color: #003CAA;
    font-size: 24px;
    font-weight: normal;
    text-transform: uppercase;
    margin-top: 15px;
}

/* 企業カードのレイアウト（全画面共通） */
.companies-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 企業カードのスタイル（全画面共通） */
.company-link-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(50% - 10px); /* PC：2列表示（ギャップ分を引く） */
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s ease;
}

/* ホバー時のスタイル */
.company-link-card:hover {
    background-color: #eaeaea;
	color: #005CD3;
}

/* リンク内のテキストスタイル */
.company-link-card h2 {
    margin: 0;
    font-size: 1.2rem;
}

/* 罫線のスタイル調整 */
.section-divider {
    border: none;               /* デフォルトの境界線をリセット */
    border-top: 1px solid #ccc; /* 灰色の実線1pxを上側に引く */
    margin-top: 40px;           /* 罫線の上に大きな余白 */
    margin-bottom: 30px;        /* 罫線の下に余白 */
    width: 100%;                /* 幅いっぱいに表示 */
    box-sizing: content-box;    /* ボックスサイズの計算方法を標準に戻す */
}

/* 注釈テキストのスタイル調整 */
.disclaimer-text {
    font-size: 0.9em;        /* 少し小さめの文字に */
    color: #333;             /* 灰色にして目立ちすぎないように */
}

.company-logo img, .company-message-contents img{border-radius: 0!important; padding:1rem 0;}

/* -------------------
   モバイル用スタイル
   ------------------- */
@media screen and (max-width: 767px) {
    /* 企業カードを1列表示にする */
    .company-link-card {
        width: 100%;
    }
    
    /* 英語タイトル（17px）と日本語タイトルとの間隔を調整 */
    .page-header-archive-company h1.entry-title::after {
        font-size: 17px;
        margin-top: 5px;
    }
}


/* 二次階層用 */
.page-id-13 .article-header, .page-id-16 .article-header, .post-type-archive-company .article-header, .page-id-498 .article-header, .page-id-22 .article-header{
  background-color: #F6F5ED;
 padding: 20px 29px; /* 見出し内容の左右の余白を確保 */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
}

/* 日本語のページタイトルのスタイル */
.entry-title {
  color: #000000;
  font-size: clamp(1.5rem, 1.214rem + 1.43vw, 2.5rem);
  font-weight: bold;
  margin-bottom: 0; /* 下の英語タイトルとの間隔を詰める */
}

/* ページタイトルに:after擬似要素で英語を追加 */
.entry-title::after {
  display: block;
  color: #003CAA;
  font-size: 24px;
  font-weight: normal;
  text-transform: uppercase;
  margin-top: 15px; /* タイトルとの間隔を調整 */
}

body.page-id-13 .entry-title::after{content: 'ABOUT';}
body.page-id-16 .entry-title::after{content: 'CO-CREATION PROJECTS';}
body.page-id-498 .entry-title::after{content: 'CHARM';}
body.page-id-22 .entry-title::after{content: 'CONTACT';}




@media screen and (max-width: 767px) {
  /* ページタイトルエリアの余白を調整 */
.page-id-13 .article-header, .page-id-16 .article-header, .post-type-archive-company .article-header, .page-id-498 .article-header, .page-id-22 .article-header,{
    /* スマホで横幅いっぱいに広げるための調整。29pxは元のpaddingです */
    padding: 10px 29px!important;
  }

  /* 日本語のページタイトル（28px） */
  .entry-title {
    font-size: 25px;
  }
  
  /* 英語タイトル（17px）と日本語タイトルとの間隔を調整 */
  .entry-title::after {
    font-size: 17px;
    margin-top: 5px; /* ここで上下の間隔を調整 */
  }
}

img {
  border-radius: 10px; /* 角を10ピクセル丸くする */
}



/* PC向けのスタイル（例として画面幅769px以上）*/
@media (min-width: 769px) {
body:not(.home) .entry-content {
    max-width: 1300px;  /* コンテンツの最大幅を1300pxに制限 */
    margin: 0 auto;     /* コンテンツを中央に配置 */
    padding: 0 20px;    /* 左右に余白を設けて、テキストが端に寄りすぎないようにする */
  }
	body:not(.home) .entry-content p{padding: 1em;}
}

@media screen and (max-width: 834px) {
    main.main, div.sidebar
特異性: (0,1,1)
 {
        padding: 0 16px;
        margin: 12px 0;
        border-width: 0;
    }
}
/* スマホ向けのスタイル（例として画面幅768px以下）*/
@media (max-width: 768px) {
  .entry-content {
    padding: 0 16px;   /* 左右に16pxの余白を設ける */
    width: 100%;       /* 親要素の幅いっぱいに広げる */
    /*
    box-sizing: border-box; をここに追加すると、paddingを含めた幅で計算され、
    はみ出しを防げます。
    */
    box-sizing: border-box; 
  }
}

/* wp-block-columnsのクラスを親要素として利用 */
.wp-block-columns {
  display: flex; /* 子要素を横並びにする */
  flex-direction: row; /* 横並び（デフォルト） */
  gap: 20px; /* 画像とテキストの間に隙間を作る */
}

/* スマホ向けのスタイル (画面幅が768px以下の場合に適用) */
@media (max-width: 850px) {
  .wp-block-columns {
    flex-direction: column; /* 子要素を縦並びにする */
  }
.top-message {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

  /* 画像の表示順をテキストより前にする */
  .wp-block-columns img {
    order: -1!important; /* order: 0 の要素より先に表示される */
  }
}



@media screen and (max-width: 834px) {
  main.main,
  div.sidebar {
    padding: 0 16px;
    margin: 12px 0;
    border-width: 0;
  }
}



/* PCとモバイルの両方に適用されるフッターメニューのリストアイテム */
.widget_nav_menu ul.menu li a {
  position: relative;
  padding-left: 50px; /* 矢印アイコンのスペースを確保 */
}
.widget_nav_menu ul.menu li a::after {
  /* Font Awesomeの場合 */
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'></circle><polyline points='12 16 16 12 12 8'></polyline><line x1='8' y1='12' x2='16' y2='12'></line></svg>");
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-left: 1rem;
  position: absolute;
  top:25%;
  left: 0;
  color: #000;
}
@media screen and (max-width: 768px){ 
.widget_nav_menu ul.menu li a::after {
    content: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'></circle><polyline points='12 16 16 12 12 8'></polyline><line x1='8' y1='12' x2='16' y2='12'></line></svg>);
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-left: 0;
    position: absolute;
    top: 10%;
    left: 0;
    color: #000;
}
}
@media screen and (min-width: 834px){ 
#footer{
	background-image:url(https://kigyou-furusato-yokkaichi.jp/cms/wp-content/uploads/2025/07/24550999-1.png);
  background-repeat:  no-repeat;   
	background-position: right 10px bottom 10px;    	
	width:auto;                       
  height:300pX;                     
}
}
#footer{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
}

}
.fax-p{
    margin-left: 2px;
}
.fax-spacing{
	letter-spacing: 3.1px;
}
@media (max-width: 767px) {
  /* メニューコンテナをフレックスボックスに設定 */
  .menu-footer-container ul {
    display: flex;
    flex-wrap: wrap; /* 項目を折り返して複数行にする */
    justify-content: space-between; /* 項目間に均等なスペースを配置 */
  }

  /* メニュー項目（li）の幅を設定 */
  .menu-footer-container ul li {
    width: 48%; /* 2列表示にするため、幅を48%に設定 */
    margin-bottom: 10px; /* 項目間の下部余白 */
    box-sizing: border-box; /* パディングやボーダーを含めて幅を計算 */
  }

  /* リンクの幅を親要素に合わせる */
  .menu-footer-container ul li a {
    display: block;
	padding:0 0 0 30px!important;
  }
}
@media screen and (min-width: 1264px)!important{
    .footer-widgets {
        display: block !important;
    }
}
@media (max-width: 767px) {
  #footer {
    background-image: none !important;
    height: auto; /* 高さを自動調整 */
    padding-bottom: 30px; /* 必要に応じて下部の余白を調整 */
  }
}

aside#media_image-4{text-align: center;}

/* FAQ  */
.faq-item-content p{padding:0!important;}

/* 画像バナーのhover設定 */
.image-link-button img {
  /* 透明度を1.0（完全に不透明）に設定 */
  opacity: 1.0; 
  
  /* ホバー時に滑らかに変化させるためのトランジションを設定 */
  transition: opacity 0.3s ease; 
  
  /* <img>がボタンとして機能しやすいように設定 */
  display: block; 
  width: 100%; /* 親要素の幅いっぱいに */
  height: auto;
}

/* リンク（<a>タグ）にマウスが乗ったとき、その中の<img>要素のスタイルを適用 */
.image-link-button:hover img {
  /* 透明度を下げて薄くする (例: 0.6) */
  opacity: 0.6; 
}



/* トップページお知らせ */
h2.news{
	border-left: 5px solid #003CAA; /* 青色の線を追加 */
    padding:0 0 0 10px; /* 線とテキストの間隔 */
    margin:2em 0 0 0;
    font-size: 24px;
}

/* リスト全体 - PCでの最大幅設定と中央寄せ */
.info-list {
    max-width: 1200px; /* PCでの最大幅 */
    margin-left: auto;
    margin-right: auto;
    padding-left: 0; 
    list-style: none; 
}

/* リストアイテム */
.info-list-item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start; /* 中央揃え(center)から上揃えに変更：タイトルが複数行になっても日付が上に固定される */
    padding: 2em 0; /* 余白を微調整 */
    position: relative;
    line-height: 1.5;
    border-bottom: 2px dashed #ccc; /* すべてに適用し、最後だけ消す方が管理が楽です */
}

/* 日付の親要素（ここが縦ラインを揃える鍵） */
.info-list-item-meta {
    display: flex; 
    align-items: center;
    order: 1; 
    flex-shrink: 0; 
    width: 160px; /* ★ここを固定幅にすることで、タイトルの開始位置がピシッと揃います */
    margin-right: 20px; 
    font-size: 1em;
    color: #333;
}

/* 日付 */
.info-list-item-date {
    margin-right: 0;
    color: #000 !important;
    /* margin-bottom: 8px; は不要になるため削除（横並び時） */
}

/* 記事コンテンツ */
.info-list-item-content {
    order: 2; 
    flex-grow: 1; 
    margin: 0;
}

.info-list-item-content-link {
    display: block;
    text-decoration: none;
    color: #333;
    padding-right: 35px; /* 矢印との重なり防止 */
    position: relative; 
}

/* 矢印 (Font Awesome) */
.info-list-item-content-link::after {
    content: '\f061' !important; 
    font-family: 'Font Awesome 5 Free'; 
    font-weight: 900; 
    position: absolute;
    right: 0; 
    top: 5px; /* 上揃えに合わせて位置を固定 */
    font-size: 14px; 
    color: #333;
}

/* 最後の下線を消す */
.info-list-item:last-child {
    border-bottom: none;
}

.info-list-caption,
.info-list-item-categorys {
    display: none; 
}

/* 一覧ページへのリンク（右寄せ） */
.info-list-page-link {
    max-width: 1200px; 
    margin: 20px auto;
    text-align: right; 
}

.info-list-page-link a {
    display: inline-block; 
    text-decoration: underline; 
    color: #333; 
    padding-right: 25px; 
    position: relative;
    font-size: 16px;
}

.info-list-page-link a::after {
    content: '\f061'; 
    font-family: 'Font Awesome 5 Free'; 
    font-weight: 900;
    position: absolute;
    right: 0; 
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #333;
    text-decoration: none;
}



/* ============================= */
/* スマートフォン対応 (768px以下) */
/* ============================= */
@media (max-width: 768px) {
    .info-list-item {
        flex-direction: column;
        align-items: flex-start; 
        padding: 1.5em 0;
    }

    .info-list-item-meta {
        order: 1; 
        width: 100%; /* スマホでは幅100%に */
        margin-right: 0;
        margin-bottom: 5px; 
    }

    .info-list-item-content {
        order: 2; 
        width: 100%; 
    }
    
    .info-list-item-content-link {
        padding-right: 25px; /* スマホでも矢印を出す場合はスペース確保 */
    }

    .info-list-item-content-link::after {
        display: block; /* スマホでも右矢印を維持する場合 */
        top: 50%;
        transform: translateY(-50%);
    }
}

.related-entry-card-content, .entry-card-content {
  padding-bottom: 0.5em;
}


/* 投稿ページ (.single-post) の h1 スタイル */
.single-post .entry-title { 
    position: relative;
    background-color: #f6f5ed;
    padding: 1.5rem 1.5rem 1.5rem 3.5rem;
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
    line-height: 1.4; /* 行の高さを指定して、::beforeの配置基準にする */
	border-radius: 10px;
}

.single-post .entry-title::before {
    content: '';
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.75rem;
    height: 0.75rem;
    background-color: #003CAA;
    border-radius: 50%;
}

/* モバイル対応（画面幅が狭い場合） */
@media (max-width: 767px) {
    .single-post .entry-title {
        font-size: 1.5rem;
        padding: 1rem 1rem 1rem 3rem;
        line-height: 1.4; /* モバイルでも行の高さを指定 */
	    border-radius: 8px;
    }

    .single-post .entry-title::before {
        left: 1rem;
        width: 0.6rem;
        height: 0.6rem;
        /* top: padding-top + (font-size * line-height / 2) - (丸の高さ / 2) */
        top: calc(1rem + (1.5rem * 1.4 / 2) - (0.6rem / 2));
        transform: none; /* translateYを無効にする */
    }
}

.single-post .cat-label {display: none}

.sidebar{padding-top:0px; margin-top:0px;}

.eye-catch {margin: 1em auto;}
@media (min-width: 768px) {
.eye-catch {
  width: 80%;
}
}


/* --------------------------------------
 * 共通スタイル: すべての事業紹介ページに適用
 * クラス: .archive-project-single
 * -------------------------------------- */

/* 1. ページ全体とメインタイトル (H1) */
.archive-project-single h1.entry-title {
	position: relative;
    /* environment のスタイルをそのまま適用 */
    background-color: #f6f5ed;
    padding: 1.5rem 1.5rem 1.5rem 3.5rem;
    font-size:clamp(1.5rem, 1.286rem + 1.07vw, 2.25rem);
    font-weight: bold;
    margin: 0;
    line-height: 1.4;
	margin-bottom: 1em;
	width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
}

/* ------------------------------------------- */
/* スマホ向け調整 (画面幅767px以下) */
/* ------------------------------------------- */
@media (max-width: 767px) {
    /* H1タイトルの文字サイズをスマートフォン向けに調整 */
    .archive-project-single h1.entry-title, .archive-environment h1 {
        padding: 1rem 1rem 1rem 2.5rem;
    }
	
	
}

/* H1左側の丸い装飾 */
.archive-project-single h1.entry-title::before {
	content: '';
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.75rem;
    height: 0.75rem;
    background-color: #003CAA;
    border-radius: 50%;
}

/* 2. クライアント編集エリア内のH2スタイル（緑の二重下線） */
/* 固定ページエディターで入力されたH2に適用されます */
.archive-project-single .entry-content .kyoso-text {
    /* environment-text h2 のスタイルを流用 */
	margin-top: 1em;
    margin-bottom: 1em;
    /* 緑色の二重下線のみを適用 */
    border-bottom: double 8px #8FC31F; 
}

/* リンクカード内のH2（タイトル）から緑の二重下線を削除（リセット） */
/* [class$='-link-card'] は、個別のリンクカードを指します */
.archive-project-single [class$='-link-card'] .kyoso-text {
    border-bottom: none;
	font-size:1.2em;
}


/* 3. 記事リスト全体 (過去の共創事業) のコンテナ（全幅背景色）*/
/* .environments-grid のスタイルを流用 */
.archive-project-single .project-list-wrapper {
	margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%);
    padding-top: 30px;
    padding-bottom: 35px;
    background-color: #F6F5ED;
}


/* 4. 記事リスト内の「過去の共創事業」H2スタイル（青の縦線） */
/* h2.past-business に適用 */
.archive-project-single h2.past-business {
    /* environments-grid .past-business H2 のスタイルを流用 */
    position: relative;
    padding-left: 1.2em; /* 縦線分のパディング */
    margin-bottom: 1em;
    /* クライアント編集エリアの緑の二重線が継承されないようにリセット */
    border-bottom: none; 
}

/* h2.past-business の左側の青い縦線 */
.archive-project-single h2.past-business::before {
	content: '';
    display: block;
    width: 0.3em;
    height: 100%;
    background-color: #003CAA; /* 青色 */
    position: absolute;
    left: 0;
    top: 0;
}

/* 5. 記事リスト全体を囲むコンテナ (横並び用) */
/* 環境系事業のHTML構造に横並びレイアウトが無いため、念のためFlexboxを適用 */
.archive-project-single .project-list-wrapper .project-list-container {
    display: flex; 
    flex-wrap: wrap; 
    gap: 20px; /* カード間の間隔 */
}


/* 6. 個別リンクカードのコンテナとリンクのスタイル（動的クラス名に対応） */
/* [class$='-link-card'] は、末尾が '-link-card' で終わるクラスすべてに適用します */
.archive-project-single [class$='-link-card'] {
	/* environment-link-card のスタイルを流用 */
	width: calc(49% - 6px);
    max-width: 640px;
	background-color: #fff;
    padding: 15px;
    /* display: inline-block; の代わり */
    border-radius: 10px;
	box-shadow: 5px 5px 5px #00000029;
}

.culture-sports-link-card a{
	height:auto;
}
.culture-sports-link-card a h2{
	font-size:0.9em;
	width:70%;
}
.culture-sports-link-card .culture-sports-thumbnail{
	width:30%;
	height:auto;
}
.culture-sports-link-card .culture-sports-thumbnail img{
	width:auto;
	height:auto;
}

/* リンクカードの中のリンク (environment-link-card-link の再現) */
.archive-project-single [class$='-link-card-link'] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    text-decoration: none;
    color: #000;
    width: 100%; /* 親要素の幅を使う */
}

/* ---------------------------------------------------- */
/* スマホ向け調整 (画面幅767px以下) */
/* ---------------------------------------------------- */
@media (max-width: 767px) {
    
    /* リンクカードのスマホ対応 */
    .archive-project-single [class$='-link-card'] {
        /* 【スマホ設定】幅を100%に強制し、max-widthを解除 */
        max-width: 100%;
        width: 100%; 
        
        /* 【スマホ設定】左右の余白を調整（paddingを小さくする） */
        padding: 15px; 
        
        /* 親要素の余白の影響を避けるための微調整 */
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }
	
	   .archive-project-single .entry-content h2 {
        /* マージンを狭くする */
        margin-top: 0.5em; 
        margin-bottom: 0.5em; 
    }
	
	/* すべてのカスタム投稿のサムネイルコンテナを同じサイズに強制 */
    [class$='-thumbnail'] {
        /* スマホでのサムネイルサイズ（例: 80px x 80pxに縮小） */
        width: 80px; 
        height: 80px;
        overflow: hidden; 
        flex-shrink: 0; 
    }

    /* 内部の画像を枠いっぱいに広げ、トリミング */
    [class$='-thumbnail'] img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* リンクカード内のタイトル */
.archive-project-single [class$='-title'] {
	margin-left: 30px;
	font-size: 20px;
}

/* サムネイルのスタイル（あれば） */
.archive-project-single [class$='-thumbnail'] {
    /* サムネイル用のスタイルが必要であれば追加 */
}

/* プロジェクト概要のカテゴリーボタン */
.project-categories {
    margin-bottom: 20px;
    display: flex;       /* 横並び */
    flex-wrap: wrap;
    gap: 10px;           /* ボタン同士の間隔 */
}

.category-button {
    /* デザインの基本設定 */
    display: inline-block;
    padding: 8px 16px;
    border: 2px solid #004d40; /* 緑系の色 */
    border-radius: 9999px;
    text-decoration: none;
    font-weight: bold;
    
    /* 初期状態の色の設定（白背景、緑文字） */
    color: #004d40;
    background-color: #ffffff;
    
    /* ホバー時のアニメーションを滑らかにする */
    transition: background-color 0.3s, color 0.3s;
    font-size: 1rem; 
}

/* ホバー時のスタイル（背景が緑、文字が白） */
.category-button:hover,
.category-button:focus {
    background-color: #004d40; /* 背景色を緑に */
    color: #ffffff;            /* 文字色を白に */
}

h3 {
    margin-top: 3rem;    /* 上側の余白を増やす */
}

/* ========================================================= */
/* Smart Slider 3 最終確定版CSS: vh連動と縦切れ防止の絶対強制 */
/* 縦が狭いPCでも画像が切れない（vh連動）を実現します。 */
/* ========================================================= */

/* --------------------------------------------------------- */
/* PC表示 (幅 1200px以上): vh単位での高さ連動と重なり解消の強制 */
/* --------------------------------------------------------- */
@media screen and (min-width: 1200px) {
    /* 1. 【最重要】固定高さを無効化し、vh単位を強制適用 */
    #n2-ss-3-align {
        /* 固定高さを無効化し、vhに切り替え */
        height: auto !important;           
        /* ブラウザ縦幅の70		%を最小高さに設定 (縦が狭いPCで切れるのを防ぎます) */
        min-height: 70			vh !important;       
        
        /* 重なり防止の核となるレイアウトフローの復帰 */
        position: relative !important;     
    }

    /* 2. 【縦切れ防止の最終手段】画像自体が切れないように表示方法を強制 */
    /* Boxedモードでの縦切れを防ぎます */
    #n2-ss-3 .n2-ss-slide-background-container,
    #n2-ss-3 .n2-ss-slide-background-container img {
        object-fit: contain !important; /* 画像全体を表示領域に収める（縦切れ解消を保証） */
        max-height: 100% !important;   
        height: auto !important;       
    }

    /* 3. スライダーの直後のコンテンツを強制的に下に移動 (重なり防止) */
    .n2-section-smartslider[data-ssid="3"] + * {
        clear: both !important;
    }
}

/* --------------------------------------------------------- */
/* モバイル表示 (幅 700px以下): 非表示の絶対強制 */
/* --------------------------------------------------------- */
@media screen and (max-width: 700px) {
    /* スライダーを構成する全ての主要コンテナを強制的に非表示にする */
    .n2-section-smartslider[data-ssid="3"] {
        display: none !important;
        min-height: 0 !important;
    }
}

/* --------------------------------------------------------- */
/* 【追加】タブレット/中間の画面幅 (701px〜1199px): 強制表示の追加 */
/* --------------------------------------------------------- */
@media screen and (max-width: 1199px) and (min-width: 701px) {
    /* PC設定とモバイル設定の間でスライダーを強制的に表示 */
    .n2-section-smartslider[data-ssid="3"] {
        display: block !important; /* 非表示状態を解除 */
        min-height: 400px !important; /* 高さの崩れを防ぐため最小高さを確保 */
        height: auto !important;
        
        /* 矢印の外側配置をこの幅では無効化し、画像内に戻す */
        width: auto !important; 
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* スライダー画像を画面に収める */
    #n2-ss-3 .n2-ss-slide-background-image img {
        object-fit: cover !important;
        max-height: 100vh !important;
    }
    
    /* 矢印はPC専用の設定（1200px以上）で制御されているため、ここでは何もしなくてOK */
}

/* ========================================================= */
/* Smart Slider 3 矢印の画像外配置（PC専用）最終確定版 */
/* ========================================================= */
@media screen and (min-width: 1200px) {
    
    /* 1. 【最重要】スライダーセクション全体をブラウザ幅まで強制拡張 */
    /* これが、矢印を画像外に出すための余白を確保する鍵です。 */
    .n2-section-smartslider[data-ssid="3"] {
        width: 100vw !important; /* ブラウザ幅いっぱいに強制 */
        margin-left: calc(50% - 50vw) !important; /* 中央寄せをキャンセルし、左端に固定 */
        margin-right: auto !important;
        padding: 0 !important;
    }

    /* 2. 矢印の親要素のオーバーフローを許可 */
    #n2-ss-3-align {
        position: relative !important; 
        overflow: visible !important; /* 矢印がはみ出ることを許可 */
    }

    /* 3. 矢印を絶対配置に変更 */
    #n2-ss-3 .n2-ss-control-arrow {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 100 !important;
    }

    /* 4. 【左矢印】画像の外側へ配置 */
    /* ブラウザの左端から、画像本体が始まる位置に正確に配置 */
    #n2-ss-3 .n2-ss-control-arrow-prev {
        /* 矢印を、ブラウザ中央から画像幅の半分＋余白分を引いた位置に配置 */
        left: calc(50% - (1440px / 2) - 40px) !important; 
        right: auto !important;
    }

    /* 5. 【右矢印】画像の外側へ配置 */
    #n2-ss-3 .n2-ss-control-arrow-next {
        /* ブラウザ中央から、画像幅の半分＋余白分を引いた位置に配置 */
        right: calc(50% - (1440px / 2) - 40px) !important;
        left: auto !important;
    }
}

/* ============================
 * フッター二重表示の対策
 * PC/タブレット以上：.footer-widgets を表示
 * タブレット以下：.footer-widgets-mobile を表示
 * ============================ */

/* タブレット以下（〜833px）：PC用フッターを消して、モバイル用だけ表示 */
@media screen and (max-width: 833px) {
  .footer-widgets {
    display: none !important;
  }
  .footer-widgets-mobile {
    display: block !important;
  }
}

/* PC（834px〜）：モバイル用フッターを消して、PC用だけ表示 */
@media screen and (min-width: 834px) {
  .footer-widgets-mobile {
    display: none !important;
  }
  .footer-widgets {
    display: block !important;
	margin: 10px auto;
    display: flex;
  }
}

/* PC表示（834px以上）でのフッターレイアウト最終版 */
@media screen and (min-width: 834px) {

    /* 1. 親要素の設定: 横並び・上揃え・背景透過・花対策の余白 */
    .footer-widgets {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: flex-start !important; /* 上揃えを維持 */
        background-color: transparent !important; 
    }

    #footer-in {
        background-color: transparent !important;
    }

    /* 2. 左側（住所）の設定: 65%幅 */
    .footer-left {
        width: 65% !important;
        max-width: 65% !important;
        margin: 0 !important;
        padding-right: 20px !important;
    }

    /* 3. 右側（メニュー）の設定: 30%幅、左寄せ、高さ揃え */
    .footer-right {
        width: 30% !important;
        max-width: 30% !important;
        flex: 0 0 30% !important;
        
        /* タイトルが無いことによる上部のズレを補正し、左側と高さを揃える */
        margin-top: 2rem !important; 
        
        margin-left: auto !important; /* 右側に寄せる */
        text-align: left !important; /* 左寄せ */
    }

      
    /* 5. メニューリストのスタイル調整 */
    .footer-right ul {
        list-style: none !important;
        padding: 0 !important;
        display: block !important; 
    }

    .footer-right li {
        text-align: left !important; 
        margin-bottom: 0.5em !important;
    }

    /* 6. 不要な要素のリセット */
    .footer-center { display: none !important; }
    .footer-widgets::before, .footer-widgets::after { display: none !important; }
}

/************************************
** 寄附企業紹介ページ (archive-company.php) - 青ボタンデザイン
************************************/

/* PCとモバイルの共通スタイル (Flexboxグリッド) */
.companies-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; 
    list-style: none;
    padding: 0;
    margin: 0;
}

.company-link-card {
    display: flex;
    flex-direction: column;
    /* ★カード内のコンテンツを中央寄せ */
    justify-content: center; 
    align-items: center; 
    text-align: center; 

    width: calc(50% - 10px); /* 2列表示 */
    padding: 20px;
     background-color: #003caa; /* 青の背景色 */
    color: #ffffff; /* 白い文字色 */
    border: 1px solid #003caa; /* 青い枠線 */
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease; 
    height: auto;
}

/* ホバー時の反転スタイル（背景色は元の灰色: #f9f9f9） */
.company-link-card:hover {
    background-color: #f9f9f9; 
    color: #003caa; 
    border-color: #003caa;
    transform: translateY(-2px); 
}

/* リンク内のテキストスタイル - h2（企業名）のベーススタイル */
.company-link-card h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: bold; 
    transition: color 0.3s ease; 
}


/* -------------------
   モバイル用スタイル
   ------------------- */
@media (max-width: 767px) {
    .company-link-card {
        width: 100%; /* モバイルでは1列表示 */
    }
}


/* ========================================================= */
/* Smart Slider 3 表示制御 最終統合版 */
/* ID:3 (PC/タブレット用) と ID:4 (モバイル用) を700pxで切り替えます */
/* ========================================================= */

/* --------------------------------------------------------- */
/* 1. PC/タブレット用スライダー (ID:3) の表示設定 */
/* --------------------------------------------------------- */
/* 701px以上：強制表示 (PC/タブレット) */
@media screen and (min-width: 701px) {
    /* PC/タブレット用スライダーを強制的に表示 */
    .n2-section-smartslider[data-ssid="3"] {
        display: block !important;
        visibility: visible !important;
    }
}

/* 700px以下：強制非表示 (モバイル) */
@media screen and (max-width: 700px) {
    /* PC/タブレット用スライダーを強制的に非表示 */
    .n2-section-smartslider[data-ssid="3"] {
        display: none !important;
    }
}

/* --------------------------------------------------------- */
/* 2. モバイル用スライダー (ID:4) の表示設定 */
/* --------------------------------------------------------- */
/* 700px以下：強制表示 (モバイル) */
@media screen and (max-width: 700px) {
    /* モバイル専用スライダーを強制的に表示 */
    .n2-section-smartslider[data-ssid="4"] {
        display: block !important;
        visibility: visible !important;
        /* スマホで高さを確保するため、最小高さを指定 */
        min-height: 400px !important; 
        height: auto !important;
    }
}

/* 701px以上：強制非表示 (PC/タブレット) */
@media screen and (min-width: 701px) {
    /* モバイル専用スライダーを強制的に非表示 */
    .n2-section-smartslider[data-ssid="4"] {
        display: none !important;
    }
}
/* ========================================================= */

/* PC表示（768px以上）への適用 */
@media screen and (min-width: 768px) {
    .charm-sec02 {
        max-width: 800px; 
        margin-left: auto;
        margin-right: auto;
    }
    .charm-sec03 {
        text-align: right;
    }
}

/* スマホ表示（767px以下） */
@media screen and (max-width: 767px) {
    .charm-sec02, .charm-sec03 {
        /* スマホでは幅いっぱい・左揃え（デフォルト）に戻す */
        max-width: 100%;
        text-align: left;
    }
}

/* スクリーンリーダー用（非表示） */
.screen-reader-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* 外部リンクアイコン：JSで付与されたクラスにのみ表示 */
.has-external-icon::after {
    content: "\f35d"; /* FontAwesome5の場合 */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 6px;
    font-size: 0.85em;
    vertical-align: middle;
}

/* 画像が含まれるリンク（バナーなど）にはアイコンを出さない */
.has-external-icon:has(img)::after {
    display: none;
}

/* お知らせ一覧のリスト形式設定 */
.archive .entry-card-wrap {
    display: block;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    padding: 15px 0;
}

.archive .entry-card-content {
    margin: 0 !important;
    display: flex;
    align-items: center;
    width: 100%;
}

/* 日付の幅を固定して左に置く */
.archive .post-date {
    flex: 0 0 150px;
    font-size: 15px;
}

/* タイトルの文字を小さくして中央に */
.archive .entry-card-title {
    flex: 1;
    font-size: 15px; /* 文字サイズを小さく */
    font-weight: normal;
    margin: 0 !important;
}

/* 右端に矢印をつける */
.archive .entry-card-content::after {
    content: "\f061";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: auto;
    color: #333;
}

/* 1. 見出し（H1）は100vwで画面いっぱいに広げる */
h1.archive-title {
    position: relative !important;
    background-color: #f6f5ed !important;
    padding: 1.5rem 1.5rem 1.5rem 3.5rem !important;
    font-size: 2rem !important;
    font-weight: bold !important;
    margin: 0 0 3rem 0 !important; /* 下のお知らせとの間隔 */
    line-height: 1.4 !important;
    border-radius: 10px !important;
    color: #333 !important;
    
    /* 画面端まで広げる設定 */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    box-sizing: border-box !important;
    left: 0 !important;
    border: none !important;
}

/* フォルダアイコン消去と青い丸の付与（H1用） */
h1.archive-title .fa-folder-open,
h1.archive-title .fas { display: none !important; }
h1.archive-title::before {
    content: '' !important;
    position: absolute !important;
    left: 1.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0.75rem !important;
    height: 0.75rem !important;
    background-color: #003CAA !important;
    border-radius: 50% !important;
}

/* 2. お知らせ一覧（コンテンツ部分）を1300px幅で中央寄せにする */
@media (min-width: 769px) {
    /* お知らせ一覧のリスト部分を特定 */
    .archive #main #list {
        max-width: 1300px !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }
}

/* 3. モバイル対応（見出しの調整） */
@media (max-width: 767px) {
    h1.archive-title {
        font-size: 1.5rem !important;
        padding: 1rem 1rem 1rem 3rem !important;
    }
    h1.archive-title::before {
        left: 1rem !important;
        top: calc(1rem + (1.5rem * 1.4 / 2) - (0.6rem / 2)) !important;
        transform: none !important;
        width: 0.6rem !important;
        height: 0.6rem !important;
    }
}

/************************************
** トップページ 寄附企業セクションの調整
************************************/

/* 1. カラム全体の横幅を絞って中央に寄せる */
.top-company {
    max-width: 1000px; /* 全体の幅を少し狭めて中央に凝縮させる */
    margin: 0 auto !important;
    display: flex;
    justify-content: center; /* 子要素を中央寄せ */
    gap: 40px; /* 画像と画像の間隔を直接指定（広すぎる場合はここを減らす） */
}

/* 2. 各カラムの幅を自動調整 */
.top-company > .wp-block-column {
    flex: 0 1 450px; /* カラムの理想的な幅を450pxに設定 */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 3. 画像下のボタンやロゴの配置微調整 */
.top-company .wp-block-image {
    margin-bottom: 15px;
}

.top-company img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* 資料に合わせて少し角を丸く */
}

/* スマホ表示では縦並びにする */
@media screen and (max-width: 782px) {
    .top-company {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .top-company > .wp-block-column {
        flex: 0 1 auto;
        width: 100%;
        max-width: 500px;
    }
}

/* reCAPTCHAバッジを非表示にする */
.grecaptcha-badge { 
    visibility: hidden; 
}

/* スライダー全体のコンテナに溢れを表示させる設定 */
.n2-ss-slider-wrapper-inside {
    overflow: visible !important;
}

/* 左矢印を外側に移動 */
#n2-ss-3-arrow-previous {
    left: -60px !important; /* マイナス値で外側へ出す */
}

/* 右矢印を外側に移動 */
#n2-ss-3-arrow-next {
    right: -60px !important; /* マイナス値で外側へ出す */
}

/* スマホなど画面が狭い時は外に出すと消えてしまうので、内側の端に戻す */
@media screen and (max-width: 1500px) {
    #n2-ss-3-arrow-previous { left: 0px !important; }
    #n2-ss-3-arrow-next { right: 0px !important; }
	
	.nextend-arrow {
    margin: 0 !important;
}

/* ==========================================
   スライダーのモバイル表示(700px以下)調整
   ========================================== */
@media screen and (max-width: 700px) {
    /* PC用を隠す */
    .n2-section-smartslider[data-ssid="3"] {
        display: none !important;
    }

    /* モバイル用(ID:4)の高さを自動調整にする */
    div[id^="n2-ss-4"] {
        height: auto !important; /* 640px固定を解除 */
        min-height: 640px !important; /* 必要最低限の高さだけ確保 */
    }

    /* スライダー内部の画像コンテナも高さ追従させる */
    .n2-ss-slider-1, .n2-ss-slider-2, .n2-ss-slider-3 {
        height: auto !important;
    }
	
	/* 画像自体が切れないようにアスペクト比を維持 */
    div[id^="n2-ss-4"] .n2-ss-slide-background-image img {
        object-fit: contain !important; /* 画像全体が見えるようにするなら contain */
    }
}
	
/* お知らせ一覧：親要素の設定 */
.entry-card-content {
    display: flex !important;
    flex-direction: row !important; /* 横並びを強制 */
    align-items: center !important;
    flex-wrap: nowrap !important; /* 折り返しを物理的に禁止 */
    width: 100% !important;
    position: relative;
    overflow: hidden; /* はみ出し防止 */
}

/* 日付エリア：幅を固定 */
.post-date {
    flex: 0 0 auto !important; /* 幅を縮めない */
    width: 130px !important;
    margin-right: 15px !important;
    white-space: nowrap !important; /* 日付の改行を阻止 */
}

/* タイトルエリア：ここが改行の原因 */
.entry-card-title.card-title {
    display: inline !important; /* インライン化して横に要素を許可する */
    flex: 0 1 auto !important; /* 残りの幅を埋めるが、必要以上に広がらない */
    width: auto !important;    /* 100%を解除 */
    margin: 0 !important;
    padding-right: 35px !important; /* 右矢印用のスペース */
    font-size: 15px !important;
    font-weight: bold !important;
    line-height: 1.4 !important;
    word-break: break-all; /* 長すぎる場合は文字単位で折る（基本は1行） */
}

/* 外部リンクアイコン：タイトルのすぐ後ろに配置 */
.entry-card-title .fas.fa-external-link-alt {
    display: inline-block !important;
    margin-left: 5px !important;
    vertical-align: middle !important;
}

/* 右端の矢印：絶対配置で右端に固定 */
.entry-card-content::after {
    content: "\f061" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important; /* 垂直中央 */
}

	
/* ======================================================
   スライダー上の余白調整（上書き・統一設定）
   ====================================================== */

/* 1. PC・タブレット（702px以上）: 1emあける */
@media screen and (min-width: 702px) {
    .entry-content {
        padding-top: 1em !important;
        margin-top: 0 !important;
    }
}

/* 2. モバイル（701px以下）: 隙間を完全になくす */
@media screen and (max-width: 701px) {
    .entry-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    /* タイトルエリアやメインカラムの余白もリセット */
    .article-header, #main {
        padding-top: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .n2-section-smartslider {
        margin-top: 0 !important;
    }
}