/*-----------------------------------------------------------------------------------*/
/* awa369.css - 子テーマ独自追加CSS
/*-----------------------------------------------------------------------------------*/

/* カートアイコン非表示 */
.fa-shopping-cart {
    display: none !important;
}




/* 全体のテーマカラー変更 */
.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor,
.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor svg,
.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:active,
.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:hover,
.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:visited {
    color: #043994 !important; 
}


/* --- 統合版：#29AF8A を #043994 に統一 & ドロップダウン親メニュー強調 --- */

/* 1. ヘッダー上部：SVGアイコンの色を #043994 に固定 (colorではなくfillを使用) */
.borderless-company-information__item svg path {
    fill: #043994 !important;
}

/* 2. ヘッダーメニュー：現在地（.active）およびドロップダウンの親メニューを #043994 に強調 */
/* active, current-menu-ancestor, current-menu-parent に該当するリンクの色を変更 */
.desktop-mode .header-bottom .navbar-nav .active > .nav-link,
.desktop-mode .header-bottom .navbar-nav .current-menu-ancestor > .nav-link,
.desktop-mode .header-bottom .navbar-nav .current-menu-parent > .nav-link {
    color: #043994 !important; 
}

/* 3. ヘッダー上部のテキスト色が濃い青になってしまっているのを解除 (inheritでデフォルトに戻す) */
/* アイコンの隣の「info@awa369.com」などの文字色を元に戻すための措置 */
.top-header-left .borderless-company-information__item a,
.top-header-left .borderless-company-information__item span {
    color: inherit !important; /* または #333 などのデフォルト色 */
}

.borderless-company-information .borderless-company-information__item svg{
    color: #3379FC !important;
}



body {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased; /* Mac/Safari用: フォントを細く鮮明に */
  -moz-osx-font-smoothing: grayscale;   /* Firefox用 */
  text-rendering: optimizeLegibility;    /* 文字の読みやすさを優先 */
  overflow-x: hidden !important;
}


.awa369-iconani .vc_icon_element-icon,.about01 .vc_icon_element-icon,.about02 .vc_icon_element-icon {
display: none!important;
}

.desktop-mode .header-bottom .navbar-brand>img{
    padding: 3% 20% 2.5% 0;
}
/* ========================================================== */
/* 画面幅 1200px 未満 (タブレット・モバイル) で padding を無効化 */
/* ========================================================== */

@media (max-width: 1199.98px) {
    
    /* 元のCSSセレクタをそのまま使用し、paddingを0に上書きします */
    .desktop-mode .header-bottom .navbar-brand > img {
        /* すべての方向のpaddingを0にリセットします */
        padding: 0 !important; 
    }
}

.desktop-mode .header-bottom.header-medium .navbar-brand, .desktop-mode .header-bottom.header-medium .navbar-nav li a{
    display: inherit!important;
    white-space: nowrap;
}

.borderless-company-information .borderless-company-information__item h3{
    font-size: 1rem;
    white-space: nowrap;
    margin-bottom: 0;
}

.borderless-company-information .borderless-company-information__item a,.borderless-company-information .borderless-company-information__item span{
    font-size: 1rem;
    white-space: nowrap;
}

.borderless-company-information .borderless-company-information__item {
    margin: 0.25rem 1rem 0.25rem 0;
}

#site-info__copyright,
.footer-credit,
.credits,
.site-info {
  /* display: none !important; */
}



body .is-layout-flex h2{
    font-size: 0.9rem;
    white-space: nowrap;
}

.desktop-mode ul#widget-menu {
    margin: 0 -50px!important;
}

.copyright-footer-item {
    text-align: left;
    color: #555;
}


/* 全体は中央揃えのまま */
.bottom-footer .row.align-items-center {
    display: flex;
    align-items: center; /* デフォルト中央揃え */
}

/* 左のコピーライトだけ上寄せ */
.bottom-footer .copyright-footer-item {
    align-self: flex-start; /* 上寄せ */
}

.navbar {
    padding: 0 1rem .5rem 1rem!important;
    margin-top: -0.5rem!important;
}

.widgets-footer p{
margin: 1rem 1rem 1rem 0;
}


.vc_custom_1762619623030{
    padding-bottom: 3rem !important;
}


.top-sec01-title{
    letter-spacing: 0.17rem;
}

.support-title,.center-column{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.top-sec01-text{
    /* font-size: 20px;
    line-height: 2em;
    letter-spacing: -0.01em;
    font-weight: 400; */
}

.about-title01{
    color: #fff;
}

/* Facebookと残りのソーシャルシェア要素をピンポイントで消去 */
.vc_tweetmeme-element,
.fb_like {
    display: none !important;
}
/* シェアボタンを囲む親要素に、さらに汎用的な要素があればそれも消します */
/* WPBakery要素のコンテナを広くカバー */
.vc_tweetmeme-element.wpb_content_element, 
.fb_like.wpb_content_element {
    display: none !important;
}

.donation-back01{
 max-height: 45vh !important;
}






/* 寄付支援セクションの背景画像を画面いっぱいに表示するための修正 */
.vc_custom_1763347848498 {
    /* 既存の background-size: contain を上書きし、coverで画面全体を覆うようにします */
    background-size: cover !important; 
}


.project-title-line {
    /* 文字の太さを500に設定 */
    font-weight: 700 !important; /* WPBakeryのテーマ設定を上書きするため、!importantを付けています */
    
    /* 下線（ボーダー）の色とスタイルを設定 */
    border-bottom: 3px solid #043994; 
    
    /* ラインの下に少しスペースを空ける */
    padding-bottom: 5px; 
}

.text-shadow {
    /* 水平 1px, 垂直 1px, ぼかし 4px, 薄いグレー (透明度70%) */
    text-shadow: 1px 1px 4px rgba(200, 200, 200, 0.7); 
}

.text-shadow-strong {
    /* 水平 1px, 垂直 1px, ぼかし 3px, 標準の黒 (不透明度35%) */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); 
}

.__project-button01:hover{
        /* --- ホバー時 --- */
    background-color: #ffffff!important; /* 背景色: 白 */
    color: #043994 !important; /* 文字色: 基本カラー */
    border: 2px solid #043994!important; /* 外枠線: 基本カラー (外枠は変化なし) */
    border-radius: 2px!important;
}

.project-photo {
    /* 影の設定: 水平0px, 垂直3px, ぼかし6px, 拡散0px, 影の色 */
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
}

/* 1. 画像アイコンのサイズ、間隔、縦位置を制御するクラス */
.project-icon-space {
    margin-right: 0.4rem;
    vertical-align: middle;
    width: 49px;
    height: auto;
}

/* 2. プロジェクトタイトルのテキストカラーを黒に固定するクラス */
.project-text-color {
    color: #000000 !important; 
    vertical-align: middle;
}



