/*-------------------------------
フォント指定
高速化のためWebフォントを無効（「ベースとなるフォント」を「游ゴシック」）に変更したので"Noto Sans JP"を手動で優先指定する。
-------------------------------*/
body {
  --swl-font_family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

/*-------------------------------
投稿ページのみ横幅制御
-------------------------------*/

.single-post .l-content {
	max-width: 1000px;
}

.-frame-on .l-mainContent {
	background: none;
}

/*-------------------------------
グローバルナビお問い合わせボタン
-------------------------------*/

@media (min-width: 960px) {
	.-frame-on .l-mainContent {
		padding: 32px 0;
	}

	.global_contact a {
		min-width: 160px;
		font-size: 14px;
	}
}

/*-------------------------------
グローバルナビ現在地
-------------------------------*/
@media (min-width: 960px) {

	c-gnav>li:hover>a,
	.c-gnav>.-current>a span {
		background: #115bfb;
		color: #fff;
		padding: 7px;
		border-radius: 4px;
	}
}

/*-------------------------------
グローバルナビ現在地-子ぺーじ
-------------------------------*/
@media (min-width: 960px) {

	c-gnav>li:hover>a,
	.c-gnav>.current-page-ancestor>a span {
		background: #115bfb;
		color: #fff;
		padding: 7px;
		border-radius: 4px;
	}
}

/*-------------------------------
お知らせバー左よせ
-------------------------------*/
@media (min-width: 960px) {
	.c-infoBar__text.-flow-off {
		align-items: none;
		display: block;
		flex-wrap: wrap;
		justify-content: center;
		text-align: left;
		width: 1200px;
		margin: 0 auto;
	}
}

/*-------------------------------
メールフォーム
-------------------------------*/

.wpcf7-form-control-wrap {
	display: block;
	padding-bottom: 15px;
}

.wpcf7 input[type=text],
.wpcf7 input[type=tel],
.wpcf7 input[type=email] {
	width: 100%;
	border-radius: 4px;
	margin-top: 5px;
}

.wpcf7 textarea {
	width: 100%;
	border-radius: 4px;
	margin-top: 5px;
}

.wpcf7 select {
	width: 100%;
	border-radius: 4px;
	padding: .45em .5em;
	margin-top: 5px;
}

.wpcf7 br {
	display: none;
}

.wpcf7-checkbox {
	display: block;
	margin-top: 5px;
}

.wpcf7-list-item {
	display: block;
}

.wpcf7-acceptance {
	margin-top: 5px;
}

.wpcf7 .ninni {
	padding: 2px 6px;
	font-size: 10px;
	background: #999999;
	color: #FFFFFF;
	border-radius: 4px;
	margin-right: 5px;
}

.wpcf7 .hissu {
	padding: 2px 6px;
	font-size: 10px;
	background: #aa0000;
	color: #FFFFFF;
	border-radius: 4px;
	margin-right: 5px;
}

input[type="submit"] {
	display: block;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	font-weight: bold;
	width: 250px;
	padding: 10px;
	border-radius: 150px;
	background-color: #0205D4;
	border: none;
	color: #fff;
	cursor: pointer;
	align-content padding: 2px 10px;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
}


/*-------------------------------
フローティングボタン（SP）
-------------------------------*/

@media (max-width: 959px) {
	body {
		padding-bottom: 65px;
		/* 固定メニューの高さに合わせて余白を設定 */
	}

	.p-fixBtnWrap {
		bottom: 5.5em;
		/* 上に戻るボタンの位置を上に */
	}

	#before_footer_widget {
		display: block;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 99;
		background-color: #142241;
		padding: .9em .3em;
		border-top: solid 1px #303e5e;
	}

	#before_footer_widget a {
		width: 100%;
	}

}

@media (min-width: 960px) {
	#before_footer_widget {
		display: none;
		/* PCでは非表示にする */
	}
}

