@charset "UTF-8";
/* CSS Document */
.w-max{margin: auto 0 !important;
}


h1, h2, p {text-wrap: balance;}

/* デフォルト（スマホ）では改行を有効にする */
.sp-only {
  display: inline;
}
/* PCサイズ（例えば768px以上）になったら改行を消す */
@media (min-width: 440px) {
  .sp-only {
    display: none;
  }
}

.pc-only {
  display: none;
}
/* PCサイズ（例えば768px以上）になったら改行を消す */
@media (min-width: 440px) {
  .pc-only {
  display: inline;
  }
}


.noflexgrow{flex-grow: 0; !important;
height: 300px;}
.h-auto{height: 300px !important;}
.lineh12{line-height: 1.2 !important}
.nowrap{white-space: nowrap;}

/* スマホなどの画面幅が狭い時用 */
@media (max-width: 768px) {
  .whitespace-nowrap {
    white-space: normal !important;
  }
}


/* Figmaの干渉を無視して画像を横に並べるための専用設定 */
.photo-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important; /* 絶対に折り返さない */
  gap: 50px; /* 画像の間の隙間 */
  width: 86% !important;
  margin-bottom: 60px;margin-left: auto !important;
    margin-right: auto !important;
}

.photo-item {
  flex: 1 !important; /* 親の幅を均等に分ける */
  min-width: 0;
}

.photo-item img {
  width: 100% !important;
  height: auto !important; /* 固定値をやめて、横幅に合わせる */
  object-fit: contain !important; /* もし枠が必要ならこれ。基本は不要 */
  border-radius: 8px;
}



/* 学歴・月給の2カラムレイアウト用 */
.salary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 左を128px固定、右はなりゆき */
    gap: 0; /* カラム間の隙間 */
    align-items: baseline;
}

.header-underline {
    border-bottom: 2px solid #ccc; /* ボールド文字の下線 */
    font-weight: bold;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
}
/* 施工実績セクションの背景色（淡い水色） */
.bg-performance-light {
    background-color: #f9fafb !important; /* Tailwindの競合を確実に上書き */
    padding: 3rem 1.5rem;               /* 必要に応じて上下左右の余白を調整 */
    border-radius: 8px;                 /* 画像の雰囲気に合わせて少し角を丸くする場合 */
}


/* style.css や main.css の末尾に追記 */
.tab-button.active {
    /* TailwindのデフォルトのCSSを上書きする */
    background-color: #1941BC !important; /* 青色 */
    color: white !important; /* 文字色を白に */
    
    /* 非アクティブ時のホバー効果を打ち消す */
    pointer-events: none; /* アクティブなボタンはクリック不要なので無効化 */
}

/* 非アクティブなボタンのデザイン（アクティブ時に切り替わるルール） */
.tab-button:not(.active) {
    background-color: #f3f4f6; /* bg-gray-100 */
    color: #4b5563; /* text-gray-700 */
}

/* 非アクティブなボタンがホバーされた時のルール（念のため） */
.tab-button:not(.active):hover {
    background-color: #e5e7eb; /* hover:bg-gray-200 */
}

/* fix-style.css に追記 */

/* 1. モバイルメニューを浮かせて、見た目を設定 */
#mobile-menu {
    /* 浮かせるための設定 */
    position: absolute; /* 親要素（header）を基準に配置 */
    top: 100%; /* ヘッダーの高さの直下から表示開始 */
    left: 0;
    width: 100%;
    
    /* 他のコンテンツの上に表示 */
    z-index: 40; /* ヘッダー本体(z-50)より少し下に設定 */
    
    /* 半透明の背景 */
    background-color: rgba(255, 255, 255, 0.95); /* 白を95%の不透明度で */
    
    /* アニメーションの準備（初期状態） */
    max-height: 0; /* 高さを0にして初期非表示 */
    opacity: 0; /* 透明度を0にして初期非表示 */
    overflow: hidden; /* 高さが0の時に中身を見せない */
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; /* アニメーションの時間と種類 */
}

/* 2. メニューが開いたとき（JSが 'is-open' クラスをつけたとき）のスタイル */
#mobile-menu.is-open {
    max-height: 500px; /* メニューの高さに合わせて十分な値を設定 */
    opacity: 1;
    /* overflow: hidden を上書きする必要はないが、念のため */
    overflow: auto; 
}

/* 3. タブの色のためのCSS（念のため再掲。すでにあれば不要） */
.tab-button.active {
    background-color: #1941BC !important;
    color: white !important;
    pointer-events: none;
}