/* 念のため、Light Boxコンテナもリセット */
#lightbox .fix-image-zoom .lb-outerContainer {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important; /* 画面幅に合わせて最大化 */
    max-height: 100vh !important;
}


/* Lightboxのコンテナ要素と画像要素を結合し、優先度を最大化 */
/* lb-outerContainer, lb-image は Lightbox2 の標準的なクラス名 */
#lightbox .fix-image-zoom .lb-outerContainer .lb-image {
    /* インラインCSSの固定値を無効化し、サイズをリセット */
    width: auto !important;
    height: auto !important;
    max-width: 100% !important; 
    max-height: 100vh !important; /* ビューポートの高さ制限も解除 */
}

#home-3step .vc_column-inner{
    padding: 0 2rem!important;
}

.top-sec01-text{
    line-height: 1.9rem;
    letter-spacing: 0.17rem;
}


.nav-portfolio {
    margin-bottom: 0!important;
}

#knowledgebase-filter.knowledgebase-nav ul li a, #portfolio-filter.portfolio-nav ul li a, #team-filter.team-nav ul li a :hover{
    color: #043994!important;
}

/* #knowledgebase-filter.knowledgebase-nav ul li i, #portfolio-filter.portfolio-nav ul li i, #team-filter.team-nav ul li i{
    color: inherit!important;
}

#knowledgebase-filter.knowledgebase-nav ul li i, #portfolio-filter.portfolio-nav ul li i, #team-filter.team-nav ul li i:hover{
    color: #043994!important;
} */

.body p{
    line-height: 1.9rem!important;
    letter-spacing: 0.17rem!important;
}

.aio-icon-description{
    line-height: 1.9rem!important;
    letter-spacing: 0.17rem!important;
}


/* BLOG個別ページの青いタイトル背景色と高さを強制的に上書きします */

/* 高さの変更: HTMLの直書きを上書き（例: 400pxに統一） */
.header-presentation {
    height: 400px !important; 
}

/* 青 (#043994) から 白 (white) へのグラデーションに変更 */
.hp-background-color {
    /* グラデーションを設定 */
    background: linear-gradient(
        to bottom,     /* 上から下へグラデーション */
        #043994 0%,    /* 上端 (0%) を濃い青に */
        #ffffff 100%   /* 下端 (100%) を白に */
    ) !important; 
    
    /* 古いブラウザ向けに単色を設定する（フォールバック） */
    background-color: #043994 !important; 
}

/* ブログタイトル <h1> のテキストシャドーをソフトに変更 */
.header-presentation .hp-background-color .container .hp-content h1 {
    /* 既存の文字色設定 */
    color: #f7f5fc !important;

    /* テキストシャドー設定 (ぼかしを強く、影を半透明に) */
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4);
}


/* カテゴリー一覧リストの各項目に中黒「・」を追加 */

/* 1. デフォルトのマークを非表示にする（念のため） */
.wp-block-categories-list.wp-block-categories li {
    list-style: none !important; 
}

/* 2. 疑似要素(::before)を使って「・」を挿入し、スタイルを調整 */
.wp-block-categories-list.wp-block-categories li a::before {
    content: "・"; /* 中黒を挿入 */
    margin-right: 5px; /* テキストとの間に少しスペースを空ける */
    font-weight: bold; /* 中黒を強調したい場合 */
    color: #3379FC;
}

/* --- 最新NEWS一覧 (wp-block-latest-posts) の装飾 --- */

/* 1. リストマークを非表示にする（念のため） */
.wp-block-latest-posts li {
    list-style: none !important;
}

/* 2. 疑似要素(::before)を使って「▶︎」を挿入し、スタイルを調整 */
.wp-block-latest-posts li a::before {
    content: "▶︎"; /* 右向きの三角を挿入 */
    margin-right: 8px; /* テキストとの間にスペースを空ける */
    font-size: 0.8em; /* サイズを少し小さくする */
    color: #3379FC; /* 青色 (#3379FC) */
    position: relative;
    top: -1px;
}

/* --- フッターメニュー (menu-menue-footer) の装飾 --- */
#menu-menue-footer li a::before {
    content: "▶︎"; /* 右向きの三角を挿入 */
    margin-right: 8px; /* テキストとの間にスペースを空ける */
    font-size: 0.8em; /* サイズを少し小さくする */
    color: #3379FC; /* 先ほど変換した青色 */
    position: relative; 
    top: -1px; /* 縦方向の位置調整 */
}

/* 念のため、標準のリストマークを非表示に */
#menu-menue-footer li {
    list-style: none;
}


/* お問い合わせページ：右側のテキストをGoogleマップの高さに対して中央に配置する */
.contact-section01 {
    display: flex;             
    align-items: center;       
}

.contact-section01 > .vc_column-inner {
    display: flex;
    flex-direction: column;    
    width: 100%;               
}

/* ★★★ この部分を追加または修正 ★★★ */
.contact-section01 .vc_custom_heading h2 {
    text-align: center !important; /* 見出しを中央揃えに戻す */
}
/* ★★★ ここまで ★★★ */

/* 寄付ボタンホバー時の文字色を青に変更 */
.donation-button a:hover {
    /* リンク要素自身の文字色を変更 */
    color: #043994 !important;
    font-size: small;
    
}

/* 念のため、リンク要素内の文字やアイコンにも色を適用 */
.donation-button a:hover * {
    color: #043994 !important;
    font-size:small;
}

.donation-button{
    margin-bottom: 0rem!important;
}

/* 1. オーバーレイを隠した状態で準備 */
.action-gray a,
.action-gray { /* クラスが div や p に直接適用されていても対応できるように追加 */
    /* 親要素を基準にする */
    position: relative; 
    /* リンク先が新しいタブで開く場合は display: block; を指定 */
    display: block;
}

/* 疑似要素の配置基準を .action-gray クラスを持つ要素自体に変更 */
.action-gray::before {
    /* 疑似要素を作成 */
    content: "";
    /* 絶対配置で親要素全体を覆う */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 背景色をグレー */
    background-color: #333; 
    /* 通常時は完全に透過 */
    opacity: 0;
    /* ホバー時の変化を滑らかに */
    transition: opacity 0.3s ease-in-out;
    /* 他のコンテンツの上に表示 */
    z-index: 2; 
    /* マウス操作を透過させることで、下のリンクがクリックできるように */
    pointer-events: none; 
}

/* 2. ホバー時にオーバーレイを表示 */
.action-gray:hover::before {
    /* 透過度を設定 */
    opacity: 0.4;
}

/* フッターメニュー内のリンクテキストの改行を禁止するCSS */
#widget-menu .title-content {
    /* 改行を禁止 */
    white-space: nowrap; 
    /* はみ出したテキストを隠す (省略することも多い) */
    overflow: hidden; 
}

