/* sp-header */
/* モバイル用の調整（スマホで見切れないように自動縮小） */
@media (max-width: 575px) {
	#sp-header {
		height: 60px;
		padding-left: 5px;
		padding-right: 10px;
	}
}

.article-details .article-can-edit {
    margin-bottom: 0px;
}


/* テキスト全体の印象をネイビーで引き締める */
body {
    color: var(--bs-secondary);
}

.text-primary {
    color: var(--bs-primary) !important;
}

#sp-main-body {
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
}


/* ページヘッダー */
#sp-header {
	background: linear-gradient(
    to bottom, 
    rgba(255, 255, 255, 0.4) 0%,   /* 開始位置 */
    rgba(255, 255, 255, 0.4) 60%,  /* 60%の地点まで0.4をキープ */
    rgba(255, 255, 255, 0) 100%    /* 60%から100%にかけて0へ変化 */
) !important;
}

.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span {
	font-size: large;
}

/* =============================================
 * 1. 全ページ共通：画像コンテナと全画面設定
 * ============================================= */
/* 記事ページ(.article-full-image)とフォームページ(.cf-content-img)共通 */
.article-full-image, 
.cf-content-img {
    position: relative;
    display: block !important;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* 全ページ共通で画像を全画面(100vh)・全幅(100vw)にする */
.article-full-image img, 
.cf-content-img img {
    width: 100vw !important;  /* 画面幅いっぱい */
    height: 100vh !important; /* 画面高さいっぱい */
    object-fit: cover;
    object-position: center;
    border-radius: 0px !important;
    display: block;
    padding: 0px !important;  /* 10pxパディング強制排除 */
    margin: 0px !important;
    max-width: none !important;

    /* 【最重要】親のコンテナ制限を突破して中央に配置する設定 */
    position: relative;
    left: 50% !important;
    transform: translateX(-50%) !important;
	filter: brightness(0.85);
}

/* =============================================
 * 2. 全ページ共通：ラベルの「ど真ん中」配置
 * ============================================= */
.article-full-image .image-overlay-label, 
.cf-content-img .image-overlay-label {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 100;
    
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    padding: 20px 50px;
    font-size: 40px;
    font-weight: 900;
    letter-spacing: 0.2em;
    white-space: nowrap;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    pointer-events: none;
}

/* =============================================
 * 3. フォームページ特有の調整 (#cf_1)
 * ============================================= */
/* フォーム入力エリアを中央に寄せ、他のページと横幅を揃える */
#cf_1 .cf-form-wrap {
    width: 100% !important;
    max-width: 1140px !important; /* Helix/Bootstrapの標準コンテナ幅 */
    margin: 0 auto !important;     /* 左右中央寄せ */
    padding: 60px 15px !important; /* 上下の余白と、スマホ用の左右遊び */
    background: #fff;
    position: relative;
    z-index: 10;
}

/* 入力フィールドの間隔やフォントを微調整（必要であれば） */
#cf_1 .cf-form-wrap .cf-fields {
    width: 100%;
}

/* =============================================
 * 4. モバイル対応（スマホで見やすく）
 * ============================================= */
@media (max-width: 768px) {
    /* スマホでは高さを少し抑えるのが一般的です（お好みで100vhのままでも可） */
    .article-full-image img, 
    .cf-content-img img {
        height: 100vh !important;
    }

    .article-full-image .image-overlay-label,
    .cf-content-img .image-overlay-label {
        font-size: 24px;
        padding: 15px 30px;
        letter-spacing: 0.1em;
    }
}


/* モバイルメニューの背景色を濃いグレー（または黒）にする */
.offcanvas-menu {
    background-color: #333333 !important;
}

/* メニューの文字色を完全な白にする */
.offcanvas-menu .offcanvas-inner ul.menu > li > a,
.offcanvas-menu .offcanvas-inner ul.menu > li > span {
    color: #ffffff !important;
}

/* メニューをホバー（タップ）した時の文字色（例：オレンジ系） */
.offcanvas-menu .offcanvas-inner ul.menu > li > a:hover,
.offcanvas-menu .offcanvas-inner ul.menu > li > span:hover {
    color: #ff9900 !important;
}