/*-------------------------------
TOPメインビジュアル
-------------------------------*/

.p-mainVisual__slideTitle {
	font-size: 4.8vw;
	line-height: 1.5;
}

.p-mainVisual__slideTitle span {
	display: inline-block;
	font-size: 5.5vw;
	font-weight: bold;
	padding-top: 10px;
}

@media (min-width: 960px) {
	.p-mainVisual__slideTitle {
		font-size: 32px;
	}

	.p-mainVisual__slideTitle span {
		font-size: 40px;
	}
}

/*-------------------------------
フッター余白
-------------------------------*/

@media (max-width: 959px) {
	.w-footer__box {
		padding: 0;
		margin: 0 !important;
	}
}

.l-footer__foot {
	border-top: solid 1px #303e5e;
}

/*-------------------------------
タイトル高さ
-------------------------------*/
@media (min-width: 600px) {
	.l-topTitleArea {
		min-height: 10em;
	}
}

/*-------------------------------
reCaptcha非表示
-------------------------------*/
.grecaptcha-badge {
	visibility: hidden;
}

.l-footer .copyright a {
	color: #08c9ff;
}


/* ------------------------------
 ヘッダー固定＋影＋高さ調整　Check+｜『定修DX実践ガイド』LP
---------------------------------- */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	
    /* ▼ ここで高さを調整します ▼ */
    padding-top: 20px;    /* 上の隙間（数字を小さくすると狭くなります） */
    padding-bottom: 20px; /* 下の隙間 */
}
/* 角丸と影のデザイン */
.styled-box {
    border-radius: 20px; /* ←角の丸み具合。数字が大きいほど丸くなります */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* ←影の設定 */
    overflow: hidden; /* ←中身が角丸からはみ出さないようにするおまじない */
}
/* オレンジ色の影がついたボックス */
.orange-shadow-box {
    /* 影の設定：横方向 縦方向 ぼかし具合 色（薄いオレンジ赤） */
    box-shadow: 0 5px 15px rgba(255, 165, 0, 0.15);
    /* 角を少し丸くする設定（見本に近づけるため） */
    border-radius: 8px;
}
/* 3つの成功事例ボックス（角丸・影） */
.success-box {
    border-radius: 15px; /* 角を丸くする */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* ふんわりした影 */
    overflow: hidden; /* はみ出し防止 */
}

/* 下の引用ボックス（角丸・青い左線） */
.quote-box-rounded {
    border-radius: 12px; /* 角を丸くする */
    /* もし左の線の色や太さを変えたい場合は下を調整 */
    border-left-color: #2b6cb0 !important; /* 線の色を濃い青に（見本合わせ） */
    border-left-width: 5px !important;    /* 線の太さを少し太く */
}
/* フォーム内の注釈テキストのデザイン */
.form-notes {
    font-size: 12px;       /* 文字を小さくする */
    color: #666666;       /* グレーにする */
    margin-top: 20px;     /* 上に余白を作る */
    margin-bottom: 5px;   /* チェックボックスとの距離を縮める */
    line-height: 1.5;     /* 行間を整える */
}

/* ==========================================
   1. ヘッダー全体の固定 (my-lp-header)
   ========================================== */
.my-lp-header {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background-color: #ffffff !important;
    padding: 0 !important;
}

/* ログイン中の管理バー対策：重なりがひどい場合は数字を少し増やします */
.admin-bar .my-lp-header {
    top: 32px !important; /* 標準は32pxですが、もし隠れるなら40px等に。 */
}

@media screen and (max-width: 782px) {
    .admin-bar .my-lp-header {
        top: 46px !important;
    }
}

/* ==========================================
   2. 中身の横並びとパディング (my-inner-row)
   ========================================== */
.my-inner-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: 1200px !important;
    margin: 0 auto !important;

    /* ここを20px〜30pxくらいで調整してみてください */
    padding-top: 25px !important; 
    padding-bottom: 25px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* ==========================================
   3. コンテンツの押し下げ (my-lp-content-top)
   ========================================== */