/* --- フッター下部メニューの文字色ホバーアクション設定 --- */

/* 1. 通常時の背景色設定を上書きする（念のため） */
/* テーマによっては背景色を変えてしまうため、ここで透明を強制 */
#widget-menu .nav-item a.nav-link:hover {
    background-color: transparent !important; 
    transition: none !important; /* 背景色のトランジションを無効化 */
}

/* 2. ホバー時の文字色を青色 (#3379FC) に設定 */
#widget-menu .nav-item a.nav-link:hover .title-content {
    /* 文字色を青色 (#3379FC) に設定 */
    color: #3379FC !important; 
    /* 色の切り替わりを滑らかにする (オプション) */
    transition: color 0.3s ease-in-out;
}

/* --- フッターメニュー (widget-menu) の現在のページ強調設定 --- */

/* 1. 現在のページ (.current-menu-item) のリンクの文字色を青にする */
/* .nav-item.active も同じ意味を持つため、両方に適用 */
#widget-menu .nav-item.current-menu-item a.nav-link .title-content,
#widget-menu .nav-item.active a.nav-link .title-content {
    /* 文字色を青色 (#3379FC) に設定 */
    color: #3379FC !important;
}

/* 2. ホバー時の文字色変更CSSと競合しないように再確認 */
/* どちらも #3379FC なので問題ありませんが、activeページもホバー時に青のままにする設定 */
#widget-menu .nav-item.current-menu-item a.nav-link:hover .title-content,
#widget-menu .nav-item.active a.nav-link:hover .title-content {
    color: #3379FC !important;
}

/* --- パンくずリスト (Breadcrumbs) の現在のページ強調設定 --- */

/* 1. パンくずリストの現在地 (.active) の文字色を青にする */
.breadcrumbs-footer .breadcrumb-item.active {
    /* 文字色を青色 (#3379FC) に設定 */
    color: #3379FC !important;
    /* 念のため、フォントを太くする設定 (オプション) */
    /* font-weight: bold; */
}

/* --- 代替案 6: 文字色の変更とわずかな拡大 (Scale Up) の修正版 --- */

/* 1. リンクテキスト（.title-content）に効果を設定 (初期状態) */
.desktop-mode .header-bottom .navbar-nav .nav-item a.nav-link .title-content {
    /* 拡大の基準点を設定 */
    display: inline-block; 
    transform: scale(1); 
    color: inherit !important; 
    /* 文字色と変形の変化を滑らかにする */
    transition: all 0.3s ease-in-out; 
}

/* 2. ホバー時に効果を適用 */
.desktop-mode .header-bottom .navbar-nav .nav-item a.nav-link:hover .title-content {
    /* 文字色を濃い青に設定 */
    color: #043994 !important; 
    /* わずか5%拡大 */
    transform: scale(1.05); 
}

/* 3. 現在地（.active）やドロップダウンの親メニューのアクティブ項目は、拡大させずに色のみ濃い青で固定 */
.desktop-mode .header-bottom .navbar-nav .active > .nav-link .title-content,
.desktop-mode .header-bottom .navbar-nav .current-menu-ancestor > .nav-link .title-content,
.desktop-mode .header-bottom .navbar-nav .current-menu-parent > .nav-link .title-content {
    color: #043994 !important; /* 色を固定 */
    transform: scale(1) !important; /* 拡大を抑制 */
}

/* --- ヘッダー上部：SVGアイコンの色だけを #043994 に固定する --- */

/* 1. 各SVGアイコンの fill プロパティを直接ターゲットにして色を変更 */
.top-header-left svg.borderless-icon-app__mail path,
.top-header-left svg.borderless-icon-app__phone path,
.top-header-left svg.borderless-icon-app__location path {
    /* SVGの塗りつぶし色 (fill) を濃い青色に設定 */
    fill: #043994 !important;
    transition: fill 0.3s ease-in-out;
}

/* 2. テキスト（リンク）の色が濃い青色になっているのを解除し、テーマのデフォルト色に戻す */
/* もしデフォルト色が黒 (#333など) の場合は、その色を指定 */
.top-header-left .borderless-company-information__item a,
.top-header-left .borderless-company-information__item span {
    /* テキストの色を濃い青色にしていたCSSを上書きする */
    color: inherit !important; /* 親要素の色を継承させる */
    /* または、色を黒に固定する場合: color: #333333 !important; */
}



/* --- ドロップダウンメニューの位置調整 --- */

/* デスクトップモードのドロップダウンメニュー要素をターゲットに設定 */
.desktop-mode .header-bottom .navbar-nav .dropdown-menu {
    /* 現在の設定が top: 100% などになっていても、この値を調整することで強制的に上に移動 */
    top: 70% !important; /* 例: 70% を試す */
    /* top: 50px !important;  <- もし px で指定されている場合はこちらを調整 */
}

/* ========================================================== */
/* メインメニュー（PC/モバイル共通）のホバー・アクティブスタイル */
/* ========================================================== */

/* 1. 全てのメニュー項目のリンク（a.nav-link）をターゲットにします */
#navbarNavDropdown #main-menu li a.nav-link {
    /* デフォルトのテキスト色を設定（テーマのデフォルトを上書き）*/
    color: #333333 !important; 
}


/* 2. マウスオーバー (PC) またはアクティブ時のテキスト・背景色 */
#navbarNavDropdown #main-menu li a.nav-link:hover,
#navbarNavDropdown #main-menu li a.nav-link:focus {
    /* ホバー時の背景色 (モバイルで背景色がつくのを防ぐために指定) */
    background-color: #F8F8F8 !important; 
}

/* 3. 現在開いているページ（Active / Current Item）のテキスト・背景色 */
#navbarNavDropdown #main-menu li.current-menu-item > a.nav-link,
#navbarNavDropdown #main-menu li.current-menu-ancestor > a.nav-link {
    /* アクティブ時のテキストカラー */
    color: #043994 !important;
    /* アクティブ時の背景色 (必要であれば) */
    background-color: transparent !important;
    /* アクティブであることを示す下線 */
    border-bottom: 2px solid #043994 !important;
}

/* ========================================================== */
/* モバイル時のサブメニュー（ドロップダウン）の背景色を調整 */
/* ========================================================== */

/* モバイルメニュー展開時（サブメニュー）の項目をターゲット */
@media (max-width: 991.98px) {
    #navbarNavDropdown .dropdown-menu {
        /* モバイル時のドロップダウン背景色を上書き (例: 白) */
        background-color: white !important;
    }
    
    #navbarNavDropdown .dropdown-menu a.nav-link:hover,
    #navbarNavDropdown .dropdown-menu a.nav-link:focus {
        /* サブメニュー項目のホバー色を確実に適用 */
        color: #043994 !important;
        background-color: #EEEEEE !important; /* 薄いグレーなど */
    }
}

