.sp { display: block !important; }
.pc { display: none !important; }

@media only screen and (min-width:768px) {
	.sp { display: none !important; }
	.pc { display: block !important;}
}


/* ----------------------------------------------------------------------------------------------------

	タブレット（画面幅 768px 以上）

---------------------------------------------------------------------------------------------------- */

@media screen and (min-width: 768px) {
	#contents {
		padding-top: 20px;
	}
	
	/* -----------------------------------------------------------------------------
		事業内容のフレックスボックス
	----------------------------------------------------------------------------- */
	
	.box_S {
		/* すき間（gap: 20px）が2箇所分（40px）あるため、それを引いて3等分 */
		flex: 0 0 calc((100% - 40px) / 3); 
		box-sizing: border-box; /* 幅の計算を狂わせないためのお守り */
		
		margin-bottom: 15px;
	}
	
	/* box_Sの白枠 */
	.box_S-frame {
		height: 256px;			/* ボックスの高さを固定 */
	}
}


 
/* ----------------------------------------------------------------------------------------------------

	デスクトップ（画面幅 1024px 以上）

---------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 1024px) {


	/* -----------------------------------------------------------------------------
		共通ヘッダー
	----------------------------------------------------------------------------- */
	
	#header {
		width: 1030px;
		margin: 0 auto;
	}

	#header-inner {
		display: flex;
		flex-direction: row;            /* 横並びにする */
		justify-content: space-between; /* ロゴを左、ナビを右に配置 */
		align-items: center;            /* flex-direction: row → 横方向の中央揃え */
		gap: 0;                         /* 縦並び用の隙間をリセット */
		padding: 0;                		/* 上下左右の余白を調整 */
	}
	
    #navi {
        justify-content: flex-end;
		overflow-x: visible;            /* PCではスクロールを不要にする */
    }

	#navi ul {
		justify-content: flex-end;      /* ナビゲーションを右寄せ */
		padding: 0;
		gap: 25px;                      /* メニュー同士の間隔を広げる */
	}


	#contents {
		padding-top: 30px;
	}


	/* -----------------------------------------------------------------------------
		スライドイメージ
	----------------------------------------------------------------------------- */

	/* 帯（#catch）を画像の上に重ねて下揃えにする */
	#catch {
		padding: 12px;
	
		position: absolute;
		left: 0;	
		bottom: 0;
		width: 100%;
		z-index: 10;
		box-sizing: border-box;
		background-color: rgba(10, 57, 120, 0.6); /* PCは画像を透過で見せる */

		/* 横並びにして両端揃え */
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}

	#catch p {
		font-size: 15px; /* PCサイズに戻す */
		line-height: 1.5;
	}	


	/* -----------------------------------------------------------------------------
		事業内容
	----------------------------------------------------------------------------- */

	.flexbox {
		width: 100%;	/* 左右の余白を削除　*/
	}
	.box_S {
		/* すき間（gap: 20px）が3箇所分（60px）あるため、それを引いて4等分 */
		flex: 0 0 calc((100% - 60px) / 4); 
		box-sizing: border-box;		/* 幅の計算を狂わせないためのお守り */
		
		margin-bottom: 25px;
	}
	
	/* box_Sの白枠 */
	.box_S-frame {
		height: 256px;	/* ボックスの高さを固定 */
	}
	
	
	/* -----------------------------------------------------------------------------
		インフォメーション
	----------------------------------------------------------------------------- */
	#information {
		.side-gap {
			width: 100%;	/* 左右の余白を削除　*/
		}
	}


	/* -----------------------------------------------------------------------------
		共通フッター
	----------------------------------------------------------------------------- */

	#footer {
		width: 1030px;
		margin: 0 auto;
	}

	#footer-inner {
		display: flex;
		flex-direction: row;            /* 横並びにする */
		justify-content: space-between; /* ロゴを左、ナビを右に配置 */

		align-items: center;            /* 上下中央揃え */
		gap: 0;                         /* 縦並び用の隙間をリセット */
		padding: 20px 0;                /* 上下左右の余白を調整 */
	}

}