@charset "utf-8";
/* ==========================================================================
   responsive.css  2026-09-14
   目的: UA判定による viewport 固定（スマホ420px / それ以外1200px）をやめ、
         端末の実際の幅に追従させる。
   読み込み順: style.css(reset+main) → lightbox.css → sp.css(991px以下) → 本ファイル
   方針: 1200px以上のPC表示は従来どおり変更しない。
         991px以下は既存のスマホ用CSS(sp.css)をそのまま使う。
         992〜1199px は、PCレイアウトの固定幅だけを可変にする。
   ========================================================================== */

/***************************
	1199px以下 — 1200px固定の土台を解除
***************************/
@media screen and (max-width: 1199px){
	#wrapper{
		min-width: 0;
	}
	img{
		max-width: 100%;
		height: auto;
	}
	/* 695〜860pxで固定されているブロックを、狭い画面では枠内に収める */
	.content_footer,
	.company_table,
	.company_map,
	.indexprice,
	.spec_price,
	.table_imac_price{
		width: auto;
		max-width: 100%;
	}
}

/***************************
	992px以上 — ハンバーガーは使わずグローバルナビを常時表示
***************************/
@media screen and (min-width: 992px){
	#navi_icon{
		display: none;
	}
	/* スマホ幅でメニューを開いたまま画面を広げても崩れないようにする */
	#gnavi{
		display: flex !important;
	}
}

/***************************
	992〜1199px — PCレイアウトの固定幅を可変にする
***************************/
@media screen and (min-width: 992px) and (max-width: 1199px){
	header{
		width: auto;
		max-width: 1050px;
		padding-left: 15px;
		padding-right: 15px;
	}
	#pagetitle01 h1,
	#pagetitle02 h1{
		width: auto;
		max-width: 1000px;
		padding: 0 15px;
	}
	.home03 ul,
	.home04 ul,
	.container_t,
	.wrap_access{
		width: auto;
		max-width: 1100px;
		padding-left: 15px;
		padding-right: 15px;
	}
	.home05 > div{
		width: auto;
		max-width: 970px;
		padding-left: 15px;
		padding-right: 15px;
	}
	#contents{
		padding-left: 15px;
		padding-right: 15px;
	}
	#content{
		width: auto;
		max-width: 724px;
		flex: 1 1 400px;
		min-width: 0;
	}
	#sidebar{
		flex: 0 0 265px;
		margin-right: 30px;
	}
}

/***************************
	600〜991px — スマホ用CSSの間延びを抑える
***************************/
@media screen and (min-width: 600px) and (max-width: 991px){
	#content{
		max-width: 720px;
		margin-left: auto;
		margin-right: auto;
	}
	/* sp.css の vw 指定は420px前提のため、この幅では大きくなりすぎる */
	.home01 .home01_01.fv_slide p{
		font-size: 26px;
	}
	.home01 .home01_01.fv_slide p span{
		font-size: 13px;
		margin-top: 10px;
	}
	.home01 > .home01_01 img{
		width: 100%;
		max-width: 100%;
		margin: 0;
	}
	.home04 ul{
		width: auto;
		max-width: 560px;
	}
}

/***************************
	991px以下 — 記事内の横長の表を、切れずに横スクロールできるようにする
	（.msx table は min-width:480px のため、スマホ幅では枠からはみ出して切れていた）
***************************/
@media screen and (max-width: 991px){
	.msx table.msx-tbl{
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}