/* ========================================================== */
/* PC版（画面幅 992px以上）でのスタイル上書きと無効化 */
/* ========================================================== */

@media (min-width: 992px) {

    /* 1. PC版のメニュー項目ホバー時の背景色を無効化（透明に） */
    #navbarNavDropdown #main-menu li a.nav-link:hover,
    #navbarNavDropdown #main-menu li a.nav-link:focus {
        /* 背景色を完全に透明にして、グレーの背景を消します */
        background-color: transparent !important; 
    }
    
    /* 2. PC版のアクティブ項目と親項目のアンダーラインを無効化（消す） */
    #navbarNavDropdown #main-menu li.current-menu-item > a.nav-link,
    #navbarNavDropdown #main-menu li.current-menu-ancestor > a.nav-link {
        /* アンダーラインを消去します */
        border-bottom: none !important;
    }

    /* 3. PC版のサブメニュー項目ホバー時の背景色を無効化（透明に） */
    #navbarNavDropdown .dropdown-menu a.nav-link:hover,
    #navbarNavDropdown .dropdown-menu a.nav-link:focus {
        /* サブメニュー（ドロップダウン）内のホバー背景色を透明にします */
        background-color: transparent !important;
    }

}

.about-link-button a{
    display: inline-block;
    border: 1px solid #043994 !important;
}

/* ========================================================== */
/* aboutボタンホバー時のスタイル定義 */
/* ========================================================== */

/* リンク要素（ボタン本体）のホバー時のスタイル */
.about-link-button a:hover {
    /* 文字色: 青を維持 */
    color: #043994 !important;
    /* フォントサイズ: small を維持 */
    font-size: small;
    
    /* 1. 外枠（ボーダー）の追加 */
    border: 1px solid #043994 !important; 


}

/* 念のため、リンク要素内の文字やアイコンにも色を適用（文字色維持） */
.about-link-button a:hover * {
    color: #043994 !important;
    font-size: small;
}


/* 画面幅が767px以下の時（一般的なスマホサイズ）に適用 */
@media (max-width: 767px) {
  .vc_custom_1762744971527 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

/* -----------------------------------------------------------
   slide-revolution レスポンシブ
----------------------------------------------------------- */


/* 1. 共通：崩れの元（forcer）を停止 */
rs-fw-forcer, .rs-fullwidth-forcer, .rs-module-wrap-forcer {
    display: none !important;
    height: 0 !important;
}

/* 2. スライダー外枠：クラス名にドットを付けて詳細度を上げる */
#rev_slider_4_1_wrapper, 
.rs-module-wrap, 
.rs-fullwidth-wrap, 
.rs-module {
    position: relative !important; 
    display: block !important;
    width: 100% !important;
    overflow: visible !important; 
}

/* -----------------------------------------------------------
   3. 各ブレイクポイント：ここもすべて .rs- 形式に統一
----------------------------------------------------------- */
@media (min-width: 2590px) {

}

@media (min-width: 2010px) {
    #rev_slider_4_1_wrapper, .rs-module-wrap, .rs-fullwidth-wrap, .rs-module {
        /* height: 1000px !important;
        max-height: 1000px!important; */
    }
    .rs-fullvideo-element {
        transform: scale(0.90) !important;
        transform-origin: center top !important;
    }
    .rs-module{
        /* height: 1000px!important;
        max-height: 1000px!important; */
    }

    .rs-slides{
        /* height: 1000px!important;
        max-height: 1000px!important; */
    }

    .rs-fullwidth-wrap, 
    .forcefullwidth_wrapper_tp_banner,
    #rev_slider_4_1_wrapper {
        margin-bottom: 0rem !important;
    }
    
}

@media (min-width: 1900px){
    #rev_slider_4_1_wrapper, .rs-module-wrap, .rs-fullwidth-wrap, .rs-module {
        /* height: 850px !important;
        max-height: 850px!important; */
    }
    .rs-module{
        /* height: 800px!important;
        max-height: 800px!important; */
    }
    .rs-fullvideo-element {
        transform: scale(0.60) !important;
        transform-origin: center top !important;
    }
    

}

/* iPad横画面 (1024px〜1366px) の右側の隙間を物理的に埋める */
@media (max-width: 1400px) {
    #rev_slider_4_1_wrapper, 
    .rs-module-wrap, 
    .rs-module {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
    }
}



/* -----------------------------------------------------------
   企業ロゴ・サポーター：スマホ完全縦並び化
----------------------------------------------------------- */
@media (max-width: 480px) {
/* 1. カルーセルの「横移動」を完全に止めて縦並びにする */
    .ult-carousel-wrapper .slick-track {
        display: block !important;
        width: 100% !important;
        transform: none !important; /* 横移動の計算をリセット */
        height: auto !important;
    }

    /* 2. 各スライド枠：左右のマージンを消して100%中央へ */
    .ult-carousel-wrapper .slick-slide {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin-left: 0 !important;   /* 右寄りの原因となるマージンを解除 */
        margin-right: 0 !important;  /* 右寄りの原因となるマージンを解除 */
        margin-bottom: 40px !important; /* ロゴ同士の上下間隔 */
        float: none !important;
        text-align: center !important; /* 中身を中央へ */
    }

    /* 3. 画像コンテナ：inline-blockを解除して中央配置を安定させる */
    .ult-carousel-wrapper .aio-icon-img {
        display: block !important;
        margin: 0 auto !important;
        width: 100% !important;
        font-size: inherit !important; /* インラインの巨大なfont-sizeを無効化 */
    }

    /* 4. 画像そのもののサイズと中央寄せ */
    .ult-carousel-wrapper .aio-icon-img img {
        width: auto !important;
        max-width: 220px !important;
        height: auto !important;
        margin: 0 auto !important;
        display: inline-block !important;
    }

    /* 5. スライダーが自動生成する「クローン（複製）」を隠す */
    .ult-carousel-wrapper .slick-cloned {
        display: none !important;
    }

    /* 6. 見出しの調整（わたしたちをサポート〜など） */
    .ult-carousel-wrapper h2, 
    .ult-carousel-wrapper .vc_custom_heading {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
        margin-bottom: 2rem !important;
        text-align: center !important;
    }

    /* 7. ドットナビゲーション（もし出ていれば）を非表示 */
    .ult-carousel-wrapper .slick-dots {
        display: none !important;
    }
}