.my-lp-content-top {
    /* ヘッダーの厚みに合わせてここを調整（例：120px） */
    padding-top: 120px !important; 
}

.admin-bar .my-lp-content-top {
    padding-top: 152px !important;
}


/* スマホ用調整 */
@media screen and (max-width: 782px) {
    .admin-bar .my-lp-header { top: 46px !important; }
    .admin-bar .my-lp-content-top { padding-top: 166px !important; }
}


/* ==========================================青色グラデーションの角丸帯 ==========================================*/
.blue-gradient-label {
    display: inline-block; /* 文字の長さに合わせる場合。横幅いっぱいにしたい場合は block に変更 */
    background: linear-gradient(90deg, #001f60 0%, #0088ff 100%); /* 左から右へのグラデーション */
    color: #ffffff;             /* 文字色（白） */
    padding: 8px 20px;         /* 上下・左右の余白 */
    border-radius: 15px;        /* 角の丸み（数字を大きくするとさらに丸くなります） */
    font-weight: bold;          /* 文字を太字に */
    text-align: center;         /* 文字を中央寄せ */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 軽い影（お好みで） */
}
/* 斜め背景の再現 */
.hero-diagonal-bg {
    position: relative;
    overflow: hidden; 
    z-index: 1;
}

.hero-diagonal-bg::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50%; /* 斜めの開始位置調整 */
    height: 100%;
    background: linear-gradient(135deg, rgba(44,62,93,0.05) 0%, rgba(44,62,93,0.1) 100%);
    transform: skewX(20deg); /* 傾き */
    transform-origin: top right;
    z-index: -1;
}
/* 共通カラー変数 */
:root {
    --mono-navy: #2C3E5D;
    --mono-blue: #005BAC;
    --mono-red: #E60012;
    --mono-light: #F4F7F9;
}

/* ご提示の「濃紺の帯」を再現 */
.navy-bar {
    background-color: var(--mono-navy) !important;
    color: #fff !important;
    text-align: center;
    padding: 15px 10px;
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom: 2rem;
width: 100vw;
    margin-left: calc(50% - 50vw);
    position: relative;
}
/* カードデザイン（影・余白・背景・角丸）を一括設定 */
.mono-card {
    background-color: #ffffff !important; /* 背景白 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important; /* 影 */
    padding: 40px 30px !important; /* 内側の余白（上下 左右） */
    border-radius: 12px !important; /* 角の丸み */
    height: 100% !important; /* 高さを揃える */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
/* 修正版：下に行くほどしっかり消える演出 */
.blur-mask img.wp-block-cover__image-background {
    /* マスク：上はしっかり表示(black)、下は完全に透明(transparent) */
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 20%, transparent 90%) !important;
    mask-image: linear-gradient(to bottom, black 0%, black 20%, transparent 90%) !important;
    
    /* ぼかし */
    filter: blur(6px) !important;
    
    /* 画像を少し暗くして文字を浮かせる */
    opacity: 0.8 !important;
}

/* ついでにボタンを中央で目立たせる（必要であれば） */
.blur-mask .wp-block-cover__inner-container {
    width: 100%;
    z-index: 10;
}
/* 資料チラ見せ用のホワイトアウト演出 */
.doc-preview-area {
    position: relative !important;
    overflow: hidden;
}

/* 画像全体を下に向かって白く消す */
.doc-preview-area::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%; /* 下から半分以上を徐々に消す */
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,1) 100%) !important;
    z-index: 5;
    pointer-events: none;
}

/* 画像に影をつけて「冊子」っぽくする */
.doc-item img {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    border: 1px solid #eee;
    transition: transform 0.3s ease;
}

/* 「続きは資料で」の文字を浮かせる */
.doc-overlay-text {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
    width: 100%;
}