@charset "utf-8";

/* ==========================================
   1. 全体設定（リセット＆ベース）
   ========================================== */
/* ページ内リンクをクリックした際、スクロールを滑らかにする設定 */
html {
	scroll-behavior: smooth;
}

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	background-color: #000000;
	color: #ffffff;
	font-family: sans-serif;
}

.container-main {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	background-color: #000000;
}

a {
	text-decoration: none;
}

img {
	vertical-align: bottom; /* 画像下部の不要な隙間を排除 */
	max-width: 100%;
	height: auto;
}

.text-center {
	text-align: center;
}


/* ==========================================
   2. レイアウト（3カラム・フレックスボックス）
   ========================================== */
.flex {
	display: flex;
}

nav {
	width: 20%;
	background: #000000;
	order: 1;
}

main {
	width: 60%;
	order: 2;
}

aside {
	width: 20%;
	background: #000000;
	order: 3;
}

/* ==========================================
   YouTubeレスポンシブ埋め込み設定
   ========================================== */
.video-container {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 の黄金比を維持 */
	overflow: hidden;
	background-color: #000000;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* ==========================================
   3. 各パーツ・コンポーネント設定
   ========================================== */
/* 左サイドバーナビ */
.sidebar {
	position: sticky;
	top: 0;
	background: #000000;
	padding: 20px 10px;
}

.sidebar-logo {
	display: block;
	margin: 0 auto;
	width: 80%;
}

.sidebar-title {
	font-size: 16px;
	color: #ffffff;
	margin: 20px 0 10px 10px;
}

.sidebar-hr {
	border: 0;
	border-top: 1px solid #333333;
	width: 90%;
	margin: 5px 0 15px 10px;
}

.sidebar-list {
	list-style: none;
}

.sidebar-list a {
	font-size: 14px;
	color: #ffffff;
	display: block;
	padding: 5px 0 5px 10px;
}

.sidebar-list a:hover {
	color: #cccccc;
}

/* -------------------------------------------
   ボタン・リンク周りのエフェクト
   ------------------------------------------- */
/* 通常のリンク画像のみホバー */
.linkbutton {
	transition: filter 0.3s ease;
}

.linkbutton:hover {
	filter: opacity(70%);
	cursor: pointer;
}

/* ★トレーラー用：特定のリンク画像のみをホバーエフェクト対象にする設定 */
.linkbutton-nest {
	width: 100%;
	display: flex;
	flex-direction: column;
}

/* aタグに囲まれた特定の画像だけなめらかに動かす準備 */
.linkbutton-nest a > img {
	transition: transform 0.3s ease, filter 0.3s ease;
}

/* ホバー時に対象のボタン画像だけ半透明にして上に浮かせる */
.linkbutton-nest a:hover > img {
	transform: translateY(-4px);
	filter: opacity(70%);
}

/* -------------------------------------------
   グリッド・コンテナ設定（PC時：751px以上）
   ------------------------------------------- */
.tokuten_container {
	width: 100%;
	padding: 20px;
	background-color: #000000;
}

/* 下部店舗エリア (3列グリッド) */
.grid-layout {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
}

/* トレーラーエリア (2列グリッド) */
.grid-layout-2col {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

/* こだわりエリア (4列Grid) */
.grid-layout-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
	width: 100%;
	padding: 20px 0;
	background-color: #000000;
}

.grid-layout-4 .kodawari-item img {
	display: block;
	width: 100%;
	height: auto;
}

/* フッター */
footer {
	background: #000000;
	color: #ffffff;
	padding: 20px;
	text-align: center;
}

/* 余白コントロールクラス */
.yu-sen { margin-bottom: 0px; }
.yu-sen3 { margin-bottom: 200px; }
.yu-sen4 { margin-top: 20px; margin-bottom: 80px; }

/* ==========================================
   追加：トレーラーエリア（隙間を狭く・画像を最大化）
   ========================================== */

/* PC時（画面幅 751px 以上） */
@media screen and (min-width: 751px) {
	.grid-layout-3col-style {
		display: grid;
		grid-template-columns: repeat(3, 1fr); 
		
		/* 調整ポイント */
		gap: 0px;             /* 画像同士の左右の間隔を12pxから「6px」に半減 */
		padding: 0;   /* 外側の余白を狭くして、その分画像を大きく */
	}
	
	.grid-layout-3col-style .linkbutton-nest {
		grid-column: span 1;
	}
}

/* スマホ時（画面幅 750px 以下） */
@media screen and (max-width: 750px) {
	.grid-layout-3col-style {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		
		/* 調整ポイント */
		gap: 0px;             /* スマホ時の画像同士の間隔を8pxから「4px」に半減 */
		padding: 0px 0px;     /* スマホ時の外側余白を限界まで削り、画像を画面端まで広げる */
	}
}

/* ==========================================
   4. PC / SP 表示切り替え（初期設定）
   ========================================== */
.gazou-pc { display: block !important; }
.gazou-sp { display: none !important; }


/* ==========================================
   5. レスポンシブ設定（画面幅 750px 以下）
   ========================================== */
@media screen and (max-width: 750px) {
	/* 表示切り替え */
	.gazou-pc { display: none !important; }
	.gazou-sp { display: block !important; }

	/* 3カラムレイアウトを解除し、スマホ用1カラム（メインのみ）に変更 */
	.flex {
		flex-direction: column;
	}
	
	main {
		width: 100%;
		order: 1;
	}
	
	nav, aside {
		display: none;
	}
	
	/* スマホ時の余白・隙間の再構築 */
	.tokuten_container {
		padding: 10px;
	}

	/* 下部店舗エリア（スマホ時は2列に変更） */
	.grid-layout {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	/* トレーラーエリア（スマホ時は2列のまま隙間を最適化） */
	.grid-layout-2col {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
	
	/* こだわりエリア（スマホ時：強制的に2列表示にする設定） */
	div.kodawari-container.grid-layout-4 {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
		padding: 10px !important;
		width: 100% !important;
	}

	div.kodawari-container.grid-layout-4 .kodawari-item {
		width: 100% !important;
	}

	div.kodawari-container.grid-layout-4 .kodawari-item img {
		display: block !important;
		width: 100% !important;
		height: auto !important;
	}

	/* お問い合わせボタンを画面下部に完全に固定表示 */
	.otoiawase {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 9999;
	}

	/* スマホ用個別余白微調整 */
	.yu-sen3 { margin-bottom: 0px; }
	.yu-sen4 { margin-top: 0px; margin-bottom: 60px; }
	.linkbutton2 { margin-bottom: 100px; }
	
	/* ==========================================
   追加：トレーラーエリア（3列分の画像サイズにする設定）
   ========================================== */

/* PC時（画面幅 751px 以上） */
@media screen and (min-width: 751px) {
	.grid-layout-3col-style {
		display: grid;
		/* 3列分のグリッド幅を定義します */
		grid-template-columns: repeat(3, 1fr); 
		gap: 12px; /* 隙間の幅 */
	}
	
	/* 2つのブロックが左寄せに配置され、1枚あたりのサイズが全体の「3分の1」になります */
	.grid-layout-3col-style .linkbutton-nest {
		grid-column: span 1;
	}
}

/* スマホ時（画面幅 750px 以下） */
@media screen and (max-width: 750px) {
	/* スマホでは画面幅が狭いため、2列並びにして見やすさをキープします */
	.grid-layout-3col-style {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
}
}