/* 480px以下のデバイスにのみ適用 */
@media screen and (max-width: 480px) {
    
    /* 白い背景ボックスの調整 */
    .mobile-adjust .tp-shapewrapper {
        top: 50px !important; /* 上の余白を増やす（数値は調整してください） */
        left: 50% !important;
        transform: translateX(-50%) !important; /* 中央寄せ */
    }

    /* 「NPO AWA369」のテキスト（左に寄っているのを修正） */
    .mobile-adjust rs-layer[data-id="Copy-Popular"] { /* 実際のIDに合わせて調整 */
        left: 50% !important;
        transform: translateX(-50%) !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* 説明文の調整（上に上がりすぎを修正） */
    .mobile-adjust rs-layer[data-id="Shape-11"] { /* 実際のIDに合わせて調整 */
        margin-top: 20px !important; /* 上に隙間を作る */
    }

    /* 「もっと見る」ボタンの調整 */
    .mobile-adjust rs-layer[data-id="Copy-Call-To-Action"] {
        margin-top: 30px !important; /* ボタンの上に隙間を作る */
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    /* divを頭につけて詳細度を上げ、上マージンを0に、下マージンを調整します */
    div.vc_custom_1764137810101 {
        margin-top: 0rem !important;
        /* 下マージンもスマホ用に調整したい場合はここを変更してください */
        margin-bottom: 2rem !important; 
    }

    .kodomo-banner.vc_row,
    .kifu-banner.vc_row {
        width: 100vw !important;
        max-width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. 内部カラムの余白をゼロにする */
    .kodomo-banner .vc_column-inner{
        padding: 0 !important;
    }

    .kifu-banner .vc_column-inner {
        width: 85% !important; /* スマホでは箱を少し小さくして浮かせる */
        margin: 20px auto !important;
        padding: 20px !important;
    }

    /* 4. 見出しの調整（左寄せに戻す） */
    .kodomo-banner h2.vc_custom_heading,
    .kodomo-banner h3.vc_custom_heading {
        text-align: left !important;
        padding-left: 15px !important;
        width: auto !important;
    }

    /* 5. 寄付バナー内のテキストを中央に揃える */
    .kifu-banner .wpb_wrapper {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }


    /* バナー（こども食堂）内の見出しを左寄せに強制復帰 */
    .kodomo-banner h3.vc_custom_heading,
    .kodomo-banner .wpb_wrapper h3.vc_custom_heading {
        text-align: left !important;
        width: auto !important;
        display: inline-block !important; /* または block */
        margin-left: 30px !important;    /* 画面端に近すぎる場合の微調整 */
    }

    /* 「もっと見る」ボタンのコンテナも左寄せに */
    .kodomo-banner .ubtn-ctn-left {
        text-align: left !important;
        padding-left: 10px !important;
    }


    /* 寄付バナー内のテキストだけは、端に寄りすぎないよう適度な余白を持たせる */
    .kifu-banner .wpb_text_column .wpb_wrapper p {
        padding-left: 20px !important;
        padding-right: 20px !important;
        line-height: 1.8 !important;
    }

    /* 1. 魚アイコンが入っているブロックの上に余白を作る */
    .kodomo-banner .borderless-wpbakery-infobox {
        margin-top: 40px !important; /* ここで全体の下げ幅を調整できます */
        padding-left: 20px!important;
    }

    /* 2. 「未利用魚を活用した」とタイトルの間の詰まりを解消 */
    .kodomo-banner h2.vc_custom_heading {
        margin-top: 15px !important; /* 魚アイコンとの間隔 */
        padding-top: 0 !important;
    }

    /* 3. 「こども食堂〜」と「2025年4月〜」の間の詰まりを解消 */
    .kodomo-banner h3.vc_custom_heading {
        margin-top: 10px !important;
        padding-top: 0 !important;
    }
    .kodomo-banner h3.vc_custom_heading {
        margin-left: 20px !important;
        display: inline-block !important; /* 横幅を文字分だけにして余白を有効化 */
    }
}


/* 480px以下のデバイス（スマホ）に適用 */
@media screen and (max-width: 480px) {
    /* 固有のクラスを指定してフォントサイズを強制的に変更 */
    .vc_custom_heading.vc_custom_1764163872419 {
        font-size: 1.4rem !important;
        line-height: 1.4 !important; /* 行間も必要に応じて調整 */
    }
    /* 独自クラス top-sec01-title を狙ってサイズを変更 */
    h3.vc_custom_heading.top-sec01-title {
        font-size: 1.4rem !important;
        line-height: 1.4 !important;
        padding-left: 10px !important;  /* 画面端に近すぎる場合の余白 */
        padding-right: 10px !important;
        word-break: break-all !important; /* 改行を自然に */
    }

/* 1. 全てのセクション見出し(h3)のサイズを一括調整 */
    .vc_custom_heading.vc_custom_1764163854869, /* 取り組み */
    .vc_custom_heading.vc_custom_1764163872419, /* 目的 */
    .vc_custom_heading.vc_custom_1763220345353, /* SNS・YouTube */
    .vc_custom_heading.vc_custom_1763220489948, /* 最新ニュース (NEW) */
    .vc_custom_heading.top-sec01-title         /* 地域問題の解決... */ {
        font-size: 1.4rem !important;
        line-height: 1.5 !important;
        margin-top: 15px !important;
        margin-bottom: 10px !important;
    }

    /* 2. ニュース記事のタイトル(h4)を少し小さくして読みやすくする */
    .entry-title a {
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
    }

    /* 3. 見出し下の説明文の文字サイズ調整 */
    .top-sec01-title .wpb_wrapper div,
    .borderless-wpbakery-infobox-content div {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }

    /* 4. ニュース記事カードの余白調整 */
    .post-card-content {
        padding: 15px !important;
    }

    /* アイコンボックス内の説明文、およびメインコンテンツ内のpタグを一括調整 */
    .aio-icon-description p,
    .aio-icon-description div,
    .entry-content p,
    .wpb_text_column p {
        font-size: 0.9rem !important;
        line-height: 1.7 !important; /* スマホで読みやすいように少しだけ行間を広く */
        margin-bottom: 1.2em !important;
    }

    /* アイコンボックス自体の左右余白を少し詰めて、文字が入るスペースを確保 */
    .aio-icon-description {
        padding: 0 5px !important;
    }

    /* 「まずは地域から」などのタイトル(h3, h4)も少し調整 */
    .aio-icon-title {
        font-size: 1.2rem !important;
        margin-bottom: 10px !important;
    }

    /* 「寄付支援」エリア等のアイコンタイトルを大きく強調 */
    .aio-icon-title {
        font-size: 1.4rem !important; /* 他の見出しより一回り大きくして目立たせる */
        font-weight: 500 !important;  /* かなり太めにして視認性をアップ */
        line-height: 1.3 !important;
        margin-top: 10px !important;
        margin-bottom: 15px !important;
        color: #043994 !important;    /* 濃い青で引き締める */
    }



    /* 説明文(Pタグ)は0.9remを維持 */
    .aio-icon-description p {
        font-size: 0.9rem !important;
        line-height: 1.8 !important;   /* 文字が詰まらないよう行間を広めに */
        color: #333333 !important;
    }

    /* アイコンのサイズ微調整 */
    .aio-icon.none {
        font-size: 38px !important;    /* アイコンも少し存在感を出す */
    }

    /* 代表メッセージ等のテキストカラム内のPタグを調整 */
    .top-sec01-text .wpb_wrapper p,
    .aio-icon-description p {
        font-size: 0.9rem !important;
        line-height: 2.0 !important; /* 行間を2倍に増やして可読性を最大化 */
        margin-bottom: 1.5em !important; /* 段落同士の隙間も少し広げる */
        text-align: justify !important; /* 左右の端を揃えて綺麗に見せる */
    }

    /* 念のため、特定のクラスがついたラッパー内の調整 */
    .wpb_text_column.top-sec01-text {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* カラム全体の左右余白を5pxに（これで1文字分以上稼げます） */
    .vc_column-inner {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* テキストカラム自体の余白を完全にゼロにする */
    .wpb_text_column.top-sec01-text,
    .top-sec01-text .wpb_wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Pタグの行間と端の揃えを最終調整 */
    .top-sec01-text .wpb_wrapper p {
        line-height: 2.1 !important;
        text-align: justify !important;
        word-break: break-all; /* 単語の途中で改行を許容して端まで埋める */
        letter-spacing: 0.02em; /* 文字間をわずかに広げて可読性を維持 */
    }

    /* プロジェクトページスマホ */

/* 1. 特定のIDやクラスが持つ独自パディングをすべて無効化 */
    .vc_column-inner,
    .wpb_column .vc_column-inner,
    div.vc_custom_1764491558894 {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* 2. wpb_wrapper 自体が持っている可能性がある余白も強制解除 */
    .wpb_wrapper, 
    .wpb_text_column .wpb_wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 3. 見出し部分（h3）の横幅を100%使い切る */
    .project-title-line h3 {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 0 10px 0 !important;
        display: flex !important;
        align-items: center;
    }

    /* アイコンの右余白を詰め、文字を1文字分右に寄せるのを防ぐ */
    .project-icon-space {
        margin-right: 6px !important;
        flex-shrink: 0;
    }

    /* 4. 本文テキストの左右も5pxに合わせて広げる */
    .wpb_text_column p {
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: justify !important;
        word-break: break-all !important; /* 日本語の端の隙間を埋める最重要設定 */
    }

    /* 1. ページ全体の横揺れ（ブレ）を物理的に止める */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. カラムの突き出しを直し、左右5pxの余白に固定 */
    .container, 
    .row, 
    .vc_row, 
    .wpb-content-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 2px !important;  /* ここで「もう1文字分」の幅を確保 */
        padding-right: 2px !important;
        box-sizing: border-box !important;
    }

    /* 3. WPBakeryの内側余白をリセット */
    .vc_column-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 4. 画像が画面幅を超えてブレるのを防ぐ */
    img, 
    .vc_single_image-wrapper, 
    .wpb_single_image {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 5. テキストを端までビシッと詰める */
    .wpb_text_column p {
        text-align: justify !important;
        word-break: break-all !important;
        letter-spacing: -0.01em !important; /* わずかに詰めて文字数を稼ぐ */
    }
/* WPBakeryのカスタム見出し(h3)を強制的にスマホサイズに上書き */
    h3.vc_custom_heading,
    .project-title-line h3,
    .wpb_text_column h3 {
        font-size: 24px !important;       /* HOMEと同じサイズに固定 */
        line-height: 1.4 !important;      /* 行間を少し詰める */
        margin-top: 15px !important;      /* 上の余白を調整 */
        margin-bottom: 10px !important;   /* 下の余白を調整 */
        letter-spacing: 0.02em !important;
    }

    /* 「こども食堂」部分のアイコンとテキストの並びを微調整 */
    .project-title-line h3 strong {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        font-weight: bold !important;
    }

    /* 下の方にある「AWA369の目的」などのセンター見出し用 */
    h3.vc_custom_heading {
        text-align: center !important;
        width: 100% !important;
    }

    /* 「AWA369の取り組み」などのカスタム見出しを強制上書き */
    h3.vc_custom_heading,
    .wpb_wrapper h3.vc_custom_heading,
    .vc_column-inner .wpb_wrapper h3 {
        font-size: 20px !important;       /* HOMEと共通のサイズ */
        line-height: 1.4 !important;
        text-align: center !important;    /* 中央揃えを維持 */
        margin-top: 30px !important;      /* 上のアイコンとの間隔 */
        margin-bottom: 20px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        display: block !important;
    }

    /* アイコンセパレーター自体の幅も調整してハミ出しを防ぐ */
    .vc_separator.awa369-iconani {
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    /* 「All Projects」などのナビゲーション部分の調整 */
    .nav-portfolio .navbar-brand {
        font-size: 16px !important;
    }

    div.vc_custom_1769074091115 {
        /* 左右に1rem（約16px）の程よい余白を確保 */
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    /* 以前の「画面いっぱい」設定と競合しないよう、
       widthをautoに戻してパディングが効くようにします */
    .vc_row, .vc_column-inner {
        width: auto !important;
    }

/* クラス名の前に div をつけることで優先順位（詳細度）を一段階引き上げます */
    div.vc_custom_1769073586206 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    /* 具体的なクラス名と要素名（h5）を組み合わせて優先順位を上げます */
    h5.top-sec01-title.vc_custom_heading {
        font-size: 1rem !important;
        line-height: 1.5 !important;   /* 2行になった時に重ならないよう調整 */
        text-align: center !important; /* 中央揃えを強制 */
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }

    /* divを頭につけて詳細度を上げ、!importantで強制適用します */
    div.vc_custom_1525821616417 {
        padding-bottom: 0px !important;
        margin-bottom: 0px !important; /* 余白が消えない場合はマージンも0に */
    }

    .about-title01.vc_custom_1769106676906 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* 背景画像の横幅を強制的に画面いっぱいに */
    .vc_row[data-vc-full-width="true"] {
        width: 100vw !important;
        position: relative;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        box-sizing: border-box;
    }

    /* 他のページの!important設定に勝つために、親要素のクラス名 .about01 を付けて指定します */
    .about01 .ult-carousel-wrapper .slick-slide {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important; /* 必要に応じて調整してください */
        width: 100% !important;
    }

    /* カルーセルのコンテナ自体の余白（もしあれば）をリセット */
    .about01 .ult-carousel-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* メンバー紹介スライダーの下のドットを非表示にする */
    .about01 .slick-dots {
        display: none !important;
    }

    /* 1. 外枠のズレを修正し、画像に完全に重ねる */
    #portfolio-projects .portfolio-style-access {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* 2. 中身の配置：flexboxで完全中央寄せ＆左右の余白を均等に */
    #portfolio-projects .project-name .va {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important; /* 横方向のズレを解消 */
        height: 100% !important;
        width: 100% !important;
        padding: 10px 15px !important; /* 左右に適切な遊びを作る */
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* 3. タイトル(h3)の調整 */
    #portfolio-projects #projects .item-project h3.project-title,
    #portfolio-projects #projects .item-project .project-title h3 {
        font-size: 24px !important;
        line-height: 1.2 !important;
        margin-top: 0 !important;   /* 共通設定の30pxをリセット */
        margin-bottom: 8px !important;
        display: block !important;
        width: 100% !important;
    }

    /* 4. 説明文(span)の調整：強制改行と読みやすさ */
    #portfolio-projects #projects .item-project .project-title span {
        font-size: 13px !important;
        line-height: 1.5 !important;
        display: block !important;
        white-space: normal !important;   /* 改行を許可 */
        word-wrap: break-word !important; /* 長い単語で枠を突き抜けないように */
        overflow: visible !important;
        padding-top: 5px !important;
        width: 100% !important;
    }

    /* 5. 万が一親のli要素に余計な余白がある場合の保険 */
    #portfolio-projects #projects li.item-project {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 1. コピーライトの文字サイズと余白の調整 */
    .copyright-footer-item {
        font-size: 14px !important; /* 少し小さくしてスッキリさせます */
        text-align: center !important; /* スマホでは中央揃えが一般的です */
        line-height: 1.6 !important;
        padding-top: 15px !important;
        padding-bottom: 5px !important;
        color: #666; /* 必要に応じて色も調整してください */
    }

    /* 2. フッターメニュー（ナビ）の調整 */
    .copyright-footer-item nav.navbar {
        justify-content: center !important; /* 右寄せから中央寄せに変更 */
        text-align: center !important;
        padding: 0 !important;
    }

    /* 3. メニュー項目が縦に並ぶ場合の微調整 */
    .copyright-footer-item .navbar-nav {
        flex-direction: row !important; /* 横並びを維持する場合 */
        flex-wrap: wrap !important;     /* 入りきらない場合は改行 */
        justify-content: center !important;
        margin-top: 10px !important;
    }

    .copyright-footer-item .nav-link {
        font-size: 11px !important;
        padding: 5px 8px !important; /* リンク同士の間隔を調整 */
    }

    .page-id-2591 #slider-4-slide-17-layer-5 {
    display: none !important;
    }

    [data-key="rs-16"] .tp-shapewrapper,
    [data-key="rs-16"] rs-layer.tp-shape {
        /* 青色のトーンを維持しつつ、不透明度を 0.7 (70%) に */
        background-color: rgba(4, 57, 148, 0.7) !important; 
        
        /* スマホで見やすくするために影を少し弱める */
        box-shadow: none !important;
    }
    #portfolio-projects #projects li.item-project {
        margin-bottom: 0px;
    }
}



/* 1200px以上の大型PC画面に適用 */
@media screen and (min-width: 1200px) {
    /* 両方のカスタムクラスに適用 */
    div.vc_custom_1769074091115,
    div.vc_custom_1769076242606 {
        padding-right: 15rem !important;
        padding-left: 15rem !important;
    }
}

/* 990pxから1199pxの間に適用 */
@media screen and (min-width: 990px) and (max-width: 1199px) {
    /* 両方のカスタムクラスに適用 */
    div.vc_custom_1769074091115,
    div.vc_custom_1769076242606 {
        padding-right: 10rem !important;
        padding-left: 10rem !important;
    }
}

/* ============================================================
   【最終解決】背景は全画面、中身は中央（inline）を維持
   ============================================================ */

/* 1. 背景を画面いっぱいにする（これは維持） */
.kodomo-banner.vc_row,
.kifu-banner.vc_row {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    background-size: cover !important;
    overflow: visible !important;
}

/* 2. 【重要】PC・タブレットで「中身の文字やボタン」を中央に寄せる */
@media screen and (min-width: 481px) {
    .kodomo-banner > .wpb_column,
    .kifu-banner > .wpb_column {
        /* テーマの標準的なコンテンツ幅（例：1140px）に制限して中央寄せ */
        max-width: 1140px !important; 
        margin: 0 auto !important;
        float: none !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 寄付バナーの白い箱の余白調整（角丸なし） */
    .kifu-banner .vc_column-inner {
        background-color: rgba(255, 255, 255, 0.8) !important;
        padding: 40px !important;
        margin: 40px auto !important;
    }
}

/* 3. 透過指定の再徹底 */
.kifu-banner-clear .vc_column-inner {
    background-color: transparent !important;
    background-image: none !important;
    padding: 0 !important;
}

.ubtn-shd{
    border-radius: 0!important;
}

.kodomo-banner-button .ubtn,.donation-button .ubtn:hover {
    /* 背景を透明にする */
    background: transparent !important;
    
    /* 枠線を設定する（太さ、種類、色） */
    border: 1px solid #043994 !important; /* 青い枠線の例 */
}

/* 2. 寄付ボタン内部の白い背景レイヤーを消す */
.donation-button .ubtn:hover .ubtn-hover {
    background: transparent !important;
    opacity: 0 !important;
    display: none !important;
}


/* --- 全端末共通：ポートフォリオ配置の安定化 --- */

/* 1. 各プロジェクトの枠が重なったり離れたりするのを防ぐ */
#portfolio-projects #projects li.item-project {
    position: relative !important; /* JSによる absolute 配置の計算ミスを防ぐ */
    float: left !important;
    /* min-height: 200px; */
    box-sizing: border-box !important;
}

/* 2. マウスホバー時のテキスト枠を常に中央へ */
.item-project .portfolio-style-access {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(10, 10, 10, 0.4); /* 背景を少し暗くして視認性UP */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* ホバー時に表示 */
.item-project:hover .portfolio-style-access {
    opacity: 1;
}

/* 3. 内枠（.va）の絶対的な中央配置 */
.item-project .project-name .va {
    width: 100% !important;
    padding: 20px !important;
    text-align: center !important;
    /* JSの計算による上下のズレを打ち消す */
    position: relative !important;
    top: 0 !important;
    transform: none !important; 
}

@media screen and (max-width: 1200px) {
    /* 1. ヘッダーのコンテナを3分割の並びに設定 */
    header .container, 
    .navbar-header .container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important; /* 両端と中央に配置 */
        flex-wrap: nowrap !important;
        position: relative !important;
    }

    /* 2. ロゴ(navbar-brand)を中央に絶対配置 */
    .navbar-brand {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important; /* 完全に中心へ */
        margin: 0 !important;
        padding: 0 !important;
        z-index: 10;
        display: flex !important;
        justify-content: center !important;
    }

    /* 3. 画像サイズの設定（brand-mobileを強制表示） */
    .navbar-brand img {
        display: none !important;
    }
    .navbar-brand img.brand-mobile {
        display: block !important;
        height: 40px !important; /* スマホ・タブレットで共通の高さ */
        width: auto !important;
        max-width: 160px !important;
    }

    /* 4. 右側に空の要素を追加してバランスを取る（もし右に要素がない場合） */
    header .container::after {
        content: "";
        width: 44px; /* ハンバーガーボタンと同じ幅の空きを作る */
        display: block;
    }

    /* 5. ハンバーガーボタン(三本線)の固定 */
    .navbar-toggler {
        z-index: 11; /* ロゴより上に配置 */
        margin-left: 0 !important;
        border: none !important;
    }

}

/* 「寄付のお願い・こども食堂（rs-19）」の白バックを少し透明にする */
[data-key="rs-19"] .tp-shapewrapper,
[data-key="rs-19"] rs-layer.tp-shape {
    /* 0.8 は 80% の不透明度（少し透ける状態）です */
    background: rgba(255, 255, 255, 0.8) !important; 
    
    /* 影が強すぎる場合は、ここも調整するとスッキリします */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}


/* スライダーの横幅をブラウザの端から端まで固定する */
#rev_slider_4_1_wrapper {
    width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

/* 内部の画像が右に届かない問題を強制解決 */
rs-module-wrap, rs-module, rs-slide, rs-sbg-wrap, rs-sbg, canvas {
    width: 100% !important;
    min-width: 100vw !important;
}

/* --- iPad・タブレットの右側空白を解消する --- */
@media (max-width: 1400px) {
    #rev_slider_4_1_wrapper, 
    .rs-module-wrap, 
    .rs-module {
        width: 100% !important;
        min-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
    }
}

/* 寄付ページ：テキストの位置を固定し、棒を左側に浮かす */
#slider-4-slide-19-layer-1 {
    background-color: transparent !important;
    color: #043994 !important;
    padding-left: 0 !important; /* テキストの位置を元に戻す */
    position: relative !important;
    border: none !important;
}

/* 縦棒：テキストに干渉しないように配置 */
#slider-4-slide-19-layer-1::before {
    content: "" !important;
    position: absolute !important;
    /* ↓ 文字の左端からさらに「左」へ。この数値で距離を調整してください */
    left: -30px !important; 
    top: 50% !important;
    width: 4px !important;
    background-color: #043994 !important;
    height: 100% !important;
    transform: translateY(-50%) scaleY(0);
    
    /* 上下に広がるアニメーション */
    animation: barGrow 1.2s ease-out forwards !important;
    animation-delay: 0.3s !important;
}

@keyframes barGrow {
    0% { transform: translateY(-50%) scaleY(0); }
    100% { transform: translateY(-50%) scaleY(1); }
}

/* スライダーを包んでいるセクション（親要素）に下の余白を作る */
section:has(#rev_slider_4_1_wrapper), 
.rev_slider_wrapper {
    margin-bottom: 2rem !important; 
}

/* --- ブログセクションをPCで3列に強制する --- */
@media (min-width: 992px) {
    #post-area.masonry-area {
        display: flex !important;
        flex-wrap: wrap !important;
        height: auto !important; /* JSの変な高さ計算を上書き */
    }

    #post-area .item-blog.col-md-4 {
        width: 33.33% !important; /* 強制的に3列にする */
        max-width: 33.33% !important;
        position: relative !important; /* JSによる absolute 配置を解除 */
        left: auto !important;
        top: auto !important;
        float: left !important;
        margin-bottom: 30px;
    }
}

/* --- ブログカードの画像の高さを統一する --- */
#post-area .post-thumb a.hover-wrap {
    display: block !important;
    width: 100% !important;
    height: 200px !important; /* ← ここの数値で高さを調整（200px〜250pxが一般的） */
    overflow: hidden !important; /* はみ出た部分を隠す */
}