.dot-pattern {
    /* ドット（丸）を生成するCSSのグラデーション技法 */
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    
    /* ドットの大きさ（間隔）を設定。ここでは10px x 10pxのグリッドで繰り返します */
    background-size: 3px 3px;
  }
.dot-pattern-w {
    /* ドット（丸）を生成するCSSのグラデーション技法 */
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.5) 3px, transparent 3px);
    
    /* ドットの大きさ（間隔）を設定。ここでは10px x 10pxのグリッドで繰り返します */
    background-size: 5px 5px;
  }

/* fix-style.css に追記/上書き */

/* ---------------------------------------------------- */
/* 【1. 青バックの見出し (p要素)】: 「あなたの経験を活かし〜」を再現 */
/* ---------------------------------------------------- */
/* 対象とするp要素を特定するクラス名（ここでは例として .page-sub-heading を使用）をHTMLに追加してください。 */
.page-sub-heading {
    /* ベースの青色 (変更なし) */
    background-color: #0f3c85 !important;
    color: #ffffff !important;
    text-align: center !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 0rem !important;
    padding-right: 0rem !important;

    /* ---------------------------------------------------- */
    /* 【追記・修正箇所】幅の固定と中央寄せを強制する */
    /* ---------------------------------------------------- */
    display: block !important;
    
    /* 左右3remの余白を保ちつつ、残りの幅を使うようにする */
    width: calc(100% - 7rem) !important; 
    
    /* 強制的に左右中央寄せの指示を出す */
    margin: 0 auto !important; 

    /* 白い線（box-shadow）の指定はそのまま残す */
    box-shadow: inset 0 2px 0 0 #ffffff !important, 
                inset 0 -2px 0 0 #ffffff !important;
    border: none !important;
}
/* 上の白い線を作る */
.page-sub-heading::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 1px !important; /* 線の太さ */
    background-color: #ffffff !important;
    
    /* 線と文字の間の余白 */
    margin-bottom: 8px !important; 
}

/* 下の白い線を作る */
.page-sub-heading::after {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 1px !important; /* 線の太さ */
    background-color: #ffffff !important;
    
    /* 線と文字の間の余白 */
    margin-top: 8px !important;
}

/* ---------------------------------------------------- */
/* 【2. 下線付き見出し (h1要素)】: 青い下線 */
/* ---------------------------------------------------- */
h1.page-title-underline {
	font-size: 1.2rem;
	font-weight: bold;
    border-bottom: 2px solid #0f3c85 !important;
    /*padding-bottom:1rem !important;*/
    display: inline-block !important;
    margin: 0 3rem 3rem !important;
}.text-black {
}

.bg-image {background-repeat: no-repeat !important;
    /* (元の設定を維持) */
	background: url("rec_bg.jpg");
	/*background-color: #f0f0f0; 
	background-size: 100% auto; /* 幅を要素の100%に合わせ、高さは自動調整 */
	background-size: cover;
    background-position: center; 
	margin: 30px 54px;
    
    /* 1. 擬似要素の配置基準点とする */
    position: relative; 
    
    /* 2. opacityは削除！ */
    /* opacity: 0.5; <-- これは削除してください */
}

/* 3. 擬似要素（::before）を追加して、半透明のベールを作る */
.bg-image::before {background-repeat: no-repeat 
	background-size: cover;
    content: ""; /* 必須: コンテンツを空に指定 */
    position: absolute; /* 絶対配置 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; /* 親要素全体に広げる */
    
    /* 4. ベールの色と透明度を指定 */
    background-color: rgba(0,0, 0, 0.5); /* 黒色(0,0,0)を50%の透明度(0.5)で指定 */
    /* もし白いベールにしたければ、rgba(255, 255, 255, 0.5); に変更 */
    
    /* 5. 画像とコンテンツの間に配置するため、Z軸を調整（任意） */
    z-index: 1;
}

/* 6. コンテンツ（文字）をベールより手前に持ってくる */
.bg-image * {
    position: relative;
    z-index: 2;
    /* ⚠️ 文字が背景色（黒いベール）と被らないように色も調整 */
    color: #ffffff; /* 文字色を白に */
}

/* 7. H2タグなど、元のHTMLで特定のテキスト色を指定している場合は上書き */
.bg-image .text-center {
    color: #ffffff; /* H2なども白に */
}

/* 8. 元のHTMLで [1941BC] が指定されていた箇所の色を調整 */
.bg-image .text-[#1941BC] {
    /* 例: 背景が暗いので、元の色より明るくする、または目立つ色にする */
    color: #7AA2FF; /* 明るめの青に変更 */
}