@charset "utf-8";

/* ==========================================================================
   PCレイアウト用のブレイクポイント（画面幅768px以上）
   ========================================================================== */
@media screen and (min-width: 601px) {

	/* 全体の最大幅制限(375px)を解除し、2カラムの受け皿にする */
	#wrap {
		max-width: 600px;
		/* 全体の最大横幅（お好みで調整してください） */
		display: flex;
		margin: 0 auto;
		background: #f5f2ec;
		/* 画像の背景色に合わせる */
	}

	/* スマホ用のロゴをPCでは非表示に */
	.sp-only {
		display: none !important;
	}

	/* 左側：追従ナビゲーションのスタイル */
	#side-nav {
		display: block;
		width: 35%;
		height: 100vh;
		/* 画面の高さに合わせる */
		position: sticky;
		top: 0;
		/* スクロールしても画面上部に固定 */
		background: #f5f2ec;
		/* 左側の薄いベージュ背景 */
		padding: 110px 50px 0 20px;
		box-sizing: border-box;
	}

	/* ナビゲーション内のロゴ周り */
	.nav-logo {
		margin-bottom: 60px;
	}

	.nav-logo img {
		display: block;
		margin-bottom: 10px;
	}

	.nav-sub-title {
		font-size: 1.4rem;
		color: #e60012;
		/* スウェーデンハウスの赤 */
		font-weight: bold;
	}

	/* メニューリスト */
	.nav-menu {
		display: flex;
		flex-direction: column;
		gap: 35px;
	}

	.nav-menu li a {
		display: flex;
		align-items: center;
		font-size: 1.3rem;
		color: #e60012;
		font-weight: bold;
		line-height: 1.4;
		transition: opacity 0.3s;
	}

	.nav-menu li a:hover {
		opacity: 0.7;
	}

	/* 赤い四角アイコン */
	.square-icon {
		display: inline-block;
		width: 12px;
		height: 12px;
		background-color: #e60012;
		margin-right: 10px;
		flex-shrink: 0;
	}

	/* 右側：メインコンテンツ */
	#main-contents {
		width: 65%;
		/* 右側コンテンツの横幅比率 */
		background: #fff;
		box-shadow: -5px 0 15px rgba(0, 0, 0, 0.05);
		/* 境界に薄い影 */
	}

	.scroll-infinity {
		width: 100%;
		margin-left: 0;
		left: 0;
		transform: none;
	}

	.scroll-infinity__item {
		width: 340px;
		flex-shrink: 0;
	}

	#pagetop {
		display: none;
	}

}

/* ==========================================================================
   スマホサイズ（767px以下）のときの挙動リセット
   ========================================================================== */
@media screen and (max-width: 600px) {
	#side-nav {
		display: none !important;
		/* スマホでは左メニューを非表示 */
	}

	#main-contents {
		width: 100%;
	}

	#pagetop {
		position: fixed;
		bottom: 20px;
		right: 20px;
		z-index: 999;
	}


}

/* スムーズスクロールを有効にする（お好みで） */
html {
	scroll-behavior: smooth;
}