#post-area .post-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* ← これが重要！画像を歪ませずに枠いっぱいに広げます */
    object-position: center center !important; /* 画像の真ん中を基準にトリミング */
}

/* ついでにカード全体の高さも揃えて、下のメタ情報（日付など）のラインを合わせる */
#post-area .post-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

#post-area .post-card-content {
    flex-grow: 1 !important; /* テキスト量に関わらず、カードの高さを自動で伸ばす */
}

/* インスタグラムのボタンエリアを整える */
#sbi_load {
    padding-top: 2rem !important;
    display: flex !important;
    justify-content: center !important; /* ボタンを中央に集める */
    align-items: center !important;
    gap: 0.5rem !important; /* ボタン同士の横の隙間 */
    width: 100% !important;
}

/* ボタンが個別に浮かないように調整 */
#sbi_load .sbi_load_btn, 
#sbi_load .sbi_follow_btn {
    margin: 0 !important; /* 余計なマージンを消して中央寄せを優先 */
    display: inline-block !important;
}

/* --- プロジェクト一覧の崩れを強制修正 --- */
#portfolio-projects {
    height: auto !important; /* JSが計算した「3614px」という異常な高さを解除 */
}

#projects.row {
    display: flex !important;
    flex-wrap: wrap !important;
    position: relative !important;
}

/* 各プロジェクト記事の強制配置 */
#projects .item-project.col-md-3 {
    position: relative !important; /* JSの absolute 配置を殺す */
    left: auto !important;
    top: auto !important;
    width: 25% !important; /* PCで4列 */
    max-width: 25% !important;
    /* margin-bottom: 30px !important; */
    padding: 15px !important;
    height: auto !important;
}

/* 画像のツラを合わせる（ここもブログ同様に揃えます） */
#projects .item-container img {
    width: 100% !important;
    /* height: 180px !important; */
    object-fit: contain !important; /* ロゴ系が多いので contain が安全 */
    background: #f9f9f9; /* 余白を薄いグレーで埋める */
}

/* スマホ・タブレット（1200px以下）では2列にする */
@media (max-width: 1200px) {
    #projects .item-project.col-md-3 {
        width: 50% !important;
        max-width: 50% !important;
    }
}

/* スマホ（768px以下）では1列にする */
@media (max-width: 768px) {
    #projects .item-project.col-md-3 {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ポートフォリオのホバーテキストを中央配置にする */
#projects figcaption.project-name .va {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* 上下中央 */
    align-items: center !important;     /* 左右中央 */
    text-align: center !important;
    height: 100% !important;            /* 枠いっぱいに広げる */
    width: 100% !important;             /* 枠いっぱいに広げる */
    top: 0 !important;
    left: 0 !important;
}

/* リンクエリアも枠いっぱいに広げて中央を維持する */
#projects .project-title {
    display: block !important;
    width: 100% !important;
}